• 超链接

    属性&取值：
    href 指定打开的链接，href的value中，可以填写 http://xxx.com，也可以https://xxx.com,也可以直接 //xxx.com,其中 //是最高级的，会自动选择协议。
    href 的属性还可以是路径，这里的路径跟文件操作的路径不一样，指的是以html的方式打开文件，也分为相对路径和绝对路径，绝对路径前面有/，相对没有。
    target 设定在哪个窗口打开链接，国内设置value是”_blank”,表示新开一个标签打开链接，国外设置value为空””，表示在当前页面打开链接
    除了_blank、留空，还有几个value:
    _self:默认是在当前页面实现跳转，效果跟留空是一样的
    _parent:在当前链接所在的iframe的上一层打开
    _top:在当前页面最顶层打开，这里存在一个层级关系

    效果实现：
    重新创建一个文件，例如 a-target-iframe.html,代码如下:

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>iframe</title>
    8. </head>
    10. <body style="background:gray; color: white;">
    11.     我是 iframe
    12.     <a href="//baidu.com" target="_top">top</a>
    13. </body>
    15. </html>

    在a-target.html中插入a标签并且设置好他的属性

    1. <a href="//baidu.com" target="_top">在顶层页面跳转</a>

    此时会发现，效果是这样子的:
    image.png 一般来说我们在a标签中填写的内容会变成链接的提示，但是这里直接访问到了
    a-target-iframe.html中的内容。
    设定一个窗口的名字，点击链接时，浏览器会检测是否存在这个名字的窗口如果没有，就新建一个，例如:

    1. <a href="//baidu.com" target="xxx">百度</a><br>
    2. <a href="//bilibili.tv" target="xxx">B站</a>

    百度和B站同时指向同一个窗口，第一次点击百度，第二次再点击B站时，会把百度的页面覆盖，换成B站的页面
    iframe:
    可以理解成在一个页面里面嵌入其他的页面，例如:

    1. <a href="//baidu.com" target="xxx">百度</a><br>
    2. <a href="//bilibili.tv" target="xxx">B站</a>
    3. <hr>
    4. <iframe stle="border:none;width:900px;height:500px" src="" name="xxx"></iframe>

    效果如下:
    image.png 当我点击百度或者B站的时候，会互相覆盖页面。



    download ~~ 下载这个网页，有些浏览器不支持，只做了解
    rel=noopener 暂时不用，到js后会用到
    作用：
    跳转外部页面
    跳转内部锚点 通过id实现
    跳转到邮箱或者电话 伪协议

    伪协议 可以填写一些js代码，例如:

    1. <a href="javascript:alert(1);">伪协议</a>

    image.png
    有趣、奇葩的伪协议——空的js伪协议：

    1. <a href="javascript:;">伪协议</a>

    作用：有时候产品经理要求写一个点击了以后不会跳转的 a 标签，如果href的value留空，会导致页面自动刷新，那么输入框的内容也会被清空，如果href的value是#，在篇幅比较长的页面上，你的这个 a 标签放在底部，那么点击以后是会自动回到最顶部，所以使用空的js伪协议，让 a 标签什么事情都不做

    当href的value是某个id的时候，会跳转到指定id的那个标签

    1. <a href="#111">跳转到指定标签</a>

    mailto:发邮件

    1. <a href="mailto:wonggamto@163.com">给薯条君发邮件</a>

    tel: 打电话

    1. <a href="tel:11111111111">打电话给我</a>

    知识补充：
    编辑器中输入标签名{$}*n,可以快速创建n个标签并且在标签中自动填充数字，代码如下：

    1. p{$}*30

    效果：
    image.png
    不要双击打开html页面，要在地址栏输入路径打开，因为有可能会出现一些奇怪的bug，推荐使用yarn安装http-server，操作如下：
    在终端输入,等待安装完毕

    1. yarn global add http-server

    如图所示
    image.png
    安装完成后，输入命令

    1. http-server . -c-1

    -c表示缓存，-1表示false，连在一起就是不要缓存
    image.png
    command+左键点击随意一个链接，打开页面，然后在地址栏添加你要访问的html文件即可实现打开链接
    image.png
    iframe标签现在基本上已经不用了，使用ajax取而代之


    • 标签
    • thead
    • tbody
    • tr
    • th
    • td
    • tfoot


    1.  <table>
    2.         <thead>
    3.             <tr>
    4.                 <th>英语</th>
    5.                 <th>翻译</th>
    6.             </tr>
    7.         </thead>
    8.         <tbody>
    9.             <tr>
    10.                 <td>hyper</td>
    11.                 <td>超级</td>
    12.             </tr>
    13.             <tr>
    14.                 <td>target</td>
    15.                 <td>目标</td>
    16.             </tr>
    17.             <tr>
    18.                 <td>reference</td>
    19.                 <td>引用</td>
    20.             </tr>
    21.             <tr>
    22.                 <td>frame</td>
    23.                 <td>边框、框架</td>
    24.             </tr>
    25.             <tr>
    26.                 <td>error</td>
    27.                 <td>错误</td>
    28.             </tr>
    29.         </tbody>
    30.         <tfoot>
    31.             <td>空</td>
    32.             <td>空</td>
    33.         </tfoot>
    34.     </table>

    效果：
    image.png

    1.  <table>
    2.         <thead>
    3.             <tr>
    4.                 <th></th>
    5.                 <th>小红</th>
    6.                 <th>小明</th>
    7.                 <th>小驴</th>
    8.             </tr>
    9.         </thead>
    10.         <tbody>
    11.             <tr>
    12.                 <th>数学</th>
    13.                 <td>61</td>
    14.                 <td>91</td>
    15.                 <td>85</td>
    16.             </tr>
    17.             <tr>
    18.                 <th>语文</th>
    19.                 <td>61</td>
    20.                 <td>91</td>
    21.                 <td>85</td>
    22.             </tr>
    23.             <tr>
    24.                 <th>英语</th>
    25.                 <td>61</td>
    26.                 <td>91</td>
    27.                 <td>85</td>
    28.             </tr>
    29.         </tbody>
    30.         <tfoot>
    31.             <tr>
    32.                 <th>总分</th>
    33.                 <td>200</td>
    34.                 <td>200</td>
    35.                 <td>200</td>
    36.             </tr>
    37.         </tfoot>
    38.     </table>

    效果:
    image.png

    样式

    • table-layout:
      • auto 根据内容自动设置单元格大小
      • fixed 根据设置好的单元格大小自动分配单元格的大小
    • border-collapse 单元格边框合并
    • border-spacing 单元格边框间隔

    • HTML常用标签 - 图10标签

      • 属性
        • alt/height/width/src,只写height或者width时，另外一个属性会自适应
      • 事件 js中非常重要的两个事件，用来监听图片是否加载成功，
        • onload 加载成功，调用onload
        • onerror 调用失败，调用onerror
      • 响应式：
        • max-width:100%; 会根据设备大小调整

    • 标签

      • 作用: 发送GET或者POST请求，然后刷新页面
      • 属性:
        • action:后台API
        • autocomplete: on/off，自动填充
        • method: GET/POST
        • target: 跟标签的类似
      • 困扰已久的问题:
        • 和的区别
          • input标签不能添加其他的标签
          • button标签里面还能嵌套其他标签，比如、HTML常用标签 - 图11
          • button中的type如果不设置值，那么默认就会设置为submit
    • 标签
      • 作用：让用户输入内容
      • 属性：
        • 类型 type：button/checkbox/email/file/hidden/number/password/radio/search/submit/tel/text
        • 其他 name/autofocus/checked/disabled/maxlength/pattern/value/placeholder
      • 事件
        • onchange/onfocus/onblur
      • 验证器：HTML5新增功能
    • 注意事项
      • 一般不监听input的click事件
      • form里面的input要有name
      • form里面要有type=submit才能触发submit事件