標籤：html
html頁面標籤元素總結
前言
學習python的flask架構對於有丁點C功底的人來說代碼問題研究研究還能勉強跟得上腳步，但是html前端就蒙圈了，完全小菜比一枚。故此總結下我目前接觸過的標籤以及經常需要用的小功能(例如下拉框，單選框等等)。本篇僅從為w3c官網http://www.w3school.com.cn/收藏以供自己日後方便使用。
PART I ：常用的html標籤
1.1 基礎篇
| 標籤 | 描述 |
| <!DOCTYPE> | 定義文件類型 |
| <!--XXX--> | 定義注釋 |
| <html> | 定義html文檔 |
| <title> | 定義文檔的標題 |
| <body> | 定義文檔主題 |
| <hr> | 定義水平線 |
| <br> | 定義簡單的折行 |
1.2 表單篇
| 標籤 | 描述 |
| <form> |
定義供使用者輸入的HTML表單 |
| <label> | 定義input元素的標註 |
| <input> | 定義輸入的控制項 |
| <button> | 定義按鈕 |
| <select> | 定義挑選清單(下拉式清單),基本與<option>配合使用 |
| <option> | 定義挑選清單中的選項 |
| <textarea> | 定義多行的文本輸入控制項 |
1.3 表格篇
| 標籤 | 描述 |
|---|---|
| <table> | 定義表格 |
| <caption> | 定義表格標題。 |
| <th> | 定義表格中的表頭儲存格。 |
| <tr> | 定義表格中的行。 |
| <td> | 定義表格中的單元。 |
| <thead> | 定義表格中的表頭內容。 |
| <tbody> | 定義表格中的主體內容。 |
| <tfoot> | 定義表格中的表注內容（腳註）。 |
1.4 架構篇
| 標籤 | 描述 |
| <frame> | 定義框架組的視窗或架構 |
| <frameset> | 定義框架組 |
| <iframe> | 定義內聯架構 |
1.5 其他標籤
| 映像、音視頻類 | |
| <img> | 定義映像 |
| <map> | 定義影像地圖 |
| <audio> | 定義聲音內容 |
| <video> | 定義視頻 |
| 連結類 | |
| <a> |
定義錨<a href=‘連結地址‘>content</a> |
| <link> | 定義文檔與外部資源的關係 |
| 列表類 | |
| <ul> | 定義無序列表 |
| <ol> | 定義有序列表 |
| <li> | 定義清單項目 |
| 樣式/節 |
|
| <div> | 定義文檔中的節 |
| <span> | 定義文檔中的節 |
| 編程類 | |
| <script> | 定義用戶端指令碼 |
PART II： 常用的html功能實現
功能1：下拉式功能表
實現代碼如下：
<div><label>角色：</label><select name=‘role‘ id=‘role‘><option value="admin">管理員</option><option value="user">普通使用者</option></select></div> <!--role-->
功能：
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/8C/1B/wKiom1hiEeLyaWuIAAAiS7ekoUg378.png" title="xlk.png" alt="wKiom1hiEeLyaWuIAAAiS7ekoUg378.png" />
功能2：單選框(主要用於男女性別選擇、鎖定與否選擇等)
核心：記得單選框要設定value的值
實現代碼如下：
<td>status<input type=‘radio‘ name=‘status‘ value=‘unlock‘>unlock<input type=‘radio‘ name=‘status‘ value=‘lock‘>lock</td>
功能實現：
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/8C/18/wKioL1hiEw6TDOusAAAgSLzf8Vg756.png" title="dxk.png" alt="wKioL1hiEw6TDOusAAAgSLzf8Vg756.png" />
本文出自 “11931192” 部落格，謝絕轉載！
html頁面標籤元素總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
