导读 摘要 今天小编跟大家讲解下有关HTML 元素标签语义化及使用场景 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML 元素...
摘要 今天小编跟大家讲解下有关HTML 元素标签语义化及使用场景 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML 元素标签语 今天小编跟大家讲解下有关HTML 元素标签语义化及使用场景 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML 元素标签语义化及使用场景 的相关资料，希望小伙伴们看了有所帮助。
灵魂三问：
标签语义化是什么 为什么要标签语义化 标签语义化使用场景有哪些下面让我们跟着这三个问题来展开一下本文的内容。
一、标签语义化是什么标签语义化就是让元素标签做适当的事情。例如p标签就是代表文本 button标签代表按钮 nav标签代表导航等等。
二、为什么要标签语义化其实标签语义化是给浏览器和搜索引擎看的。没有人关心你写的 html 代码有没有正确的使用语义化 只有它们关心这件事情 是不是很暖心
为什么浏览器关心DOM 的大部分内容具有隐式语义含义。 也就是说 DOM 采用的原生 html 元素能够被浏览器识别 并且可以预测其在各类平台上的工作方式。
例如用div实现的按钮和用原生button实现的按钮就有一些区别 在表单内button可以不用绑定 onclick 事件就可以提交表单内容 用div实现的按钮则不行。另外在浏览器中按 tab 键盘可以在button之间来回切换 而div则不可以。
还有input标签 type 属性 由于值的不同在手机上的表现也不同。例如 type="tel" 和 type="number" 弹出来的数字键盘是不一样的。
为什么搜索引擎关心搜索引擎的爬虫根据标签来确定上下文、关键字的权重 有利于 seo。
如果你觉得以上两点理由都不能打动你 从而正确的使用语义化 没有关系 使用div一把梭也是可以的。
三、标签语义化使用场景有哪些上面是一个比较常见的整体布局方式 其他布局类型其实都是万变不离其宗 逃不出这个使用框架（文末附上 html 源码）。
除了整体布局外 我们还要更细节一点 关注其他标签的使用方式。例如：
a标签用于跳转。h1-h5用于标题bstrong用于强调ulli用于列表...这只是其中的一部分标签使用方式 更多的还得参考文档。
方便自己 方便他人 请正确使用语义化。
文中 DEMO 源码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>demo1</title> <style> html, body { height: 100%; } * { margin: 0; padding: 0; box-sizing: border-box; } main { height: calc(100% - 120px); border: 1px solid blue; } header, footer { height: 60px;; display: flex; align-items: center; justify-content: center; border: 1px solid red; } header { justify-content: flex-end; } ul { display: flex; align-items: center; justify-content: space-around; } li { list-style: none; border: 1px solid orange; height: 60px; line-height: 60px; width: 100px; text-align: center; } main { display: flex; align-items: center; justify-content: center; } aside { width: 20%; border: 1px solid #000; height: 100%; } .right { width: 80%; height: 100%; } section { height: 200px; border: 1px solid green; } </style></head><body> <header> <nav> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </nav> </header> <main> <aside> <p>这是一个侧边栏 aside</p> </aside> <div class="right"> <section> <p>p1</p> <p>p2</p> </section> <section> <p>p3</p> <p>p4</p> </section> </div> </main> <footer> </footer></body></html>更多文章 敬请关注来源：爱蒂网
版权声明：本文由用户上传，如有侵权请联系删除！