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