html5结构标签
什么是HTML5？
HTML5是超文本标记语言（HTML）的最新版本，是迄今为止该语言最彻底的修订。 它在各个领域引入了许多新功能。 一些更值得注意的补充包括：
- 内置的音频和视频多媒体标签
- 用于在浏览器中绘制内容的画布标签
- 更智能的表单，可让您通过使用必填属性来执行诸如验证之类的操作
有了一组新的结构标签，HTML5修改了HTML文档的结构方式。 新的结构标签集中于将HTML文档划分为逻辑部分。 标签的名称描述了要包含的内容类型。 在本文中，详细了解这些新标记。
有点背景
蒂姆·伯纳斯·李（Tim Berners-Lee）于1989年创建了原始HTML，以解决现有的在Internet上访问信息的方法的缺点。 自成立以来，在Internet上寻找路途一直是一项艰巨的任务。 Internet上的内容被视为单个文档，没有在它们之间导航的简便方法。 本质上，您必须知道要查找的文档的地址，然后手工输入。 为了解决此问题，Berners-Lee创建了两种技术：超文本传输协议（HTTP）和HTML。
HTTP是Web服务器用于传递内容的服务协议。 Web浏览器中URL的开头（假设浏览器显示完整的URL）很可能以http：//开头。 URL的这一部分告诉浏览器向Web服务器发出请求时要使用哪种协议类型。 当服务器收到对文档的请求时，该文档很可能被编写或转换为HTML。 HTML文档就是发回浏览器的请求。
HTML是一种脚本语言，可以告诉Web浏览器如何呈现内容。 可以在此内容中链接到其他文档，从而提供了一种在Internet上的文档之间导航的用户友好方法。
HTTP和HTML的组合使您可以简单地单击文本链接在文档之间导航，从而在Internet上快速轻松地浏览内容。 创建了这两种技术之后，Berners-Lee继续创建了万维网联盟（W3C）。 W3C是HTML的前四个版本的指导力量。
互联网的初衷是提供简单的文本文档。 最早的浏览器都是基于文本的（没有花哨的窗口，只是屏幕上的文本）。 首次引入时，甚至图像的添加也是很大的。 现在，人们可以做所有事情，从发送电子邮件到在Internet上看电视。 互联网已不仅仅是一种传输简单文本文档的机制。 新功能和新用途带来了HTML语言从未设计过处理的新挑战和问题。
W3C尝试使用可扩展超文本标记语言（XHTML）2.0标准解决当今Internet的问题。 但是，该标准并没有被广泛接受，并且在很大程度上已被放弃。 2004年，当W3C专注于XHMTL 2.0标准时，一个称为Web超文本应用程序技术工作组（WHATWG）的小组开始研究HTML5标准，该标准比XHTML 2.0标准受到更多的热烈欢迎。 W3C放弃了XHTML 2.0标准，现在正与WHATWG合作开发HTML5。
支持的浏览器
在撰写本文时，HTML5尚未正式发布。 网络上的大多数内容仍在为HTML 4规范编写。 但是，一些浏览器包含对HTML5规范的支持。 因为每种浏览器可能仅支持HTML5的某些功能，所以事情可能会变得棘手。 在编写基于HTML5的网站之前，请检查每个目标浏览器，以确保它们支持您将用于网站的功能。
新的文档类型
无论目标浏览器的功能如何，都必须告诉浏览器您要使用HTML5规范呈现内容。 您可以使用doctype声明进行此操作。
doctype声明告诉浏览器该页面使用哪种版本的标记语言。它是通过引用文档类型定义（DTD）来实现的。 DTD指定标记语言使用的规则，以便浏览器正确呈现内容。
文档类型可能是一个令人困惑的概念。 在当前HTML规范中，有许多doctype，但是它们之间的区别还不是很清楚。 表1显示了当前可用的doctype及其功能。
表1.文档类型和功能
| 文件类型 | 能力 | 例 |
|---|---|---|
| HTML 4.01严格 | 允许所有HTML元素和属性，但不允许显示标签，例如字体标签。 不允许使用框架集。 | <！DOCTYPE HTML PUBLIC“-// W3C // DTD HTML 4.01 // EN”“ http://www.w3.org/TR/html4/strict.dtd”> |
| HTML 4.01过渡版 | 与HTML strict相同，但允许使用不赞成使用的元素，例如font标签。 不允许使用框架集。 | <！DOCTYPE HTML PUBLIC“-// W3C // DTD HTML 4.01 Transitional // EN”“ http://www.w3.org/TR/html4/loose.dtd”> |
| HTML 4.01框架集 | 与HTML过渡相同，但允许使用框架集。 | <！DOCTYPE HTML PUBLIC“-// W3C // DTD HTML 4.01 Frameset // EN”“ http://www.w3.org/TR/html4/frameset.dtd”> |
| XHTML 1.0严格 | 与HTML严格相同，但所有内容都必须以格式正确的XML编写。 例如，所有开始标签必须具有匹配的结束标签。 不允许使用框架集。 | <！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Strict // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
| XHTML 1.0过渡版 | 与HTML过渡相同，但所有内容都必须以格式正确的XML编写。 不允许使用框架集。 | <！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
| XHTML 1.0框架集 | 与XHTML过渡版相同，但允许使用框架集。 | <DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Frameset // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> |
| XHTML 1.1 | 与XHTML strict相同，但也提供了模块功能，例如Ruby对东亚语言的支持。 | <！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.1 // EN”“ http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> |
幸运的是，HTML5中大大简化了doctype声明。 实际上，只有一个。 为了使您的浏览器使用HTML 5规范进行呈现，请添加清单1中所示的doctype。
清单1. HTML5文档类型
<!DOCTYPE html> 在<html>标记之前，doctype声明应该是HTML文档中的第一件事。
新的结构元素
创建新的结构标签的基本原理是将网页分为逻辑部分，这些标签用描述其包含的内容类型的标签来描述。 从概念上讲，请将网页视为文档。 文档包含页眉，页脚，章节和其他各种将文档分为逻辑部分的约定。
本节回顾了使用通用示例代码划分HTML文档的当前方法。 在本文的其余部分，您将使用新HTML5结构标记来修改原始代码，以逐步了解如何将文档转换为逻辑部分。
HTML 4方法
如果您已经创建了最简单HTML文档，那么您将熟悉div标签。 div标签是HTML5之前时代中用于在HTML文档中创建内容块的主要机制。 例如， 清单2显示了如何使用div标签创建具有页眉，内容区域和页脚的简单页面。
清单2.使用div标签的简单HTML页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
A Simple HTML Page Using Divs
</title>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>Content</div>
<div id='footer'>Footer</div>
</body>
</html> 这很好用； div标签是一个不错的通用标签。 但是，除了查看每个div标签的id属性之外，很难分辨每个div标签代表文档的哪个部分。 尽管您可能认为id足以代表一个指示器，但如果命名正确， id属性是任意的。 有许多变体可以视为同等有效的id 。 标签本身未提供要表示的内容类型的指示。
HTML5方法
HTML5通过提供一组标记来解决此问题，这些标记可以更清楚地定义构成HTML文档的主要内容块。 不管网页显示的最终内容是什么，大多数网页都是由公用页面部分和元素的不同组合组成的。
清单2中的代码创建了一个带有页眉，内容区域和页脚的简单页面。 这些以及其他部分和页面元素非常常见，因此HTML5包含将文档分为公共部分并指示每个部分中包含的内容的标记。 新标签为：
本文的其余部分概述了每个标签。 您还将通过修改清单2中基于div的原始代码示例以使用新HTML5结构性标记来了解标记的预期用途。
header标签
顾名思义， header标记旨在将HTML页面的一部分标记为header。 清单3显示了清单2中修改为使用header标记的代码示例。
清单3.添加header标签
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<div id='content'>Content</div>
<div id='footer'>Footer</div>
</body>
</html>清单3中的doctype也进行了更改，以指示浏览器应使用HTML5呈现页面。 从现在开始，所有示例均假定您使用的文档类型正确。
section标签
section标签用于标识页面上内容的重要部分。 这个标签有点类似于将书分成几章。 在代码示例中添加一个section标记将产生清单4中的代码。
清单4.添加一个section标签
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<p>
This is an important section of the page.
</p>
</section>
<div id='footer'>Footer</div>
</body>
</html> article标签
article标签标识网页中内容的主要部分。 想想一个博客，其中每个帖子都构成了重要的内容。 添加article标签清单5所示的代码中的代码示例结果。
清单5.添加article标签
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<div id='footer'>Footer</div>
</body>
</html> aside标签
aside标签指示标签中包含的内容与页面的主要内容相关，但不属于页面的主要内容。 这有点类似于使用括号在文本正文中进行注释（如该注释）。 括号中的内容提供了有关包含该元素的元素的其他信息。 在代码示例中添加aside标签会产生清单6中的代码。
清单6.添加一个aside标记
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<div id='footer'>Footer</div>
</body>
</html> footer标签
footer标记将元素的包含内容标记为文档的页脚。 在代码示例中添加footer标记将产生清单7中所示的代码。
清单7.添加footer标签
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html> 此时，所有原始div标签已被HTML5结构性标签取代。
nav标签
nav标签中包含的内容旨在用于导航。 将nav标记添加到代码示例中，得到清单8中的代码。
清单8.添加一个nav标签
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Some Nav Link</a>
<a href='#'>Some Other Nav Link</a>
<a href='#'>A Third Nav Link</a>
</nav>
</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>完成的例子
清单9显示了用新HTML5结构标签替换原始div标签的结果。
清单9.完成的示例
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Some Nav Link</a>
<a href='#'>Some Other Nav Link</a>
<a href='#'>A Third Nav Link</a>
</nav>
</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html> 虽然例子很简单，出于演示的目的，当你比较原始div为基础的例子，从清单2的结果清单9 ，意图新结构标签应清晰。
结论
新HTML5标签描述了它们包含的内容的类型，它们有助于将文档划分为逻辑部分。 与作者写书的方式类似，您仍然可以决定何时以及在何处使用文档中的新标签。 尽管写同一本书的两位作者可能选择将本书分为几章的不同方法，但是使用章节的行为仍然提供了将本书分为几部分的一致方法。 类似地，虽然给定网页的两位作者可能会选择不同的结构，但是新HTML5结构标签提供了网页开发人员可以使用的新约定，而旧div标签则没有提供这些约定。
翻译自: https://www.ibm.com/developerworks/opensource/library/wa-html5structuraltags/index.html
html5结构标签
1824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
