HTML 标签重难点

链接标签

【注】a 的 download

  • 作用：不是打开页面，而是下载页面。
  • 问题：不是所有浏览器都支持，尤其是手机浏览器可能不支持

href 属性

  • 网址

    1. <a href="https://goole.com">跳转到谷歌</a>
    2. <a href="http://goole.com">跳转到谷歌</a>
    3. <a href="//goole.com">跳转到谷歌（无协议网址）</a>

    WEB解惑-URL双斜杠开头

  • 路径

    • /a/b/c 以及 a/b/c

      1. 【注】如果我们开了HTML服务，那么它的根目录就不是硬盘的根目录，而是你在哪里开启了服务，哪里就是根目录。<br />   这也是为何强调不要双击文件打开HTML的原因，双击打开绝对路径容易出错。

    • index.html 以及 ./index.html 在当前目录打开index.html页面。

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

  • id

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

    【注】href+id的作用就是跳转到指定的一个标签。

  • 伪协议

    • javascript:代码;

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

      【注】如果想做一个 a 标签，又想它不做任何操作就写javascript:；

    • mailto ：邮箱

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

    • tel ：手机号

      1. <a href="tel:136xxxx8888">直接拨号</a>

      target 属性

  • 内置属性值

    • _blank
    • _top
    • _parent
    • _self
      1. <a href="//google.com" target="_blank">在新的窗口中打开</a>
      2. <a href="//google.com" target="_top">在当前顶层窗口中打开</a>
      3. <a href="//google.com" target="_parent">在上层窗口中打开</a>
      4. <a href="//google.com" target="_self">在当前窗口中打开（默认值）</a>

  • 程序员命名

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

      iframe 标签 （内嵌窗口）

      表格标签

    • 相关的标签

      • table 表格（table标签里只能有3个标签）
      • thead 表头
      • tbody 表内容
      • tfoot 表尾
      • tr （table row）表行
      • td （table data）表数据
      • th （table head）表头
        1. <table>
        2. <thead>
        3. <tr>
        4.  <th>姓名</th>
        5.  <th>英语</th>
        6.  <th>数学</th>
        7. </tr>
        8. </thead>
        9. <tbody>
        10. <tr>
        11.  <th>小王</th>
        12.  <td>90</td>
        13.  <td>86</td>
        14. </tr>
        15. <tr>
        16.  <th>小李</th>
        17.  <td>82</td>
        18.  <td>88</td>
        19. </tr>
        20. </tbody>
        21. <tfoot>
        22. <tr>
        23.  <th>平均分</th>
        24.  <td>82</td>
        25.  <td>95</td>
        26. </tr>
        27. </tfoot>
        28. </table>
        HTML超强纠错，如果没写tbody、thead、tfood的时候，写的
      • 会直接变成tbody的内容。

    • 相关的样式

      • table-layout : 记住两个值auto，fixed
      • border-collapse : 控制border是否合并，默认是不合并，用collapse 让它合并。
      • border-spacing：0，控制border和border之间的距离，使距离为0。

      • 5.3 - HTML 重点标签 - 图2 图片标签

      • 作用

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

      • 属性
        • alt：(alternative)图像的替代文本
        • src：(source)嵌入图片的文件路径
        • height ：设置图像高度
        • width：设置图像宽度

      【注】只设置图片宽或高图片会自适应，宽和高同时设置容易导致图片变形。

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

      • 事件
        • onload：在图片加载完成后执行
        • onerror：在图片加载出错时执行
      • 响应式

      max-width : 100% 用于设置手机端宽度满足于屏幕

      1. max-width: 100%
      • 可替换元素

      可替换元素 面试可能被问概率30%

      表单标签

      • 作用 ：发get或post请求，然后刷新页面。
      • 属性
        • action ：控制请求哪个页面
        • autocomplete ：是否启用自动完成功能，取值为off（不自动填写）或on（自动填写）
        • method ：提交数据的 HTTP 方法，值有post和get
        • target ：规定在何处打开action的URL
      • 事件
        • onsubmit ：提交表单后触发指定事件

      和