摘要：語義如何運用語義類標簽來呈現網頁通過網頁案例來學習語義類標簽最初的設計場景就是超文本，早期工作組的專家都是出版界書籍排版的專家。標記的部分有三個注記，它在文章中的作用就是額外的注釋，但是中并沒有相關的語義，這時可以使用標簽進行相關實現。

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

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

案例網址：

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

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

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

標記的這塊區域屬于aside內容主要就是起到導航作用。

標記的這塊區域文章的主體部分可使用article，具有明確的獨立性。

標記的部分可以像下面這樣解析：

hgroup是標題組

h1是一級標題：World Wide Web

h2是二級標題：From Wikipedia, the free encyclopedia

代碼的話就類似這樣：

World Wide Web 
From Wikipedia, the free encyclopedia

說實話這個標簽我沒有見過，有點慚愧，我特意查了一下w3c的abbr標簽的定義和用法：

標簽指示簡稱或縮寫，比如 "WWW" 或 "NATO"。

通過對縮寫進行標記，您能夠為瀏覽器、拼寫檢查和搜索引擎提供有用的信息。

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

瀏覽器支持情況：

所有瀏覽器都支持 標簽

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

實列：標記一個縮寫

The PRC was founded in 1949.

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

WWW.

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

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

答案是不用。

解釋如下：

winter: hr表示故事走向的轉變和話題的轉變，顯然這里是兩個標題，并沒有這種關系，應該通過css的border來實現

修改顏色使用background-color屬性

hr標簽是塊級標簽，有邊框

設置它自身的邊框為0，然后在設置height。

標記的部分有三個注記（note），它在文章中的作用就是額外的注釋，但是html中并沒有note相關的語義，這時可以使用p標簽進行相關實現。

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

比如代碼：

    hello winter
    The World Wide Web (WWW)

關于“引述”標簽的用法

blockquote：表示段落引述內容

q：表示行內引述內容

cite：表示引述的作品名

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

1）、w3c關于blockquote標簽

定義和用法：

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

瀏覽器支持情況：

所有主流的瀏覽器均支持 
 標簽，注釋：沒有瀏覽器能夠正確地顯示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 進行驗證，那么
元素必須包含塊級元素，比如這樣：

    
here is a long quotation here is a long quotation

2）、w3c關于q標簽

定義和用法：

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

瀏覽器支持情況：

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

語法：

例子：

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

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

3）、w3c關于cite標簽

定義和用法:

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

更多可以參考w3c網址...

瀏覽器支持情況：

所有瀏覽器都支持標簽。

例子：

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

What is the difference between the Web and the Internet?

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

代碼如下：

Retrieved 16 July 2015.

如圖所示標記部分：圖文的結合組成了一個figure的語法現象，figure標簽用于表示與主文章相關的圖像...等內容

例子：

用作文檔中插圖的圖像：

  
黃浦江上的的盧浦大橋
  

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

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

dfn標簽定義和用法：

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

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

The Internet is a global system of interconnected computer networks.

如圖這個可以導航并且有順序，代碼如下：

這三個標簽的定義和用法:

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

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

code：標簽用于表示計算機源代碼或者其他機器可以閱讀的文本內容。

例子代碼：

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

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

上面winter已經講了大概20來個標簽，下面這些是沒講到的，winter做了一下整理補充

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