HTML 标签重难点

标签

• 作用：
  • 跳转外部页面
  • 跳转内部锚点
  • 跳转跳转到邮箱或电话等
• 属性：
  • href：规定链接指向的URL
  • target：在何处打开链接
  • download：下载（浏览器不一定支持）
  • rel = "noopener"：打开一个外部链接（涉及安全问题）

    聊聊 rel=”noopener” - ColaDaddyz

href 属性

• 网址

  <a href="https://google.com">跳转到谷歌</a>
  <a href="http://google.com">跳转到谷歌</a>
  <a href="//google.com">跳转到谷歌（使用相对协议URL）</a>

  WEB解惑-URL双斜杠开头 // - sunmaobin

• 路径

  <a href="/a/page.html">跳转到根目录下的 a 目录中的 page.html</a>
  <a href="a/page.html">跳转到当前目录下的 a 目录中的 page.html</a>
  <a href="index.html">跳转到当前目录中的 index.html</a>
  <a href="./index.html">跳转到当前目录中的 index.html</a>

• id

  <a href="#xxx">跳转到id为xxx的元素处</a>

• 伪协议

**

• JavaScript伪协议：

  <a href="javascript:alert('JS!')">JavaScript伪协议</a>
  <a href="javascript:;">点击后什么也不做</a>

• mailto:邮箱：

  <a href="mailto:xxx@163.com">发邮件</a>

• tel:手机：

  <a href="tel:130xxxx8888">打电话</a>

target 属性

• 内置属性值

  <a href="//google.com" target="_blank">在新整个窗口中打开</a>
  <a href="//google.com" target="_top">在当前整个窗口中打开</a>
  <a href="//google.com" target="_parent">在父窗口或框架中打开</a>
  <a href="//google.com" target="_self">在本窗口或框架中打开</a>

• 自定义命名

  <a href="//google.com" target="window-xxx">在新的窗口中打开</a>
  <a href="//google.com" target="iframe-xxx">在新的iframe中打开</a>

标签

• <table>表格
• <thead>表头, <tbody>表中内容, <tfoot>表尾
• <tr>表行, <th>表行头, <td>表格数据

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>英语</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>小王</th>
      <td>90</td>
      <td>86</td>
    </tr>
    <tr>
      <th>小张</th>
      <td>74</td>
      <td>91</td>
    </tr>
    <tr>
      <th>小李</th>
      <td>82</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>平均分</th>
      <td>82</td>
      <td>95</td>
    </tr>
  </tfoot>
</table>

标签

• 作用
  发出get请求，展示一张图片

• 属性

  • alt：图像的替代文本
  • src：规定显示图像的URL
  • height：设置图像高度
  • width：设置图像宽度

• 事件

  • onload：在图片加载完成后执行
  • onerror：加载图片发生错误时执行

• 响应式

  max-width: 100%

• 可替换

什么是可替换元素 - 乐亦栗

永远不要让图片变形！！！

标签

• 作用：发get或post请求，然后刷新页面
• 属性
  • action：当提交表单时向何处发送数据
  • autocomplete：是否启用自动完成功能
  • method：规定用于发送表单数据的HTTP方法
  • target：规定在何处打开action的URL
• 事件
  • onsubmit：提交表单后触发指定事件

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

标签

• 作用
  用户输入数据
• 属性
  type：button / checkbox / email / file / hidden / number / password / radio / search / submit / tel / text
  name：名称
  autofocus：页面加载时，自动聚焦到该input
  checked：针对checkbox和radio
  disabled：禁用
  maxlength：最大字符数
  pattern：验证格式（是否符合正则表达式）
  value：指定值
  placeholder：提示信息
• 事件
  onchange：内容改变时执行
  onfocus：获得聚焦时执行
  onblur：失去焦点时执行
• 验证器（HTML5 新特性）

其他输输入标签

• <select> + <option>：下拉选择框

  <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  </select>

• textarea：段落输入

  <textarea rows="10" cols="30">
  我是一个文本框。
  </textarea>

• label：绑定表单元素

  <label for="male">Male</label>

注意事项

• 一般不监听input的click事件
• form里面的input要有name
• form里面要放一个type=submit才能触发submit事件

其他标签

• video
• audio
• canvas
• svg

注意标签的兼容性

部分资料来源：饥人谷 - 方方老师