H1,H2,H3,H4 标签是块还是内联元素？答案

【问题标题】：Are H1,H2,H3,H4 tags block or inline elements?H1,H2,H3,H4 标签是块还是内联元素？
【发布时间】：2014-07-30 21:21:36
【问题描述】：

在 H1、H2、H3 或 H4 元素中更改文本颜色是否正确？它们是块级的吗？

例如

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

【问题讨论】：

标签： html

【解决方案1】：

它们是块元素。

如果您查看 HTML 4.01 严格的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;
}

【讨论】：

我喜欢你添加 html DTD 来解释答案的方式。GR8
我只是想保持示例简单，所以使用内联 CSS。我确实先尝试了一些谷歌搜索，但我无法通过浏览 w3.org/TR/REC-html40/struct/global.html#h-7.5.5 找到我的答案
@Chris S - 没问题。不过，我只能继续讨论问题中的问题；）
很好的答案顺便说一句，有趣的是他们在块定义中获得了其他元素类别的标记

【解决方案2】：

是的，如果您想使用内联 css，这是正确的方法。否则让一个类说

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

现在它的 Css 是：

h1.title span{
color:#ABABAB;
}

同样，h1 到 h6 是块级别。

【讨论】：

【解决方案3】：

找出一个元素是块级元素还是内联元素的最简单方法是在它周围放置一个边框。

HTML

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

CSS

h1 {
   border: 2px solid green;

}

span {
   border: 2px solid blue;
}

jsFiddle 上的更多示例。

【讨论】：

【解决方案4】：

是的，标题是块级的。

另一方面，#ABAB 不是有效颜色 :)

【讨论】：

【解决方案5】：

是的，允许在 h1 标记内使用 span。正如您在W3C Reference page for the h1 tag 上看到的：

允许的内容：短语内容

短语内容是普通文本以及您的span 元素（以及可以在此reference page for phrasing content 上看到的其他几个元素。

哦，是的，标题标签是块元素。

【讨论】：

【解决方案6】：

最好的做法是先在样式表中创建 CSS 样式。

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

【讨论】：

【解决方案7】：

颜色改变字体颜色，而不是背景颜色，所以从技术上讲它同样正确。但是，这样做意味着对于您想要使用此样式的每个标题，您必须像您所做的那样在内部指定一个 span 标签。

如果您想让它始终对 h1 标签有效，更好的解决方案可能是包含一个带有以下代码的样式表：

h1 {
  color: #ABABAB
}

【讨论】：