1. <a> 插入超鏈接
| 示例 | <a href="http://www.baidu.com" target="_blank">百度</a> |
| 屬性 | 說明 |
| href | 可使用絕對路徑或相對路徑，亦可使用錨點（頁面內跳轉） <a href="#1">jump to "here"</a> <a name="1">here</a> |
| target | 指定新頁面的打開方式，取值如下： _blank，在新標籤頁中打開 _self，在當標籤頁中打開 |
2. 分組元素
① <p> 段落，中間空行
② <div> 無實際效果
③ <blockquote> 段落，前後都縮進 ，中間空行
④ <pre> 按照編輯器內的排版格式顯示（不完全一致）
⑤ <hr> 水平分割線
⑥ <ul> 添加無序列表，用法：
<ul> <li>第一項</li> //li的value屬性可設置此項開始的編號 <li>第一項</li> <li>第一項</li> </ul>
⑦ <ol> 添加有序列表，start屬性可指定起始編號，type可指定編號形式(a, A, i, I, 1)
⑧ <dl><dt><dd> 生成說明列表，用法：
<dl> <dt>這是第一章</dt> <dd>第一章第一節</dd> <dd>第一章第二節</dd> </dl>
⑨ <figure> 插圖，用法：
<figure> <figcaption>這是一張圖片</figcaption> <img src="img.png"> </figure>
3. <table> 表格元素，用法：
<table border="1" style="width:300px;"> <caption>這裏是標題</caption> <colgroup> <col> //佔位 <col background="red;"> //第二列背景色設爲紅色 </colgroup> <tfoot> //表尾-始終在最後一行顯示 <tr> <td colspan="3">共計：1人</td> </tr> </tfoot> <tbody> //表體 <tr> <td>張三</td> <td>男</td> <td>27</td> </tr> </tbody> <thead> //表頭-始終在第一行顯示 <tr> <th rowspan="3">基本情況</th> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> <thead> </table>
4. 文檔元素，基本無顯示效果，主要表示語義以方便CSS進行樣式標記，示例：
<body> <header> 這裏放置LOGO，標題，導航等 <hgroup> <h1>這是一個大標題</h1> <h4>這是一個小標題</h4> </hgroup> <nav>這是一個導航</nav> </header> <section> 這是一個主題部分 </section> <article> <header>...</header> <section>...</section> <address>這裏放置聯繫信息</address> <footer>...</footer> </article> <aside> 這是一個註釋欄 <nav>這是註釋欄內的導航</nav> </aside> <footer> <h4>這是尾部的小標題</h4> <address>這裏放置聯繫信息</address> </footer>
5. 嵌入元素，將外部資源插入到HTML中：
① <img> 插入圖片
| 示例 | <a href="index.html"><img src="img.png" alt="風景" width="30" height="20"></a> |
| 屬性 | 說明 |
| src | 圖像的url |
| width,height | 寬度，高度 |
| ismap | 獲取點擊位置的座標，並在請求的地址後添加該座標值 |
| usemap | 創建分區響應，點擊不同區域轉到不同超鏈接 <img src="img.pne" usemap="#Map"> <map name="Map"> <area shape="rect" coords="44,33,123,102" href="www.baidu.com" target="_blank" alt="百度"> </map> |
② <iframe> 嵌入另一個文檔
| 示例 | <a href="www.baidu.com" target="in">百度</a> <iframe src="www.soso.com" width="200" height="300" name="in"></iframe> |
| 屬性 | 說明 |
| src | 初始化時顯示的頁面 |
| width,height | 寬度，高度 |
| name | 被其他標籤的target屬性引用時，使用的名稱 |
③ <embed> 嵌入插件內容
| 示例 | <embed src="視頻.swf" type="application/x-shockwave-flash" width="600" height="800"></embed> |
| 屬性 | 說明 |
| src | 視頻源 |
| type | 視頻類型，自動識別後綴因而可省略 |
| width,height | 寬度，高度 |
④ <progress> 進度條，IE10及以上支持，一般通過JS控制進度動態效果
| 示例 | <progress value="30" max="100"></progress> |
| 屬性 | 說明 |
| value | 進度值 |
| max | 進度最大值 |
⑤ <meter> 類似於進度條，可設置警示範圍，IE不支持
| 示例 | <meter value="90" min="10" max="100" low="30" high="80"></meter> |
| 屬性 | 說明 |
| value | 進度值 |
| min | 最小值，value小於等於該值不顯示 |
| max | 最大值 |
| low | 下闕值，小於該值進度條變黃色 |
| high | 上闕值，大於該值進度條變黃色 |