9

我怎样才能进入另一个标题HTML？

我用过<h1>, <h2>, <h3>,和<h4>,现在我想添加,因为我需要使用不同的文本类型。<h5><h6><h7><h8>

如果你不能这样做，有没有办法调用CSS文本表，除了<p>和<h1>- <h6>？

4

6 回答 6

11

您可以在样式表中声明它

h7, h8, h9 { /* You can just go on adding headings */
   display: block; /* Because this is block level element */
}

h7 {
   font-size: /*Whatever */ ;
}

h8 {
   font-size: /*Whatever */ ;
}

但我建议你不要这样做，因为它没有任何语义，从 SEO 的角度来看也会很糟糕

也看看html5shiv，只需在脚本中添加你想要的元素

于 2013-02-16T08:35:29.487 回答
4

到目前为止发布的答案都不是完全正确的。有些相当具有误导性。

在 html5 中，您确实可以使用h7,h8等等，并使用相应的 css 选择器选择它们，但从语义上讲，这些不是标题，它们只是具有未知语义的元素 - 很像 div 和 span。display如果所有浏览器都一致地处理这些“自定义”元素而至少没有提供 CSS 值，我也会感到惊讶。

但是您可以role使用属性指定缺少的语义"heading"，这对于屏幕阅读器等辅助技术非常重要。它可能（可以想象）在一定程度上影响 SEO，但还有很多比这更大的 SEO 问题。

指定高于 6 的标题级别的正确方法是包含属性aria-level="7"（或您喜欢的任何级别）。如果您将此属性应用于除h1-h6您还需要role="heading".

因此，根据w3 ，以下任何“h7”示例都是有效且正确的：

<h1 aria-level="7">...（标题语义由“h1”提供，但 7 覆盖 1）

<h7 role="heading" aria-level="7">...（标题语义由 提供role）

<div role="heading" aria-level="7">...（标题语义由 提供role）

当然，要在 css 中选择其中任何一个，您可以执行以下操作：

*[aria-level="7"] {
    font-size:0.5em;
}

最后：不要将不同级别的标题相互嵌套！众所周知，这会使所有屏幕阅读器感到困惑，而且可能也不是有效的 HTML。在开始新的标题元素之前完全关闭每个标题元素。如果您使用 ，很容易忽略这一点div，并且验证器很可能不会注意到该错误。

于 2019-05-03T12:42:11.050 回答
2

在我的另一个完全不相关的问题上，我收到了这个问题的答案：

您不能制作标题 7，因为只有六个不同的 HTML 标题（h1、h2、h3、h4、h5 和 h6；参考：http ://www.w3schools.com/tags/tag_hn.asp ），但是您可以使用以下 CSS 代码制作标题 6：

h6.special { color:#464646; outline:0;
    font-family:Raleway, sans-serif; font-size:17px; }

这个 HTML 代码：

<h6 class="special">I am special!</h6>





此解决方案不会损坏 seo，而且相当简单。我只是虽然我应该让每个人都知道。作为一个附带问题，你能改变“特殊”吗？说如果我把它改成

h6.raleway { color:#464646; outline:0;
    font-family:Raleway, sans-serif; font-size:17px; }

这个 HTML 代码：

<h6 class="raleway">I am raleway!</h6>

这行得通吗？再次感谢您的所有回答！

于 2013-02-16T11:38:42.490 回答
1

简单的方法是使用类

.h7{ font-size:10px;}
.h8{font-size:7px;}

以这种方式使用它并与 spans divs 一起使用。

于 2013-02-16T08:42:52.503 回答
1

h7、h8、h9 不是有效的 html 标签，浏览器可以用它做它想做的事。您可以创建自己的 css 类并使用 h2、h3 等 css 属性。

像：

 h7{
        display: block;
        font-size: 0.51em;
        -webkit-margin-before: 2.99em;
        -webkit-margin-after: 2.99em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
    }
于 2013-02-16T08:44:02.490 回答
0

如果您确实需要第 6 级以下的标题（这意味着您的文档在结构和部分嵌套方面对应于一本大书），请使用带有属性的div元素。class（使用“自定义标签”之类h7的不符合规范，会导致 IE 出现问题，并产生使用标题的错觉——它们不会是标题，对于搜索引擎、大纲构建等）示例：

<style>
.h7 { font-weight: bold; margin-top: 1em; }
</style>

<div class=h7>Some text</div>

（很难将标题设置为 7 或 8 级，以便在外观上清楚地反映该级别，并且最顶层的字体大小不会过大。）

理论上，您可以使用 HTML5section元素来定义文档中的部分、章节、节、小节等的嵌套结构，例如h1每个section. 通过 HTML5 CR，section元素的嵌套定义了标题的级别，因此在第 7 级嵌套中，<h1>将是第 7 级标题。但即使对于通常喜欢 HTML5 的人来说，这也可能会让人感到困惑，并且要在 IE 上的旧版本中使用它，您需要<script>document.createElement('section')</script> as well assection{display:block}` 以及使用上下文选择器格式化标题的代码。

“我需要使用的不同文本类型”的表述表明您可能正在寻找样式元素的可能性。在这种情况下，使用divorp或其他一些元素，class根据需要具有适合内容和结构的属性，并在 CSS 中进行样式设置。

于 2013-02-16T09:54:39.253 回答