持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇🙇🙇。
前行路上勿忘初心 良好的 html 结构依然是根基。随着前端技术发展日新月异，很多小伙伴可能为了追求框架开发，而忽视了最基本的东西，就像盖房子不单单要装修的好，最基本的要房屋结构牢靠合理。
结构语义化
在开始使用cSS布局之前，首先要保证你的Wb页面是以标记结构化的方式编写的。身为前端开发人员，那么你十有八九已经听过将结构（structure）和表现（presentation）分开的说法。
结构化HTML文档主要体现在对HTML标签正确、合理地使用中。选择 HTML 标签时要根据其语义，而不是其样式进行。
为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。一种是为了呈现出表现形式，而忽视标签本身的语义化"错误"的使用标签.一种是优先考虑标签的语义化，创建良好结构的html。
比如：
// 为表现样式编码
<div>
<span style="font-size: 15px">标题</span>
</div>
// 为实现正确的语义编码
<div>
<h3>标题</h3>
</div>
同样是为标题样式而编码，但第二种更具备语义化，容易被解析成标题样式。
避免过度使用div和span
设计HTML时一个常见的错误就是过度使用div和span。少量、必要的合理使用可以明显地增强文档的结构性。但若是文档中使用了太多的dv和span，那么你就应该考虑一下是不是还有更加合适的HTML元素供选择了。 例如，若是h3更能表示内容的含义，那么就不应该使用div，span也不应该替代label的作用。
尽可能少的使用标签
尽可能少的使用标签也应该是一个自始至终都要考虑的问题。仅仅使用必要的标签。这能够让文件保持小巧（也就意味着用户下载速度的提高），也可以让浏览器能够快速完成文档的解析，即得到更快地呈现速度。
适当地使用class和id
适当地使用class和id。class是一类可重用的属性，能够被重复应用到到页面中的任何元素上；而id则是独一无二的，同一个id在每个页面上只能出现一次。
一个元素可以应用多个class，一个class-也可以应用在多个页面元素上，要记住：在同一个页面上不能为多个元素指定相同的id。class和id可以选用字母或数字（a~z、A~Z、0~9）命名，但必须以字母开头。虽然有些浏览器对class和id名称的大小写不敏感，但为了避免bug还是尽量区分毕竟linux下大小写比较敏感。
✅正确表达：
<body class="home">
<p id="video">
<div id="audio"class="top song border">
❎错误表达：
<body class="10home">
<p id="video">
<div id="video"class="top song 5border">
关于分享提一下
如果是分享输出知识，尽可能的完善完善再完善，可能文章一旦发布，后续就逐渐的很少维护但 web 前端知识还在不断更新，最好的就是注明自己所写文章涉及到的环境的基本情况和依赖的工具的版本，及最后更新时间，这样也便于用户确认该内容是否是他所需要的内容。
