HTML基础(四):语义化标签&字符实体

HTML标签的语义化

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

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

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

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

  • div标签:一行只显示一个(独占一行)
  • span标签:一行可以显示多个
  • 代码
<div>这是div标签</div>
<span>这是span标签</span>

有语义的布局标签

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

Screenshot 2023-12-28 at 14.58.05.png

  • dl dt dd标签

Screenshot 2023-12-28 at 15.01.29.png

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

字符实体

实体字符学习,空&nbsp;&nbsp;格
posted @ 2022-08-26 10:06  是小鱼呀  阅读(35)  评论(0编辑  收藏  举报