HTML 标题
HTML 标题 (Headings) 是通过 <h1> - <h6> 标签来定义的。
<h1> 定义了最重要的标题(最高级别),而 <h6> 定义了最不重要的标题(最低级别)。
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>标题的重要性
标题不仅仅是为了让文字变大或加粗,它们在 HTML 中扮演着至关重要的结构性角色。
构建文档结构: 浏览器、搜索引擎爬虫和屏幕阅读器等程序使用标题来理解和导航一个页面的结构。把标题想象成一本书或一篇论文的大纲,
<h1>是主标题,<h2>是主要章节标题,<h3>是子章节标题,以此类推。搜索引擎优化 (SEO): 搜索引擎(如 Google)使用标题来索引你网页的结构和内容。一个结构良好、标题使用得当的页面更容易被搜索引擎理解,从而可能获得更好的排名。
可访问性 (Accessibility): 视觉障碍用户依赖屏幕阅读器来“阅读”网页。这些软件允许用户通过标题快速跳转到页面的不同部分,就像我们通过扫视标题来快速浏览一篇文章一样。如果滥用标题(例如,仅仅为了样式而使用),会严重影响这部分用户的体验。
如何正确使用标题
<h1>是主标题: 每个页面应该只有一个<h1>标签,它应该准确地概括整个页面的核心内容,类似于报纸的头版头条。按层级使用: 应该按照从
<h1>到<h6>的顺序来使用标题,不要跳级。例如,在一个<h2>后面应该是<h3>,而不是直接跳到<h4>。不要为了样式而使用标题: 如果你只是想让某段文字变大或加粗,应该使用 CSS 的
font-size或font-weight属性,而不是滥用标题标签。标题的根本目的是为了结构,而不是样式。
默认样式
默认情况下,浏览器会为标题标签应用一些样式。通常,<h1> 的字号最大,然后逐级递减,<h6> 的字号最小。所有标题默认都是粗体,并且上下都有一定的外边距 (margin)。
你可以随时使用 CSS 来覆盖这些默认样式,改变标题的大小、颜色、字体等,但它们在 HTML 结构中的语义含义不会改变。
示例:
/* 在 CSS 中自定义标题样式 */
h1 {
color: navy;
font-family: Arial, sans-serif;
}
h2 {
color: darkred;
}