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示例代码 效果图

table默认是有边框的，若要去除边框，则应在CSS中给table加一个collapse属性：

collapse属性 效果图

属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

参考

@饥人谷、MDN