1.iframe 标签：

用来嵌套页面

frameborder属性：

frameborder=1（默认值），一般设置frameborder=0来消除自带的边框

name属性：

与a标签结合起来用

2.a 标签：

用来跳转页面（HTTP GET 请求）

href 属性：

包含超链接指向的 URL 或 URL 片段，href里可写的内容如下：

①http协议：QQ（不能写为QQ的形式，）

②无协议绝对地址：QQ，当前页面是什么协议就使用什么协议（此时默认为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标签即可正常访问

③相对路径：QQ

④锚点：QQ（锚点的作用是页面内跳转，只有锚点不发起请求）

⑤查询参数：QQ

⑥JavaScript伪协议：QQ，

伪协议用来写一个点击之后什么也不做的a标签：QQ

download属性：

用来指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件，有以下两种下载方式：

①采用content-type: application/octer-stream协议：浏览器会以下载的形式接收请求，而不是在页面上展示，此时直接点击a标签就可以下载

②如果不是以上面的协议而是content-type: text/html协议的形式：则应在a标签中加一个download提供下载，如下载

target属性：

与iframe标签结合起来理解：如当前有三个页面index.html、index2.html、index3.html分别用iframe嵌套（index.html引用index2.html，index2.html引用，index3.html），index3.html中写入a标签：

self QQ

blank QQ

parent QQ

top QQ

_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用于上传（提交）内容

（必须要有提交按钮，否则无法提交）

输入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中加入参数，如

表单类型：

代码

页面显示

提交的参数

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标签

用户名

密码

勾选我

将一个和一个元素匹配在一起，可以将直接放在里，可以单击关联的标签来聚焦或者激活 input，以及 input 本身。

6.table 标签示例

table示例代码

效果图

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

collapse属性

效果图

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

HTML 常用标签详解