为什么使用.h1而不是实际的h1？

Question

Within the Bootstrap CSS project，为您的标题标签提供了样式(H1、H2、H3、H4、H5、H6)，但也有一系列基于标题的类名(.h1、.h2、.h3、.h4、.h5、.h6)。在没有正确使用H1标记的情况下使用H1的类名有什么好处？我认为你总是想要确保你的HTML反映了你视觉上的重要性。

任何解释使用.h1而不是使用h1标记的好理由的想法都将不胜感激。

Answer 1

我现在唯一能想到的就是搜索引擎。许多人会将一个实际的h1标签看作页面的标题或主题，并将其用于搜索，等等。拥有多个h1标签可能会混淆搜索引擎爬行器，并可能搞砸返回站点结果的搜索(我也听说它可能会让您与一些爬行器(如谷歌)一起被列入“糟糕的站点”列表)。

有了这些样式，你就可以在不搞砸搜索引擎的情况下，获得与元素相同的视觉效果。

Answer 2

我最近遇到的另一个原因是……这并不是Angular所特有的，但它是一个很好的例子：

我想在Angular中创建动态/声明式表单(参见Angular Cookbook中的动态表单)，并允许设置样式的文本元素。最大限度的灵活性需要允许我以声明方式将任意HTML元素添加到表单中，但这很容易受到脚本攻击，甚至需要Angular编译器的显式subversion才能允许。相反，我允许在表单中添加文本元素，以及用于控制样式的类。因此，我可以使用.h1样式，但不能使用h1元素。

Answer 3

这绝对会对SEO和谷歌爬虫更好地理解你的页面有所帮助。当它读取h1时，它假定其中的内容一定是页面的焦点。H2，将是第二个组件，依此类推。通过这种方式，Google可以理解你的页面的“范围”--内容。

不完全确定，但在我看来，一个很大的变量是页面的“读取”模式。这将允许设备和阅读器组织内容，特别是针对视障人士使用的设备。

此外，它还为页面提供了结构和有序感。