資訊專欄INFORMATION COLUMN
摘要：具體的語(yǔ)義化標(biāo)簽探析本文主要是為了探析部分標(biāo)簽在語(yǔ)義化中的差別。同時(shí)也探索新加入的語(yǔ)義化標(biāo)簽。英文意思為，作用是定義列表中的項(xiàng)目。強(qiáng)調(diào)標(biāo)簽說(shuō)明在上面的介紹中，已經(jīng)介紹了和，個(gè)中差別，看英文既能分辨。
什么是HTML語(yǔ)義化
HTML語(yǔ)義化就是根據(jù)具體內(nèi)容，選擇合適的標(biāo)簽進(jìn)行代碼的編寫。便于開(kāi)發(fā)者閱讀和寫出更優(yōu)雅的代碼，同時(shí)讓搜索引擎的爬蟲能更好的識(shí)別。
為什么要語(yǔ)義化有利于SEO:搜索引擎的爬蟲是讀不懂無(wú)語(yǔ)義的span和div的，因此語(yǔ)義化標(biāo)簽?zāi)苁古老x抓取更多的有效信息。
CSS文件讀取失敗的準(zhǔn)備：萬(wàn)一CSS文件掛了，語(yǔ)義化的HTML也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)。
方便其它設(shè)備的解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)。
便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)。
具體的語(yǔ)義化標(biāo)簽探析本文主要是為了探析部分HTML標(biāo)簽在語(yǔ)義化中的差別。同時(shí)也探索HTML5新加入的語(yǔ)義化標(biāo)簽。
1. ul/ol(列表標(biāo)簽)ul和ol雖然都是列表項(xiàng)，但是具體使用時(shí)，差別還是很大的。
A. ul(無(wú)序列表)說(shuō)明: ul的英文全稱為unordered list，翻譯成中文就是無(wú)序列表。表示列表中的項(xiàng)目。是沒(méi)有先后順序的。網(wǎng)頁(yè)中大部分列表均為無(wú)序列表。
說(shuō)明: ol的英文全稱為ordered list，表示列表中的項(xiàng)目。是有先后順序的。這一點(diǎn)是ol和ul的本質(zhì)區(qū)別。
2. dl,dt,dd(定義列表)
- 1. Lxxyx的第一篇文章
- 2. Lxxyx的第二篇文章
- 3. Lxxyx的第三篇文章
說(shuō)明: dl,dt,dd是自定義列表，但是使用上又與前面的ul/ol有所不同。自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
dl: 英文意思為definition list，作用是定義列表。
dt: 英文意思為defines terms，作用是定義列表中的項(xiàng)目。
dd: 英文意思為defines description，作用是定義列表中項(xiàng)目的注釋。
舉例:
效果圖:
C. b/strong , i/em(強(qiáng)調(diào)標(biāo)簽)
說(shuō)明: 在HTML中，b和strong都是加粗，i和em都是斜體。但是從HTML4到HTML5中，又發(fā)生了轉(zhuǎn)變。所以有必要寫下來(lái)。
1. b/strong(加粗)說(shuō)明:雖然b和strong的展示效果一樣，都是將字體加粗表示。但是b在HTML5中又發(fā)生了變化。
b標(biāo)簽(bold):
HTML4的定義:
The tag is for "offset text conventionally styled in bold,without conveying any extra emphasis or importance.
// 意思為b標(biāo)簽僅僅表示加粗，不帶有任何強(qiáng)調(diào)的意味。(只是為了排版或者好看)
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.
// 意思為表示“文體突出”文字，通俗講就是突出不安分的文字。像概要中的關(guān)鍵字，產(chǎn)品名。或者代表強(qiáng)調(diào)的排版方式
2.strong標(biāo)簽(全稱是stronger emphasis):
represents a span of text with strong importance.a tag within another tag has even more importance.
// 意思為strong 標(biāo)簽是語(yǔ)氣加重，更為重要的強(qiáng)調(diào)，如果兩個(gè)strong標(biāo)簽嵌套還表示極度重要。strong的重要程度是要大于em標(biāo)簽的
總結(jié)：b僅僅只是加粗，并沒(méi)有任何語(yǔ)義。但是strong標(biāo)簽則有語(yǔ)氣加重的強(qiáng)調(diào)的意思。
2. i/em(斜體)說(shuō)明:就像b和strong的關(guān)系一樣。i和em的對(duì)應(yīng)關(guān)系也很容易理解。
i標(biāo)簽(全稱是italic):
HTML4的定義:
The tag is for "text conventionally styled in italic". There is no semantic meaning.
// HTML4意思為i標(biāo)簽僅僅只是將字體顯示為斜體，無(wú)任何語(yǔ)義化意思
HTML5的定義:
The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
// 意思為i元素現(xiàn)在表現(xiàn)為在文章中突出不同意見(jiàn)或語(yǔ)氣或的一段文本,例如外語(yǔ)，科技術(shù)語(yǔ)、或者是排版用的斜體文字
em(全稱是emphasis):
The represents a span of text with emphatic stress.
// 意思是說(shuō)em有強(qiáng)調(diào)的意思
總結(jié):i僅僅只是斜體顯示，并沒(méi)有任何語(yǔ)義。但是em標(biāo)簽則有加強(qiáng)的語(yǔ)義在內(nèi)。
3.em/strong(強(qiáng)調(diào)標(biāo)簽)說(shuō)明:在上面的介紹中，已經(jīng)介紹了em和strong，個(gè)中差別，看英文既能分辨。
em的全稱是:emphasis,意思為強(qiáng)調(diào)。
strong的全稱是:stronger emphasis，意思就是語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)。
總結(jié):em和strong標(biāo)簽均帶有強(qiáng)調(diào)的語(yǔ)義，但是strong標(biāo)簽所表現(xiàn)的強(qiáng)調(diào)語(yǔ)氣要大于em的。
這一部分，查閱的文檔和資料太多了，看完了html4發(fā)現(xiàn)html5又更改了意思，只能跑去w3c去看規(guī)范。
總結(jié):i和b在Html5中被賦予語(yǔ)義，不同于html4。em和strong的差別在于強(qiáng)調(diào)的程度。
參考鏈接：
總結(jié)Using and elements
HTML5: The Semantic Difference Between Bold and Strong
暫時(shí)總結(jié)的就這么多了,重點(diǎn)在于b/strong , i/em幾個(gè)標(biāo)簽的區(qū)別。也是目前前端學(xué)習(xí)中的盲點(diǎn)。
前兩天看到一句話：
"很多人非常努力的學(xué)習(xí)JavaScript，認(rèn)為學(xué)好了JavaScript就是一切。但是忽略了JavaScript其實(shí)是一門"膠水語(yǔ)言"的本質(zhì)，它是用來(lái)粘合HTML和CSS的。"
看到這句話后，決定在寒假認(rèn)真學(xué)習(xí)HTML與CSS。這些東西，雖說(shuō)簡(jiǎn)單，但寫好也很難。比如說(shuō)最近學(xué)習(xí)的Sass，PS切圖等。無(wú)論哪個(gè)，都屬于技術(shù)盲點(diǎn)。
因?yàn)榻?jīng)驗(yàn)尚淺，所以如果有出錯(cuò)的地方，希望各位能幫忙指正。
最后附上本人博客地址和原文鏈接，希望能與各位多多交流。
Lxxyx的前端樂(lè)園
原文鏈接：寒假前端學(xué)習(xí)(2)——HTML語(yǔ)義化標(biāo)簽探析
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49715.html
摘要：近來(lái)看面試題的時(shí)候，經(jīng)常看到一個(gè)問(wèn)題語(yǔ)義化是什么意思里面有標(biāo)簽的含義。因?yàn)槎弑硎镜暮x不同。參考資料理解語(yǔ)義化語(yǔ)義化的革新語(yǔ)義化標(biāo)簽語(yǔ)義化標(biāo)簽探析 近來(lái)看面試題的時(shí)候，經(jīng)常看到一個(gè)問(wèn)題：HTML語(yǔ)義化是什么意思？w3school里面有html標(biāo)簽的含義。然而HTML5中對(duì)一些標(biāo)簽進(jìn)行了修改，由于不了解H5的新定義，就很容易弄錯(cuò)標(biāo)簽之間的意思。例如：既然i標(biāo)簽是指斜體的意思，那么為什么...
摘要：許多公司都投資于或之類的靜態(tài)分析安全測(cè)試，解決方案。用靜態(tài)分析方法確保編程安全一書詳細(xì)描述了靜態(tài)分析技術(shù)的基本原理。博士將靜態(tài)分析無(wú)法找出的諸多安全問(wèn)題歸為瑕疵，而非程序錯(cuò)誤。 靜態(tài)分析安全測(cè)試（SAST）是指不運(yùn)行被測(cè)程序本身，僅通過(guò)分析或者檢查源程序的語(yǔ)法、結(jié)構(gòu)、過(guò)程、接口等來(lái)檢查程序的正確性，那么采用靜分析安全測(cè)試的方法有什么優(yōu)缺點(diǎn)呢，且讓小編給你說(shuō)道說(shuō)道。 許多公司都投資于 H...
閱讀 3301·2021-11-23 09:51
閱讀 956·2021-09-03 10:30
閱讀 3226·2021-08-31 09:40
閱讀 3288·2019-08-30 14:22
閱讀 911·2019-08-30 14:09
閱讀 2911·2019-08-30 13:21
閱讀 3249·2019-08-28 18:03
閱讀 2867·2019-08-26 13:44
