與文本相關的標籤

本文介紹與文本相關的標籤。

說明分為語義標籤和非語義標籤。

YouTube Video

創建用於預覽的 CSS

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

基本文本相關標籤

<div> 標籤

1<div>This is a division of content.</div>

• <div> 標籤是一個用於在HTML中創建分區的塊級元素。

• <div> 標籤是一個沒有語意的標籤。

  關注語義化 HTML 時，可以使用有意義的標籤（如 <section>、<article>）。這有助於搜索引擎和螢幕閱讀器更好地理解頁面的內容。

• 通過與CSS和JavaScript結合，您可以控制頁面的外觀和行為。

  <div> 標籤用於將頁面上的內容組合為一個塊級元素。它主要與 CSS 和 JavaScript 結合使用，以調整頁面佈局、樣式以及操控元素。

<p> 標籤

1<p>This is a paragraph of text.</p>

• <p> 標籤是一個用於定義 HTML 段落的元素。<p> 代表一個段落，主要用於分組和顯示文本。它通過在視覺上分開文本區塊來幫助內容更易於閱讀。
• 您不能在 <p> 標籤中放置其他塊級元素，如另一個 <p> 標籤或 <div> 標籤。這是 HTML 規範所禁止的。如果您這樣做，瀏覽器將自動關閉標籤，而且顯示不會正確。

<a> 標籤

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• <a> 標籤用於創建連結。

  <a> 標籤用於創建至其他頁面、外部網站或檔案的連結。href 屬性用於指定連結的目的地。

• 它可以用於文本或圖像連結，使用 target="_blank" 會在新標籤頁中打開連結。

• target 屬性用於指定鏈接目標的顯示方式。

  • _self（默認）：在當前窗口或標籤頁中打開鏈接。
  • _blank：在新窗口或標籤頁中打開鏈接。
  • _parent：在父框架中打開鏈接。
  • _top：在整個窗口中打開鏈接，忽略任何框架。

• title 屬性用於在連結上顯示工具提示。當使用者將游標懸停在連結上時，將顯示指定的標題。

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• <a> 標籤也用於跳轉到同一頁面內的特定位置。要實現這一點，您需要在目標元素上設置一個 id 屬性，並在連結的 href 屬性中使用此 id。

<span> 標籤

1Here is some <span style="color: red;">highlighted text

• <span> 標籤是一個內聯元素。

  <span> 標籤是一個內聯元素，因此在文本、鏈接、圖片或其他內聯元素之間使用時不會換行。它自然地融入頁面的流動中。

• 您可以部分應用特定樣式。

  當您想要只對文檔的一部分應用樣式時，可以使用 <span> 標籤來分配 CSS 類或 ID 並對特定範圍應用樣式。

• <span> 標籤是一個非語義元素。

  由於 <span> 標籤沒有特定的含義或結構作用，它純粹用於樣式設計或腳本目的。當需要語義強調時，使用像 <strong> 或 <em> 這樣的語義標籤更為合適，這些標籤將在後面介紹。

<br> 標籤

1Here is some text with a <br> line break.

• <br> 標籤是一個內聯元素。

  由於 <br> 標籤是一個內聯元素，它不會佔據整個區塊，並且在放置的位置創建文本換行。雖然 <p> 標籤在上下添加邊距以分隔段落，<br> 標籤創建換行而不添加任何邊距。

• 這是一個自閉合標籤，因此不需要閉合標籤 (</br>)。

• 最好避免過度使用，應使用 <p> 標籤或 CSS 進行段落分隔或佈局調整。

  在將文本組織成段落時，使用 <p> 標籤更為合適。同樣建議使用 CSS 進行佈局調整。例如，使用 CSS 中的 white-space 屬性可以按其顯示文本中的換行和空格。

<hr> 標籤

1This is some text.<hr>This is another section of text.

• <hr> 標籤是一個區塊級元素。

  <hr> 標籤用於插入水平線以視覺上分隔內容部分。它還可以用於表示主題的中斷，根據上下文賦予其意義。

• 它是一個自閉合標籤，因此不需要閉合標籤 (</hr>)。

• 您可以使用 CSS 自定義其顏色、長度和厚度。

語義化文本相關標籤

從 <h1> 標籤到 <h6> 標籤

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• <h1> 到 <h6> 標籤是用於 HTML 的標題標籤。

  <h1> 標籤代表最重要的標題，通常用作整個頁面的主標題。每個 HTML 文檔通常只使用一個 <h1> 標籤。

  <h2> 標籤是僅次於 <h1> 的下一個重要標題，用於頁面內的部分或章節標題。

  <h3> 標籤代表在 <h2> 下的副標題或更小的部分。

  <h4>、<h5> 和 <h6> 標籤代表較低層級的標題，用於更詳細的項目或部分標題。

• 標題標籤表示文本的重要性，並有助於創建頁面的邏輯結構。搜索引擎也使用標題標籤來理解頁面的內容。

<strong> 標籤

1<strong>Important text</strong> to emphasize significance.

• <strong> 標籤是一個 HTML 標籤，用於表示文本的重要性或強調，通常以粗體顯示。

• <strong> 標籤是一個語義化標籤，其主要目的是增加意義。

  它可以指示文本在上下文中是重要的。例如，它可以向搜索引擎展示文本的重要性，這對 SEO 很有用。它也可以向使用螢幕閱讀器的用戶傳達文本的重要性。另一方面，稍後將介紹的 <b> 標籤僅僅是一個讓文本變粗的標籤，並不提供語義上的強調。

“”標籤

1<em>Emphasized text</em> for italics and emphasis.

1<mark>Highlighted text</mark> for attention.

1<del>Deleted text</del> shows removed content.

1<ins>Inserted text</ins> shows added content.

1<abbr title="World Health Organization">WHO</abbr>

1<b>Bold text</b> without semantic emphasis.

1<i>Italic text</i> for style.

1<u>Underlined text</u> for decoration.

1<small>This is small text.</small>

1<s>Strikethrough text</s>

1H<sub>2</sub>O

1E = mc<sup>2</sup>