HTML重难点标签总结，包括a、table、img、form、input和其它标签

a标签

作用

跳转到外部页面
跳转到内部锚点
跳转到邮箱、电话等

属性

href

注意：不要双击打开html文件。

第一种方案是安装yarn global add http-server，运行http-server . -c-1(-c-1指不要缓存)，打开终端返回的地址，在后面添加「/html文件名」即可访问（同一wifi下的手机也可以访问)；

第二种方式，yarn global add parcel，运行 parcel 文件名。

网址
- ```
https://google.com
```
- ```
http://google.com
```
- //google.com
- 第三个网址会进行补全和重定向，最终跳转到正确的页面
路径
- /a/b/c 和 a/b/c
  若按照之前命令行讲的基于文件的路径， / 是根目录，也就是到a盘去找，但使用http之后，就不再基于文件，而是基于在哪里开启了服务，所以路径实际上为html-demo2/a/b/c.html。这也解释了为什么不要双击打开HTML文件，会导致超链接路径出问题
```
<a href="/a/b/c.html">超链接文件c.html</a>
<a href="a/b/c.html">超链接文件c.html</a>
```
- index.html 或 ./index.html
锚点

<a href="#demo">跳转到锚点</a>

伪协议

一般用来实现点击后没有任何操作

href="javascript:代码;"

  <a href="javascript:alert(1);">javascript伪协议</a>
  <!-- 页面会刷新 -->
  <a href="">href内部不写内容</a>
  <!-- 页面虽然不会刷新，但是页面会回到顶部 -->
  <a href="#">href内部写#</a>
  <!-- 真正实现了什么都不做 -->
  <a href="javascript:;">空的伪协议</a>

target

示例代码

指定在哪个窗口打开超链接
_self 默认值在当前页面打开
_blank 在空白页面打开

_top _parent
引入iframe标签,在a-target.html中引入a-target-iframe.html，在iframe中引入iframe-2

<!-- a-target.html -->
  <body>
    <a href="https://google.com" target="_top">google</a>
    <div>
      <iframe width="500px" height="500px" src="a-target-iframe.html" frameborder="0"></iframe>
    </div>
  </body>

  <!-- iframe -->
  <body style="background-color:red;">
    我是iframe
    里面有一个a标签
    <!-- top: 在a-target页面打开 -->
    <a href="//google.com" target="_top">top</a>
    <!-- self: 在iframe中打开，不过google不允许 -->
    <a href="//google.com" target="_self">self</a>
    <!-- parent: 父级窗口中打开，和top效果一致 -->
    <a href="//google.com" target="_parent">parent</a>
  </body>

  <!-- iframe-2 -->
  <body style="background-color: yellow;">
    我是iframe2
    <!-- parent: 在iframe.html中打开 -->
    <a href="//google.com" target="_parent">parent</a>
    <!-- top: 在a-target页面打开 -->
    <a href="//google.com" target="_top">top</a>
  </body>

window.name

  <!-- 如果没有xxx窗口就创建，如果有就会在xxx窗口打开
  第一次点google链接会创建，点baidu链接会继续在xxx窗口打开
  可以通过window.name查看当前窗口
  -->
  <a href="//google.com" target="xxx">google</a>
  <a href="//baidu.com" target="xxx">baidu</a>

iframe.name

  <!-- 会在对应iframe中打开链接 -->
  <a href="//google.com" target="xxx">google</a>
  <a href="//baidu.com" target="yyy">baidu</a>

  <iframe src="" name="xxx"></iframe>
  <hr>
  <iframe src="" name="yyy"></iframe>

其它属性

download

指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件
rel=noopener

当使用_blank时优化页面性能，安全性。参考：blog.csdn.net/CamilleZJ/a…

table标签

img标签

作用

发送get请求，展示一张图片
属性
- src 指定图片的网址
- alt 图片的文字说明。图片不显示时，图片的位置上会显示该文本。
- width height 设置图片大小
  - 同时设置可能会使图片变形，推荐只写宽度或者高度
    前端工程师底线：永远不要让图片变形

事件

onload onerror

<body>
  <img src="dog1.png" alt="一只狗子" width="100px" id="dog">
  <script>
    dog.onload = function () {
      console.log('图片加载成功');
    }
    // 如果加载失败，显示404图片
    dog.onerror = function () {
      dog.src = '/404.png'
    }
  </script>
</body>

响应式
- max-width: 100% 宽度始终和父元素相等
可替换元素

form标签

作用

发get或post请求，然后刷新页面

属性

action 要请求页面的地址
method 请求方法 GET/POST（常量大写）
autocomplete 自动填充 on/off
target 提交表单后在哪里显示响应信息 _self,_blank,_top,_parent

<body>
  <form action="/xxx" method="POST" autocomplete="on" target="a">
    <input type="text">
    <input type="submit">
  </form>

  <iframe src="a-target-iframe.html" frameborder="0" name="a"></iframe>
</body>

事件

onsubmit 表单提交时触发
补充
- 比较类型为submit的input标签和 button标签的区别：button可以包含其他元素，input只能修改文本
```
<input type="submit" value="自定义按键名">

<button type="submit"><strong>搞起</strong>
        <img src="dog.png" width="100">
</button>
```
- 表单内要有type=submit的元素，才可以提交。button的默认类型为submit，如果写成type=button将无法提交表单

input标签

作用

让用户输入内容
属性
- type
- 示例代码
事件
- onchange 输入时触发
- onfocus 获取焦点时触发
- onblur 失去焦点时触发
验证器
- html5新增功能
- required 必须填写

其它输入标签

textarea 多行文本
select 下拉菜单

<!-- 多行文本：禁止拖拽改变大小 -->
<textarea style="resize:none;width:50%;height:200px;"></textarea>

<!-- 下拉菜单 -->
<select>
  <option value="">-请选择-</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
  <option value="3">星期三</option>
</select>

其他标签

video
audio
canvas
svg

注意：查看文档确认标签的兼容性后续JS会学习这些标签

注意事项

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

HTML常用标签

a标签

作用

属性

href

target

其它属性

table标签

相关标签

相关样式

img标签

form标签

input标签

其它输入标签

其他标签

注意事项