导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

HTML 参考手册

HTML 元素(功能排序) HTML 浏览器支持 HTML 属性 HTML 全局属性 HTML 事件 HTML 颜色 HTML 画布 HTML 音频/视频 HTML 字符集 HTML 文档类型 HTML URL 编码 HTML 语言代码 HTML 国家代码 HTTP 状态消息 HTTP 请求方法 PX-EM 转换 键盘快捷键

HTML 标签

<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <h1> - <h6> 标签


实例

六个不同的 HTML 标题:

   <h1>这是标题 1</h1>
     <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>
亲自试一试 »

实例

设置标题对齐方式(使用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>
亲自试一试 »

相关页面

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;
}
亲自试一试 »

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

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

实例

    h3 { 
  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;
}
亲自试一试 »

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

实例

    h5 { 
  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;
}
亲自试一试 »

Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。