HTML基础（四）：语义化标签&字符实体

HTML标签的语义化#

所谓的标签语义化，就是指标签的含义。语义化让页面有良好的结构与含义，从而让人和机器能快速理解网页内容。

• 作用：
  • 方便代码的阅读和维护
  • 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
  • 使用语义化标签会具有更好地搜索引擎优化
  • 容易兼容不同设备
• 核心：合适的地方给一个最为合理的标签。
• 语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。
• 遵循的原则：先确定语义的HTML ，再选合适的CSS。

没有语义的布局标签-div&span#

实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

• div标签：一行只显示一个（独占一行）
• span标签：一行可以显示多个
• 代码

Copy
<div>这是div标签</div>
<span>这是span标签</span>

有语义的布局标签#

• 标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

• em strong标签

• dl dt dd标签

• 注意点：
  • 以上标签显示特点和div一致，但比div多了不同语义

字符实体#

• 场景：在网页中展示特殊符号效果时，需要使用字符实体代替
• 结构：&英文；
• 常见字符实体：
  https://m.runoob.com/html/html-entities.html
• 代码

Copy
实体字符学习，空  格