首先我們來回顧下標簽的作用是什么？HTML 標簽的核心作用是定義網頁內容的語義和結構，就像建筑藍圖中的框架標記，告訴瀏覽器“某塊內容是什么”。

???一. 標題標簽 (Heading Tags)

Heading標簽，一共分為6個層級；其中<h1>等級是最高的，用于網頁的主題。<h2>到<h6>則為網頁的子標題。

<h1>一級標題</h1>   <!-- 每個頁面只用1個，如網站名稱 --><h2>二級標題</h2>   <!-- 大章節標題 --><h3>三級標題</h3>   <!-- 小節標題 --><h4>四級標題</h4>   <!-- 更小分區 -->

?? 關鍵提示：

1. 數字越小字體越大 (h1最大)

2. 默認加粗+增加上下間距

3. 屏幕閱讀器靠它們理解頁面結構

同樣，為了更直觀地了解<h1>與<h2>之間不同的效果，在vscode中ctrl+s將文件儲存后，在瀏覽器點擊刷新網頁就可看到你所寫代碼的最新效果。

??二.<p>標簽  段落標簽 (Paragraph Tag)

一個網頁有了標題，要有內容填充才能算作一個合格的網頁。這時，你可以用<p>標簽來包裹文本內容，形成邏輯完整的段落塊。

<p>這是一整段連續文本，瀏覽器會自動在段落間添加間距</p><p>這是另一個獨立段落</p>

每一對<p></p>,都代表一個獨立的段落。

到這里，不知道你有沒有發現：不管是<heading>標簽或是<p>標簽，不管它們的字數有多少，都會占據一整行。

類似于這類的標簽，有個專有名詞，讀作：“區塊元素”。定義：獨占父容器的一整行，就像集裝箱一樣垂直堆疊。

區塊元素 (Block-level Elements)常見標簽有

<div>, <p>, <h1>-<h6>, <section>, <article><header>, <footer>, <ul>, <ol>, <li>, <table>  

三.行內元素

除了區塊元素，有沒有一種元素，有多少內容就占多少空間，而不會獨占一整行的元素呢？有的，這就是“行內元素 (Inline Elements)”，

定義：像文本一樣流動，水平排列直到放不下才換行，類似句子中的單詞。

“行內元素”常見的標簽有<strong>和<em>標簽，這兩者分別對應我們word文檔中經常用到的“粗體”和“斜體”

掌握了這些標簽以后，我們可以使用不同標簽，層層疊加在同一個網頁，利用這些技巧，你就可以在HTML中設計出復雜的頁面布局和結構。

??四.<a>標簽  超鏈接標簽 (Anchor Tag)

網頁網頁，顧名思義是需要聯網的。<a>標簽是網頁互聯的基石，用于創建超鏈接（Hyperlink），實現資源跳轉和文檔連接。使用<a>標簽時，要加上href的屬性指定目前網址。

<!-- 基本用法 --><a href="https://example.com">點擊訪問</a>
<!-- 頁面內跳轉 --><a href="#contact">跳到聯系方式</a><section id="contact">...</section>
<!-- 郵箱鏈接 --><a href="mailto:contact@example.com">發送郵件</a>

或是當前目錄中的某個網頁，由于當前這是你手寫的第一個網頁，還沒有建立其它的頁面，所以這里暫時 href="#" 就ok了

<p><a href="#">了解更多</a></p> //示例代碼

注：以上示例欄的文字為注釋，實際寫網頁的過程，不必帶上。

?? 五、清單標簽 (List Tags)

在網頁開發中，清單是實現結構化內容展示的核心組件，其作用遠超簡單的視覺排列。

1. 有序列表（帶數字編號）<ol>（ordered list）標簽

<ol>                           // 清單開頭使用<ol>標簽  <li>第一步：準備材料</li>      //清單內容使用<li>標簽  <li>第二步：攪拌混合</li>  <li>第三步：烤箱烘焙</li></ol>

2. 無序列表（帶項目符號）<ul>（unordered ）標簽

<ul>  <li>面粉 200g</li>  <li>雞蛋 3個</li>  <li>白糖 50g</li></ul>

清單最常見的用途，是拿來作網站的導航欄。

由于導航欄的前方不需要任何數字編號，這時選擇用<ul>標簽更為妥當。<ul>標簽的用法和<ol>相同，唯一差異就是前方沒有數字編號，而是一個小黑點。

導航欄的每個項目都會鏈接不同的網頁/內容，所以這里需要加上<a>標簽

<ul>      <li><a href="#">最新消息</a></li>      <li><a href="#">關于我們</a></li>      <li><a href="#">門市據點</a></li>      <li><a href="#">會員專區</a></li>  </ul>       

效果參考：

?? 六、引用標簽 (Blockquote Tag)

做網頁我們不免會引用新聞媒體或者用戶評論展示，這時<blockquote>標簽就派上用場了。<blockquote>本身有個site屬性，可以用來標識引用內容的來源（網址）。

<blockquote cite="https://example.com/source">  這是被引用的文字內容...</blockquote>

<blockquote cite="https://example.com/source">  "真正的面包匠人，用雙手感受面團的呼吸"</blockquote>

使用場景如下圖：有時為了排版的美觀，你可能會想要一個長句，分行展示。

這時你就可以插入一個<br>標簽，精確控制內部換行:

<blackquote>嚴選天然食材，精湛匠心烘焙，<br>讓幸福在每口面包中的香氣中蔓延</blackquote>

七.總結（零基礎必存）

今天的HTML常用標簽講解到這里就結束啦！下篇文章我們將走進插入圖片的語法、如何用CSS修改樣式。

閱讀原文：原文鏈接