国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML語義化標簽探析

DandJ / 1538人閱讀

摘要:具體的語義化標簽探析本文主要是為了探析部分標簽在語義化中的差別。同時也探索新加入的語義化標簽。英文意思為,作用是定義列表中的項目。強調標簽說明在上面的介紹中,已經介紹了和,個中差別,看英文既能分辨。

什么是HTML語義化

HTML語義化就是根據具體內容,選擇合適的標簽進行代碼的編寫。便于開發者閱讀和寫出更優雅的代碼,同時讓搜索引擎的爬蟲能更好的識別。

為什么要語義化

有利于SEO:搜索引擎的爬蟲是讀不懂無語義的span和div的,因此語義化標簽能使爬蟲抓取更多的有效信息。

CSS文件讀取失敗的準備:萬一CSS文件掛了,語義化的HTML也能呈現較好的內容結構與代碼結構。

方便其它設備的解析(如屏幕閱讀器、盲人閱讀器、移動設備)。

便于團隊開發和維護。

具體的語義化標簽探析

本文主要是為了探析部分HTML標簽在語義化中的差別。同時也探索HTML5新加入的語義化標簽。

1. ul/ol(列表標簽)

ul和ol雖然都是列表項,但是具體使用時,差別還是很大的。

A. ul(無序列表)

說明: ul的英文全稱為unordered list,翻譯成中文就是無序列表。表示列表中的項目。是沒有先后順序的。網頁中大部分列表均為無序列表。

  • Lxxyx的博客
  • Lxxyx的評論
  • 聯系Lxxyx
B. ol(有序列表)

說明: ol的英文全稱為ordered list,表示列表中的項目。是有先后順序的。這一點是ol和ul的本質區別。

  1. 1. Lxxyx的第一篇文章
  2. 2. Lxxyx的第二篇文章
  3. 3. Lxxyx的第三篇文章
2. dl,dt,dd(定義列表)

說明: dl,dt,dd是自定義列表,但是使用上又與前面的ul/ol有所不同。自定義列表不僅僅是一列項目,而是項目及其注釋的組合。

dl: 英文意思為definition list,作用是定義列表。

dt: 英文意思為defines terms,作用是定義列表中的項目。

dd: 英文意思為defines description,作用是定義列表中項目的注釋。

舉例:

計算機
用來計算的儀器 ... ...
顯示器
以視覺方式顯示信息的裝置 ... ...

效果圖:

C. b/strong , i/em(強調標簽)

說明: 在HTML中,b和strong都是加粗,i和em都是斜體。但是從HTML4到HTML5中,又發生了轉變。所以有必要寫下來。

1. b/strong(加粗)

說明:雖然b和strong的展示效果一樣,都是將字體加粗表示。但是b在HTML5中又發生了變化。

b標簽(bold):

HTML4的定義:

The tag is for "offset text conventionally styled in bold,without conveying any extra emphasis or importance.
// 意思為b標簽僅僅表示加粗,不帶有任何強調的意味。(只是為了排版或者好看)


HTML5的定義:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.
// 意思為表示“文體突出”文字,通俗講就是突出不安分的文字。像概要中的關鍵字,產品名。或者代表強調的排版方式

2.strong標簽(全稱是stronger emphasis):

represents a span of text with strong importance.a tag within another tag has even more importance.

// 意思為strong 標簽是語氣加重,更為重要的強調,如果兩個strong標簽嵌套還表示極度重要。strong的重要程度是要大于em標簽的

總結:b僅僅只是加粗,并沒有任何語義。但是strong標簽則有語氣加重的強調的意思。

2. i/em(斜體)

說明:就像b和strong的關系一樣。i和em的對應關系也很容易理解。

i標簽(全稱是italic):

HTML4的定義:

The tag is for "text conventionally styled in italic". There is no semantic meaning.
// HTML4意思為i標簽僅僅只是將字體顯示為斜體,無任何語義化意思


HTML5的定義:

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
// 意思為i元素現在表現為在文章中突出不同意見或語氣或的一段文本,例如外語,科技術語、或者是排版用的斜體文字

em(全稱是emphasis):

The represents a span of text with emphatic stress.

// 意思是說em有強調的意思

總結:i僅僅只是斜體顯示,并沒有任何語義。但是em標簽則有加強的語義在內。

3.em/strong(強調標簽)

說明:在上面的介紹中,已經介紹了em和strong,個中差別,看英文既能分辨。
em的全稱是:emphasis,意思為強調。
strong的全稱是:stronger emphasis,意思就是語氣更強的強調。
總結:em和strong標簽均帶有強調的語義,但是strong標簽所表現的強調語氣要大于em的。

總結與參考鏈接

這一部分,查閱的文檔和資料太多了,看完了html4發現html5又更改了意思,只能跑去w3c去看規范。
總結:i和b在Html5中被賦予語義,不同于html4。em和strong的差別在于強調的程度。

參考鏈接:

Using and elements
HTML5: The Semantic Difference Between Bold and Strong

總結

暫時總結的就這么多了,重點在于b/strong , i/em幾個標簽的區別。也是目前前端學習中的盲點。
前兩天看到一句話:

"很多人非常努力的學習JavaScript,認為學好了JavaScript就是一切。但是忽略了JavaScript其實是一門"膠水語言"的本質,它是用來粘合HTML和CSS的。"

看到這句話后,決定在寒假認真學習HTML與CSS。這些東西,雖說簡單,但寫好也很難。比如說最近學習的Sass,PS切圖等。無論哪個,都屬于技術盲點。

因為經驗尚淺,所以如果有出錯的地方,希望各位能幫忙指正。
最后附上本人博客地址和原文鏈接,希望能與各位多多交流。

Lxxyx的前端樂園
原文鏈接:寒假前端學習(2)——HTML語義化標簽探析

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49715.html

相關文章

  • HTML語義

    摘要:近來看面試題的時候,經常看到一個問題語義化是什么意思里面有標簽的含義。因為二者表示的含義不同。參考資料理解語義化語義化的革新語義化標簽語義化標簽探析 近來看面試題的時候,經常看到一個問題:HTML語義化是什么意思?w3school里面有html標簽的含義。然而HTML5中對一些標簽進行了修改,由于不了解H5的新定義,就很容易弄錯標簽之間的意思。例如:既然i標簽是指斜體的意思,那么為什么...

    Mike617 評論0 收藏0
  • 靜態分析安全測試(SAST)優缺點探析

    摘要:許多公司都投資于或之類的靜態分析安全測試,解決方案。用靜態分析方法確保編程安全一書詳細描述了靜態分析技術的基本原理。博士將靜態分析無法找出的諸多安全問題歸為瑕疵,而非程序錯誤。 靜態分析安全測試(SAST)是指不運行被測程序本身,僅通過分析或者檢查源程序的語法、結構、過程、接口等來檢查程序的正確性,那么采用靜分析安全測試的方法有什么優缺點呢,且讓小編給你說道說道。 許多公司都投資于 H...

    codeKK 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<