IT課程 HTML基礎 011_文本

HTML 提供了大量的文本標籤，以供我們在製作網頁時使用。這些標籤可以幫助我們更好地組織和格式化我們的文本內容。以下是一些常用的 HTML 文本標籤。

標題

標題元素用於定義HTML文檔的標題或子標題，它通常表示文檔結構的層次。標題元素有六個級別，從 h1 到 h6，級別越高，標題的重要性越高。

示例：

1
<h1>這是一個 h1 標題</h1>
2
<h2>這是一個 h2 標題</h2>
3
...
4
<h6>這是一個 h6 標題</h6>

效果：

[!小結]

• 請確保 標題元素 只用於標題，不應僅為了粗體或大號字體而使用 標題元素。
• 搜索引擎使用標題為您的網頁結構和內容編製索引。
• 正確使用標題元素，可以使頁面更具有可讀性、可訪問性，同時有利於 SEO。
• 應該將 h1 用作 唯一 的主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。

段落

段落元素用於定義文本的段落結構，使文本更有組織和可讀性。它會在上下內容前後各添加一個換行，將文本分組成獨立的部分，使得段落之間有明顯的區分。段落元素主要包括 <p> 標籤，它表示一個段落。

示例：

1
<p>這是一個段落。</p>
2
<p>這是另一個段落。</p>

效果：

[!小結]

• HTML 文檔中可存在若干段落
• 瀏覽器會自動地在段落的前後添加空行
• 不要忘記結束標籤（即使忘了結束標籤，大多數瀏覽器也會正常顯示）
• 如果不喜歡段落元素添加的上下文空行，想縮小行距，請使用 <br> 標籤
• 默認情況下，段落元素中一行代碼顯示的字符數是根據屏幕寬度決定的

超鏈接

<a> 元素用於定義超鏈接，使用戶能夠點擊鏈接並跳轉到其他頁面或資源。<a>標籤內部一般包含一些文本或者圖片，這些內容將成為鏈接的可點擊部分。同時，我們通過<a>標籤的 href 屬性指定鏈接的目標地址。超鏈接是 HTML 中的一項基本功能，它可以鏈接到網頁的其他部分，或者鏈接到其他網頁，甚至是其他網站。

示例：

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

效果：

超鏈接屬性

• href：指定鏈接目標的URL，這是鏈接的最重要屬性。可以是另一個網頁的URL、文件的URL或其他資源的URL。
• target（可選）：指定鏈接如何在瀏覽器中打開。常見的值包括 _blank（在新標籤或窗口中打開鏈接）和 _self（在當前標籤或窗口中打開鏈接，默認狀態）。
• title（可選）：提供鏈接的文本信息，通常在鼠標懸停在鏈接上時顯示。
• rel（可選）：指定與鏈接目標的關係，如 nofollow（不跟蹤）、noopener（不打開新的上下文）、noreferrer（不傳遞引用信息） 等。
• class：指定鏈接的 CSS 類。
• id：指定鏈接的 CSS ID。

錨鏈接

在一個長的網頁中，我們可能希望創建鏈接到頁面內部某個部分的鏈接。這可以通過錨鏈接來實現。首先，我們需要使用 <a> 標籤的 name 或 id 屬性來標記目標位置，然後在鏈接的 href 屬性中使用 # 加上目標的 name 或 id 值來創建鏈接。

示例：

1
<a href="#a1">跳轉到 a1</a>
2
<!-- 此處省略足以翻頁的內容或<br> -->
3
<a name="a1">一些內容</a>

效果：

點擊超鏈接 “跳轉到 a1” 後，頁面將會跳轉到 “a1內容” 部分。

郵箱鏈接

除了鏈接到其他網頁，<a> 標籤還可以鏈接到電子郵件地址。通過在 href 屬性值前面添加 mailto:，可以創建一個點擊後會啟動用戶默認的郵件客戶端，並創建一封新郵件的鏈接。

示例：

1
<a href="mailto:757118@qq.com">發送郵件到 757118@qq.com</a>

效果：

點擊這個超鏈接，系統將啟動默認的郵件客戶端，並創建一封發送到 757118@qq.com 的新郵件。

[!小結]

• 當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。
• 超鏈接不必一定是文本，圖片或其他 HTML 元素都可以成為鏈接。
• 默認情況下，鏈接將以以下形式出現在瀏覽器中： 一個未訪問過的鏈接顯示為藍色字體並帶有下劃線。 訪問過的鏈接顯示為紫色並帶有下劃線。 點擊鏈接時，鏈接顯示為紅色並帶有下劃線。

換行

換行元素<br>用於在文本中插入換行符，強制文本換到新的一行。

示例：

1
這是一行文本。<br>這是另一行文本。

效果：

[!小結]

• <br> 標籤中的斜杠 / 是可選的。 在 HTML 4 中，<br /> 標籤必須包含斜杠； 在 HTML 5 中，斜杠是可選的。

加粗

<b> 元素是一種基本的文本樣式標籤，用於將文本設定為粗體，但沒有強調文本的語義。<strong> 元素是語義化的標籤，用於表示文本的強調，通常瀏覽器會以加粗的形式顯示。

示例：

1
這是普通文本
2
<b>這是加粗的文本</b>
3
<strong>這是強調語義的加粗文本</strong>

效果：

斜體

<i> 元素用於表示文本的斜體效果，但沒有強調文本的語義。<em> 元素用於表示斜體文本，通常用於強調文本的重要性或創造視覺效果。

示例：

1
這是普通文本
2
<i>這是一個斜體文本</i>
3
<em>這是一個強調語義的斜體文本</em>

效果：

下劃線

下劃線元素 <u> 用於表示下劃線文本。

示例：

1
這是一個帶<u>下劃線</u>的文字

效果：

[!小結]

• HTML 5 中，下劃線元素 <u> 被棄用了。這意味著它仍然是有效的 HTML 元素，但它不被推薦使用。

刪除線

刪除線元素 <del> 用於顯示已經被刪除或廢棄的文本，瀏覽器通常會在此文本上添加一條橫線。

示例：

1
這是一個<del>刪除線</del>文本

效果：

[!小結]

• HTML5 中刪除線元素 <del> 被棄用了。這意味著它仍然是有效的 HTML 元素，但它不被推薦使用。

高亮

<mark> 元素用於標記文本中的一部分，以便突出顯示或標記這部分文本。通常，被 <mark> 元素標記的文本會以黃色背景進行突出顯示，以使其在文檔中更為顯眼。

示例：

1
這是一個<mark>高亮</mark>的文本

效果：

下標和上標

<sub> 元素表示文本的下標（subscript），<sup> 元素表示文本的上標（superscript）。下標和上標元素通常用於數學、化學式、日期、溫度等場景。

示例：

1
H<sub>2</sub>O 是水的分子式。
2
2<sup>10</sup> 等於 1024。

效果：