介绍
说起HTML标签，很多人都觉得很简单，比如我刚开始学的时候就是写网页不会的就去W3C school里去查标签，属性。每次都是查完就忘了，而且那个网页还特丑，访问还特慢，不如这次就好好的总结一下常用的HTML标签吧。
语义化
以前总是喜欢<div/>和<span/>，用这两个东西写遍天下的网页。后来在知乎逛多了才知道语义的重要性，简单来说就是能用有字面意思的标签就用字面意思的标签，如<main/>表示主要内容，<section/>表示每个区块，这样别人看自己的HTML代码的时候就会一目了然。
下面给出常用的语义化标签
<header>
<nav>
<ul>
<li>主页</li>
<li>产品</li>
<li>关于我们</li>
</ul>
</nav>
</header>
<aside>
我的广告
</aside>
<main>主要内容</main>
<section>区块1</section>
<section>区块2</section>
<article>
<h1>主要标题</h1>
<hr>
<h2>次要标题</h2>
<p>第一自然段</p>
<p>第二自然段</p>
<h2>次要标题</h2>
<p>第一自然段</p>
<p>第二自然段</p>
</article>
<footer>
<small>版权所有</small>
</footer>
可替换标签
CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的 外部对象。
比如常用的<img/>，浏览器会先下载图片，然后用图片将这个标签替换掉。
<iframe/>
用法
<iframe src="https://www.baidu.com" name="xxx"></iframe>
和<a/> 一起用
在iframe里指定name，在a里指定target，这个target指向iframe里的name，这样就可以将a里面链接的内容投射到iframe里了。
<iframe src="#" name="xxx" frameborder="0"></iframe>
<a href="www.baidu.com" target="xxx">Baidu</a>
<a href="www.qq.com" target="xxx">QQ</a>
注意：
- 用iframe很卡，相当于新打开一个网页
- frameborder就是iframe的边框宽度，太丑了，一般设置为0
<a/>
这个标签可能我们都很熟悉，就是跳转页面的，但是还可以发送GET请求。
target
target属性是每用一次查一次，这里就简单总结一下
-
target=""默认为_blank，会在新窗口里打开 -
target = "_blank"新打开一个新的窗口，并打开 -
target = "_self"在当前窗口打开，如果嵌在别的页面的iframe里，则在iframe里打开: index1 -> index2，打开index2 -
target = "_parent"如果嵌在别的页面的iframe元素里，则不在iframe元素里打开，而是那个窗口打开: 如果index1 -> index2，打开index1 -
target = "_top"在顶层窗口打开，如果 index1 -> index2 -> index3 ，一个套一个，那么在index1里点击，则会在index1打开 -
target="xxx" 在name="xxx"`的iframe里打开网页
download
- download属性，下载src里的内容
href
-
href="qq.com"-> 会变成相对路径，不能正常访问qq.com，应该写成https://ww.qq.com，//qq.com（使用当前页面的协议） -
href="xxx.html"-> /xxx.html，以当前目录为基准 -
href="#iiiii"直接加到 index.html 后面 -> index.html#iiii，只做页面内的跳转，不发起Get请求 -
href="?name=hi"浏览器自动判断意思，将查询放到index.html后面 -> index.html?name=hi，自动发起Get请求 -
href="javascript: alert('hi')"伪协议，可以写JS代码，直接执行JS代码。以前想点一个东西就执行代码，不写onclick事件。用法：javascript:;-> 点击一个a标签，但是不跳转
<form/>
form的作用一般是展示一个表单，而一般用来发送POST请求。并而只能发送GET和POST请求，RESTful的其他请求都不能发送。
示例
<form action="users" method="post">
<input type="text">
<input type="submit" value="提交">
</form>
提交
一般来说要加上method="POST"来发送POST请求，一般不发送GET请求，需要submit按钮来提交去发送POST请求。
注意：如果用HTTP协议来发送请求，那么数据将以明文形式传给服务器，如果想加密，那么必须用HTTPS来发送POST请求。
x-www-form-urlencoded
如果打开Chrome的Network会看到发请求的格式（Content-Type）是x-www-form-urlencoded，这就表示发请求的数据是用UTF-8来表示字符的，如：“你”就变成了%E4%BD%A0，其中E4 BD A0就是“你”。
target
其实很多人也不知道还有这个target属性的，这个target属性和标签<a/>里的target值是一样的，也是控制在哪个地方打开新的网页。
<input/>
<label/>
这个标签可以让我们点击文本的时候同时选中<input/>里的内容。不过一般人会这么写
<label for="xxx">Label</label>
<input id="xxx" type="radio" name="fruit" value="apple">
但是这样要写个ID，我们都知道一般不会给HTML元素起ID的，所以可以用<label/>标签包裹<input/>元素
<label >
Hello
<input type="checkbox" name="love" >
</label>
radio / checkbox
其实刚开始学radio或者checkbox的时候，总会发现怎么没有了这个field的数据，其实我们都比较容易忘记加上name属性啦，所以正确打开方式是
你喜欢的水果
<label >
Banana
<input type="checkbox" name="fruit" value="banana">
</label>
<label >
Apple
<input type="checkbox" name="fruit" value="apple">
</label>
爱我？
<label >
爱
<input type="radio" name="love" value="yes">
</label>
<label >
不爱
<input type="radio" name="love" value="no">
</label>
button / submit
我们经常会遇到这样的情况，有时候加<button/>就可以提交表单，有时候加<input/>也可以提交，但是不知道怎么回事，又不行了。下面说下这些坑
- 如果一个form里只有一个按钮没有写type
<button>提交</button>，button标签，那么会自动升级为submit - 如果按钮的写了type
<button type="xxx">点我</button>，而不会变成submit - 如果写了一个
<input type="button>"，那么也是不能提交的，因为这只是一个普通的button - 如果写了
<input type="submit">，那么点击就可以提交
<textarea/>
关于这个标签，我们可能最不爽的就是可以拉动这个元素，可以添加CSS来控制这个行为。
textarea {
resize: none;
}
虽然这个标签有属性 cols 和 rows ，但是一般不推荐使用，最好还是用CSS来控制元素的样式，因为这两个属性控制的不是那么准确。
<select/>
当我们想弄一个下拉菜单的时候，总想着Bootstrap里的<button/> + <ul/>，但是HTML里已经提供了这种元素啦，就是<select/>。
下拉菜单的每个菜单为<option/>，有属性 disabled 控制是否可选；selected 控制是否开始就选中哪一项。
<select name="group">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" disabled>3</option>
<option value="4" selected>4</option>
</select>
<table/>
这个元素用起来只要按照标准用法来就好了。不过我们可能不太熟悉还有<colgroup/>和<col/>标签吧，他们是控制每一列的大小的，单位是px。
<table border="1">
<colgroup>
<col width="100">
<col bgcolor="red" width="200">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sam</td>
<td>12</td>
</tr>
<tr>
<td>Amy</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>OK</td>
<td>118</td>
</tr>
</tfoot>
</table>
<col/> 和 <colgroup/>
- width 表示每一列的宽度 + px
- bgcolor 表示每一列的颜色
注意事项
- th -> 表里的项目
- td -> 表里的数据
- thead,tbody,tfoot 不管怎么放，顺序都是一样的，浏览器会自动排顺序
- 如果没有写thead，所以内容都放到tbody里，如果不写tbody，浏览器会自动加上tbody
- 可以在CSS去掉table中间的空间
table {
border-collapse: collapse;
}
