Html H1,H2,H3,H4 标签是块元素还是内联元素?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4041820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:00:24  来源:igfitidea点击:

Are H1,H2,H3,H4 tags block or inline elements?

html

提问by Chris S

Is it correct HTML to change the color of text inside a H1, H2, H3 or H4 element? Are they block level?

更改 H1、H2、H3 或 H4 元素内文本颜色的 HTML 是否正确?他们是块级吗?

For example

例如

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

回答by Oded

They are block elements.

它们是块元素。

If you look at the HTML 4.01 strict DTD:

如果您查看 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">

So, they are all defined as %headingentities, which in turn are part of the %blockentities.

因此,它们都被定义为%heading实体,而实体又是%block实体的一部分。

As for the question regarding if you can change the color - that's just styling and is fine, though I would do so in a CSS file, not inline:

至于关于是否可以更改颜色的问题 - 这只是样式并且很好,尽管我会在 CSS 文件中这样做,而不是内联:

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

回答by Soarabh

Yes This is the correct way, If you want to use inline css. Otherwise make a class say

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

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

Now Its Css is:

现在它的 CSS 是:

h1.title span{
color:#ABABAB;
}

Again yes h1 to h6 is a block level.

再次是 h1 到 h6 是块级别。

回答by Antonija ?imi?

The easiest way to find out whether an element is block level or inline element is to put a border around it.

确定元素是块级元素还是内联元素的最简单方法是在其周围放置边框。

HTML

HTML

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

CSS

CSS

h1 {
   border: 2px solid green;

}

span {
   border: 2px solid blue;
}

More examples on jsFiddle.

更多关于jsFiddle 的例子。

回答by Dennis G

Yes, a spanwithin a h1 tag is allowed. As you can see on the W3C Reference page for the h1 tag:

是的,span允许在 h1 标签内。正如您在 h1 标签W3C 参考页面上看到的:

Permitted contents: phrasing content

允许的内容:短语内容

And phrasing content is normal text as well as your spanelement (and several other elements as can be seen on this reference page for phrasing content.

短语内容是普通文本以及您的span元素(以及可以在此参考页面上看到的用于短语内容的其他几个元素。

Oh yeah, and the heading tags are block elements.

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

回答by red-X

yes headers are block level.

是的标题是块级的。

on another note, #ABABis not a valid color :)

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

回答by Saifal Maluk

The best pracktace is first create CSS style in stylesheet.

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

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

回答by Neil

Color alters font color, not background color, so technically it's equally correct. However, doing it that way means that for every header you want with this style you must specify a span tag inside like you've done.

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

Better solution if you want to always have it in effect for h1 tags might be to include a stylesheet with the following code:

如果您希望始终对 h1 标签生效,更好的解决方案可能是包含具有以下代码的样式表:

h1 {
  color: #ABABAB
}