HTML5常見標籤詳解

本文將介紹以下五種標籤的常見用法：

1. iframe標籤
2. a標籤
3. form標籤
4. input/button標籤
5. table標籤

1. iframe標籤

1. 作用：在當前頁面巢狀一個頁面
2. 格式：

<iframe src="https://isujin.com/" frameborder="0"></iframe>

3. 技巧：配合a標籤可以實現在本頁開啟另一個頁面的功能

<iframe name=xxx src="https://isujin.com/" frameborder="0"></iframe>

<a target=xxx href="https://isujin.com/">素錦</a>

2. a標籤：

1. 作用： 可以建立一個到其他網頁、檔案、同一頁面內的位置、電子郵件地址或任何其他URL的超連結。發起GET請求
2. 格式：

<a href="https://www.imooc.com/">慕課</a>

3. 方法：
   1). target實現在不同方式開啟URL連結

<a href="https://www.imooc.com/" target="_blank">新建頁面開啟</a>

<a href="https://www.imooc.com/" target="_self">當前頁面開啟</a>

<a href="https://www.imooc.com/" target="_parent">父級頁面開啟</a>

<a href="https://www.imooc.com/" target="_top">頂層頁面開啟</a>

2). download實現下載URL連結

<a href="https://www.imooc.com/" download>下載</a>

實現下載的方式有三種：網頁中下載檔案的相關總結

3). href開啟超連結指向的URL或URL片段。

<a href="https://imooc.com/">下載</a>

// 以HTTPS協議開啟imooc.com

<a href="//imooc.com/">下載</a>

// 當前頁面是什麼協議就用什麼協議開啟imooc.com

<a href="imooc.com/">下載</a>

// 會跳到當前目錄/imooc.com

<a href="#imooc/">下載</a>

// 會跳到當前頁面中的imooc錨點，不發起請求

<a href="?name=imooc">下載</a>

// 會跳到當前目錄/?name=imooc

<a href="javascript:;">下載</a>

// 實現一個點選之後什麼也不做的按鈕

<a href="javascript:alerte(1);">下載</a>

// 執行JS程式碼 一個彈窗

4). 技巧：

<a href="href="#>下載</a>

<a href="href="#top;>下載</a>

// 跳轉到頁面頂部

3. form標籤：

1. 作用：表示了文件中的一個區域，這個區域包含有互動控制元件，用來向web伺服器提交資訊。發起POST請求。
2. 格式：

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

3. 方法：

   1. 與<a>標籤相同的Target用法

4. 技巧：

<form action="users" method="POST">

<!--method可以有GET跟POST

GET模式下會將引數當作查詢引數提交給伺服器

POST模式下會將引數當作第四部分提交給伺服器

通過action="users/？Name=xxx"可以實現POST模式也有查詢引數

但是沒有方法讓GET模式有第四部分-->

4. Input/button標籤

1. 作用：

• Input用於為基於Web的表單建立互動式控制元件，以便接受來自使用者的資料。
• button表示一個可點選的按鈕，可以用在表單或文件其它需要使用簡單標準按鈕的地方。 button可以有子元素，input不能有。

2. 格式：

<input type="text" name="username">

<button name="button">Click me</button>

3. 方法：

   1). 與<lable>一起實現文字與選框的關聯

<!--方法一-->

<label>使用者名稱<input type="text" name="username"></label>

<!--方法二-->

<label for="name">使用者名稱</label><input type="text" name="username" id="name">

2). 用checkbox實現多選框，value的值會被提交

今晚吃什麼？

<label><input type="checkbox" name="dinner" value="Dumplings">餃子</label>

<label><input type="checkbox" name="dinner" value="noodles">麵條</label>

3). 用radio實現單選框，需要有相同的name才能單選，value的值會被提交

明早吃啥子？

<label><input type="radio" name="breakfast" value="Fritters">油條</label>

<label><input type="radio" name="breakfast" value="Rice noodle">米線</label>

5. table標籤

1. 作用：用來表示表格資料 — 即通過二維資料表表示的資訊。
2. 格式及方法：

<table border="1">

<!--colgroup指定背景及寬度-->

<colgroup>

<col width=100>

<col bgcolor=green width=200>

<col width=100>

</colgroup>

<thead>

<tr>

<th>姓名</th><th>班級</th><th>分數</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>