溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5標(biāo)簽的語義認(rèn)知和理解（1）

發(fā)布時(shí)間：2020-06-18 12:55:19 來源：網(wǎng)絡(luò) 閱讀：347 作者：shyleoking 欄目：移動(dòng)開發(fā)

隨著服務(wù)器的處理能力越來越大，互聯(lián)網(wǎng)級(jí)開發(fā)終于開始全面火熱（前幾年我和很多人說，不要光關(guān)注所謂企業(yè)級(jí)開發(fā)，未來馬上將進(jìn)入互聯(lián)網(wǎng)級(jí)開發(fā)），HTML5的預(yù)熱為前端技術(shù)帶來了更多機(jī)會(huì)和熱點(diǎn)。

我用的是VS2008開發(fā)工具，作為懶人（對(duì)于開發(fā)工具有強(qiáng)烈的依賴性，懶得記API單詞，懶得多打字，懶得查手冊(cè)）的代表，Intellisense 對(duì)我一直是非常重要的事情，我喜歡微軟的開發(fā)平臺(tái)，也就是應(yīng)為VS開發(fā)工具有良好的高速的Intellisense 我才喜歡再微軟的平臺(tái)上開發(fā)，對(duì)于習(xí)慣用記事本的牛人，我一直內(nèi)心仰慕但堅(jiān)決不從。VS2008對(duì)HTML5沒有良好的支持的時(shí)候，我一直是光看不練，直到我看到了“HTML 5 intellisense and validation schema for Visual Studio 2008 and Visual Web Developer”之后，我的VS2008開始部分的支持HTML5了，至少element和CSS開發(fā)有了為懶人服務(wù)的Intellisense 了，親，太高興了，可惜，對(duì)DOM 的javasScript API還沒有支持（哦，關(guān)于這個(gè)話應(yīng)該怎么表達(dá)，和很多朋友有爭(zhēng)論，你明白我的意思就可以，這個(gè)插件還不支持HTML5比如類似canvas.getContext這樣的函數(shù)）。

下載了這個(gè)插件之后，我們可以在工具--選項(xiàng)中看到新的HTML5的驗(yàn)證架構(gòu)，在頁面開發(fā)環(huán)境中也可以算作目標(biāo)驗(yàn)證架構(gòu)師HTML5。同時(shí)開始支持對(duì)html標(biāo)簽和css的部分Intellisense 支持。

最早，也是最令人印象深刻，特別是對(duì)我這樣的懶人而言，記得最深的就是初始化的html元素被簡(jiǎn)單到非常極致的情況了

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6. <body>  
  7. </body>  
  8. </html> 

我第一次聽說不要寫DOCTYPE中的內(nèi)容后，是非常的激動(dòng)啊，終于不要那些亂七八糟的東西了，不過轉(zhuǎn)念一想，我好像也從來沒有寫過，都IDE幫我搞定的嘛，慚愧啊慚愧。

 

然后我們說HTML5的新元素，在了解新元素前，我想先說明下個(gè)人觀點(diǎn)，對(duì)于標(biāo)簽的運(yùn)用無論如何都是見仁見智的東西，標(biāo)準(zhǔn)是一個(gè)指導(dǎo)和參考意見，不同的人有不同的理解的哈利波特（莎士比亞我不是說你），我的理解從最初的HTML4的語義標(biāo)簽開始：

 

  1. 標(biāo)簽的分類方式很多，HTML4中我簡(jiǎn)單的將標(biāo)簽分為默認(rèn)block和默認(rèn)inline這種分法，和有語義以及無語義（樣式標(biāo)簽不談了）的分法。
  2. 除了div之外i，其他標(biāo)簽都是有語義的（聲明下，類似font等樣式標(biāo)簽我早就不算HTML4的使用中了），div的含義只是在邏輯上將一些標(biāo)簽視同為一組，可以共同處理
如果你同意我這樣說，那么你也會(huì)同意我說，html5中很多新的基于結(jié)構(gòu)的元素就是來替代div的，或者說可以替代一部分div的作用。這些元素用來說明元素區(qū)域和分組的用途。
原因是，未來的網(wǎng)頁不僅僅是給PC上的瀏覽器看的，而且更多的要提供給移動(dòng)設(shè)備，專有設(shè)備，小型設(shè)備上的瀏覽器來方便，而這些瀏覽器需要在不同的環(huán)境中重新處理頁面內(nèi)容，給予用戶更好的閱讀體驗(yàn)，所有頁面的內(nèi)容必須對(duì)瀏覽器提供有參考價(jià)值的指導(dǎo)，便于瀏覽器提供剪裁、突出和特定操作的處理。

