HTML标签介绍（6）

原创于 2025-03-06 20:45:46 发布 · 1.2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML 同时被 3 个专栏收录

85 篇文章

订阅专栏

算法结构

69 篇文章

订阅专栏

前端

45 篇文章

订阅专栏

文章来源：HTML5 <h1> 至 <h6> 标签_w3cschool

HTML5 <hgroup> 标签

实例

HTML5 使用 <hgroup> 对标题进行组合：

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

尝试一下 »

浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

IE 9、Firefox、Opera、Chrome 和 Safari 支持 <hgroup> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <hgroup> 标签。

标签定义及使用说明

<hgroup> 标签被用来对标题元素进行分组。

当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。

HTML 4.01 与 HTML5之间的差异

<hgroup> 标签是 HTML 5 中的新标签。

全局属性

<hgroup> 标签支持 HTML 的全局属性。

事件属性

<hgroup> 标签支持 HTML 的事件属性。

注意: 本元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。但是其轮廓算法(outline algorithm)未在任何浏览器中实现，因此 <hgroup> 语义仍旧是理论的。HTML5 (W3C) 规范提供了如何处理副标题，小标题，可选标题和标语（Subheadings, subtitles, alternative titles and taglines）的建议。

HTML5 <hr> 标签

实例

当内容的主题发生变化时，使用 <hr> 标签进行分隔：

<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>

<hr>

<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

尝试一下 »

浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

所有主流浏览器都支持 <hr> 标签。

标签定义及使用说明

<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，<hr> 定义内容中的主题变化，并显示为一条水平线。

在 HTML 4.01 中，<hr> 标签仅仅显示为一条水平线。

在 HTML 4.01 中，所有的布局属性都已废弃。在 HTML5 中不再支持这些属性。请使用 CSS 来为 <hr> 元素定义样式。

HTML 与 XHTML 之间的差异

在 HTML 中，<hr> 标签没有结束标签。

在 XHTML 中，<hr> 标签必须被正确地关闭，比如 <hr />。

属性

属性	值	描述
align (已废弃)	left center right	HTML5 不支持。HTML 4.01 已废弃。规定 <hr> 元素的对齐方式
noshade (已废弃)	noshade	HTML5 不支持。HTML 4.01 已废弃。规定 <hr> 元素的颜色呈现为纯色。
size (已废弃)	pixels	HTML5 不支持。HTML 4.01 已废弃。规定 <hr> 元素的高度。
width (已废弃)	pixels %	HTML5 不支持。HTML 4.01 已废弃。规定 <hr> 元素的宽度。

全局属性

<hr> 标签支持 HTML 的全局属性。

事件属性

<hr> 标签支持 HTML 的事件属性。

HTML5 <h1> 至 <h6> 标签

定义和用法

HTML5 通过 <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

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

如果您希望了解更多有关 HTML 标签选择和使用的信息，请阅读《Web 品质》。

如果您想要练习使用HTML5 <h1> - <h6> 标签，请参考本站HTML5编程实战中的“学习h2标签”！

实例

六个不同的 HTML 标题：

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

尝试一下

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，h1 - h6 元素的 "align" 属性不被赞成使用。

在 HTML 5 中，h1 - h6 元素的 "align" 属性不被支持。

标准属性

<h1> - <h6> 标签支持 HTML 5 中的标准属性。

事件属性

<h1> - <h6> 标签支持 HTML 5 中的事件属性。

HTML5 <header> 标签

实例

HTML5 ，<header>标签用来表示介绍性的内容，即，定义了文档中的页眉，请参考下述示例：

<article> 的页眉：

<article>
    <header>
        <h1>Internet Explorer 9</h1>
        <p><time pubdate datetime="2011-03-15"></time></p>
    </header>
    <p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

尝试一下 »

浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

IE 9、Firefox、Opera、Chrome 和 Safari 支持 <header> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <header> 标签。

标签定义及使用说明

<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个 <header> 元素。

注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

HTML 4.01 与 HTML5之间的差异

<header> 标签是 HTML 5 中的新标签。

全局属性

<header> 标签支持 HTML 的全局属性。

事件属性

<header> 标签支持 HTML 的事件属性。

HTML5 <html> 标签

定义和用法

HTML5 <html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

<html> 标签告知浏览器这是一个 HTML 文档。

html 元素是 HTML 文档中最外层的元素。

html 元素也可称为根元素。

实例

简单的 HTML 5 文档：

<!DOCTYPE HTML>
<html><head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中的 xmlns 属性，在 XHTML 中是必须的。实际上它没有任何效果，但是出于验证的原因，在把 HTML 转换为 XHTML 的过程中，是很有帮助的。在 HTML 5 中，没有理由这么做，但是你仍然可以把 xmlns 属性定义为 "http://www.w3.org/1999/xhtml"。

在 HTML 5 中，有一个新属性：manifest。

提示和注释

注释：如果您出于某种原因，希望定义 xmlns 属性，唯一合法的值是 "http://www.w3.org/1999/xhtml"。

属性

属性	值	描述
manifest	url	定义一个 URL，在这个 URL 上描述了文档的缓存信息。
xmlns	http://www.w3.org/1999/xhtml	定义 XML namespace 属性。

标准属性

<HTML> 标签支持 HTML 5 中的标准属性。

事件属性

<HTML> 标签支持 HTML 5 中的事件属性

注意，作为HTML文档的最外层元素，请正确书写<html>标签，并将其它HTML标签正确的放置在<html>标签中！

注意事项:
尽管在 HTML 里它不是必需的，可以是隐含的，但是在 XHTML 里必须明确给出 <html> 元素的开标签和闭标签。

HTML5 <head> 标签

实例

HTML5 <head> 标签表示文档的头部，其中包含了与该文档有关的信息！

一份在头部带有 <title> 标签的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

尝试一下 »
（更多实例见页面底部）

浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

所有主流浏览器都支持 <head> 标签。

标签定义及使用说明

<head> 元素是所有头部元素的容器。

<head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。

以下列出的元素能被用在 <head> 元素内部：

<title> （在头部中，这个元素是必需的）
<style>
<base>
<link>
<meta>
<script>
<noscript>

HTML 4.01 与 HTML5之间的差异

HTML5 不再支持 profile 属性。

属性

属性	值	描述
profile	URL	HTML5 不支持。规定文档 URL 的一系列规则。这些规则能被浏览器识别并且准确读取 <meta> 标签的内容属性中的信息。

全局属性

<head> 标签支持 HTML 的全局属性。

Examples

尝试一下 - 实例

在 <head> 中使用 <base> 标签
本例演示如何使用 <base> 标签规定页面中所有链接的默认 URL 和默认 target。

在 <head> 中使用 <style> 标签
本例演示如何在 <head> 部分添加样式信息。

在 <head> 中使用 <link> 标签
本例演示如何使用 <link> 标签链接到一个外部样式表。

附注

如果在文档中忽略了 <head> 标签，则大部分浏览器会自动创建一个 <head> 元素。当然，有一些不会。

下面这些浏览器经测试不会自动创建一个 head 元素：Android <=1.6, iPhone <=3.1.3, Nokia 90, Opera <=9.27, and Safari <=3.2.1。

HTML 教程：HTML 头部