1.标簽語義化

提到标簽，很多剛入門前端開發的人，肯定都會很納悶，這麼多html标簽我如何記住呢？我又應該根據什麼依據去正确使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學習Web頁面開發的過程中，然後不斷的積累，不斷的總結，發現要想記住HTML标簽以及怎樣更好的去使用這些标簽，需要做到以下三點：

第一點：不要死記硬背，沒意義，隻需要記住常用的哪幾個足矣。

第二點：根據内容選擇使用HTML标簽，什麼意思呢？見下文分解。

第三點：遵循W3C的規範。

首先，第一點咱們就不用說，不讓死記硬背，就是要多寫頁面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些标簽了，而且在開發頁面的過程中，你們會發現，咱們最常用的也就是那麼幾個而已。

其次，第二點根據内容選擇使用HTML标簽，這一點非常關鍵，因為你掌握了這一點，你能很好地去使用HTML标簽，并且能讓頁面變得很優質，這也會提高你網頁被搜索引擎收錄。

最後，也就是第三點，這一點自然不用懷疑，如果要想讓頁面更好的在不同的浏覽器中呈現出一緻的效果，那麼必須遵循W3C的規範。

說了這麼多，隻是一些學習需要注意的問題，下面才是真正解開怎樣去使用和記住标簽這個謎團的方法。

我們在使用标簽的過程中，大家會發現類似的标簽，比如标題标簽（h1-h6）、p（段落标簽）、a（超鍊接标簽）以及圖片标簽（img）等，通過這些标簽的名稱，咱們是不是不難理解吧，很直觀的就知道這些标簽該怎麼，用于何處。而這些名稱的含義就是我們所說的标簽語義化。随着智能手機的出來，移動Web都是通過H5去開發頁面，而H5中的HTML标簽就比之前版本的HTML标簽更加具有語義化。

那麼什麼是标簽語義化呢？所謂的标簽語義化，指的就是标簽所代表的含義。咱們可以通過标簽的含義，正确地去使用它。

标簽語義化的作用：

• 通過使用語義化标簽，更能精準地将其把内容呈現出來。
• 通過使用語義化标簽，讓頁面結構更加的清晰，方便代碼的閱讀和維護。
• 能讓浏覽器或網絡爬蟲更好地解析，從而更好地分析和抓取網頁中的内容。
• 使用語義化标簽還能讓搜索引擎得到更好的優化。

如下圖所示，通過使用語義化标簽和沒使用任何标簽，就能直觀感受到語義化标簽的好處。

普通的文本和使用語義化标簽後的效果對比圖

那麼如何去判斷一個頁面中，語義化是否良好呢？很簡單，直接扒掉CSS這層漂亮的衣服，當我們把CSS去掉後，如果頁面中的結構依然組織有序，并且有良好的可讀性，那麼它就是非常良好的。

如何去使用這些标簽呢？首先根據内容确定語義化的标簽，其次再根據呈現需求，使用CSS樣式。因此HTML标簽并非通過死記硬背，而是通過在使用的過程中，利用HTML标簽的語義化去記憶。如下圖所示，通過使用語義化标簽，瞬間就能把普通的文本，以更清晰的結構呈現出來。

使用語義化的普通文本，變得更為結構清晰

2.常用标簽分類彙總

通常我們常見的标簽有标題标簽、段落标簽、水平線标簽、換行标簽以及div和span标簽，這些标簽又被統稱為排版标簽。

在開發中，排版标簽主要是和CSS搭配使用，主要是用于顯示網頁的整體結構，也是網頁布局中常用的标簽。下面我一一了解一下。

排版标簽：

【1】标題标簽（h1-h6）

• 縮寫來源：标題标簽的英文單詞是head，因此它使用它的縮寫h來表示。
• 語義：标題标簽主要是用于突顯标題内容，它是h1-h6（分為1級标題、2級标題、3級标題......6級标題），級别依次遞減。級别越小，标題就會越小。
• 語法格式如下：

标題标簽的使用

呈現的效果如下：

呈現的效果

一句話總結：使用了标題标簽的文字會加粗，會根據級别顯示文字的大小，并且一行隻能放一個标題。

【2】段落标簽（p）

• 縮寫來源：p标簽的英文單詞是paragraph，表示段落的意思。
• 語義：p标簽可以把html文檔分割為若幹段落。在網頁中要想把文字以段落的形式呈現，并且有條不紊的，那麼段落就是必備的标簽。
• 語法格式如下：

p标簽語法格式

【3】水平線标簽（hr）

• 縮寫來源：hr的英文單詞是horizontal，表示橫線的意思。
• 語義：它表示分隔線，用于将文字内容分隔開，讓文檔結構看起來更加清晰，層次分明。當然在網頁中除了使用分隔線（hr）标簽來實現，還可以通過圖片插入以及CSS樣式來實現，隻不過使用hr标簽是最簡單的方式。提示：CSS樣式是頁面中的重點，此處主要是介紹HTML，因此暫不做詳細說明。
• 語法格式：<hr />。
• 标簽特點：它是一個單标簽，hr标簽默認是以水平線的樣式進行顯示。

