Html5是Html的第五代新标准,Html5的出现,使一些标签具有了语义化,下面对Html5的新标签进行汇总
语义化的好处?
1. 去掉样式后文章的结构可以清晰呈现
2. 有益于SEO(搜索引擎优化)
3. 便于团队开发和维护
结构标签
结构标签可以理解为有语义的div
前7个标签在写文章结构时使用即可
- article
- 定义文章
- 使用:论坛帖子、博客文章、新闻故事、评论...
- aside
- 定义文章的侧边栏
- nav
- 定义导航部分
- header
- 定义section或者document页眉
- 使用:文章介绍内容、导航链接器的容器...
- footer
- 定义section或者document页脚
- 使用:文裆创建者姓名、文档的版权信息、使用条款的链接、联系信息...
- main
- 定义文档的主体部分
- section
- 定义文档中的某个区域
- 使用:章节、头部、底部...
- details
- 定义展开详细内容
- 只有safari和chrome支持
- figure
- 定义一组某提元素及文字
- figcaption 定义figure的caption
details 的外表样式单一,其功能可以用JavaScript实现,这个标签也不常用
<details>
<p>这是一个详情展开</p>
</details>
figure 标签类似于图文组合,但不常用,了解即可
<figure>
<img src="avatar.jpg" alt="" width="100">
<figcaption>这是小狸</figcaption>
</figure>