摘要：語義如何運(yùn)用語義類標(biāo)簽來呈現(xiàn)網(wǎng)頁通過網(wǎng)頁案例來學(xué)習(xí)語義類標(biāo)簽最初的設(shè)計場景就是超文本，早期工作組的專家都是出版界書籍排版的專家。標(biāo)記的部分有三個注記，它在文章中的作用就是額外的注釋，但是中并沒有相關(guān)的語義，這時可以使用標(biāo)簽進(jìn)行相關(guān)實(shí)現(xiàn)。

重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，郵箱：kaimo313@foxmail.com。

HTML最初的設(shè)計場景就是“超文本”，早期HTML工作組的專家都是出版界書籍排版的專家。

案例網(wǎng)址：

https://en.wikipedia.org/wiki/World_Wide_Web

打不開上面這個網(wǎng)址的，（winter很貼心）提供了副本網(wǎng)址：

http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html

標(biāo)記的這塊區(qū)域?qū)儆赼side內(nèi)容主要就是起到導(dǎo)航作用。

標(biāo)記的這塊區(qū)域文章的主體部分可使用article，具有明確的獨(dú)立性。

標(biāo)記的部分可以像下面這樣解析：

hgroup是標(biāo)題組

h1是一級標(biāo)題：World Wide Web

h2是二級標(biāo)題：From Wikipedia, the free encyclopedia

代碼的話就類似這樣：

World Wide Web 
From Wikipedia, the free encyclopedia

說實(shí)話這個標(biāo)簽我沒有見過，有點(diǎn)慚愧，我特意查了一下w3c的abbr標(biāo)簽的定義和用法：

標(biāo)簽指示簡稱或縮寫，比如 "WWW" 或 "NATO"。

通過對縮寫進(jìn)行標(biāo)記，您能夠?yàn)闉g覽器、拼寫檢查和搜索引擎提供有用的信息。

標(biāo)簽最初是在 HTML 4.0 中引入的，表示它所包含的文本是一個更長的單詞或短語的縮寫形式。

瀏覽器支持情況：

所有瀏覽器都支持 標(biāo)簽

注釋：IE 6 或更早版本的 IE 瀏覽器不支持 標(biāo)簽。

實(shí)列：標(biāo)記一個縮寫

The PRC was founded in 1949.

通過這些介紹，winter這里提的WWW就很好理解了：

WWW.

你們一開始是不是覺得這里是不是用hr嗎？

我一開始認(rèn)為就是用hr，但被winter打臉了_(:3」∠)_.

答案是不用。

解釋如下：

winter: hr表示故事走向的轉(zhuǎn)變和話題的轉(zhuǎn)變，顯然這里是兩個標(biāo)題，并沒有這種關(guān)系，應(yīng)該通過css的border來實(shí)現(xiàn)

修改顏色使用background-color屬性

hr標(biāo)簽是塊級標(biāo)簽，有邊框

設(shè)置它自身的邊框?yàn)?，然后在設(shè)置height。

標(biāo)記的部分有三個注記（note），它在文章中的作用就是額外的注釋，但是html中并沒有note相關(guān)的語義，這時可以使用p標(biāo)簽進(jìn)行相關(guān)實(shí)現(xiàn)。

如果上下文中某些詞很重要我們可以用strong標(biāo)簽

比如代碼：

    hello winter
    The World Wide Web (WWW)

關(guān)于“引述”標(biāo)簽的用法

blockquote：表示段落引述內(nèi)容

q：表示行內(nèi)引述內(nèi)容

cite：表示引述的作品名

這個我基本很少用，為了弄的更清楚一點(diǎn)，我又去查W3C關(guān)于blockquote，q，cite的定義跟用法：

1）、w3c關(guān)于blockquote標(biāo)簽

定義和用法：

 標(biāo)簽定義塊引用。
與 
 之間的所有文本都會從常規(guī)文本中分離出來，經(jīng)常會在左、右兩邊進(jìn)行縮進(jìn)（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。