【4】換行标簽（br）

• 縮寫來源：br的英文單詞是break，打斷、換行的意思。
• 語義：表示換行的意思。在html中，一個段落的文字會從左到右依次排列顯示，直到浏覽器窗口的最右端，才會自動換行。如果我們在實際開發中碰到需要将文本内容強制換行顯示的，此時就可以使用換行标簽實現。
• 語法格式：<br />。
• 标簽特點：它也是一個單标簽。
• 示例：将以下内容通過br标簽強制換行

文本

呈現效果：

使用br标簽後的效果

【5】div和span标簽

• 縮寫來源：div的英文是division，表示分割、分區的意思。span沒有縮寫，表示跨度、跨距和範圍的意思。
• 語義：div和span标簽，沒有任何語言，主要是用于網頁布局使用。
• 語法格式：<div>這是一個div盒子</div> <span>這是一個span盒子</span>
• div和span的區别：div标簽，主要是用于布局，在沒有使用其它幹預的情況下，一行隻能放一個div。而span标簽，也是用來布局，在沒有任何其它的幹預的情況下，一行上可以放很多span标簽。此處的效果，大家可以根據語法，自行在實現查看一下對比效果。

最後給大家來一個完美的總結：

排版标簽的彙總

難道這就完了嗎？咱們的标簽就隻有這些常用的嗎？那當然不是，咱們接下來再看我們的文本格式化标簽。

文本格式化标簽

文本格式化标簽的作用：通常文本格式化标簽主要用于網頁中文字樣式的設置，比如字體加粗、斜體或下劃線等效果，當然後期也會通過CSS樣式來實現，會更加完美。

常見的文本格式化标簽如下：

文本格式化标簽

它們分别的區别：

• b和strong：b标簽隻是加粗，strong除了加粗，還具有強調的意思，更具語義化。
• i和em：i隻是讓文本顯示斜體的效果，而em在斜體的效果上加強了語義。
• s和del：s隻是讓文本顯示删除線，而得了不僅顯示删除線，還加強了語義。
• u和ins：u隻是添加了下劃線，而ins不僅顯示了下劃線，還加強了語義。

我麼網頁中除了排版标簽、文本格式化标簽，當然還少不了圖片标簽（img），通過圖片的展示，會讓整個頁面更加的生動形象。那麼下面再來看一下這個标簽吧。

圖片标簽（img）

• 縮寫來源：img的英文單詞是image，表示圖像、影像的意思。
• 語義：用于顯示圖片内容。
• 語法格式：<img src='圖像url' />，在這個的語法中，我們發現img标簽使用了src屬性，這個屬性主要是用于指定圖像的文件路徑，也是img的必須屬性。
• img标簽常見屬性如下所示：

img标簽屬性

• 标簽特點：img标簽主要是用于在網頁中插入圖像，它是一個單标簽。
• 知識點擴展：通過img标簽，我們會發現，html标簽除了自身外，它們還具有一些屬性，這些屬性，我們稱為标簽屬性，通過标簽屬性可以設置标簽的一些外在特性。标簽屬性的基本語法格式：<标簽名 屬性1="值1" 屬性2="值2" ...>内容 </标簽名>。

标簽屬性的特點：

• 一個标簽可以擁有多個屬性，必須寫在開始标簽中，位于标簽名後面。
• 屬性之間不分先後順序，标簽名與屬性、屬性與屬性之間均以空格分開。
• 任何标簽的屬性都有默認值，省略該屬性則使用默認值。
• 标簽的屬性采用的是鍵值對的格式key="value"的形式。

圖片标簽屬性使用

鍊接标簽

• 縮寫來源：a标簽的英文單詞是anchor，表示錨、鐵錨的意思。
• 語義：表示超文本鍊接。
• 語法格式：<a href ="跳轉目标" target="目标窗口的彈出方式">文本或圖像</a>。
• 常見的屬性：

a标簽的常見屬性

提示：

• 比如添加今日頭條作為外部鍊接，需要添加外部地址。
• 内部鍊接，就是頁面直接内部相互鍊接，因此隻需要使用名稱即可，比如

内部鍊接地址

• 如果沒有确定鍊接目标，通常使用"#"表示暫時空鍊接。
• 除了可以創建文本鍊接，還可以給網頁中的元素，如圖像、表格、音頻、視頻都可以添加超鍊接。

注釋标簽

• 注釋标簽：用于在HTML文檔中添加一些便于閱讀和理解，但又不需要顯示在頁面中的文字說明，此時就需要使用注釋标簽。它是HTML中的一種特殊标簽，它不會在浏覽器中顯示，但是會在源代碼中查看到。
• 語法格式：

注釋标簽

• 提示：注釋通常是給咱們開發者看的，程序是不會執行這個代碼的。

好了，各位小夥伴，今天我就給大家分享到這兒了，希望我給大家總結的内容，能幫到正在浏覽我這篇内容的前端開發者，也希望你們有所收獲。如果喜歡的，可以點擊關注，會繼續給大家分享更多的内容。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!