为什么使用.h1而不是实际的h1？
在Bootstrap CSS项目中 ，为您的标题标签（H1，H2，H3，H4，H5，H6）提供样式，但也有一系列基于标题的类名称（.h1，.h2，.h3 ，.h4，.h5，.h6）。 如果没有正确使用H1标签，使用H1的类名有什么好处？ 我认为你总是想确保你的HTML反映你的视觉重要性。
任何想法解释使用.h1而不是使用h1标签的好理由，将不胜感激。
你问：
为什么使用
.h1而不是实际的h1？
简短的回答：
目标是一起使用两者。
当devise中的印刷字体的大小与语义上合适的标题水平不相关时， .h*类的用处就起作用了。 通过将问题分成两部分，我们可以干净地解决这两个问题。
第一位是元素/标签。 ' <h*> '负责语义，可访问性和SEO。
第二位是class级。 ' .h* '负责视觉语义和印刷层次。
很长的回答：
我相信这些课程的起源来自OOCSS项目：
面向对象的CSS
自从我上次查看OOCSS以来，最近一次迭代已经发生了一些变化，但是下面是相关的heading.css文件，来自一个较老的提交，它具有我熟悉的.h1 – .h6类：
6e481bc18f oocss / core / heading / heading.css
来自评论：
.h1–.h6类应用于维护语义上合适的标题级别 – 不适用于非标题
…
如果需要额外的标题，则应该通过附加的类创build，而不是通过位置相关的样式
注意上面的重点 。
为了解释为什么要使用这些类，请参阅：
- stubbornella.org ： 不要使用HTML5部分样式标题 （Nicole，这篇文章的作者是OOCSS的创build者）
- csswizardry.com：CSS中 实用，实用的字体大小
- Google网上论坛>面向对象的CSS>标题问题：基本概念/用法？ （我在12年9月份问过的一个问题）
以上链接相关引用：
1. stubbornella.org
… [HTML5]段元素是为了帮助浏览器找出真正的标题级别，但不一定要决定如何devise。
那么，我们如何在HTML5世界中定义标题呢？
…我们不应该使用切片元素的造型。 我们应该让他们完成他们所devise的工作，即整理文档树，解决样式问题的另一种方式，以更好地实现我们的目标：使用简单的可重复使用的类名，可以应用于我们的任何标题，不pipe多深他们可能在切片内容中。
我build议将网站的标题抽象为类，因为那样它们便于携带，可预测和干燥。 你可以称他们任何你喜欢的。
2. csswizardry.com
另一个智慧[Nicole Sullivan]给我们提供的绝对精彩的东西就是我所说的双层标题层次结构。 这是每次在CSS中定义标题时定义一个类的习惯。
…通过分配一个类以及每个标题样式，我们现在将这些样式附加到一个非常灵活的select器，可以移动到任何地方，而不是一个非常具体和不可移动的select器。
3. groups.google.com
这是一个伪html5用法示例（h / t Jamund Ferguson ）：
<body> <div class="main"> <h1>Main Heading</h1> <section> <h1 class="h2">Section Header</h1> </section> </div> <aside class="side"> <article class="widget"> <h1 class="h3">Sidebar Headings</h1> </article> <article class="widget"> <h1 class="h3">Sidebar Headings</h1> </article> </aside> </body>
请阅读完整的文章（和主题），通过上面的链接，获取更多与这个问题/主题相关的详细信息。
大多数样式表都有一组对应于标题样式1到6的字体大小。有时在页面上的其他地方，网页devise师想要在文本上使用相同的字体大小， 而不应该是实际标题元素的一部分，原因。 而不是为每个像.size-12 ， .size-14 ， .size-16等大小的名称提供名称，只需要使用类似于标题的类名来命名。 这样，即使它实际上不是H1元素，也知道文本的大小与H1元素的大小相同。 我自己做了几次。
我能想到的一些原因是：
- 使用div而不是适当的标签来获得一个标题的视觉，而不会影响search引擎优化
- 避免浏览器不一致的问题
- 与其他图书馆和框架的兼容性，select做原因1和2相同
- devise灵活性（正如@scrappedcola在评论中指出的那样）
这允许从视觉层次分离语义层次结构。 例如，我想告诉观众一件事，同时告诉一台电脑（search引擎）另外一件事。
<article> <h1 class="h1">Page Title</h1> <p>Some content</p> <section> <h1 class="h2">Section Heading</h1> <div class="h6">Sub Heading</div> <p>Some content</p> </section> <section> <h1 class="h2">Section Heading 2</h1> <div class="h6">Sub Heading 2</div> <p>Some content 2</p> </section> </article>
看到：
我唯一能想到的就是search引擎。 许多人会看到一个实际的H1标签作为一个页面的标题或主题，并将其用于search等。有多个H1标签可以混淆search引擎蜘蛛，可能会搞砸search，将返回结果为您的网站（我也听说它可能会让你在像蜘蛛一样的“坏站点”列表中）。
拥有这些样式可以让你在不使用search引擎的情况下拥有相同的视觉效果。
我最近遇到的另一个原因…这不是特别的Angular，但它是一个很好的例子：
我想在Angular中创builddynamic/声明式表单（请参阅Angular Cookbook中的dynamic表单）并允许使用样式化的文本元素。 最大的灵活性要求允许我声明式地向我的表单添加任意的HTML元素，但是这对于脚本攻击是开放的，并且需要对Angular编译器进行明确的颠覆，甚至允许它。 相反，我允许将文本元素添加到表单中，以及用于控制样式的类。 所以我可以使用.h1风格但不是h1元素。
