HTML - 基本標籤

上一個

下一個

HTML 標籤是用於定義文件結構的 HTML 基本元素。這些是包含在尖括號（< 和 >）中的字母或單詞。

通常，大多數的HTML 標記包含一個開始標記和一個結束標記。每個標記有不同的含義，瀏覽器會讀取這些標記，並根據標記將包含在標記中的內容相應地顯示出來。

例如，如果我們在段落 (<p></p>) 標記中包裝任何文字，瀏覽器會將它顯示為單獨的一個段落。本教程中，我們將討論所有 HTML 中的基本標記。

標題標記

標題標記用於定義文件的標題。可以為標題使用不同的尺寸。HTML 還具有六級標題，使用元素 <h1>, <h2>, <h3>, <h4>, <h5>, 以及 <h6>。在顯示任何標題時，瀏覽器會在該標題的前後各新增一行。

示例

以下 HTML 程式碼演示了標題的各個級別

<!DOCTYPE html>
<html>
<head>
   <title>Heading Example</title>
</head>
<body>
   <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>
</body>
</html>

段落標記

<p> 標記提供了一種將文字組織成不同段落的方法。每一段文字應放在開始標記 <p> 和結束標記 </p> 之間。

示例

以下示例演示了段落 (<p>) 標記的使用，此處我們定義了 3 個段落 −

<!DOCTYPE html>
<html>
<head>
   <title>Paragraph Example</title>
</head>
<body>
   <p>Here is a first paragraph of text.</p>
   <p>Here is a second paragraph of text.</p>
   <p>Here is a third paragraph of text.</p>
</body>
</html>

換行標記

無論何時您使用 <br /> 元素，緊隨其後的任何內容都從下一行開始。此標記是空元素的一個示例，您不需要開始標記和結束標記，因為在它們之間沒有內容。

<br /> 標記在字元 br 和正斜槓 / 之間有一個空格。如果您省略此空格，較舊的瀏覽器將難以呈現換行符，而如果您省略正斜槓字元而僅使用 <br>，在 XHTML 中則無效。

示例

以下示例演示了中斷 (<br />) 標記的使用 −

<!DOCTYPE html>
<html>
<head>
   <title>Line Break Example</title>
</head>
<body>
   <p>Hello<br /> You delivered your assignment on time.<br />
      Thanks<br /> Mahnaz</p>
</body>
</html>

居中標記

<center> 標記將文字、影像或其他 HTML 元素對齊到網頁的中間。

注意：<center> 標記在 HTML5 中已棄用。您可以使用 CSS text-align 屬性將元素居中。

示例

以下示例演示了<center> 標記的使用。此處，我們在居中對齊方式中顯示第二段落

<!DOCTYPE html>
<html>
<head>
   <title>Centering Content Example</title>
</head>
<body>
   <p>This text is not in the center.</p>
   <center>
      <p>This text is in the center.</p>
   </center>
</body>
</html>

水平規則標記

水平規則 (<hr>) 標記顯示一條水平線。水平線在視覺上將文件的各個部分分隔開來。<hr> 標記從文件中的當前位置到右頁邊距建立一個線條，並相應地中斷線條。

示例

以下示例在兩個段落之間繪製了一條水平線 −

<!DOCTYPE html>
<html>
<head>
   <title>Horizontal Line Example</title>
</head>
<body>
   <p>This is paragraph one and should be on top</p>
   <hr />
   <p>This is paragraph two and should be at bottom</p>
</body>
</html>

在執行上述示例時，您會看到一條直線將兩個段落分開。

<hr /> 標記是空元素的一個示例，您不需要開始標記和結束標記，因為在它們之間沒有內容。

<hr /> 元素在字元 hr 和正斜槓之間有一個空格。如果您省略此空格，較舊的瀏覽器將難以呈現水平線，而如果您省略正斜槓字元而僅使用 <hr>，在 XHTML 中則無效。

保留格式標記

<pre> 標籤用於保留格式。每當您想要在網頁上以與在 HTML 文件中編寫時完全相同的格式顯示內容時，都可以使用 <pre> 標籤。它保留了原始碼的格式，包括換行和縮排。

示例

以下示例演示瞭如何使用 <pre> 標籤。在此，我們正在顯示一段程式碼，其格式應與在 <pre> 標籤內編寫的內容完全相同 -

<!DOCTYPE html>
<html>
<head>
   <title>Preserve Formatting Example</title>
</head>
<body>
   <pre>
      function testFunction( strText ){
         alert (strText)
      }
   </pre>
</body>
</html>

function testFunction( strText ){
 alert (strText)
}

不換行空格

不換行空格可防止自動換行，並且使用   實體顯示。

假設您想使用短語 “憤怒的男人 12”。 在這裡，您不希望瀏覽器將“憤怒”和“男人”分成兩行 -

此技術的示例出現在電影“憤怒的男人 12”中。

在您不希望客戶端瀏覽器中斷文字的情況下，您應該使用不換行空格實體   而不是普通空格。例如，在段落中對 “憤怒的男人 12” 進行編碼時，您應該使用類似於以下程式碼的內容 -

示例

以下示例演示瞭如何使用   實體 -

<!DOCTYPE html>
<html>
<head>
   <title>Nonbreaking Spaces Example</title>
</head>
<body>
   <p>An example of this technique appears in the movie "12 Angry Men."</p>
   <p>An example of this technique appears in the movie "12&nbsp;&nbsp;&nbsp;Angry Men."</p>
</body>
</html>

執行以上示例後，它將兩次顯示以下句子：此技術的示例出現在電影“憤怒的男人 12”中。 由於我們在 12 和 men 之間添加了 3 個 “ ” 字元，因此第二次，您可以看到三個空格。

列表標記

<ul> 標記和 <ol> 標記建立無序列表和有序列表，並且若要顯示列表項，則使用 <li> 標記。

示例

以下示例演示瞭如何使用列表標記 -

<!DOCTYPE html>
<html>
<head>
   <title>Listing Tags Example</title>
</head>
<body>
  <h2>Unordered list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <h2>Ordered list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>  
</body>
</html>

列印頁面

下一步