搜尋

首頁 >web前端 >css教學 >HTML 元素簡介

HTML 元素簡介

Linda Hamilton
Linda Hamilton原創
2025-01-14 06:47:45122瀏覽

在本課程中，我們將探討不同的 HTML 標籤、它們的用途以及如何在 Web 應用程式中有效地使用它們。我們將討論一些最常用的 HTML 標籤及其對應的屬性。

段落標籤

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

定義。它是一個區塊級元素，這意味著每個段落都將另起一行。 
  <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.

訪問程式碼示範 ↗

您需要使用
元素，如果您想在單一段落元素內換行。這是不需要結束標記的 HTML 元素之一。 

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

訪問程式碼示範 ↗

標題標籤

寫文章時，最好在段落之間加上標題，以使文章更有條理。 HTML 文件的工作方式相同。 HTML 提供了從

到

的六種不同層級的標題。到

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

訪問程式碼示範 ↗

在大多數情況下，

到

創建網頁時應足夠，一般情況下，我們建議不要使用太小的標題，例如

等。和
，因為它們會使您的網頁結構變得不必要的複雜。

;是頂部標題，它在網頁中扮演特殊的角色。應該只有一個

每個 HTML 文件中的元素，它應該總結整個頁面。

格式化元素

有時，您可能想透過給特定的單字和段落不同的格式來強調它們，例如使它們顯示為粗體、斜體或底線。 HTML 提供了可以幫助實現此效果的格式化元素。 

<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 演示所示，但它們為瀏覽器和搜尋引擎提供不同的用途。

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

  • ;和元素相似。他們都將文本變成斜體形式。 不表示任何特殊意義，而 定義強調文本，以斜體顯示。 
  <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.
  • ;元素定義小文字。 
  <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 分別定義下標和上標。 
<b></b>
<strong></strong>

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

<mark></mark>

<small></small>

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

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

如何為 HTML 元素新增樣式

有時，這些格式化元素的預設表示形式不足以表達其預期意義。

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

要改善這些元素的預設外觀，您可以使用以下樣式屬性：

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

預設情況下，連結會帶有底線並顯示為藍色，當您點擊它時，您將被帶到 href 屬性指定的目的地。

為了進行演示，請在工作目錄中建立一個 HTML 元素簡介.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 檔案中新增一個指向目的地的連結。 

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

HTML 元素簡介

點擊連結後，您將被帶到HTML 元素簡介.html文件。

HTML 元素簡介

您也可以在HTML 元素簡介.html中新增返回連結以返回index.html。 

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

go back HTML 元素簡介

這些相互關聯的連結形成了我們今天看到的網路。

預設情況下，連結的目的地將在同一視窗中開啟。您可以透過設定目標屬性來變更該行為。例如，target="_blank" 在新分頁中開啟目的地。 

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

訪問程式碼示範 ↗

您可能注意到的另一件事是連結最初顯示為藍色。當你點擊它的那一刻，它就會變成紅色。之後，連結會變成紫色，表示該連結之前已被訪問過。

此行為與稱為偽類的概念有關，它允許您在不同條件下為元素定義不同的樣式。當我們更多地討論 CSS 時，我們將再次討論這個主題。

清單

訪問程式碼示範 ↗

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

有序列表是用

    定義的元素，並且每個單獨的列表項目都是使用
  1. .
    創建的 
      <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.

    描述清單有點複雜，因為它們由項目清單和每個項目的描述組成。描述列表由

    定義。元素，每個列表項以
    定義，每個描述語句以
    .
    定義 
      <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

    佈局元素

    到目前為止，我們只討論了用於顯示內容的元素，例如文字、清單和圖像。事實上，HTML 中還有另一類元素負責組織這些元素。

    它們並不是為了顯示任何特定類型的內容而設計的，而是充當其他元素的容器。當與 CSS 結合時，他們可以為網頁創建不同的佈局。下面的清單顯示了一些常用的佈局元素。

    • ：定義文件的標題部分，通常位於網頁頂部。
    • ：定義文件的一個部分。
    • ：定義網頁中的獨立部分。
    • ：位於網頁底部的頁尾部分。
    • ：建立使用者可以開啟和關閉的選項卡。
    • ：為建立標題。元素。它應該放在
      裡面。元素。 
    <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

    訪問程式碼示範 ↗

    • ：當然還有最重要的佈局元素，
      ，它代表分割。它是一個通用元素，在網頁中建立一個區塊，不用於任何特殊目的。

      這是最常用的佈局元素，因為對於現實生活中的網頁，大多數部分和區塊與上述任何語義元素都不匹配。因此，許多開發人員喜歡使用

      。用於建立頁面佈局。 
        <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

      p vs a

      請注意，

      元素總是從新行開始，並佔據盡可能多的水平空間。另一方面，。元素不會另起一行，只佔用必要的空間。

      這其實就是塊元素和行內元素的差別。

      到目前為止我們提到的元素大多是區塊元素，例如

      、

      、

      等到

      、
    • 等。如果沒有定義額外的樣式，它們將自動佔用盡可能多的水平空間。

      ; element 是內嵌元素的一個例子。當與其他元素並排放置時，它僅佔用必要的空間。且 width 和 height 屬性不會對其產生影響。

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

      進一步閱讀

      • 如何使用 CSS 選擇器
      • 什麼是語意 HTML 程式碼？
      • 如何在 CSS 中將 Div 置中

以上是HTML 元素簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html express define if for while require Directory break using class Attribute Generic default this href display ul li Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：使用 CSS 使 div 居中的七種最快方法下一篇：使用 CSS 使 div 居中的七種最快方法

相關文章

看更多