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/web/library/wa-html5structuraltags/index.html
html5结构标签