在本課程中，我們將探討不同的 HTML 標(biāo)簽、它們的用途以及如何在 Web 應(yīng)用程序中有效地使用它們。我們將討論一些最常用的 HTML 標(biāo)簽及其相應(yīng)的屬性。

段落標(biāo)簽

段落可能是最常用的 HTML 元素，由

定義。它是一個(gè)塊級(jí)元素，這意味著每個(gè)段落都將另起一行。

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

沒有

元素，您的瀏覽器將自動(dòng)忽略多余的空格并將文本呈現(xiàn)在單行中。

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

訪問代碼演示 ↗

您需要使用
元素，如果您想在單個(gè)段落元素內(nèi)換行。這是不需要結(jié)束標(biāo)記的 HTML 元素之一。

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

訪問代碼演示 ↗

標(biāo)題標(biāo)簽

寫文章時(shí)，最好在段落之間添加標(biāo)題，以使文章更有條理。 HTML 文檔的工作方式相同。 HTML 提供了從

到

的六種不同級(jí)別的標(biāo)題。到

.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

訪問代碼演示 ↗

在大多數(shù)情況下，

到

創(chuàng)建網(wǎng)頁(yè)時(shí)應(yīng)足夠，一般情況下，我們建議不要使用太小的標(biāo)題，例如

等。和

，因?yàn)樗鼈儠?huì)使您的網(wǎng)頁(yè)結(jié)構(gòu)變得不必要的復(fù)雜。

;是頂部標(biāo)題，它在網(wǎng)頁(yè)中起著特殊的作用。應(yīng)該只有一個(gè)

每個(gè) HTML 文檔中的元素，它應(yīng)該總結(jié)整個(gè)頁(yè)面。

格式化元素

有時(shí)，您可能想通過給特定的單詞和段落賦予不同的格式來強(qiáng)調(diào)它們，例如使它們顯示為粗體、斜體或下劃線。 HTML 提供了可以幫助實(shí)現(xiàn)此效果的格式化元素。

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

訪問代碼演示 ↗

• ; 元素具有相同的效果。它們都使所包含的文本顯示為粗體。

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

盡管它們具有相同的外觀，如 CodePen 演示所示，但它們?yōu)闉g覽器和搜索引擎提供不同的用途。

僅使文本加粗而不添加任何特定含義，而 表示所附文本非常重要。

• ;和元素相似。他們都將文本變成斜體形式。 不表示任何特殊含義，而 定義強(qiáng)調(diào)文本，以斜體形式顯示。

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

• ;元素定義突出顯示/標(biāo)記的文本。

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

• ;元素定義小文本。

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

• ;元素指示已刪除的文本，通過在所包含的文本中添加刪除線來顯示。另一方面，元素用于指示插入的文本，顯示為帶下劃線的文本。

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

• _{;和 ^{elements 分別定義下標(biāo)和上標(biāo)。}}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

如何向 HTML 元素添加樣式

有時(shí)，這些格式化元素的默認(rèn)表示形式不足以表達(dá)其預(yù)期含義。

例如，元素用刪除線表示刪除的文本，這樣很容易理解。然而，元素使用下劃線來表示插入，這可能會(huì)很混亂。

要改善這些元素的默認(rèn)外觀，您可以使用如下樣式屬性：

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

默認(rèn)情況下，鏈接會(huì)帶有下劃線并顯示為藍(lán)色，當(dāng)您點(diǎn)擊它時(shí)，您將被帶到 href 屬性指定的目的地。

為了進(jìn)行演示，請(qǐng)?jiān)诠ぷ髂夸浿袆?chuàng)建一個(gè) HTML 元素簡(jiǎn)介.html 文件。

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

然后，在您的 index.html 文件中添加一個(gè)指向目的地的鏈接。

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

點(diǎn)擊鏈接后，您將被帶到HTML 元素簡(jiǎn)介.html文檔。

您還可以在HTML 元素簡(jiǎn)介.html中添加返回鏈接以返回index.html。

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

這些相互關(guān)聯(lián)的鏈接形成了我們今天看到的互聯(lián)網(wǎng)。

默認(rèn)情況下，鏈接的目的地將在同一窗口中打開。您可以通過設(shè)置目標(biāo)屬性來更改該行為。例如，target="_blank" 在新選項(xiàng)卡中打開目的地。

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

訪問代碼演示 ↗

