「这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战」。
一,前言
本篇,主要介绍与 CSS 相关的 HTML 语义化知识;
选用更加符合语义的 HTML 标签,能够使网站在各方面效果得到提升;
二,什么是 HTML
HTML:HyperText Markup Language 超文本标记语言;
HTML 是一种用于创建网页的标准标记语言(标记语言:用来对"树"进行标记)
三,HTML 常用标签汇总
1,HTML4 常用标签汇总
- 基本文档:
html、head、body ...
; - 基本标签:
h1 ~ h6、p、br、hr ...
; - 文本格式化:
strong、b、em、i、small、strong、del、sub、sup ...
; - 链接:
a、link
; - 区块:
div、span
; - 图片:
img、map、area
; - 列表:
ul、li;ol、li;dl、dt、dd
; - 表格:
table、caption、th、tr、td、thead、tbody、tfoot
; - 表单:
form、input、select option、textarea、button、label
; - 框架:
iframe
; - 实体:
<、>、©、  ...
;
2,HTML5 常用标签汇总
- 图形新元素:
canvas
; - 新多媒体元素:
audio、video、source、embed、track
; - 新表单元素:
deatalist、keygen、output
; - 新的语义和结构元素:
article、aside、bdi、command、details、dialog、summary、figure、figcaption、footer、header、mark、meter、nav、progress、ruby、rt、rp、section、time、wbr
;
四,什么是语义化
- 对文本内容的结构化(内容语义化);
- 使用更符合语义的标签(代码语义化);
- 便于开发者之间的协作:阅读、维护,写出更优雅的代码;
- 同时,让浏览器爬虫、其他辅助技术能够更好的进行解析;
一句话总结:用正确的标签做正确的事;
案例:
strong
和b
标签均为加粗,在样式效果上是一样的;但是,加粗需要选用表示"强调"的 strong;
五,语义化的好处
通过使用语义恰当的 HTML 标签,让页面具有良好的结构与含义,能够有效提高以下效果:
- 可访问性:能够帮助辅助技术更好的阅读和转译网页,利于无障碍阅读;
- 可检索性:良好的代码结构和语义,有利于 SEO 优化,能够提高搜索引擎的有效爬取,提高网站流量;
- 国际化:选用语义化标签,能够让各国开发者更容易理解网页的结构;
- 团队协作:减少网页开发的差异性,使其他开发者更快地了解网页的结构,便于网站开发、维护效率;
语义化的好处:
- 1,有利于 SEO 优化;
- 2,在样式丢失的情况下,能够更好的呈现页面效果;
- 3,能够更好的支持各类终端,如:无障碍阅读、有声小说等;
- 4,团队遵循 W3C 统一开发标准,有效降低编码差异,提升团队协作效率;
案例:网站 logo 使用 div 和 h1 标签效果差异不大,但更推荐适应 h1 标签;
六,结尾
本篇,简单介绍了 html 标签和使用语义化的好处;
下一篇,继续介绍 HTML 的文档声明、meta 元信息、Entity 等;
更新日志
- 20230507:格式化文档,添加标签改善可读性;