HTML5标签语义化

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_41847321/article/details/102678903

标签语义化的作用：

• 能够便于开发者阅读和写出更优雅的代码。

• 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。

• 更好地搜索引擎优化。

H5中新增的语义标签：

• <section> 表示区块

• <article> 表示文章。如文章、评论、帖子、博客

• <header> 表示页眉

• <footer> 表示页脚

• <nav> 表示导航

• <aside> 表示侧边栏。如文章的侧栏

  扫描二维码关注公众号，回复： 7566307 查看本文章

• <figure> 表示媒介内容分组。

• <mark> 表示标记 (用得少)

• <progress> 表示进度 (用得少)

• <time> 表示日期

H5中支持自定义属性，必须以data-开头，通过dataset[ ]获取

<div class="box" data-content="hello">hello world</div>
<script>
    let box = document.getElementByClassName('box')[0];
    console.log(box.dataset['content']);
</script>