这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天。

了解了HTML中一些简单的标签和属性以及属性值后，我们再深入的了解一下HTML。

页面内容划分

页头：

header：一般放置logo，导航

nav：一般放置导航

主体：

main：一般一个页面只有一个main，一般放置重点的主要内容

aside：一般放置跟这个内容相关的但并不是直接属于这个页面内容的（比如广告，比如热点）

article：一般放置文章正文（表示一篇文章，一篇页面也可以没有article，如果有的话也可以有多个article）

页尾：

footer：一般放置参考链接，版权信息，备案信息等内容

---

• HTML语义化

1. HTML中的元素、属性及属性值都拥有某些含义。
2. 开发者应该遵循语义来编写HTML。例如，有序列表用ol；无序列表用ul；lang属性表示内容所使用的语言。

• 我们写的代码是给谁来用的

1. 开发者 - 修改、维护页面
2. 浏览器 - 展示页面
3. 搜索引擎 - 提取关键词、排序
4. 屏幕阅读器 - 给盲人读页面内容

• 语义化的好处

1. 代码可读性
2. 可维护性
3. 搜索引擎优化
4. 提升无障碍性

HTML是传达内容的，而不是传达样式

• 如何做到语义化

1. 了解每个标签和属性的含义
2. 思考什么标签最适合描述这个内容
3. 不使用可视化工具生成代码

个人总结：

学习过了HTML的基础语法和基本功能后，我们又学习到了HTML的语义化，语义化不仅可以方便我们团队的开发，让团队中其他人也可以轻松读懂理解我们编写的代码，还提高了我们的工作效率，促进了团队的无障碍沟通。所以我们平时在进行前端开发的过程中应该严格遵循语义来编写HTML，这样才是一个合格的前端。