HTML 語法和常用任務備忘單
在使用 HTML 時,方便地記住如何正確使用 HTML 標籤以及如何應用它們會非常有幫助。MDN 為您提供了詳盡的 HTML 參考文件,以及一套深入的教學 HTML 指南。然而,在很多情況下,我們只需要一些快速的提示。這正是備忘單的目的,為您提供一些常見用法的快速、準確、可直接使用的程式碼片段。
注意: HTML 標籤必須根據其語義值使用,而不是外觀。使用 CSS 總是可以徹底改變給定標籤的外觀和感覺,因此,在使用 HTML 時,請花時間關注其含義而非外觀。
內聯元素
“元素”是網頁的單個組成部分。有些元素很大,像容器一樣包含其他較小的元素。有些元素很小,被“巢狀”在較大的元素中。預設情況下,“內聯元素”會彼此相鄰顯示在網頁上。它們只佔用頁面上所需的寬度,像句子中的單詞或並排放在一排書架上的書一樣水平排列。所有內聯元素都可以放置在 <body> 元素內。
| 用法 | Element | 示例 |
|---|---|---|
| 連結 | <a> |
html |
| 影像 | <img> |
html |
| 內聯容器 | <span> |
html |
| 強調文字 | <em> |
html |
| 斜體文字 | <i> |
html |
| 粗體文字 | <b> |
html |
| 重要文字 | <strong> |
html |
| 高亮文字 | <mark> |
html |
| 刪除線文字 | <s> |
html |
| 下標 | <sub> |
html |
| 小文字 | <small> |
html |
| 地址 | <address> |
html |
| 文字引用 | <cite> |
html |
| 上標 | <sup> |
html |
| 內聯引用 | <q> |
html |
| 換行符 | <br> |
html |
| 可能的換行符 | <wbr> |
html |
| Date | <time> |
html |
| 程式碼格式 | <code> |
html |
| 音訊 | <audio> |
html |
| 影片 | <video> |
html |
塊級元素
另一方面,“塊級元素”會佔據網頁的全部寬度。它們也會佔據網頁的整行;它們不會並排排列。相反,它們像論文中的段落或塔中的積木一樣堆疊。
注意: 因為這個備忘單僅限於代表特定結構或具有特殊語義的少數元素,所以 <div> 元素故意未包含在內——因為 div 元素本身不代表任何內容,也沒有任何特殊的語義。
| 用法 | Element | 示例 |
|---|---|---|
| 一個簡單的段落 | <p> |
html |
| 擴充套件引用 | <blockquote> |
html |
| 附加資訊 | <details> |
html |
| 無序列表 | <ul> |
html |
| 有序列表 | <ol> |
html |
| 定義列表 | <dl> |
html |
| 水平分割線 | <hr> |
html |
| 文字標題 | <h1>-<h6> |
html |