亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

HTML語義化標(biāo)簽探析

DandJ / 1597人閱讀

摘要：具體的語義化標(biāo)簽探析本文主要是為了探析部分標(biāo)簽在語義化中的差別。同時也探索新加入的語義化標(biāo)簽。英文意思為，作用是定義列表中的項(xiàng)目。強(qiáng)調(diào)標(biāo)簽說明在上面的介紹中，已經(jīng)介紹了和，個中差別，看英文既能分辨。

什么是HTML語義化

HTML語義化就是根據(jù)具體內(nèi)容，選擇合適的標(biāo)簽進(jìn)行代碼的編寫。便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼，同時讓搜索引擎的爬蟲能更好的識別。

為什么要語義化

有利于SEO:搜索引擎的爬蟲是讀不懂無語義的span和div的，因此語義化標(biāo)簽?zāi)苁古老x抓取更多的有效信息。

CSS文件讀取失敗的準(zhǔn)備：萬一CSS文件掛了，語義化的HTML也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)。

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

便于團(tuán)隊(duì)開發(fā)和維護(hù)。

具體的語義化標(biāo)簽探析

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

1. ul/ol(列表標(biāo)簽)

ul和ol雖然都是列表項(xiàng)，但是具體使用時，差別還是很大的。

A. ul(無序列表)

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

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

說明: ol的英文全稱為ordered list，表示列表中的項(xiàng)目。是有先后順序的。這一點(diǎn)是ol和ul的本質(zhì)區(qū)別。

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

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

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

dt: 英文意思為defines terms，作用是定義列表中的項(xiàng)目。

dd: 英文意思為defines description，作用是定義列表中項(xiàng)目的注釋。

舉例:


   
計算機(jī)

   
用來計算的儀器 ... ...

   
顯示器

   
以視覺方式顯示信息的裝置 ... ...

效果圖:

C. b/strong , i/em(強(qiáng)調(diào)標(biāo)簽)

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

1. b/strong(加粗)

說明:雖然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)簽是語氣加重，更為重要的強(qiáng)調(diào)，如果兩個strong標(biāo)簽嵌套還表示極度重要。strong的重要程度是要大于em標(biāo)簽的

總結(jié)：b僅僅只是加粗，并沒有任何語義。但是strong標(biāo)簽則有語氣加重的強(qiáng)調(diào)的意思。

2. i/em(斜體)

說明:就像b和strong的關(guān)系一樣。i和em的對應(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)簽僅僅只是將字體顯示為斜體，無任何語義化意思

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)為在文章中突出不同意見或語氣或的一段文本,例如外語，科技術(shù)語、或者是排版用的斜體文字

em(全稱是emphasis):

The  represents a span of text with emphatic stress.

// 意思是說em有強(qiáng)調(diào)的意思

總結(jié):i僅僅只是斜體顯示，并沒有任何語義。但是em標(biāo)簽則有加強(qiáng)的語義在內(nèi)。

3.em/strong(強(qiáng)調(diào)標(biāo)簽)

說明:在上面的介紹中，已經(jīng)介紹了em和strong，個中差別，看英文既能分辨。
em的全稱是:emphasis,意思為強(qiáng)調(diào)。
strong的全稱是:stronger emphasis，意思就是語氣更強(qiáng)的強(qiáng)調(diào)。
總結(jié):em和strong標(biāo)簽均帶有強(qiáng)調(diào)的語義，但是strong標(biāo)簽所表現(xiàn)的強(qiáng)調(diào)語氣要大于em的。

總結(jié)與參考鏈接

這一部分，查閱的文檔和資料太多了，看完了html4發(fā)現(xiàn)html5又更改了意思，只能跑去w3c去看規(guī)范。
總結(jié):i和b在Html5中被賦予語義，不同于html4。em和strong的差別在于強(qiáng)調(diào)的程度。

參考鏈接：

Using  and  elements
HTML5: The Semantic Difference Between Bold and Strong
總結(jié)

暫時總結(jié)的就這么多了,重點(diǎn)在于b/strong , i/em幾個標(biāo)簽的區(qū)別。也是目前前端學(xué)習(xí)中的盲點(diǎn)。
前兩天看到一句話：

"很多人非常努力的學(xué)習(xí)JavaScript，認(rèn)為學(xué)好了JavaScript就是一切。但是忽略了JavaScript其實(shí)是一門"膠水語言"的本質(zhì)，它是用來粘合HTML和CSS的。"

看到這句話后，決定在寒假認(rèn)真學(xué)習(xí)HTML與CSS。這些東西，雖說簡單，但寫好也很難。比如說最近學(xué)習(xí)的Sass，PS切圖等。無論哪個，都屬于技術(shù)盲點(diǎn)。

因?yàn)榻?jīng)驗(yàn)尚淺，所以如果有出錯的地方，希望各位能幫忙指正。
最后附上本人博客地址和原文鏈接，希望能與各位多多交流。

Lxxyx的前端樂園
原文鏈接：寒假前端學(xué)習(xí)(2)——HTML語義化標(biāo)簽探析

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/49715.html

相關(guān)文章

  • HTML語義化

    摘要：近來看面試題的時候，經(jīng)?？吹揭粋€問題語義化是什么意思里面有標(biāo)簽的含義。因?yàn)槎弑硎镜暮x不同。參考資料理解語義化語義化的革新語義化標(biāo)簽語義化標(biāo)簽探析 近來看面試題的時候，經(jīng)常看到一個問題：HTML語義化是什么意思？w3school里面有html標(biāo)簽的含義。然而HTML5中對一些標(biāo)簽進(jìn)行了修改，由于不了解H5的新定義，就很容易弄錯標(biāo)簽之間的意思。例如：既然i標(biāo)簽是指斜體的意思，那么為什么...

    Mike617 評論0 收藏0

  • 靜態(tài)分析安全測試（SAST）優(yōu)缺點(diǎn)探析

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

    codeKK 評論0 收藏0

發(fā)表評論

0條評論

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