摘要:具體的語義化標簽探析本文主要是為了探析部分標簽在語義化中的差別。同時也探索新加入的語義化標簽。英文意思為,作用是定義列表中的項目。強調標簽說明在上面的介紹中,已經介紹了和,個中差別,看英文既能分辨。
什么是HTML語義化
HTML語義化就是根據具體內容,選擇合適的標簽進行代碼的編寫。便于開發者閱讀和寫出更優雅的代碼,同時讓搜索引擎的爬蟲能更好的識別。
為什么要語義化有利于SEO:搜索引擎的爬蟲是讀不懂無語義的span和div的,因此語義化標簽能使爬蟲抓取更多的有效信息。
CSS文件讀取失敗的準備:萬一CSS文件掛了,語義化的HTML也能呈現較好的內容結構與代碼結構。
方便其它設備的解析(如屏幕閱讀器、盲人閱讀器、移動設備)。
便于團隊開發和維護。
具體的語義化標簽探析本文主要是為了探析部分HTML標簽在語義化中的差別。同時也探索HTML5新加入的語義化標簽。
1. ul/ol(列表標簽)ul和ol雖然都是列表項,但是具體使用時,差別還是很大的。
A. ul(無序列表)說明: ul的英文全稱為unordered list,翻譯成中文就是無序列表。表示列表中的項目。是沒有先后順序的。網頁中大部分列表均為無序列表。
說明: ol的英文全稱為ordered list,表示列表中的項目。是有先后順序的。這一點是ol和ul的本質區別。
2. dl,dt,dd(定義列表)
- 1. Lxxyx的第一篇文章
- 2. Lxxyx的第二篇文章
- 3. Lxxyx的第三篇文章
說明: 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
摘要:許多公司都投資于或之類的靜態分析安全測試,解決方案。用靜態分析方法確保編程安全一書詳細描述了靜態分析技術的基本原理。博士將靜態分析無法找出的諸多安全問題歸為瑕疵,而非程序錯誤。 靜態分析安全測試(SAST)是指不運行被測程序本身,僅通過分析或者檢查源程序的語法、結構、過程、接口等來檢查程序的正確性,那么采用靜分析安全測試的方法有什么優缺點呢,且讓小編給你說道說道。 許多公司都投資于 H...
閱讀 3292·2021-11-23 09:51
閱讀 945·2021-09-03 10:30
閱讀 3218·2021-08-31 09:40
閱讀 3281·2019-08-30 14:22
閱讀 906·2019-08-30 14:09
閱讀 2903·2019-08-30 13:21
閱讀 3239·2019-08-28 18:03
閱讀 2863·2019-08-26 13:44