Web学习网站

Appearance

<h1>-<h6> 标题标签 ​

HTML 标题（Heading）标签用于定义网页中的标题和子标题。HTML 提供了六个级别的标题，从 <h1> 到 <h6>。

概述 ​

HTML 标题标签用于定义文档或章节的标题。<h1> 是最高级别的标题，<h6> 是最低级别的标题。

语法 ​

html
<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题级别说明 ​

<h1> 标签 ​

<h1> 是页面的主标题，通常每个页面只有一个：

html
<h1>网站名称或页面主题</h1>

<h2> 标签 ​

<h2> 用于主要章节标题：

html
<h2>章节标题</h2>

<h3>-<h6> 标签 ​

这些标签用于子章节和更小的部分：

html
<h3>子章节标题</h3>
<h4>子子章节标题</h4>
<h5>更小的部分标题</h5>
<h6>最小的部分标题</h6>

基本用法示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标题标签示例</title>
</head>
<body>
    <h1>我的网站</h1>
    <h2>关于我们</h2>
    <h3>公司历史</h3>
    <h3>团队介绍</h3>
    <h4>开发团队</h4>
    <h4>设计团队</h4>
    <h2>产品展示</h2>
    <h3>产品A</h3>
    <h4>产品A特性</h4>
    <h3>产品B</h3>
</body>
</html>

样式化标题 ​

标题标签可以通过 CSS 进行样式化：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式化标题</title>
    <style>
        h1 {
            color: #2c3e50;
            font-family: Arial, sans-serif;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        
        h2 {
            color: #34495e;
            font-size: 1.5em;
        }
        
        h3 {
            color: #7f8c8d;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <h1>主标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>
</html>

语义化重要性 ​

标题标签不仅仅是视觉上的标题，它们还具有语义意义：

html
<article>
    <h1>如何学习 HTML</h1>
    <p>文章简介...</p>
    
    <h2>HTML 基础</h2>
    <p>基础内容...</p>
    
    <h3>标签和元素</h3>
    <p>标签内容...</p>
    
    <h3>属性</h3>
    <p>属性内容...</p>
    
    <h2>进阶技巧</h2>
    <p>进阶内容...</p>
</article>

无障碍访问 ​

标题标签对无障碍访问非常重要：

html
<!-- 好的做法：按顺序使用标题 -->
<h1>页面主标题</h1>
<h2>主要章节</h2>
<h3>子章节</h3>
<h4>更小的部分</h4>

<!-- 避免跳级 -->
<!-- 不好的做法 -->
<h1>主标题</h1>
<h3>跳过了 h2</h3>
<h5>跳过了 h4</h5>

SEO 优化 ​

搜索引擎使用标题标签来理解页面结构：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SEO 优化示例</title>
</head>
<body>
    <h1>页面主题关键词</h1>
    <h2>相关内容子主题</h2>
    <h3>更详细的信息</h3>
</body>
</html>

响应式标题 ​

使用 CSS 媒体查询创建响应式标题：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式标题</title>
    <style>
        h1 {
            font-size: 2.5rem;
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            h1 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <h1>响应式主标题</h1>
</body>
</html>

浏览器默认样式 ​

不同浏览器对标题标签的默认样式可能略有不同，但基本结构一致：

标签默认字体大小字体粗细
<h1>2embold
<h2>1.5embold
<h3>1.17embold
<h4>1embold
<h5>0.83embold
<h6>0.67embold

最佳实践 ​

  1. 每个页面只使用一个 <h1> 标签
  2. 按顺序使用标题标签，不要跳级
  3. 使用标题标签来构建清晰的内容层次结构
  4. 确保标题内容准确描述其下内容
  5. 避免仅为了获得特定样式而使用标题标签

相关标签 ​