HTML5 介绍

来源：互联网发布：java 未来前景编辑：程序博客网时间：2024/05/16 05:48

HTML5 介绍

1. HTML5的现状

“这份标准并不完整，因为它还在发展中”。WHATWC和W3C一起在继续发展HTML5标准。二者之间的理念不同。
WHATWC不会发展某个将来会终止的HTML版本，它的目标是保持一份HTML标准，并且随时更新。
W3C把每个版本看作当前开发的快照。但是W3C的发展仍在继续。

从上面的描述得到结论：HTML5是当前版本的稳定快照，这意味着它可能领先于W3C的HTML5的标准，但是可能落后与WHATWC的当前标准。这也体现出网页开发不在依赖于某个特定的HTML版本的特性，而是依赖于直接检查特性的支持。

HTML5是什么？
最新的HTML标准
之前的HTML版本的一个稳定快照
一个用来描述当前开放的Web技术的标签

那么HTML标准与WHATWC HTML，W3C HTML5, Web Applications 1.0的联系是什么呢？

Web Applications 1.0标准：https://spec.whatwg.org/
W3CHTML5标准： https://www.w3.org/TR/html5/
HTML标准： https://html.spec.whatwg.org/multipage/

2. HTML5新特性

(1) 向后兼容

在大部分情况下，HTML5兼容以前的HTML语法和标签。这是大部分的情况下，但是HTML5的重点是想语法纯净的XML方向转移了，取而代之的是重视对已有实践更好的文档化。这也是后面会介绍一个废弃的内容。

(2) 错误处理

因为页面开发人员几乎可以用任何他们熟悉的方式编写文档，所以HTML5的一个主要变化是针对用户代理（浏览器厂商），为什么这么说呢？
由于实际存在的HTML的灵活性。针对html中不规范的写法，过去浏览器厂商都会采用各自不同的策略处理有歧义的html代码，也就导致了不同浏览器的不同显示结果。

解决这个问题的第一种方法是，要求开发人员必须按照规范书写，这正式XHTML背后的想法和尝试。
另一种方法就是浏览器在处理这些不规范或者错误的方式标准化。

浏览器在处理这些错误的时候有两种选择：按照HTML5标准实现，或者遇到第一个错误的时候停止处理。他的意义在于：不同的浏览器会一致的处理相同的错误，没有实现错误处理的浏览器就会停止解析html，进而告知开发人员语法的问题。不过现在，好像没有停止渲染，就算某一块html语法出现错误，这也并不会影响其他的html标签渲染。

这也就反面说明严格按照HTNML5规范开发的重要性，作为开发人员可以使用检查服务来进行检查https://html5.validator.nu/或者http://validator.w3.org。它们会对比HTML5标准进行检查。

(3) 简化的doctype

在HTML5之前doctype有许多的类型

HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 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
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 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
该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

* DTD本质是一个说明标记规则和语法的页面。所以，上面代码的区别是针对不同版本的(X)HTML的DTD，一个是HTML 4.01，另一个是XHTML 1.0。

HTML5的doctype简化为：
<!DOCTYPE html>

HTML里的doctype有两个主要目的。

第一，它告诉用户代理和校验器这个文档是按照什么DTD写的。这个动作是被动的，也就是说，每次页面加载时，浏览器并不会下载DTD并检查合法性，只有当手动校验页面时才启用。

第二个，对于实际操作，最重要的目的是通知浏览器读取文档时用哪种解析算法。浏览器有三种方式解析HTML文档：

非怪异（标准）模式。
怪异模式。
部分怪异（几乎标准）模式。

什么是标准模式，怪异模式？
　　标准模式：浏览器以W3C的标准来解析和渲染页面。
　　怪异模式：浏览器以自己方式怪异解析和渲染页面。

为什么会有怪异模式？
　　在早期，浏览器有一段时间并未严格遵循W3C标准来设计，为了兼容这段时间产生的网页，而产生的一种页面渲染模式。为了让浏览器区分新旧网页，就利用doctype的文档声明，如果一个网页没有指明文档类型（旧的网页根本没文档类型），那么浏览器自动采用 “怪异模式” 去渲染页面，这样旧网页就还可以正常状态存活下去，如果指明了文档类型，就按照W3C的标准进行渲染。

我在firefox上做一个测试：

<!DOCTYPE html><html><head></head><body><script type="text/javascript">console.log(document.compatMode);</script></body></html>

然后在添加/删除<!DOCTYPE html>的情况下看一下控制台输出以及page info.

会弹出对话框显示“CSS1Compat”或者“BackCompat”。前者表示非怪异模式，后者表示怪异模式。

* 遗留工具DOCTYPE - leagacy tool compatible doctype
为了兼容一些老HTML生成系统，因此它们需要doctype的语法和以前的类似，那么下面这种HTML5的声明也是可以接受的：
<!doctype HTML system "about:legacy-compat">

* 在IE中怪异模式称为Quirks模式

<?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

这两个都会在IE6中触发怪异模式，因为IE6一定要DOCTYPE为文档的第一个元素才肯触发标准模式
后面一种会触发 IE7, 8, and 9 in quirks mode
更为具体的各种浏览器DOCTYPE的触发模式的转换，可以看Activating Browser Modes with Doctype （https://hsivonen.fi/doctype/）

在 Internet Explorer 10 中，修改了 Quirks 模式的默认行为，以增强对行业标准（如 HTML5）的支持，并提高与其他浏览器的可互操作性。现在，根据 HTML5 及相关 W3C 规范中的定义，Quirks 模式公开了与标准模式相同的 API 集和行为（少数例外）。

