1. iframe 标签
iframe 标签主要用途是嵌套页面，目前使用较少，只有一些遗留项目在用。具体可以参考<iframe>
需要新开一个窗口，速度比较慢。
- iframe直接使用
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
直接打开新页面，内容为百度。
- iframe与a标签配合使用（name属性）
<iframe src="#" frameborder="0" name="xxx"></iframe>
<a target="xxx" href="http://www.qq.com">QQ</a>
<a target="xxx" href="htttp://www.baidu.com">百度</a>
此a标签会在name为"xxx"的窗口打开。
- src：要打开的路径。
- name：可以通过设置iframe里面a标签的target属性，然后设置一样的name属性值，就可以在* iframe中访问a标签里面的链接。
- -iframeborder：设置iframe的边框，一般需要写iframeborder="0"。
- 不写
frameborder="0"的话，iframe会出现一个默认的border为1，所以是为了消除border。
2. a 标签
a 标签主要用途是跳转页面（HTTP GET 请求）。具体可以参考<a>
- target 属性
<a href="http://qq.com" target="_blank">blank-QQ</a>
<a href="http://qq.com" target="_self">self-QQ</a>
<a href="http://qq.com" target="_parent">parent-QQ</a>
<a href="http://qq.com" target="_top">top-QQ</a>
_blank----新窗口打开
_self----当前页面加载（默认）
_parent----在上级窗口打开（父页面）
_top----在最顶级窗口打开（祖宗页面）
- download 属性
<a href="http://qq.com" download>下载</a>
关于下载：
（1） 由 http 响应决定，若响应的的 content-type 写为content-type: application/octet-stream，浏览器会以下载的形式接受这个请求，而不是在页面上展示。
（2） 若写为content-type: text/html，只能在a标签上写个download，强制下载。
此属性指示浏览器下载URL而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么它将在Save提示符中作为预填充的文件名使用（如果用户需要，仍然可以更改文件名）。
（如果不想用此方法设置下载，也可以设置http响应的content-type:application/octet-stream）
-
href 属性
href 属性的几种写法：
1\. <a href="http://qq.com" >QQ</a>
<a href="https://qq.com" >QQ</a>
2\. <a href="//qq.com" >QQ</a> //无协议的绝对地址
3\. <a href="./xxx.html" >xxx</a> //相对路径
<a href="?name=qqq" >xxx</a> //?name=qqq直接加在当前页面后面
<a href="#ssss" >xxx</a> //同上，但不发起请求
4\. <a href="javascript:alert(1);">xxx</a> //伪协议（看似与http同等的协议）
<a href="javascript:;">xxx</a> //点击后什么都不做的a链接
注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。这种行为是HTML5的特性。
（1）写代码时一般指定为 http 协议，不用 file 协议。
（2）<a href="//qq.com" >QQ</a> 表示“无协议绝对路径”，即当前文件是什么协议，它就是什么协议（一般为 file 协议）
（3）<a href="qq.com" >QQ</a> 打不开，因为qq.com是一个相对地址，相当于一个文件
（4）<a href="#ssss" >xxx</a> 直接跳转到 xxx.html/#ssss，但因为是锚点，所以不发起请求（只有锚点不发起请求，锚点作用是实现页面内跳转）
（5）<a href="javascript:;" >xxx</a> 伪协议的应用：点击之后不需要任何动作的 a 标签
（6）<a href="">link</a> 当前页面刷新
（7）<a href="#">link</a> 页面锚点变成“#”或页面滚动到顶部（“#” 包含了一个位置信息，默认的锚点是 #top）
- a 标签属性具体可以参考<a>
3. form 标签
跳转页面（HTTP POST 请求）
- form 标签的作用是用于将其他表单标签“包”起来，以便作为一个整体，可以提交数据到服务器。
<form action="index2.html" method="post" target="_blank">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" value="提交">
</form>
如上面代码所示，此时如果输入用户名zql，密码123。
则post请求中的第二部分的Content-Type：application/x-www-form-urlencoded
根据这个类型，会把输入内容显示在第四部分。username=zql&password=123用&符号连接。如果输入的是中文，浏览器会把中文变成Unicode的UTF-8编码，两个字符一对，用%隔开。比如输入用户名你好，密码密码，第四部分会变为username=%E4%BD%A0%E5%A5%BD&password=%E5%AF%86%E7%A0%81。其中【你】的编码就为 E4 BD A0。
注意点：
form 标签中没有提交按钮则无法提交这个 form，除非你用 js
form 标签主只支持 GET 请求和 POST 请求，但主要用来提交 POST 请求
发送 POST 请求时，from 标签中的 input 标签的 name 属性会被当做 HTTP 请求的第四部分（Form Data）的 key
发送 GET 请求时，from 标签中的 input 标签的 name 属性会被当做 url 的查询参数
（你可以通过修改 from 标签的 action 来使得 POST 请求支持查询参数，但不能使得 GET 请求有第四部分。）
- form 发起的是 post 请求。
-
name：给该表单命名，用于JS技术使用；
（1）name 最终会被带到 post 请求的第四部分，成为它的 key；
（2）如果 form 标签里的 input 不加 name 属性，那么在表单提交时，input 的值就不会出现在请求里。 -
action="URL"：指定 form 表单向何处发送数据 -
method="get / post"：以何种方式向服务器发送数据
method 取 get 会把参数默认放到查询参数里面，则不会出现第四部分；取 post 会把参数默认放在第四部分，不会出现查询参数。我们可以通过给 action 加参数，让 post 也有查询参数，但没有任何方法让 get 请求拥有第四部分。 -
enctype="string"：规定表单数据以什么形式进行编码。 - form 标签也有
target，且规则和 a 标签一样。 - form 属性具体可以参考<form>
4. input / button 标签
input 标签具体可以参考 <input>
button 标签具体可以参考 <button>
区别：是否为“ 空标签”；
input 没有子元素，button 有 span 等子元素。
- 写 button 按钮时若不写 type，它会自动升级为提交按钮；
若写了 type，按钮则按 type 指定类型显示。
<form action="index2.html" method="post" target="_blank">
<button>button</button> //自动升级为提交按钮
<button type="button">button</button> //普通button按钮
</form>
- 写 input 时，type 指定为什么类型，就是什么类型。
input 标签有很多种type。
<form action="index2.html" method="post" target="_blank">
<input type="button" value="button"> //普通button按钮
<input type="submit" value="submit"> //提交按钮
</form>
（1）submit 是唯一能确定 form 表单能不能点击提交的按钮。
（2）有提交键时按回车即可跳转。
- 用 label 标签将 input 标签包起来，可以直接产生类似
<input type="checkbox" name="cb" id="cb"><label for="cb">checkbox</label>的关联效果 - input 标签的 type 为radio，几个 input 标签的 name 一致时，才会有不被同时选中的效果
在form中input的几种特殊情况
- 如果一个form里面只有一个按钮（<button>标签），它就会自动升级为提交（submit）按钮。
- input标签的type必须为submit，才能够提交，如果为button就是一个普通的按钮。
- 如果给button标签的type属性也设置为button，那么也只是一个普通的按钮。
-
checkbox：（多选框）
可以同时勾选多个框；name相同，表明这是同一个事物的选项。
（1）label 的 for 和 input 的 id 是对应的，要成对出现
<form action="index2.html" method="post" target="_blank">
<input type="checkbox">爱我 //点“爱我”无反应
<input type="checkbox" id="xxx"><label for="xxx">爱我</label> //点“爱我”也可勾选
</form>
（2）也可用 label 标签包裹住 input （简单，比较常用）
<form action="index2.html" method="post" target="_blank">
喜欢的水果
<label><input type="checkbox" name="fruit" value="orange">橘子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>
//点“橘子”和“香蕉”也可勾选选框
</form>
checkbox： 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。小技巧：用label标签把input包起来，可以关联文字。
-
radio：（单选框）
name相同时，只能勾选其中一个框。
<form action="index2.html" method="post" target="_blank">
爱我
<label><input type="radio" name="loveme" value="yes"></label>
<label><input type="radio" name="loveme" value="no"></label>
</form>
radio：单选框。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的
name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
-
password：密码输入框
虽然输入时看不到密码，但实际还是明文传输的。
5. select 标签
下拉选择框。
所有属性：select
<form>
<select name="group">
<option value="">-</option> //值为空
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option> //不能选
<option value="4" selected>第四组</option> //默认选项
</select>
</form>
- select 加 multiple 属性，可按着shift或ctrl实现多选。
<select name="group" multibple>
6. textarea 标签
多行文本输入框。
所有属性：textarea
<textarea style="resize:none; width:100px; height:50px;" name="爱好"></textarea>
- 文本框可以随意拉动大小，防止出现bug，常用css固定大小（宽、高也可以用行、列替代）。
7. table 标签
以表格的形式展示数据。
<table border=1> //表格加边框
<colgroup> //colgroup里面有col属性才有意义
<col width=100> //第一列宽度（px)
<col width=200> //bgcolor已不常用，现一般用css控制
<col width=100>
<col width=100>
</colgroup>
<thead>
<tr>
<th>项目</th><th>姓名</th><th>班级</th><th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th><td>小明</td><td>一班</td><td>94</td>
</tr>
<tr>
<th>2</th><td>小红</td><td>二班</td><td>96</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>平均分</th><td></td><td></td><td>95</td>
</tr>
<tr>
<th>总分</th><td></td><td></td><td>190</td>
</tr>
</tfoot>
</table>
-
thead：table head 、tbody：table body 、tfoot：table foot
tr：table row（行）、td：table data（数据）、th：table header（标题） - thead、tbody、tfoot 的内容与三个标签排放顺序无关，不影响内容显示。
- 不写 tbody，系统会自动补上；
不写 thead 和 tfoot，就没有表头和表尾，内容统统放在 tbody 里。会按照写的顺序来展示 - table 的 border 默认是有空间的，可以在 CSS 中设置
border-collapse: collapse;改为没有空隙,让它们合并起来：
<style>
table{
border-collapse: collapse;
}
</style>
8. 表单元素总结
单行文本框：<input type="text">，默认值是type="text"
密码框：<input type="password">
单选按钮：<input type="radio">
多选按钮：<input type="checkbox">
隐藏框：<input type="hidden">
文件上传：<input type="file">
下拉框：<select></select>
多行文本：<textarea></textarea>
标签：<label></label>
元素集：<fieldset></fieldset>
提交按钮：<input type="submit">
普通按钮：<input type="button">
重置按钮：<input type="reset">
9. noscript 标签
如果用户浏览器不支持 script，则会显示 noscript 中的内容。
10. 空标签
空标签：即空元素，是指有内容的元素，即没有子元素（包括文本）的元素。
- 空标签是不闭合的标签，不成对出现
- 在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type="text"></input> 的闭标签是无效的。
- 常见空标签：
<area>
<base>
<br>
<col>
<colgroup> when the span is present.
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
11. 替换元素
可替换元素：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。替换元素一般没有实际内容。
- 比如
<input/>，type="text"时是一个文本输入框；取作其他的时候，浏览器显示就不一样了。 - 可替换元素的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。典型的可替换元素有
<img>、<object>、<video>和表单元素，如<textarea>、<input>。某些元素只在一些特殊情况下表现为可替换元素，例如<audio>、<canvas>。通过 CSS<content>属性来插入的对象被称作匿名可替换元素。
非替换元素：HTML的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。
- 比如
<p>我爱学习<p/>，浏览器将这段话直接显示出来。