所有的文檔都應(yīng)該有一個(gè)header元素，特別是頁面本身就是一個(gè)document對(duì)象，所以如果不是有特別的理由，你的頁面的最上面的部分應(yīng)該有一個(gè)header元素，其他的文章部分也可能會(huì)有header，要小心的是，避免header被濫用，header表示的是一組介紹性或者導(dǎo)航性質(zhì)的輔助文字，記住導(dǎo)航和介紹性這兩個(gè)關(guān)鍵詞。
所以，頁面的最上面一個(gè)header應(yīng)該包含一個(gè)導(dǎo)航的標(biāo)簽：nav。雖然好像沒有必須的規(guī)定，但是我認(rèn)為再nav中只應(yīng)該包含ol或li元素，畢竟nav的作用是導(dǎo)航，而導(dǎo)航應(yīng)該是一組路徑的集合。header中還可以包含其他用于介紹的信息，比如首頁的公司圖標(biāo)，公司名稱，或產(chǎn)品主題頁的產(chǎn)品名稱神馬的。
 
  1. <body> 
  2.     <header> 
  3.         <img alt="logo" /> 
  4.         <h2> 
  5.             *****公司</h2> 
  6.         <nav> 
  7.             <ol> 
  8.                 <li>導(dǎo)航1</li> 
  9.                 <li>導(dǎo)航2</li> 
  10.                 <li>導(dǎo)航3</li> 
  11.                 <li>導(dǎo)航4</li> 
  12.                 <li>導(dǎo)航5</li> 
  13.             </ol> 
  14.         </nav> 
  15.     </header> 
  16. </body> 
當(dāng)然也可以這么下
 
  1. <body> 
  2.     <header> 
  3.         <h2> 
  4.             <img alt="logo" /> 
  5.         </h2> 
  6.         <nav> 
  7.             <ol> 
  8.                 <li>導(dǎo)航1</li> 
  9.                 <li>導(dǎo)航2</li> 
  10.                 <li>導(dǎo)航3</li> 
  11.                 <li>導(dǎo)航4</li> 
  12.                 <li>導(dǎo)航5</li> 
  13.             </ol> 
  14.         </nav> 
  15.     </header> 
  16. </body> 

隨便說一下，HTML5中繼續(xù)保留了ol和ul，我個(gè)人的建議是吧那些解釋差異很復(fù)雜的同類元素去掉，比如保留abbr放棄acronym，可惜ol和ul都保留下來了，不過我建議用ol。

對(duì)于文檔型頁面來說，比如blog的主頁，有主標(biāo)題和副主標(biāo)題，那可以在header中用hgroup元素來處理
  1. <header> 
  2.     <h2> 
  3.         像螞蟻一樣工作，像蝴蝶一樣生活  
  4.     </h2> 
  5.     <h3> 
  6.         記錄成長(zhǎng)的點(diǎn)滴  
  7.     </h3> 
  8.     <p> 
  9.         類似后面文章的前言部分啦</p> 
  10. </header> 

文檔本身可以用article元素來標(biāo)記，article可以描述整篇文章和其包含的所有信息。往往article中也包含了header（我說的是往往）或者hgroup（這個(gè)倒真的不一定需要用）。

對(duì)于article是不是需要header，有這么幾個(gè)方式可以判斷，是不是有H和一些描述共同組合頁眉信息？如果只有H，沒有其他描述，那就不必用header了
  1. <article> 
  2.     <h2> 
  3.         標(biāo)題  
  4.     </h2> 
  5. </article> 

如果，有主副標(biāo)題，但沒有說明性描述，那直接hgroup也可以

  1. <article> 
  2.     <hgroup> 
  3.         <h2> 
  4.             主標(biāo)題  
  5.         </h2> 
  6.         <h3> 
  7.             副標(biāo)題  
  8.         </h3> 
  9.     </hgroup> 
  10. </article> 

現(xiàn)在應(yīng)該對(duì)header更有感覺了，是為了向?yàn)g覽器描述出，哪些是文檔的頁眉區(qū)。

今天就道這里，累死了，明天繼續(xù)扯HTML元素的理解和認(rèn)知，對(duì)呀HTML5的理解我遵守的原則是：自圓其說，不勉強(qiáng)。一個(gè)元素我們要弄明白在哪里用是最合適的，要用的有道理了，哎睡覺了。
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手