HTML5 引入的新的结构化标签
什么是 HTML5 ?
HTML5 是超文本标签语言 (Hypertext Markup Language, HTML) 的最新版本,也是迄今为止最为激进的版本。本文介绍了各个领域的许多新特性。比较其引人注目的一些新功能:
- 用于音频和视频的内置多媒体标签
- 用于在浏览器中绘制内容的画布标签
- 灵活的形式,允许您通过使用必要属性完成诸如认证之类的操作。
HTML5 使用一组新的结构化标签改进了 HTML 文档构建方法。新标签重点关注如何将一个 HTML 文档分成几个逻辑部分。标签名称对计划包含的内容类型进行了描述。在本文中,我们将了解这些新标签的详细信息。
一些背景知识
Tim Berners-Lee 于 1989 年创建了 HTML,用它来解决访问 Internet 上的信息的现有方法的一些缺陷。自创建 HTML 以来,在 Internet 上找到适合自己的方法是一项艰难的任务。Internet 上的内容被视为个人文档,没有什么简单方法可实现它们之间的导航。从本质上说,您必须知道您要查找的文档地址,然后手动输入该地址。为了解决这一问题,Berners-Lee 创建了两项技术:超文本传输协议 (HTTP) 和 HTML。
HTTP 是 Web 服务器用于交付内容的服务协议。在 Web 浏览器中(假设浏览器显示了完整的 URL),URL 通常是以 http:// 开头的。URL 的这部分告诉了浏览器向 Web 服务器发出请求时使用的协议类型。在 Web 服务器收到文档请求时,就可以将文档编写或转换为 HTML。然后将该 HTML 文档发送回发出请求的浏览器。
HTML 是一个脚本语言,它会告诉 Web 浏览器如何呈现内容。其他文档的链接也可能出现在此内容中,并提供一个在 Internet 上的文件间导航的用户友好方式。
HTTP 和 HTML 的结合使用提供了对 Internet 上内容的轻松导航,只需要单击文字链接,就可以在文档之间导航。在创建这两项技术之后, Berners-Lee 紧接着创建了万维网联盟 (W3C)。W3C 是 HTML 前四个版本的引导力量。
Internet 的初衷是提供简单的文本文档。最早的浏览器都是基于文本的(没有漂亮的窗口,屏幕上只有文本)。在最初引入图像时,添加图像是一件了不起的事。现在,人们可以在 Internet 上进行任何操作,从发送邮件到观看电视节目,随心所欲。Internet 不再是一个传送简单文本的机制。新特性和新的使用带来了 HTML 语言从未遇到的挑战和问题。
W3C 试图使用可扩展超文本标记语言 (Extensible Hypertext Markup Language, XHTML) 2.0 标准解决目前的 Internet 问题。然而,该标准并不被用户认可,大多数都遭到弃用。2004 年,随着 W3C 对 XHMTL 2.0 标准的关注,一个称为 Web 超文本应用程序技术工作组 (WHATWG) 的小组开始开发 HTML5 标准,HTML5 比 XHMTL 2.0 更受欢迎。于是,W3C 放弃了 XHTML 2.0,开始与 WHATWG 合作开发 HTML5。
支持的浏览器
在撰写本文时,HTML5 尚未正式发布。Web 上的大部分内容仍然是根据 HTML4 规范编写的。虽然有一些浏览器提供了 HTML5 规范支持,但是由于每个浏览器只能支持 HTML5 的某些特性,因此事情变的很棘手。在编写一个基于 HTML5 的网站之前,应该检查各个目标浏览器,确保它们支持您将用于网站的特性。
回页首
新的文档类型
无论目标浏览器支持哪些功能,您都必须告知浏览器您想要使用 HTML5 规范呈现您的内容。使用文档类型声明就可以实现此目的。
文档类型声明会告诉浏览器使用了哪个版本的标记语言来编写页面。通过引用一个文档类型定义 (Document Type Definition, DTD) 可以实现此目的。DTD 指定了标记语言使用的规则,这样浏览器就可以正确呈现内容。
文档类型可能是一个令人感到困惑的概念。在当前 HTML 规范中,有很多文档类型定义,它们之间的差异并不十分清晰。表 1 显示了当前可用的文档类型及其功能。
表 1. 文档类型和功能
文档类型 | 功能 | 示例 |
---|---|---|
HTML 4.01 strict | 支持所有 HTML 元素和属性,但不支持表象标签,比如字体标签。也不支持框架集。 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
HTML 4.01 transitional | 和 HTML strict 一样,但支持使用弃用元素,比如字体标签。不支持框架集。 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
HTML 4.01 frameset | 和 HTML transitional 一样,但支持框架集。 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
XHTML 1.0 strict | 和 HTML strict 一样,但是必须可以将所有内容写成格式良好的 XML。例如,所有开始标签必须有相应的结束标签。不支持框架集。 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
XHTML 1.0 transitional | 和 HTML transitional 一样,但是必须可以将所有内容写成格式良好的 XML。不支持框架集。 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
XHTML 1.0 frameset | 和 XHTML transitional 一样,但支持框架集。 | <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 中得到了极大的简化。事实上 HTML5 中只有一个文档类型。如果想使用 HTML5 规范显示您的浏览器,那么请添加 清单 1 所示的文档类型。
清单 1. HTML5 文档类型
<!DOCTYPE html> |
文档类型声明应该是 HTML 文档中的第一部分内容,应放在 <html>
标签的前面。
回页首
新结构元素
创建新结构化标签的基本原理是使用标签将 Web 页面分成逻辑部分,所用的标签描述了页面包含的内容类型。从概念上讲,可将 Web 页面视为一个文档。文档包含页眉、页脚、章节和其他各种将文档分成逻辑部分的约定。
本小节回顾了使用通用样例代码划分 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
补充:web前端 , HTML 5 ,