案例:wiki文章,PC端打开 https://en.wikipedia.org/wiki/World_Wide_Web
或者 http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html
你就会看到如下的界面:
现在尝试分析一下,用语义类标签去呈现这个网页,开始划分
aside:左侧侧边栏,是导航性质的工具内容
article:文章主体部分,因为主体部分具体明确的独立性
hgroup,h1,h2:hgroup是标题组,h1和h2是对于的一二级标题,代码如下:
World Wide Web
From Wikipedia, the free encyclopedia
abbr:表示缩写
hr:表示故事走向的转变或话题的转变。但是此处显然不是这种关系,所有用hr不恰当,应该使用CSS的border将它实现
p:普通的段落,用p标签实现
strong:从上下文看这些词都很重要,因此黑体呈现,代码如下:
A global map of the web index for countries in 2014
The World Wide Web (WWW), also called the Web,
......
blockquote,q,cite:表示“引述”的时候用这3个标签,blockquote表示段落级引述的内容,q表示行内引述的内容,cite表示引述的作品名;
这里的作品名称"World Wide Web Timeline?",应当用cite标签;
在文章的结尾处References一节中,所有的作品名称也应当加入cite标签
"World Wide Web Timeline?"
. Pew Research Center. 11 March 2014.
Archived from the original on 29 July 2015. Retrieved 1 August 2015.
time:除了引用文章,还出现了日期,为了机器阅读更加方便,应当加入time标签(为了方便观察标签,做了换行处理)
"World Wide Web Timeline?"
. Pew Research Center.
. Archived from the original on 29 July 2015. Retrieved
.
figure,figcaption:这种出现在文中的图片,不仅仅是一个img标签,它和下面的文字组成了一个figure的语法现象,figure用于表示与主文章相关的图像、照片等流内容
这种插入文章中的内容,不仅限图片、代码、表格等,只有具有一定包含性(类似独立句子)的内容,都可以用figure。可以用figcaption表示内容的标题,当然也可以没有标题
dfn:文中定义了internet和World Wide Web,使用dfn标签来包裹被定义的名词
The terms Internet and World Wide Web are often used without much distinction. However, the two are not the same.
The Internet is a global system of interconnected computer networks.
In contrast, the World Wide Web is a global collection of documents and other resources, linked by hyperlinks and URIs.
nav,ol,ul:因为这里的目录顺序不可随便改变,所以使用多级的ol结构;ol与ul的区分是内容是否有顺序关系,每一项的前面不论是数字还是点,都不会影响语义的判断。注意不要因为视觉的表现效果,而改变语义的使用
pre,samp,code:
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
标签的一个常见应用就是用来表示计算机的源代码。
samp 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时,通常要用到这个标签。
GET /home.html HTTP/1.1 Host: www.example.orgcode 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
<html> <head> <title>Example.org – The World Wide Web</title> </head> <body> <p>The World Wide Web, abbreviated as WWW and commonly known ...</p> </body> </html>
其他标签补充:
最后winter老师建议:你可以尽量只用自己熟悉的语义标签,并且只在有把握的场景引入语义标签。这样,我们才能保证语义标签不被滥用,造成更多的问题。