【HTML教程】HTML的h1到h6标签|html入门知识

攻城狮与产品喵

发布于 2026-03-02 21:31:42

390

——致力做企业用得上的平台； ——开发企业节省成本的系统；

导读

常用的html标签汇总、以及操作过程中的一些bug问题解决方法，是我们在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就 查询/搜索 一下，实践出真章，做多了自然就熟悉了！

——龙腾飞网络科技-小吴

#h1到h6标签 #HTML教程 #HTML标签 #html入门知识

【定义和用法】

h1 到 h6 标签用于定义 HTML 标题。

h1 定义最重要的标题。h6 定义最不重要的标题。

[注意]

每个页面只使用一个 h1 - 这应该代表整个页面的主要标题/主题。此外，请不要跳过标题级别 - 从 h1 开始，然后使用 h2，以此类推。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

【实例】

例子 1

六个不同的 HTML 标题：

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

例子 2

设置标题的背景颜色和文本颜色(使用 CSS)：

<h1 style="background-color:DodgerBlue;">龙腾飞网络科技</h1>
<h2 style="color:Tomato;">龙腾飞网络科技</h2>

例子 3

设置标题的对齐方式(使用 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>

【默认的 CSS 设置】

例子 1

大多数浏览器将使用以下默认值显示 h1 元素：

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;}

例子 2

大多数浏览器将使用以下默认值显示 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;}

例子 3

大多数浏览器将使用以下默认值显示 h3 元素：

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;}

例子 4

大多数浏览器将使用以下默认值显示 h4 元素：

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;}

例子 5

大多数浏览器将使用以下默认值显示 h5 元素：

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;}

例子 6

大多数浏览器将使用以下默认值显示 h6 元素：

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-02-25，如有侵权请联系 cloudcommunity@tencent.com 删除

入门

本文分享自攻城狮与产品喵微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度