HTML 語法和常用任務備忘單

在使用 HTML 時,方便地記住如何正確使用 HTML 標籤以及如何應用它們會非常有幫助。MDN 為您提供了詳盡的 HTML 參考文件,以及一套深入的教學 HTML 指南。然而,在很多情況下,我們只需要一些快速的提示。這正是備忘單的目的,為您提供一些常見用法的快速、準確、可直接使用的程式碼片段。

注意: HTML 標籤必須根據其語義值使用,而不是外觀。使用 CSS 總是可以徹底改變給定標籤的外觀和感覺,因此,在使用 HTML 時,請花時間關注其含義而非外觀。

內聯元素

“元素”是網頁的單個組成部分。有些元素很大,像容器一樣包含其他較小的元素。有些元素很小,被“巢狀”在較大的元素中。預設情況下,“內聯元素”會彼此相鄰顯示在網頁上。它們只佔用頁面上所需的寬度,像句子中的單詞或並排放在一排書架上的書一樣水平排列。所有內聯元素都可以放置在 <body> 元素內。

內聯元素:用法和示例
用法 Element 示例
連結 <a>
html
<a href="https://example.org">
A link to example.org</a>.
影像 <img>
html
<img src="beast.png" width="50" />
內聯容器 <span>
html
Used to group elements: for example,
to <span style="color:blue">style
them</span>.
強調文字 <em>
html
<em>I'm posh</em>.
斜體文字 <i>
html
Mark a phrase in <i>italics</i>.
粗體文字 <b>
html
Bold <b>a word or phrase</b>.
重要文字 <strong>
html
<strong>I'm important!</strong>
高亮文字 <mark>
html
<mark>Notice me!</mark>
刪除線文字 <s>
html
<s>I'm irrelevant.</s>
下標 <sub>
html
H<sub>2</sub>O
小文字 <small>
html
Used to represent the <small>small
print </small>of a document.
地址 <address>
html
<address>Main street 67</address>
文字引用 <cite>
html
For more monsters,
see <cite>The Monster Book of Monsters</cite>.
上標 <sup>
html
x<sup>2</sup>
內聯引用 <q>
html
<q>Me?</q>, she said.
換行符 <br>
html
Line 1<br>Line 2
可能的換行符 <wbr>
html
<div style="width: 200px">
  Llanfair<wbr>pwllgwyngyll<wbr>gogerychwyrndrobwllllantysiliogogogoch.
</div>
Date <time>
html
Used to format the date. For example:
<time datetime="2020-05-24">
published on 23-05-2020</time>.
程式碼格式 <code>
html
This text is in normal format,
but <code>this text is in code
format</code>.
音訊 <audio>
html
<audio controls>
  <source src="/shared-assets/audio/t-rex-roar.mp3" type="audio/mpeg">
</audio>
        
影片 <video>
html
<video controls width="250"
  src="/shared-assets/videos/flower.webm" >
  <a href="/shared-assets/videos/flower.webm">Download WebM video</a>
</video>

塊級元素

另一方面,“塊級元素”會佔據網頁的全部寬度。它們也會佔據網頁的整行;它們不會並排排列。相反,它們像論文中的段落或塔中的積木一樣堆疊。

注意: 因為這個備忘單僅限於代表特定結構或具有特殊語義的少數元素,所以 <div> 元素故意未包含在內——因為 div 元素本身不代表任何內容,也沒有任何特殊的語義。

用法 Element 示例
一個簡單的段落 <p>
html
<p>I'm a paragraph</p>
<p>I'm another paragraph</p>
擴充套件引用 <blockquote>
html
They said:
<blockquote>The blockquote element indicates
an extended quotation.</blockquote>
附加資訊 <details>
html
<details>
  <summary>HTML Cheat Sheet</summary>
  <p>Inline elements</p>
  <p>Block elements</p>
</details>
無序列表 <ul>
html
<ul>
  <li>I'm an item</li>
  <li>I'm another item</li>
</ul>
有序列表 <ol>
html
<ol>
  <li>I'm the first item</li>
  <li>I'm the second item</li>
</ol>
定義列表 <dl>
html
<dl>
  <dt>A Term</dt>
  <dd>Definition of a term</dd>
  <dt>Another Term</dt>
  <dd>Definition of another term</dd>
</dl>
水平分割線 <hr>
html
before<hr>after
文字標題 <h1>-<h6>
html
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>