您可能注意到的另一件事是鏈接最初顯示為藍(lán)色。當(dāng)你點(diǎn)擊它的那一刻，它就會(huì)變成紅色。之后，鏈接會(huì)變成紫色，表示該鏈接之前已被訪問過。

此行為與稱為偽類的概念有關(guān)，它允許您在不同條件下為元素定義不同的樣式。當(dāng)我們更多地討論 CSS 時(shí)，我們將再次討論這個(gè)話題。

列表

訪問代碼演示 ↗

HTML 中存在三種不同類型的列表：有序列表、無序列表和描述列表。

有序列表是用

定義的元素，并且每個(gè)單獨(dú)的列表項(xiàng)都是使用
1. .
   創(chuàng)建的

     <p>This is the first paragraph.</p>
     <p>This is the second paragraph, which starts on a new line.</p>
   
   

   無序列表是用

   定義的。元素。
   

   <!-- prettier-ignore -->
   
     This is the first paragraph.
     This is the second paragraph, which starts on a new line.
   
   

   描述列表有點(diǎn)復(fù)雜，因?yàn)樗鼈冇身?xiàng)目列表和每個(gè)項(xiàng)目的描述組成。描述列表由

   定義。元素，每個(gè)列表項(xiàng)用

   定義，每個(gè)描述語句用

   .
   定義

     <p>
       This is the first paragraph.<br>
       This is the second paragraph, which starts on a new line.
     </p>
   
   

   布局元素

   到目前為止，我們只討論了用于顯示內(nèi)容的元素，例如文本、列表和圖像。事實(shí)上，HTML 中還有另一類元素負(fù)責(zé)組織這些元素。

   它們并不是為了顯示任何特定類型的內(nèi)容而設(shè)計(jì)的，而是充當(dāng)其他元素的容器。當(dāng)與 CSS 結(jié)合時(shí)，他們可以為網(wǎng)頁(yè)創(chuàng)建不同的布局。下面的列表顯示了一些常用的布局元素。

   • ：定義文檔的標(biāo)題部分，通常位于網(wǎng)頁(yè)頂部。
   • ：定義文檔的一個(gè)部分。
   • ：定義網(wǎng)頁(yè)中的獨(dú)立部分。
   • ：位于網(wǎng)頁(yè)底部的頁(yè)腳部分。
   • ：創(chuàng)建用戶可以打開和關(guān)閉的選項(xiàng)卡。
   • ：為創(chuàng)建標(biāo)題。元素。它應(yīng)該放在
     里面。元素。

   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
   

   訪問代碼演示 ↗

   • ：當(dāng)然還有最重要的布局元素，

     ，它代表分割。它是一個(gè)通用元素，在網(wǎng)頁(yè)中創(chuàng)建一個(gè)塊，不用于任何特殊目的。

     這是最常用的布局元素，因?yàn)閷?duì)于現(xiàn)實(shí)生活中的網(wǎng)頁(yè)，大多數(shù)部分和塊與上述任何語義元素都不匹配。因此，許多開發(fā)人員喜歡使用

     。用于創(chuàng)建頁(yè)面布局。
     

       <p>This is the first paragraph.</p>
       <p>This is the second paragraph, which starts on a new line.</p>
     
     

     

     請(qǐng)注意，

     元素總是從新行開始，并占據(jù)盡可能多的水平空間。另一方面，。元素不會(huì)另起一行，只占用必要的空間。

     這其實(shí)就是塊元素和行內(nèi)元素的區(qū)別。

     到目前為止我們提到的大多數(shù)元素都是塊元素，例如

     、

     、

     等到

     、

   • 等。如果沒有定義額外的樣式，它們將自動(dòng)占用盡可能多的水平空間。

     ; element 是內(nèi)聯(lián)元素的一個(gè)示例。當(dāng)與其他元素并排放置時(shí)，它僅占用必要的空間。并且 width 和 height 屬性不會(huì)對(duì)其產(chǎn)生影響。

     HTML 中還有許多其他元素，包括塊元素和內(nèi)聯(lián)元素。在一堂課中不可能討論所有這些內(nèi)容，但如果您有興趣，這里有來自 W3Schools 的所有 HTML 元素的參考。

     進(jìn)一步閱讀

     • 如何使用 CSS 選擇器
     • 什么是語義 HTML 代碼？
     • 如何在 CSS 中將 Div 居中