百度前端实战训练营第五弹

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）效果

 综上：这些标签好像也没啥大用，就是没啥实际意义，大概就是为了给散乱的标记命名，让别人

知道那部分是啥东西。这也就是代码语义化啦。