标题元素是块级元素还是内联元素?

Question

改变H1、H2、H3、H4、H5或H6元素内文本的颜色是正确的吗？它们是块级元素吗？

例如：

<h1><span style="color:#ABAB">#500</span> Hello world</h1>

- Chris S

Answer 1

它们是块级元素。

如果你查看HTML 4.01 strict DTD：

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

所以，它们都被定义为%heading实体，而这些实体又是%block实体的一部分。

至于关于是否可以更改颜色的问题 - 那只是样式上的调整，完全没问题。不过我建议将其放在CSS文件中，而不是内联样式。

H1, H2, H3, H4, H5, H6 {
   color: #ccccc;
}

- Oded

---

我喜欢你添加HTML DTD来解释答案的方式。很棒！ - sushil bharwani

我只是想保持示例简单，所以使用了内联CSS。我之前尝试过一些谷歌搜索，但是从 http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5 浏览中找不到答案。 - Chris S

@Chris S - 没问题。不过我只能根据问题中的内容进行回答 ;) - Oded

顺便说一句，这是一个很棒的答案，有趣的是他们在块定义中为其他元素的类别设置了令牌。 - Chris S

Answer 2

是的，如果您想使用内联CSS，这是正确的方法。否则，创建一个类，例如

<h1 class="title"><span>#500</span> Hello world</h1>

现在它的CSS如下:

h1.title span{
color:#ABABAB;
}

再次确认，h1到h6是块级元素。

- Soarabh

Answer 3

最简单的方法来确定一个元素是块级元素还是内联元素，就是给它加上一个边框。

HTML

<h1> Heading 1 </h1>
<span> Span </span>

CSS

h1 {
   border: 2px solid green;

}

span {
   border: 2px solid blue;
}

更多有关IT技术的例子，请查看jsFiddle。

- Antonija Šimić

Answer 4

是的，所有标题都是块级元素。

另外，#ABAB 不是一个有效的颜色。

- red-X

Answer 5

是的，h1标签内可以包含元素。您可以在W3C参考页面中查看h1标签的内容：

允许的内容：短语内容

而短语内容既可以是普通文本，也可以是您的元素（以及其他几个元素，如短语内容参考页面所示）。

哦，对了，标题标签是块级元素。

- Dennis G

Answer 6

最佳实践是首先在样式表中创建CSS样式。

h1 { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 18px; 
font-weight: bold; 
color: #000000; 
} 

- Saifal Maluk

Answer 7

Color属性改变的是文本颜色，而不是背景颜色，所以从技术角度来看两种方式都是正确的。然而，这种方式意味着对于每个你想要使用这种样式的标题，你必须像你所做的那样指定一个标签。

如果你想始终将其应用于h1标签的话，更好的解决方案可能是包含以下代码的样式表：

h1 {
  color: #ABABAB
}

- Neil