写点什么

【CSS 学习总结】第一篇 - HTML 的语义化

作者:Brave
  • 2021 年 12 月 21 日
  • 本文字数:1054 字

    阅读完需:约 3 分钟

一,前言


本篇,主要介绍与 CSS 相关的 HTML 语义化知识;


选用更加符合语义的 HTML 标签,能够使网站在各方面效果得到提升;


二,什么是 HTML


  • HTML:HyperText Markup Language 超文本标记语言;

  • HTML 是一种用于创建网页的标准标记语言(标记语言:用来对"树"进行标记)


三,HTML 常用标签汇总

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;

  • 实体: &lt、&gt、&copy、&nbsp ...;

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;


四,什么是语义化

  • 对文本内容的结构化(内容语义化);

  • 使用更符合语义的标签(代码语义化);

  • 便于开发者之间的协作:阅读、维护,写出更优雅的代码;

  • 同时,让浏览器爬虫、其他辅助技术能够更好的进行解析;


一句话总结:用正确的标签做正确的事;


案例:

strongb 标签均为加粗,在样式效果上是一样的;

但是,加粗需要选用表示"强调"的 strong;


这就是语义化的作用,选用合适的标签;


五,语义化的好处


通过使用语义恰当的 HTML 标签,让页面具有良好的结构与含义,能够有效提高以下效果:


  • 可访问性

能够帮助辅助技术更好的阅读和转译网页,利于无障碍阅读;


  • 可检索性

良好的代码结构和语义,有利于 SEO 优化,能够提高搜索引擎的有效爬取,提高网站流量;


  • 国际化

选用语义化标签,能够让各国开发者更容易理解网页的结构;


  • 团队协作

减少网页开发的差异性,使其他开发者更快地了解网页的结构,便于网站开发、维护效率;


语义化的好处:


1,有利于 SEO 优化;

2,在样式丢失的情况下,能够更好的呈现页面效果;

3,能够更好的支持各类终端,如:无障碍阅读、有声小说等;

4,团队遵循 W3C 统一开发标准,有效降低编码差异,提升团队协作效率;


案例:

网站 logo 使用 div 和 h1 标签效果差异不大,但更推荐适应 h1 标签;

六,结尾


本篇,简单介绍了 html 标签和使用语义化的好处;


下一篇,继续介绍 HTML 的文档声明、meta 元信息、Entity 等;


用户头像

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

评论

发布
暂无评论
【CSS 学习总结】第一篇 - HTML 的语义化