.h1 .h2 .h3 .h4 .h5 .h6 类在引导 4 中



对文本段落使用.h1 .h2 .h3 .h4 .h5 .h6Bootstrap类是好的做法吗?(不是标题(。

例如:

<h1>THIS IS A TITLE</h1>
<p class="h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>THIS IS A SUB TITLE</h2>
<p class="h6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

如果这不是正确的方法,如何使用 Bootstrap 使用不同的字体大小?(非标题(

正如Jakub在bootstrap文档中提到的:

.h1 到 .h6 类也可用,用于当您想要匹配标题的字体样式但无法使用关联的 HTML 元素时。

此外,想想SEO,这里有一些好的做法:

标题标签在谷歌排名方面有一定影响

坚持使用页面上的一个"H1",并使其余文本标题为"H2"、"H3"。保持标题顺序

现在,您希望让元素的大小与 h1,h2 或 h3 相同。例如,您希望<span>元素的大小与 h1 相同,但您不想在使用类Stick to one H1 on the page违反规则。

另一个示例,您按顺序添加标头组,并且想要打破该顺序,然后使用类。

根据Bootstrap Docs,你可以这样做。

https://getbootstrap.com/docs/4.5/content/typography/#headings

.h1.h6类也可用,适用于要匹配标题的字体样式但无法使用关联的 HTML 元素的情况。

如果您不想使用<p>标签,您可以随时使用<div class="h1">.


您可以随时使用 CSS 设置自己的大小。

例如:

.myClass{
font-size:2rem;
font-weight:700;
line-height:1.5;
margin-bottom:1rem;
}

在 Bootstrap 4.5.0 中,您可以使用显示类来更改所需输出的字体大小。

<h1 class="display-1"> Hello World </h1>
<h1 class="display-2"> Hello World </h1>
<h1 class="display-3"> Hello World </h1>
<h1 class="display-4"> Hello World </h1>
<h1 class="display-5"> Hello World </h1>

您可以尝试其中任何一个,有关更多信息,请访问 引导文档> 排版 https://getbootstrap.com/docs/4.0/content/typography/

这是好的做法吗?不。这是不好的做法吗?不。

如果要开发符合 W3 规范的网页,最好正确使用标题标记。

您提到的 Bootstrap 类只是帮助您设置元素样式以使其看起来更好的类。

<小时 />

使用说明

  • 标题信息可由用户代理使用,例如,自动构造文档的目录。

  • 避免使用标题标签调整文本大小。请改用 CSS 字体大小属性。标题使用大小来指示其相对重要性,但 CSS 是通用调整大小的首选。

  • 避免跳过标题级别:始终从 开始,下次使用等。

  • 每页只能使用一个。使用多个不会导致错误,但仅使用一个被视为最佳做法。这是合乎逻辑的 - 是最重要的标题,并告诉您整个页面的目的是什么。你不会有一本书有多个标题,或者一部电影有多个名字!对于屏幕阅读器用户和SEO来说,拥有一个顶级标题也可以说更好。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

最新更新