1.iframe 標(biāo)簽
嵌套頁面
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx >qq</a>
- iframe 可以擁有一個 name，a\form 標(biāo)簽的 target 可以通過 name 指向這個 iframe。
- 現(xiàn)代前端開發(fā)中，iframe 很少用。
- ”#“這代表的就是鏈接的一種占位符！通常用于頁面設(shè)計時期的假鏈接！也就相當(dāng)于一個空鏈接！
- frameborder="0"，去邊框，由于邊框太丑請習(xí)慣性加上。
- src直支持相對路徑，src="./index2.html"。
- sandbox="allow-forms"：
- "" 啟用所有限制條件。
- allow-same-origin 允許將內(nèi)容作為普通來源對待。如果未使用該關(guān)鍵字，嵌入的內(nèi)容將被視為一個獨立的源。
- allow-top-navigation 嵌入的頁面的上下文可以導(dǎo)航（加載）內(nèi)容到頂級的瀏覽上下文環(huán)境（browsing context）。如果未使用該關(guān)鍵字，這個操作將不可用。
- allow-forms 允許表單提交。
- allow-scripts 允許腳本執(zhí)行。
2.a 標(biāo)簽
跳轉(zhuǎn)頁面（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，瀏覽器以下載的形式接受請求，而不是在網(wǎng)頁上展示
href
瀏覽器會根據(jù)當(dāng)前協(xié)議，補全無協(xié)議鏈接的協(xié)議
href="" 當(dāng)前頁面刷新
href="#" 錨點，表示頁面內(nèi)跳轉(zhuǎn)，不會發(fā)起請求，頁面滾動到頂部
href="javascript: alert(1);"
href="javascript:;"
偽協(xié)議：可以在用戶點擊 a 時執(zhí)行一段 javascript 代碼；
在地址欄輸入 javascript:alert(1) 可以在當(dāng)前頁面執(zhí)行一段代碼；
偽協(xié)議可以實現(xiàn)「點擊之后沒有任何動作的 a 標(biāo)簽」，滿足一些奇葩需求。
3.form 標(biāo)簽
跳轉(zhuǎn)頁面（HTTP POST 請求）
屬性見 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
input
- checkbox，復(fù)選框
<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默認(rèn)選中
<option value="audi">Audi</option>
</select>
</form>
input 和 button 區(qū)別
button如果沒寫type，則會升級成 submit 提交按鈕。
前者是空標(biāo)簽，后者不是。
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 標(biāo)簽
用于展示數(shù)據(jù)
屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
- td，table data，表數(shù)據(jù)
- tr，table row，表行
- th，table head，表標(biāo)題
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>分?jǐn)?shù)</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常見用法
