HTML <h1> – <h6> 标签
实例
六个不同的 HTML 标题：
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
亲自试一试 »
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
下面有更多实例。
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
<h1> - <h6> 的字体大小
这些取值一般遵循以下规律的。
- h1 = 2em
- h2 = 1.5em
- h3 = 1.17em
- h4 = 1em
- h5 = 0.83 em
- h6 = 0.63 em
不同浏览器默认的字体大小不同，若默认按照 16px 的话，h1到h6的大小如下：
浏览器默认为 body:100% = 16px;
计算得出：
- h1=32px
- h2=24px
- h3=18.72px
- h4=16px
- h5=13.28px
- h6=12px
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <h1> - <h6> | Yes | Yes | Yes | Yes | Yes |
全局属性
<h1> - <h6> 标签支持 HTML 中的全局属性。
事件属性
<h1> - <h6> 标签支持 HTML 中的事件属性。
更多实例
实例
设置标题的背景颜色和文本颜色（使用CSS）：
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>
亲自试一试 »
<h2 style="color:Tomato;">Hello World</h2>
实例
设置标题对齐方式（使用CSS）：
<h1 style="text-align:center">这是标题 1</h1>
<h2 style="text-align:left">这是标题 2</h2>
<h3 style="text-align:right">这是标题 3</h3>
<h4 style="text-align:justify">这是标题 4</h4>
亲自试一试 »
<h2 style="text-align:left">这是标题 2</h2>
<h3 style="text-align:right">这是标题 3</h3>
<h4 style="text-align:justify">这是标题 4</h4>
相关页面
HTML 教程: HTML Headings
HTML DOM 参考手册: Heading 对象
默认CSS设置
大多数浏览器将使用以下默认值显示 <h1> 元素:
实例
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
亲自试一试 »
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
大多数浏览器将使用以下默认值显示 <h2> 元素:
实例
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
亲自试一试 »
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
大多数浏览器将使用以下默认值显示 <h3> 元素:
实例
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
亲自试一试 »
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
大多数浏览器将使用以下默认值显示 <h4> 元素:
实例
h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
亲自试一试 »
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
大多数浏览器将使用以下默认值显示 <h5> 元素:
实例
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
亲自试一试 »
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
大多数浏览器将使用以下默认值显示 <h6> 元素:
实例
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
亲自试一试 »
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