在该页面顶部添加下面的 meta 标记，以选择启用传统的 Quirks 行为：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

怪异模式和标准模式会有不同的显示，具体的内容等到后面学习css相关知识的时候在进行系统学习。

(4) 简化的字符编码

HTML被存储为一串二进制数：1和0。因此，一个特定的字符其实是被存储为一个特定的二进制数。一个读取文本的计算机程序（比如浏览器）需要知道最基本的两点：
正在读取的是文本。
将读取的二进制数映射到它代表的文本字符的规则是什么。

HTML5标准强烈建议所有的HTML文档都设置字符编码。推荐的方式是让服务器把它作为响应头部的一部分发送，HTTP Content-Type，这个在server段进行设置。
或者在HTML文档头部的meta元素。互联网上使用最多的字符编码是UTF-8，它可以编码超过100万个字符，涵盖了世界上大部分的书写语言。

在HTML 4.01里，meta元素：

<meta http-equiv="charset" content="UTF-8">

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部.
这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:UTF-8

在HTML5里，这种写法仍然被向后兼容，但是推荐的写法更简短，并且包含一个新属性——charset：

<meta charset="UTF-8">

(5) 新的内容模型类别

内容模型（content model）用来指定特定HTML元素包含的内容类型。可以包含相同类型内容的不同HTML元素被分成几类。传统上，HTML元素可以被归为两类：块级（block）和行内（inline）。在HTML5里被大幅度扩展到了7个主要类别：

元数据内容（metadata content）。

文档流内容（flow content）。

区块内容（sectioning content）。

标题内容（heading content ）。

语句内容（phrasing content）。

内嵌内容（embedded content）。

交互内容（interactive content）。

块级分类大致相当于“文档流内容”，而行内类别对应“语句内容”，用来区分该类别和CSS里的display:inline属性。具体的内容后面回去学习。

(6) 新元素

HTML5引入了大量的新元素来帮助提升网页的含义（语义）。新元素比如header、nav以及footer相应描述了页面标题和logo的区域、主导航菜单的区域、版权和法律声明的区域。这使得原先使用div元素和id属性来创建网页区域的做法标准化了。

除了新的结构元素，在网页表单方面也有重要的升级，包括输入日期、URL、e-mail地址、电话号码等的输入框类型。新增的还有用于内嵌和交互内容的新元素，比如video、audio和canvas（可编程的绘图界面）。还有对已有元素的变化，比如重新定义了b、i和small元素的含义（语义），所以它们本质上不再是用于展现的。具体的内容后面会进行学习。

(7) 微数据

这里不会详细学习，后面会进行学习，先了解一下微数据是什么？
微数据是机器使用的HTML5，是机器可以识别的html语义。搜索引擎和其他外部应用在希望提取页面内容含义，但需要更多信息来理解页面内容时，会使用它。在已有的html元素上标记定义数据类型的属性，达到比已有html元素语义更精细的程度。

(8) 内嵌MathML和SVG

数学标记语言（MathML）和可伸缩矢量图形（SVG）都是基于XML的标记语言，在与HTML不同的标准里有描述。从名字就可以看出，MathML用于用正确的数学标记来描述和表示公式。SVG用于描述交互性的和静态（非交互性）的矢量图像。两者都不是新语言，但是因为HTML5可以包含XML风格的语法，这两种语言都可以内嵌在普通的HTML页面里。

(9) API

秉承建立一个Web应用开发平台的精神，HTML5引入了很多脚本应用编程接口（API）。其中包括可以通过class来选择元素的JavaScript API。例如，使用数组语法，页面上第一个class属性为aClass的元素可以通过JavaScript获取.

另外，还增加了和新元素相关的API，比如新video和audio元素控制视频和音频播放。其他新增的功能还包括：用户拖曳的处理、获取浏览器历史状态，以及将页面数据存储在缓存里以后离线时使用。还有许多相关的API可以在HTML5里使用，但是，它们实际上属于不同的标准。其中一个例子是地理位置API，它是用来在网页里处理位置数据的方法.

比较新颖的API还是基于webapp的，例如JavaScript访问硬件（摄像头、麦克风、游戏手柄、GPU）、访问文件系统和WebSocket。后面在学习把。

(10) 不再遵循SGML

坦率地讲，你肯定没有注意到这个变化。最纯粹的HTML形式最初发展自标准通用标记语言（SGML），一种更老的标记语言。然而，浏览器实现的HTML并不完全遵守SGML标准，HTML5直接让这种情况合法化了。HTML5的语法元素来自SGML、HTML和XHTML 1.x，使它成为一种有自己规则的合成语言。

(11) 废弃的特性

必须保持跟过去的HTML特性的兼容性，与此同时，它又要避免使用那些不再被接受的特定元素。例如，HTML包含用于展现的标记，也就是对于它的内容的影响是样式格式上的（比如font元素）。展现型标记（presentational markup）已经被层叠样式表（CSS）取代很久了，所以主要功能已经废弃了。开发者不应该再使用这些元素，即使它们还出现在HTML标准里。这些元素不是简单地被从标准里删除，所以用户代理（浏览器）在遇到它们时知道怎样处理（比如很老的页面）。然而，这些页面会被认为是不标准的。浏览器虽然会渲染它们，但是它们不遵守当前的HTML标准。

具体的废弃的标签和属性挺多的，我们其实可以去这里浏览html5废弃的标签及属性。

如果在开发过程中可以使用上面我们提到的检查服务来进行检查https://html5.validator.nu/或者http://validator.w3.org。它们会对比HTML5标准进行检查。然后再到html5废弃的标签及属性查找。

阅读全文

1 0