本章通過實(shí)例向您演示最常用的 HTML 標(biāo)簽。
提示：不要擔(dān)心本章中您還沒有學(xué)過的例子，您將在下面的章節(jié)中學(xué)到它們。
提示：學(xué)習(xí) HTML 最好的方式就是邊學(xué)邊做實(shí)驗(yàn)。我們?yōu)槟鷾?zhǔn)備了很好的 HTML 編輯器。使用這個編輯器，您可以任意編輯一段 HTML 源碼，然后單擊 TIY 按鈕來查看結(jié)果。
在HTML中，標(biāo)題是通過<h1>到<h6>的標(biāo)簽來表示的，其中<h1>表示最高級別的標(biāo)題，通常用于主標(biāo)題，而<h6>表示最低級別的標(biāo)題，通常用于表示較小的子標(biāo)題。這些標(biāo)題標(biāo)簽不僅定義了文本的大小，還幫助搜索引擎和屏幕閱讀器理解頁面的結(jié)構(gòu)和內(nèi)容的重要性。
下面是一個示例，展示了如何使用HTML標(biāo)題標(biāo)簽：
<!DOCTYPE html>
<html>
<head>
<title>HTML 標(biāo)題示例</title>
</head>
<body>
<h1>這是主標(biāo)題</h1>
<p>這是一段介紹性的文本。</p>
<h2>二級標(biāo)題</h2>
<p>與二級標(biāo)題相關(guān)的內(nèi)容。</p>
<h3>三級標(biāo)題</h3>
<p>與三級標(biāo)題相關(guān)的內(nèi)容。</p>
<!-- 可以繼續(xù)添加到 h6 的更低級別標(biāo)題 -->
</body>
</html>
在這個例子中，<h1>標(biāo)簽用于表示頁面的主標(biāo)題，<h2>用于二級標(biāo)題，通常是章節(jié)或者主要部分的標(biāo)題，<h3>則用于更低一級的子標(biāo)題，以此類推，直到<h6>。
標(biāo)題標(biāo)簽對于搜索引擎優(yōu)化（SEO）和網(wǎng)頁的可訪問性都很重要，因?yàn)樗鼈儙椭x了頁面的結(jié)構(gòu)，使搜索引擎能夠更好地理解內(nèi)容，并且對于使用屏幕閱讀器的用戶來說，這些標(biāo)題可以提供導(dǎo)航的線索。
注意：雖然<h1>標(biāo)簽在視覺上通常顯示為最大的標(biāo)題，但這并不是由其標(biāo)簽本身決定的，而是由CSS樣式來控制的。開發(fā)者可以通過CSS來自定義每個標(biāo)題標(biāo)簽的顯示樣式，包括字體大小、顏色、間距等。
在HTML中，段落是通過<p>標(biāo)簽來定義的。<p>標(biāo)簽用于創(chuàng)建文本段落，瀏覽器會自動在每個段落前后添加空行，以區(qū)分不同的段落。
下面是一個簡單的HTML段落示例：
<!DOCTYPE html>
<html>
<head><title>HTML 段落示例</title></head>
<body><p>這是一個HTML段落。</p> <p>這是另一個HTML段落。</p></body>
</html>
在這個例子中，我們使用了兩個<p>標(biāo)簽來創(chuàng)建兩個不同的段落。每個段落都被<p>和</p>包圍，其中<p>是開始標(biāo)簽，</p>是結(jié)束標(biāo)簽。
瀏覽器渲染這段代碼時，會在每個段落之間添加垂直間距，使得段落之間更加清晰易讀。
你可以通過CSS來樣式化段落，例如改變字體樣式、顏色、大小、行高等。例如：
<!DOCTYPE html> <html> <head> <title>HTML 段落樣式示例</title> <style> p { font-family: Arial, sans-serif; color: #333; font-size: 16px; line-height: 1.5; } </style> </he> <body><p>這是一個帶有樣式的HTML段落。</p> <p>這是另一個帶有樣式的HTML段落。</p></body> </html>
在這個示例中，我們添加了一個<style>標(biāo)簽來定義CSS樣式，指定了段落的字體、顏色、大小和行高。這樣，所有的<p>標(biāo)簽都會應(yīng)用這些樣式。
HTML 鏈接
在HTML中，鏈接是通過 <a> 標(biāo)簽來創(chuàng)建的，它代表 “anchor”（錨點(diǎn)）。<a> 標(biāo)簽通常用于創(chuàng)建指向其他網(wǎng)頁、文件、電子郵件地址或同一頁面內(nèi)的某個位置的超鏈接。
下面是一些創(chuàng)建HTML鏈接的基本示例：
創(chuàng)建指向其他網(wǎng)頁的鏈接：
<a href=“/”>訪問示例</a>在這個例子中，href 屬性指定了鏈接的目標(biāo)URL，即用戶點(diǎn)擊鏈接后將被重定向到的網(wǎng)頁地址。
創(chuàng)建指向電子郵件的鏈接：
<a href=”mailto:someone@example.com”>發(fā)送郵件給我</a>使用 mailto: 協(xié)議可以創(chuàng)建一個鏈接，當(dāng)用戶點(diǎn)擊該鏈接時，他們的默認(rèn)郵件客戶端會打開并自動填寫收件人地址。
創(chuàng)建頁面內(nèi)的錨鏈接：
如果你想在同一頁面內(nèi)跳轉(zhuǎn)到特定的部分，你可以使用錨鏈接。首先，你需要為目標(biāo)位置設(shè)置一個ID：
<h2 id=“section1”>第一部分</h2>
<p>這里是第一部分的內(nèi)容…</p>然后，你可以創(chuàng)建一個鏈接指向這個ID：
<a href=“#section1”>跳轉(zhuǎn)到第一部分</a>在新窗口或標(biāo)簽頁中打開鏈接：
默認(rèn)情況下，點(diǎn)擊鏈接會在當(dāng)前窗口或標(biāo)簽頁中打開目標(biāo)頁面。如果你想在新窗口或標(biāo)簽頁中打開鏈接，你可以添加 target=“_blank” 屬性：
<a href=“/course/6664.html”/ target=“_blank”>在新窗口中打開示例網(wǎng)站</a>請注意，出于用戶體驗(yàn)和可訪問性的考慮，應(yīng)謹(jǐn)慎使用 target=“_blank”，因?yàn)樗鼤袛嘤脩舻臑g覽流程。如果必須使用，建議添加 rel=“noopener noreferrer” 屬性以增強(qiáng)安全性：
<a href=“/course/6664.html”/ target=“_blank” rel=“noopener noreferrer”>安全地在新窗口中打開示例網(wǎng)站</a>
這些就是HTML中創(chuàng)建鏈接的基本方法。
HTML 圖像
在HTML中，圖像可以通過<img>標(biāo)簽來插入。<img>標(biāo)簽是一個空元素，意味著它沒有結(jié)束標(biāo)簽，并且必須包含src屬性來指定圖像文件的路徑。
以下是一個簡單的HTML圖像示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML 圖像示例</title>
</head>
<body>
<img src=“image.jpg” alt=“一個描述性的文字”>
</body>
</html>在這個例子中，<img>標(biāo)簽用于插入圖像，src屬性指定了圖像文件的路徑（在這個例子中是”image.jpg”）。alt屬性提供了圖像的替代文本，這在圖像無法顯示時非常有用，比如由于網(wǎng)絡(luò)問題或圖像文件不存在。替代文本也有助于提高網(wǎng)站的可訪問性，特別是對于使用屏幕閱讀器的視障用戶。
除了src和alt屬性外，<img>標(biāo)簽還可以接受其他屬性，如：
例如：
<img src=“image.jpg” alt=“一個描述性的文字” width=“300” height=“200” title=“這是圖像的標(biāo)題”>請注意，為了保持網(wǎng)頁的加載速度和用戶體驗(yàn)，應(yīng)該優(yōu)化圖像文件的大小和格式。此外，確保使用的圖像符合版權(quán)法規(guī)定，避免侵犯他人的知識產(chǎn)權(quán)。
如果你希望圖像成為鏈接的一部分，可以將<img>標(biāo)簽放在<a>標(biāo)簽內(nèi)部：
<a href=“/course/6664.html”>
<img src=“image.jpg” alt=“點(diǎn)擊訪問示例網(wǎng)站”>
</a>在這個例子中，點(diǎn)擊圖像將會跳轉(zhuǎn)到指定的鏈接地址。