標籤語義化,讓你的網頁更容易懂

2021-06-21 16:11:54 字數 1379 閱讀 6077

一、什麼事標籤語義化?

你設計的頁面還是一對的div堆積的嗎?如果你還在沉浸在div包圍的設計風格中,那麼你就是不合格的前端工程師。標籤語義化,讓你的頁面在機器的世界裡不再陌生。html的標籤都是有各自特定的意義的,同時也是為了更好的開發和更加規範。

二、標籤語義化的作用?

1、讓你的手機更加完美的展示你的網頁

2、讓搜尋引擎更好地搜尋到你的作品

3、讓你的開發和維護更加方便,提高你的效率

4、讓盲人更好地閱讀你的網頁,閱讀器根據標籤語義自動解析,呈現更容易、更好的閱讀

5、。。。

三、html標籤語義總結

既然標籤語義化如此重要,那麼從現在開始,規範化你的**風格,語義化你的標籤吧!以下是對html標籤的乙個彙總。

html標記一覽,後有詳解標記

譯名或意義

作 用檔案標記

檔案宣告

讓瀏覽器知道這是 html 檔案 開頭

提供檔案整體資訊 標題

定義檔案標題,將顯示於瀏覽頂端 本文

設計檔案格式及內文所在

排版標記

說明標記

為檔案加上說明,但不被顯示

段落標記

為字、畫、**等之間留一空白行

換行標記

令字、畫、**等顯示於下一行

水平線插入一條水平線 居中

令字、畫、**等顯示於中間

預設格式

令檔案按照原始碼的排列方式顯示

區隔標記

設定字、畫、**等的擺放位置

不折行令文字不因太長而繞行

建議折行

預設折行部位

字型標記

加重語氣

產生字型加粗 bold 的效果

粗體標記

產生字型加粗的效果

強調標記

字型出現斜體效果

斜體標記

字型出現斜體效果

打字字型

courier字型,字母寬度相同

加上底線

加上底線

2、段落標籤,盡量少用

來換行。3、

一 二

三 4、、、

dl 就是「定義列表」。

5、、、

來標記簡短的單行引用。

6、、em是用作強調的,strong是用作重點強調的。

強調 的文字通常用斜體顯示, 

然而,特別強調的文字通常以粗體顯示。

7、、、、< caption >、 summary 

summary為摘要,為表哥標題,為首部說明

8、9、,

知道del,就不要再用做刪除線了,用del顯然更具有語義化。

10、11、、

12、alt屬性和title屬性

語義化你的HTML 標籤

作為乙個前端開發人員,你要是沒有聽說過css,那你肯定是乙個 out man 隨著css的深入人心,結構與表現與行為的逐漸分離,html語義化成了炙手可熱的賣點。語義化的html首先要強調html結構 乙個網頁就好像一幢房子,html結構就是鋼筋混泥土的牆,一幢房子如果沒有鋼筋混泥土的牆那就是一堆廢...

語義化你的HTML標籤

作為乙個前端開發人員,你要是沒有聽說過css,那你肯定是乙個 out man 隨著css的深入人心,結構與表現與行為的逐漸分離,html語義化成了炙手可熱的賣點。語義化的html首先要強調html結構 乙個網頁就好像一幢房子,html結構就是鋼筋混泥土的牆,一幢房子如果沒有鋼筋混泥土的牆那就是一堆廢...

語義化你的HTML標籤和屬性

分離結構與表現的另乙個重要方面是使用語義化的標記來構造文件內容。乙個 xhtml 元素的存在就意味被標記內容的那部分有相應的結構化的意義,沒有理由使用其他的標記。換句話說,不要讓 css 使乙個 html 元素看起來就像另乙個 html 元素,比如用來代替標記標題。首先是關於語義 semantics...