上一课讲到了语义化标签的3个运用场景:
1.自然语言的补充
2.作为标题
3.作为整体结构
这节课会试着用语义化标签去描绘一个wiki网页, 这是上述3个场景使用的具体例子.
先上链接:
https://en.wikipedia.org/wiki/World_Wide_Web
这是我们将要描绘的网页
下面是使用过程:
1.使用aside标签 和正文不那么相关的内容,比如导航,广告等
2.使用article标签 描述文章的主体
3.hgroud,h1,h2
这里,出现了一个大标题World wide web,适合用H1标题
接下里出现了一个副标题.From Wikipedia,from free encyclopedia.这个地方适合用h2,和h1组成一个hgroup.
4.abbr 缩写使用的标签
<abbr title='world wide web'></abbr>
5.hr
如上图,上面有条横线,是不是要用hr呢?
答案是否定的, hr 表示故事走向的转变或者话题的转变, 显然这里并不是这样.所以这里用css的border写样式就好了.
6.p 描述段落
7.strong 强调,作为自然语言表达的补充
8.blockquote, q, cite
引述标签
blockquote表示段落级引述
q表示行内的引述
cite表示引述的作品名
这里作品名用cite, 段落引述用blockquote或者q
9.time
出现日期时,为了让机器阅读更加方便,可以加上time标签
10.figure, figcaption
用于表示与主文章相关的图像、照片等流内容
可以这样写:
<figure>
<img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
<figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>
11.nav, ol, ul 在导航中使用
12.pre 表示这部分内容是预先排版过的,不需要浏览器进行排版
samp 表示示例输出
code 包裹的是计算机代码
下面红框的内容就可以用pre和samp来包裹
至于code可以包裹一段JS代码之类的
下面是补充一些案例没有提及的标签:
最后:
尽量只用自己熟悉的标签, 在有把握的场景中进行使用, 这样才不会引入更多的问题.
这节课并不难,只是上节课的场景的具体使用,希望大家看了之后能对这些标签有一个更加具体的了解,不太懂的可以去w3school具体看一看
语义化标签的内容讲完了,做个总结:
2节课下来我觉得自己对语义化标签有了更深的认识,语义化标签其实就是一种友好的体现,对开发者友好,对视障者友好,对机器(搜索引擎爬虫)友好,同时语义化元素体现了网页是最初出现作为传递信息的方式这一理念,将信息传递得更加严谨和清晰.最后,我还熟悉了几种场景,对几种语义标签的使用更加有把握.
好了,以上是我对语义元素的认识.