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

... [HTML5]部分元素旨在帮助浏览器确定标题的实际级别,但不一定要决定如何设置样式.

那么,我们如何在HTML5世界中标题？

...我们不应该使用切片元素进行样式设计.我们应该让他们完成他们设计的工作,即整理文档树,并以另一种更好地满足我们目标的方式解决样式问题:使用简单的可重用类名,无论多深都可以应用于我们的任何标题他们可能在切片内容中.

我建议将网站范围的标题抽象为类,因为它们是可移植的,可预测的和干燥的.你可以随便给他们打电话.

2. csswizardry.com

另一个绝对明智的智慧[Nicole Sullivan]给我们的是我称之为双股标题层次结构.这是每次在CSS中定义标题时定义类的做法.

...通过分配一个类以及每个标题样式,我们现在将这些样式附加到一个非常灵活的选择器,可以移动到任何地方,而不是一个非常特定和不可移动的选择器.

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>

Run Code Online (Sandbox Code Playgroud)

有关此问题/主题的更多详细信息,请通过上面的链接阅读完整的文章(和主题).

Answer 2

ani*_*son 32

大多数样式表都有一组与标题样式1到6相对应的字体大小.有时,在页面的其他地方,Web设计人员希望在文本上使用相同的字体大小,这些字体不应该是实际标题元素的一部分,用于语义原因.而不是为每个那些大小不一样的提供名称.size-12,.size-14,.size-16,等,很容易只是他们的名字都具有类似的到您的标题的类名称.这样,您就知道文本的大小与H1元素的大小相同,即使它实际上不是H1元素.我自己做了几次这样的事.

在我考虑它时,它允许你使用.h1()导入LESS的现有样式; 然后扩展风格. (2认同)

Answer 3

Mik*_* H. 8

我能想到的几个原因:

使用div而不是正确的标签来获得标题的视觉而不影响SEO
避免浏览器不一致造成的并发症
与出于原因1和2选择执行相同操作的其他库和框架的兼容性
设计灵活性(如评论中@scrappedcola所述)

Answer 4

Byr*_*ugg 5

这允许视觉层次结构与语义层次结构的分离.例如,我想告诉观众一件事,同时告诉计算机(搜索引擎)别的东西.

<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>

Run Code Online (Sandbox Code Playgroud)

看到:

归档时间：	12 年，2 月前
查看次数：	14159 次
最近记录：	7 年，2 月前