瀏覽器支持情況：

所有主流的瀏覽器均支持 
 標(biāo)簽，注釋：沒有瀏覽器能夠正確地顯示cite屬性。

例子：

    Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.

提示：

如需把頁面作為 strict XHTML 進(jìn)行驗(yàn)證，那么
元素必須包含塊級元素，比如這樣：

    
here is a long quotation here is a long quotation

2）、w3c關(guān)于q標(biāo)簽

定義和用法：

cite 屬性規(guī)定引用的來源。該屬性的值是一個包含在引號中并指向聯(lián)機(jī)文檔的 URL，以及（如果有可能的話）引用在該文檔中的確切位置。

瀏覽器支持情況：

主流瀏覽器均不支持 cite 屬性。不過，搜索引擎可能會使用該屬性獲得更多有關(guān)引用的信息。

語法：

例子：

下面這個q元素中的cite屬性指定了引用的來源：

    WWF"s goal is to:
    
        build a future where people live in harmony with nature
     we hope they succeed.

3）、w3c關(guān)于cite標(biāo)簽

定義和用法:

標(biāo)簽通常表示它所包含的文本對某個參考文獻(xiàn)的引用，比如書籍或者雜志的標(biāo)題。按照慣例，引用的文本將以斜體顯示。

更多可以參考w3c網(wǎng)址...

瀏覽器支持情況：

所有瀏覽器都支持標(biāo)簽。

例子：

比如作品名：What is the difference between the Web and the Internet?

What is the difference between the Web and the Internet?

圖片標(biāo)記劃線部分為日期，為了讓機(jī)器閱讀更加方便，我們可以添加time標(biāo)簽

代碼如下：

Retrieved 16 July 2015.

如圖所示標(biāo)記部分：圖文的結(jié)合組成了一個figure的語法現(xiàn)象，figure標(biāo)簽用于表示與主文章相關(guān)的圖像...等內(nèi)容

例子：

用作文檔中插圖的圖像：

  
黃浦江上的的盧浦大橋
  

figcaption標(biāo)簽用作文檔中插圖的圖像，帶有一個標(biāo)題，代碼如下：

我剛開始看的時以為是dnf（大笑），這又是我沒見過的_(:3」∠)_，于是我先查了一下w3c關(guān)于dfn標(biāo)簽，感覺介紹很少

dfn標(biāo)簽定義和用法：

標(biāo)簽可標(biāo)記那些對特殊術(shù)語或短語的定義。現(xiàn)在流行的瀏覽器通常用斜體來顯示 中的文本。將來，還可能有助于創(chuàng)建文檔的索引或術(shù)語表。

圖片劃線部分就有Internet和WWW的定義，例子代碼如下：

The Internet is a global system of interconnected computer networks.

如圖這個可以導(dǎo)航并且有順序，代碼如下：

這三個標(biāo)簽的定義和用法:

pre：元素可定義預(yù)格式化的文本。被包圍在 pre元素中的文本通常會保留空格和換行符。常見應(yīng)用就是用來表示計算機(jī)的源代碼。

samp：表示一段用戶應(yīng)該對其沒有什么其他解釋的文本字符

code：標(biāo)簽用于表示計算機(jī)源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容。

例子代碼：

    
        GET /home.html HTTP/1.1
        Host: www.example.org
    

    
        
            
                
            
            
                
The World Wide Web, abbreviated as WWW and commonly known ...
            
        
    

上面winter已經(jīng)講了大概20來個標(biāo)簽，下面這些是沒講到的，winter做了一下整理補(bǔ)充

通過winter的這個案例梳理，我感覺自己對html認(rèn)識深那么一點(diǎn)，html知識也稍微拓展了一點(diǎn)，也希望大家對html有不一樣的認(rèn)識，winter的建議：“你可以盡量只用自己熟悉的語義標(biāo)簽，并且只在有把握的場景引入語義標(biāo)簽。這樣，我們才能保證語義標(biāo)簽不被濫用，造成更多的問題。”