1.iframe 标签：
用来嵌套页面
frameborder属性：
frameborder=1（默认值），一般设置frameborder=0来消除自带的边框
<iframe src="" frameborder="0"></iframe>
name属性：
与a标签结合起来用
<iframe name="xxx" src="" frameborder="0"></iframe>
<a href=" " target="xxx"></a>
2.a 标签：
用来跳转页面（HTTP GET 请求）
href 属性：
包含超链接指向的 URL 或 URL 片段，href里可写的内容如下：
①http协议：<a href="http://qq.com" >QQ</a>（不能写为<a href="qq.com" download>QQ</a>的形式，）
②无协议绝对地址：<a href="//qq.com" >QQ</a>，当前页面是什么协议就使用什么协议（此时默认为file协议，如果用 file:// 协议浏览页面，就会访问到 file://qq.com，这是一个不存在的路径），如想使用这种形式访问正常的页面，则有以下两种解决方法：
解决：方法一：上传到GitHub,使用GitHub的预览功能
方法二：使用node.js搭建http-server服务器。下载http-server工具：依次使用命令npm -i -g http-server，http-server -c-1，在地址栏输入http://127.0.0.1:8080/index.html，然后点击a标签即可正常访问
③相对路径：<a href="xxx.html" >QQ</a>
④锚点：<a href="#adbysghs" >QQ</a>（锚点的作用是页面内跳转，只有锚点不发起请求）
⑤查询参数：<a href="?name=xxx" >QQ</a>
⑥JavaScript伪协议：<a href="javascript: alert(1);" >QQ</a>，
伪协议用来写一个点击之后什么也不做的a标签：<a href="javascript: ;" >QQ</a>
download属性：
用来指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件，有以下两种下载方式：
①采用content-type: application/octer-stream协议：浏览器会以下载的形式接收请求，而不是在页面上展示，此时直接点击a标签就可以下载
②如果不是以上面的协议而是content-type: text/html协议的形式：则应在a标签中加一个download提供下载，如 <a href="http://qq.com" download>下载</a>
target属性：
与iframe标签结合起来理解：如当前有三个页面index.html、index2.html、index3.html分别用iframe嵌套（index.html引用index2.html，index2.html引用，index3.html），index3.html中写入a标签：
<a href="http://qq.com" target="_self">self QQ</a>
<a href="http://qq.com" target="_blank">blank QQ</a>
<a href="http://qq.com" target="_parent">parent QQ</a>
<a href="http://qq.com" target="_top">top QQ</a>
_self：当前页面加载（index3.html 打开qq页面）
_blank：新窗口打开
_parent：加载当前页面的父级页面（上一层页面），如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同（index2.html 打开qq页面）
_top：加载最顶层的窗口，如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同（index.html打开qq页面）
详细属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
3.form 标签
用来跳转页面（HTTP POST 请求），get用于获取内容，post用于上传（提交）内容
<form action="users" method="POST" target="_blank">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" name="提交">（必须要有提交按钮，否则无法提交）
</form>
输入name：1111，password：2222，点击提交，然后用Chrome查看请求，发现post请求第二部分中有：
Content-Type: application/x-www-form-urlencoded
www-form-urlencoded的语法：第四部分Form Data中显示会出现：username=1111&password=2222
如果输入的是中文，www-form-urlencoded会把中文变成对应的utf-8，每个字节前加"%"，如用户名输入：你好，密码框输入：密码，则第四部分Form Data中显示为：username=%E4%BD%A0%E5%A5%BD&password=%E5%AF%86%E7%A0%81
当method="get"时，username=1111&password=2222则不会出现在第四部分Form Data中（永远无法出现在第四部分中），而是会直接出现在查询参数中。
当method="post"时，username=1111&password=2222则会出现在第四部分Form Data中，另外，在action中加入参数，如<form action="users?zzz=233" method="POST">，则也会出现查询参数。
详细属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
4.input / button
区别：是否为「空标签」：input没有子元素，button有子元素
<form action="users" method="POST" target="_blank">
<input type="text" name="username">
<input type="password" name="password">
<button>button</button>（form表单中的button会自动升级为可提交的submit）
</form>
表单<input>类型：
input 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
button 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
5.label标签
<form action="users" method="POST" target="_blank">
<label>用户名<input type="text" name="username"></label>
<label>密码<input type="password" name="password"></label>
<label><input type="checkbox">勾选我</label>
<button>button</button>
</form>
将一个 <label> 和一个 <input> 元素匹配在一起，可以将 <input> 直接放在 <label> 里，可以单击关联的标签来聚焦或者激活 input，以及 input 本身。
6.table 标签示例
table默认是有边框的，若要去除边框，则应在CSS中给table加一个collapse属性：
属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
