标题用于引出新的一节内容。HTML 通过了6个级别的标题元素,用于表示标题的相对重要性或它在 HTML 文档层次体系中的级别。

注意:针对搜索引擎而言不同标签下代表不同的重要级别内容。切记不要滥用。

HTML 标题文字标签

标题文字共包含6种标签,每一种的标题在字号上有着明显的区别,从<h1> 到 <h6> 依次变小。

<!-- 1级标题 -->
<h1>1级标题</h1>
<!-- 2级标题 -->
<h2>2级标题</h2>
<!-- 3级标题 -->
<h3>3级标题</h3>
<!-- 4级标题 -->
<h4>4级标题</h4>
<!-- 5级标题 -->
<h5>5级标题</h5>
<!-- 6级标题 -->
<h6>6级标题</h6>

注意:<h1> 标题最大。<h6> 标题最小。默认初始化状态下,标题标签字体是加粗的,而且字体大小也比较大。通常不同的浏览器也是有着字体大小不同的区别。

代码示例

<html>
<head>
<title>标题文字标签</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>

运行效果如下:

HTML标题文字

提示:在没有给h1 h2 h3 h4 h5 h6 标签赋予任何CSS样式的时候,字体大小如上图所示。

HTML 标题标签使用原则

h1元素用来标明顶级标题(页面上最重要的标题)。因为逻辑上只能有一个最重要的标题,所以习惯上一个 HTML 文档中 h1 只出现一次,通常是网站的名称或者是网页的标题。<h1>应尽量靠近在html 中的<body>标签,越近越好,以便让搜索引擎最快的领略主题。h2、h3、h4、h5标签则可以在一个网页中多次出现,但不要滥用。所有的标题标签都应该保持正确的顺序。

提示:标题应该按有意义的方式使用。h2是“第二重要的标题”,而不是“第二大的字体”。依次类推。

HTML 标题标签与网页标题标签的区别

html h1与html title标签虽然都叫标题标签,但一般<title<放网页标题,位于 HTML 文档头部<head<元素内部;而<h1<放文章标题,位于 HTML 文档主体<body<元素中。

HTML 标题文字对齐方式

在默认情况下,标题文字是左对齐的。而在实际的网页制作过程中,可以通过标题文字的属性设置,可以实现标题文字的不同的排版效果。最常用的就是对标题文字的对齐方式的设置。也就下面讲的 align 属性。

<h1 align="对齐方式"> ... </h1>

标题文字的对齐属性 align 值如下:

属性值含 义
left左对齐
center居中对齐
right右对齐

代码示例

<html>
<head>
<title>标题文字标签对齐方式</title>
</head>
<body>
<h1 align="center">静夜思</h1>
<h2 align="center">作者:李白</h2>
<h3 align="center">床前明月光,疑是地上霜。</h3>
<h3 align="center">举头望明月,低头思故乡。</h3>
</body>
</html>

运行效果如下:

HTML标题对齐方式

注意:HTML 的早期版本允许在标题元素中使用表现性的 align 属性。在后来的 XHTML 1.0 Strict 中这个属性已经被废弃,不在有效。要想改变标题元素中文本的对齐方式,可以使用 CSS 的 text-align 属性。

使用CSS样式初始化标题标签

使用CSS样式初始化h1 h2 h3 h4 h5标签代码:

<!--初始化字体大小为8px且居中对齐的样式 -->
h1,h2,h3,h4,h5{font-size:8px;text-align:center}

我们可以根据实际网页开发中依据示例代码可扩展。

提示:标题标签的大小、宽度、高度、背景、加粗与否都可以通过 CSS 来对其样式重新定义。