1.iframe 标签
嵌套页面
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx href="http://qq.com">qq</a>
- iframe 可以拥有一个 name，a\form 标签的 target 可以通过 name 指向这个 iframe。
- 现代前端开发中，iframe 很少用。
- ”#“这代表的就是链接的一种占位符！通常用于页面设计时期的假链接！也就相当于一个空链接！
- frameborder="0"，去边框，由于边框太丑请习惯性加上。
- src直支持相对路径，src="./index2.html"。
- sandbox="allow-forms"：
- "" 启用所有限制条件。
- allow-same-origin 允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。
- allow-top-navigation 嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。
- allow-forms 允许表单提交。
- allow-scripts 允许脚本执行。
2.a 标签
跳转页面（HTTP GET 请求）
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
target
target="_blank"
target="_self"
targer="_parent"
target="_top"
download
如果后端没写content-type: application/octet-stream，则用download，浏览器以下载的形式接受请求，而不是在网页上展示
href
href="http://qq.com"
href="//qq.com" 浏览器会根据当前协议，补全无协议链接的协议
href="" 当前页面刷新
href="#" 锚点，表示页面内跳转，不会发起请求，页面滚动到顶部
href="javascript: alert(1);"
href="javascript:;"
伪协议：可以在用户点击 a 时执行一段 javascript 代码；
在地址栏输入 javascript:alert(1) 可以在当前页面执行一段代码；
伪协议可以实现「点击之后没有任何动作的 a 标签」，满足一些奇葩需求。
3.form 标签
跳转页面（HTTP POST 请求）
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
input
- checkbox，复选框
<label><input type="checkbox" name="fruit" value="orange">桔子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>
- radio，单选框，相同的name只能选一个
<label><input type="radio" name="loveme" value="yes">Yes</label>
<label><input type="radio" name="loveme" value="no">No</label>
- text，文本框
- password，密码框
- submit，form表单要有提交按钮才能提交，或者JS
- button，按钮
textarea，文本域、多行文本
<textarea rows="10" cols="30">
<textarea style="resize:none;width=20px;height=100px;" name="爱好">
如果不写roes（行）和cols（列）则用户可以随意拖动文本域改变其大小，cols不精确。
想要精确宽高要用CSS。
select，下拉列表
<form action="">
<select name="cars" multiple> multiple，按住ctrl可多选
<option value="Volvo"></option> 空选项
<option value="volvo">Volvo</option>
<option value="saab" disabled>Saab</option> disabled不能选
<option value="fiat" selected>Fiat</option> selected默认选中
<option value="audi">Audi</option>
</select>
</form>
input 和 button 区别
button如果没写type，则会升级成 submit 提交按钮。
前者是空标签，后者不是。
input 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
button 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
4.table 标签
用于展示数据
属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
- td，table data，表数据
- tr，table row，表行
- th，table head，表标题
table案列如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style>
table{border-collapse: collapse; 去掉单元格间隙
}
</style>
</head>
<body>
<table border=1>
<thead>
<colgroup>
<col bgcolor=red width=150>
<col width=100>
<col width=100>
<col width=100>
</colgroup>
<th>序号</th><th>姓名</th><th>班级</th><th>分数</th>
</thead>
<tbody>
<tr>
<th>1</th><td>小明</td><td>一</td><td>80</td>
</tr>
<tr>
<th>2</th><td>小花</td><td>二</td><td>90</td>
</tr>
<tr>
<th>3</th><td>小星</td><td>三</td><td>100</td>
</tr>
</tr>
</tbody>
<tfoot>
<th>平均分</th><td></td><td></td><td>90</td>
</tfoot>
</table>
</body>
</html>
table常见用法
