摘要：语义如何运用语义类标签来呈现网页通过网页案例来学习语义类标签最初的设计场景就是超文本，早期工作组的专家都是出版界书籍排版的专家。标记的部分有三个注记，它在文章中的作用就是额外的注释，但是中并没有相关的语义，这时可以使用标签进行相关实现。

重学前端是程劭非（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的建议：“你可以尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。”