1.之前零零散散了解了一些html标签,通过今天的学习呢,开始试着把这些标签结构化,就不只是
为了完成任务东拼西凑的感觉,而是开始寻找内在的逻辑。
2.第一部分代码涉及<article>\<aside>\<details>
article指被包含的内容是独立的一部分,可以是一篇文章,一首诗。可以内嵌其他标签,比较特殊的包括article,address-作者信息,time-文章发表时间
aside指被包含的东西是注解。必须内嵌标签如p
details指被包含的东西是摘要,默认只显示一部分,点击下拉三角形会显示出全貌。
(1)代码
(2)效果
3.第二部分代码涉及<figure><figcaption><footer><header><main>
figure又是一个独立空间,用来把图片和对应说明文字视为一个整体
figcaption常被figure包含,作为figure的第一个或者是最后一个元素,是对图片内容的文字说明
footer是页脚,包含了作者,数据或文档相关的链接等信息
header用于展示介绍内容,常常包含标题,或者是搜索框之类的
main展示的是文章主体内容
(1)代码
(2)效果
3.第三部分包括<mark>\<nav>
mark用于把文本高亮
nav表明内容是导航条
(1)代码
(2)效果
综上:这些标签好像也没啥大用,就是没啥实际意义,大概就是为了给散乱的标记命名,让别人
知道那部分是啥东西。这也就是代码语义化啦。