本文將介紹以下五種標(biāo)簽的常見用法：
- iframe標(biāo)簽
- a標(biāo)簽
- form標(biāo)簽
- input/button標(biāo)簽
- table標(biāo)簽
1. iframe標(biāo)簽
- 作用：在當(dāng)前頁面嵌套一個頁面
- 格式：
<iframe src="https://isujin.com/" frameborder="0"></iframe>
- 技巧：配合a標(biāo)簽可以實(shí)現(xiàn)在本頁打開另一個頁面的功能
<iframe name=xxx src="https://isujin.com/" frameborder="0"></iframe>
<a target=xxx >素錦</a>
2. a標(biāo)簽：
- 作用： 可以創(chuàng)建一個到其他網(wǎng)頁、文件、同一頁面內(nèi)的位置、電子郵件地址或任何其他URL的超鏈接。發(fā)起GET請求
- 格式：
<a >慕課</a>
- 方法：
1). target實(shí)現(xiàn)在不同方式打開URL鏈接
<a target="_blank">新建頁面打開</a>
<a target="_self">當(dāng)前頁面打開</a>
<a target="_parent">父級頁面打開</a>
<a target="_top">頂層頁面打開</a>
2). download實(shí)現(xiàn)下載URL鏈接
<a download>下載</a>
實(shí)現(xiàn)下載的方式有三種：網(wǎng)頁中下載文件的相關(guān)總結(jié)
3). href打開超鏈接指向的URL或URL片段。
<a >下載</a>
// 以HTTPS協(xié)議打開imooc.com
<a >下載</a>
// 當(dāng)前頁面是什么協(xié)議就用什么協(xié)議打開imooc.com
<a href="imooc.com/">下載</a>
// 會跳到當(dāng)前目錄/imooc.com
<a href="#imooc/">下載</a>
// 會跳到當(dāng)前頁面中的imooc錨點(diǎn)，不發(fā)起請求
<a href="?name=imooc">下載</a>
// 會跳到當(dāng)前目錄/?name=imooc
<a href="javascript:;">下載</a>
// 實(shí)現(xiàn)一個點(diǎn)擊之后什么也不做的按鈕
<a href="javascript:alerte(1);">下載</a>
// 執(zhí)行JS代碼 一個彈窗
4). 技巧：
<a href="href="#>下載</a>
<a href="href="#top;>下載</a>
// 跳轉(zhuǎn)到頁面頂部
3. form標(biāo)簽：
- 作用：表示了文檔中的一個區(qū)域，這個區(qū)域包含有交互控制元件，用來向web服務(wù)器提交信息。發(fā)起POST請求。
- 格式：
<form action="users" method="POST">
<!--action是處理form信息的程序所在的URL-->
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
<!--提交必須要有，不然不能提交（回車也不行）
如果只有button(沒有type)，會自動升級成submit -->
</form>
-
方法：
- 與<a>標(biāo)簽相同的Target用法
技巧：
<form action="users" method="POST">
<!--method可以有GET跟POST
GET模式下會將參數(shù)當(dāng)作查詢參數(shù)提交給服務(wù)器
POST模式下會將參數(shù)當(dāng)作第四部分提交給服務(wù)器
通過action="users/？Name=xxx"可以實(shí)現(xiàn)POST模式也有查詢參數(shù)
但是沒有方法讓GET模式有第四部分-->
4. Input/button標(biāo)簽
- 作用：
- Input用于為基于Web的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù)。
- button表示一個可點(diǎn)擊的按鈕，可以用在表單或文檔其它需要使用簡單標(biāo)準(zhǔn)按鈕的地方。 button可以有子元素，input不能有。
- 格式：
<input type="text" name="username">
<button name="button">Click me</button>
-
方法：
1). 與<lable>一起實(shí)現(xiàn)文字與選框的關(guān)聯(lián)
<!--方法一-->
<label>用戶名<input type="text" name="username"></label>
<!--方法二-->
<label for="name">用戶名</label><input type="text" name="username" id="name">
2). 用checkbox實(shí)現(xiàn)多選框，value的值會被提交
今晚吃什么？
<label><input type="checkbox" name="dinner" value="Dumplings">餃子</label>
<label><input type="checkbox" name="dinner" value="noodles">面條</label>
3). 用radio實(shí)現(xiàn)單選框，需要有相同的name才能單選，value的值會被提交
明早吃啥子？
<label><input type="radio" name="breakfast" value="Fritters">油條</label>
<label><input type="radio" name="breakfast" value="Rice noodle">米線</label>
5. table標(biāo)簽
- 作用：用來表示表格數(shù)據(jù) — 即通過二維數(shù)據(jù)表表示的信息。
- 格式及方法：
<table border="1">
<!--colgroup指定背景及寬度-->
<colgroup>
<col width=100>
<col bgcolor=green width=200>
<col width=100>
</colgroup>
<thead>
<tr>
<th>姓名</th><th>班級</th><th>分?jǐn)?shù)</th>
</tr>
</thead>
<tbody>
<tr>
<td>小米</td><td>C</td><td>80</td>
</tr>
<tr>
<td>小華</td><td>C</td><td>82</td>
</tr>
<tr>
<td>小蘋</td><td>A</td><td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>備注</th><td></td><td></td>
</tr>
</tfoot>
</table>
