在了解了html的起手式和基本的章节标签、内容标签以及全局属性之后，就可以进一步学习html的重点标签的含义及应用。本文分享我学习html几大类常用标签所作的笔记。
a标签的用法
a标签有三大作用：
- 跳转到外部页面
- 跳转到内部锚点
- 跳转到邮箱或电话
想要实现这三个方面的作用，就需要了解a标签的属性用法，a标签属性主要包括：
| 属性 | 作用 |
|---|---|
| href | 即hyper reference，使用该属性可以实现超链接 |
| target | 决定页面打开的窗口 |
| download | 下载该页面 |
| rel=noopener | 防止bug出现 |
herf的取值
有关herf的取值，选择有很多：
- 若herf留空，则触发此a标签时会自动刷新页面；
- 若herf里只加“ # ”，则会自动跳转到页面的顶部；
- 若href里面添加网址，则会直接跳转到该网址，需要注意的是，如果添加“//google.com”这类的无协议网址，则会继承当前的“ http:// ”然后跳转到“ http://www. ”，最后跳转到“ http://www. ”,这是有关网络协议的内容；
- 若href里添加路径，如‘/a/b/c’或‘a/b/c’等，则会在指定路径中打开网页，此时的‘ / ’指的是http服务的根目录，若直接双击打开html则会出现bug，此时会在系统根目录下寻找‘ /a/b/c ’，而不是http服务的根目录下寻找，因此需要使用parcel来打开html文件；
- href中可以添加一些伪协议，比如Javascript的代码（代码中什么都不写即可创造一个点击不跳转的标签），mailto加邮箱即可实现发邮件到指定邮箱，tel加手机号即可实现打电话等操作；
- href中还可以添加id，则页面会自动跳到指定的标签中。
target的取值
关于target的取值决定了页面在哪里打开，主要有：
- 内置名字：比如‘_blank’则在空白页打开，‘_top’则在最顶层打开，‘_parent’则在当前链接的上一层窗口打开，‘_self’则在自身页面打开（默认）
- 程序的名字：如‘target=xxx’时，若存在xxx，则在xxx中打开，若不存在xxx，则新建一个xxx窗口打开；还可以添加iframe的名字等。
img标签的用法
img标签用来添加图片，可以在src后接图片地址。
其作用是发出一个get请求，并且展示一张图片。
img标签拥有以下几点属性：
| 属性 | 意义 |
|---|---|
| alt | 提供一个可以选择的图片来代替请求 |
| height/weight | 高度/宽度，写其中一个则另一个会自适应大小，如果都添加的话容易导致图片变形 |
| src | 后接图片地址 |
另外，img标签还有两个事件。分别是onload和onerror，一般使用script来获取，可以挽救当加载失败时的图片显示。
如果需要添加响应式，则要在其中加入‘max-width:100%’来实现。
table标签的用法
使用table标签来添加表格。
table标签主要分为以下几大部分：
- < thead >用来描述表头，需要使用< tr >包裹住行，然后再使用< th >来对表头进行详细描述；
- < tbody >对表格数据进行描述，同样需要< tr >包裹，最后通过< td >来对表格数据进行描述；
- < tfoot >对表格的最后一行进行描述，具体与< tbody >一样。
值得注意的是，< thead >、< tbody >、< tfoot >不需要按顺序书写。
此外，table标签的相关样式还有两种：
- table-layout
—auto自动计算，每个单元格的宽度取决于表格中的内容；
-fix根据表格的整体宽度尽量平均分配。
- border-collapse 用来控制合并单元格
- border-spacing 控制单元格之间的距离
form标签
form标签用来发送get或post请求，然后刷新页面（必须需要有type=submit才能提交）。它的属性包括：
- action 后面加什么，就会请求到什么上，目前的知识尚未能理解；
- method 控制是get请求或post请求；
- target 控制请求后到达哪个页面；
- autocomplete 有on/off，开启后加入name则会出现自动建议。
一般form标签都要包含input type="text"、input type="submit"，而且此时submit会根据使用的语言来自动适应，也可以在input中添加value="xxx"来把submit的内容改为“xxx”（或直接使用button type="submit"）。
需要注意的是，input里面一般不可以加其他东西，只能是纯文本，而button中可以再加其他内容，如strong等描述标签。
input标签
input标签规定了用户可以在其中输入数据的输入字段。它也可以有很多属性：
| 标签 | 属性 |
|---|---|
| input type="text" | 输入纯文本 |
| input type="color" | 选择颜色 |
| input type="password" | 不展示具体内容的字段 |
| input type="radio" | 可以选择几个name，当拥有同一个name时只能选中其中一个 |
| input type="checkbox" | 多选框，当拥有同一个name时归为同一组 |
| input type="file" | 可以提交文件，加上multiple可以同时提交多个文件 |
| hidden | 看不见的文段，可以给JS用来填充ID和字符串 |
| textarea style="resize:none" | 添加不可拖动大小的多行表单 |
| select | 添加可以选择的option |
另外，input标签也有相应的事件onchange/onfocus/onblur。
同时也要注意：
- 一般不监听input中的click事件；
- form中的input都需要有name；
- form里面要放一个type=submit才能出发submit事件。
总结
最后做一个简单的总结，html标签是组成html标记语言的重要部分，其中像a、table、img和form等重点标签都是需要熟练掌握的，而像iframe等标签则逐渐淡出了人们的视野。
在学习html过程中，需要通过不断的重复标签的使用来增强相应的记忆，从模仿开始，直到自己也能够熟练地使用这些标签为止。
