简介
heading 标签、SEO、无障碍阅读
ps: 内容有点多，本来只想讲一个点，但是关联性太强了，所以辛苦大家了。
在学习 HTML 标签的时候，很多教程只告诉你 怎么用 而没有讲清楚 是什么，让我们一起从 h1 到 h6 开始重新认识 HTML 标签完善知识体系。
观其形Heading 标签 指的就是网页中的 h1 到 h6 标签，很多同学最基本的认知就是 h1 到 h6 标签字体从大到小。那你有想过既然只是从大到小，那为什么不直接使用
爱思考的同学会说：“可能是为了方便使用吧？”
乍一听好像挺有道理的，但是翻阅超多网站都使用的 bootstrap 源码 scss/_type.scss 会看到在 3到26 行 对标题重新定义了样式：
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
}
h1, .h1 { @include font-size($h1-font-size); }
h2, .h2 { @include font-size($h2-font-size); }
h3, .h3 { @include font-size($h3-font-size); }
h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-font-size); }
h6, .h6 { @include font-size($h6-font-size); }
.lead {
@include font-size($lead-font-size);
font-weight: $lead-font-weight;
}
在这段 scss 代码中，可以看到除了对 h1 到 h6 被重新定义外，还定义了对应的 .h1 到 .h6 类样式。这下带来了新的问题：
开发中经常会重置 Heading 标签 样式，那浏览器定义的默认样式岂不是多此一举？
只是为了方便使用，那 boostrap 还要再定义对应的 .h1 到 .h6 类样式？
知其意在 1991 年，蒂姆·伯纳斯·李首次提出 HTML 的时候，并没有给页面添加样式的方法。如何显示页面是由浏览器决定的，用户也可以通过偏好设置来修改。这就好比现在最经常使用的 markdown 一样，使用一样的语法但是根据不同的设置，可以展示不一样的字体。
在报纸排版中往往会把头条内容加大字号表示重点，并通过其他小字号和页面排版来组织内容结构。
那面对密密麻麻没样式的网页时该怎么区分页面结构呢？参考报纸可以利用 Heading 标签 来组装页面形式，通过 Heading 标签 可以很方便的知道整个页面的结构：
h1 用来修饰网页的主标题，一般是网页的标题，文章标题。
h2 表示一个段落的标题，或者说副标题。
h3 表示段落的小节标题。
h4 到 h6 表示一些不重要的内容，用来做结构区分。
另外一个形象的例子就是 markdown 中的 # ~ ##### 表示标题，我们甚至可以只看 markdown 不需要页面渲染就能读懂文章。这也是 markdown 设计的初衷：方便书写和阅读。
通过 Heading 标签 浏览器可以很容易的读出整个页面的主题结构，甚至可以生成目录方便用户阅读，在没有样式的时候还是相当有用的，当然随着 CSS 的诞生页面样式可以更好的组织，很多同学也就忘记了它的本意。
小练习：遍历 dom 节点通过 Heading 标签来生成一个网页目录。小蜘蛛
廉颇老矣，尚能饭否。
现在很多同学都是使用 在 SEO （搜索引擎优化）时，小蜘蛛 爬取页面结构时还是会用到这些语义化和结构 来了解页面信息。毕竟小蜘蛛并不是人能读懂页面，它们只能按照既定的规则来读取。打开掘金的一篇文章小姐姐的诱惑，控制台选择文章标题 便能看到使用的是 h1 标签： 通过 h1 组织页面结构告诉 小蜘蛛 这个页面的标题是什么，小蜘蛛也会把这个存储起来，当在搜索引擎搜索 小姐姐的诱惑 等相关词语时，就能找到这篇文章啦。当然在页面右侧变是文章目录： 是不是非常方便我们查看文章结构，进行内容的跳转呢？ 除了小蜘蛛外使用 Heading 标签 还能方便特殊群体，最著名的人之一便是 霍金 大大了。霍金 大大只有两个手指头，如果他要浏览网页该怎么办呢？ 其实现在有很多帮助特殊群体的软件，例如浏览器中的无障碍模式。这些软件通过解析页面的结构来帮组特殊群体用户来操作页面。例如列出页面目录方便特殊群体用户选择，读出页面目录帮助 视力障碍人士 方便选着和使用网页。 如果大家都一味的使用 可以看到 自定义 中可以模拟 缩放 和 三维粗触控 等操作，这样像霍金大大也可以使用iPhone进行缩放等特殊操作了，送上一句霍金大大的名言： 现在解决了为什么使用 Heading 标签，那为什么 bootstrap 中还定义了 .h1 到 .h6 标签呢？其实问题的答案已经很明了： 真真正正的在使用字体样式。 不破坏 Heading 标签 的语义，使得造成误解。 如果大家在开发的时候不是只面向企业或者 自己使用，希望大家能尽量使用 Heading 标签 和 语义化标签，除了能带来 SEO 上的帮助还能帮助特殊群体 何乐而不为呢？ H1 の 小秘密 SEO 初体验 img の 小九九 千里姻缘一线牵 如果您想让更多人看到文章可以点个 点赞。 如果您想激励小二可以到 Github 给个 小星星。 如果您想与小二更多交流添加微信 m353839115。 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/103169.html showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/img-tag/poster.png);
简介
SEO、跨域、无障碍阅读、事件、图片标签
小九九 最直接的联想便是 九九乘法表，但是 小九九 也用在形容一个人在心里打着算盘 小主意 和 小秘密。小秘密已经被 H1 の... showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500);
简介
SEO、Meta、搜索引擎优化、简单教程
细心的同学可能发现了开头出现了关键字，这是为什么呢？阅读完本文后大家就会明白了。
同学们有没有想过互联网上用户、网站 有多少呢？这里提供一个网站 internet live stats 里面实时的给出了... showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500);
简介
SEO、Meta、搜索引擎优化、简单教程
细心的同学可能发现了开头出现了关键字，这是为什么呢？阅读完本文后大家就会明白了。
同学们有没有想过互联网上用户、网站 有多少呢？这里提供一个网站 internet live stats 里面实时的给出了... showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500);
简介
SEO、sitemap、搜索引擎优化、简单教程
在暧昧期和暗恋期时心里总是悬挂着：
ta 为什么还不和我表白？
ta 是不是对我没感觉？
ta 是不是只是把我当备胎？
ta 是不是对谁都这样？
解决问题最简单的方式就是直接 问问对方... showImg(https://segmentfault.com/img/remote/1460000018825131);
简介
SEO、robot.txt、搜索引擎优化
在浩海的互联网世界中：
互联网 宛如 宇宙
站点 宛如 星系
网页 宛如 星球
网页内容 宛如 生灵万物
而在互联网世界漫游的搜索引擎爬虫小蜘蛛，就好比一搜穿梭在宇宙里的星际漫游器，想想是不是还挺浪漫的。对于不同的星系有着... 和 来组织页面结构，已经不去在意 Heading 标签 带来的意义了。除了 Heading 标签 在 HTML5 也带来了更多语义化的标签，来帮助我们组织页面结构。
SEO 指的是搜索引擎优化，简单来讲就是怎么让 百度 和 谷歌 更容易理解你的网站并对齐进行排序。
特殊群体
和 特殊群体用户只能一个个 dom 节点听过去了，大家感兴趣可以打开无障碍模式试试看。iPhone 用户最常用的 辅助控制器 其实是设计给特殊群体使用的：
永恒是很长的时间，特别是对尽头而言。 --by 霍金（这次不是鲁迅了）
填坑
在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
本文原稿来自 PushMeTop
相关文章
每日 30 秒 ⏱ img の 小九九
每日 30 秒 ⏱ SEO初体验
每日 30 秒 ⏱ SEO初体验
每日 30 秒 ⏱ 投怀送抱
每日 30 秒 ⏱ 漫游器法则
发表评论
0条评论
阅读 3660·2021-11-16 11:44
阅读 2939·2021-11-12 10:36
阅读 3182·2021-10-08 10:04
阅读 1084·2021-09-03 10:29
阅读 298·2019-08-30 13:50
阅读 2452·2019-08-29 17:14
阅读 1596·2019-08-29 15:32
阅读 950·2019-08-29 11:27
