HTML5 revolution——关于HTML5与4.01相关差异的介绍（一）

最新推荐文章于 2021-06-20 18:04:05 发布

cxthl19910521

最新推荐文章于 2021-06-20 18:04:05 发布

阅读量1.6k

点赞数 1

文章标签： html5 html 文档 applet url 浏览器

本文链接：https://blog.csdn.net/cxthl19910521/article/details/6495002

版权

这几天一直都在研究HTML5，所以近期决定向大家分享一下HTML5的新特性，目的在于帮助大家更好的适应即将到来的HTML5浪潮，因为这是十年来的第一次重大革新，所以特性的叙述很多，可能需要连载很久，希望有兴趣的同学能够一如既往的关注。

注意：在测试新特性的时候强烈建议应使用Google chrome 、Firefox、Opera或者是Safari等浏览器，这些浏览器能够比较好的支持HTML5的众多新特性。

HTML 5 <!DOCTYPE> 标签

定义和用法

<!DOCTYPE> 声明是文档中的第一个成分，位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中有 3 个不同的文档类型，在 HTML 5 中只有一个：<!DOCTYPE HTML>。

提示和注释：

注释：<!DOCTYPE> 标签没有结束标签！

提示：<!DOCTYPE> 对大小写不敏感。

HTML 5

在 HTML5 中，文档类型声明很简单：

<!DOCTYPE HTML>

在所有 HTML 文档中规定文档类型很重要，这样浏览器才能了解所预期的文档类型。

HTML 4.01 中的 doctype 需要引用一个 DTD，这是因为 HTML 4.01 基于 SGML。HTML 5 不基于 SGML，也不需要引用 DTD，但是需要声明文档类型让浏览器按照它们应该的方式来运行。

属性：NONE

HTML 5 <a> 标签

定义和用法

<a> 标签定义超链接，它用于从一个页面连接到另一个页面。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，<a> 标签既可以是超链接，也可以是锚。这取决于是否描述了 href 属性。

在 HTML 5 中，<a> 是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符。

HTML 5 有一些新的属性，同时不再支持一些 HTML 4.01 的属性。

例子：

链接到 w3school：

<a href="http://www.w3school.com.cn">W3School</a>

在新窗口中打开 w3school：

<a href="http://www.w3school.com.cn" target="_blank">W3School</a>

属性

属性	描述	4	5
charset	不赞成。规定目标 URL 的字符编码。	4
coords	不赞成。规定适于 shape 属性的坐标，为图像映射定义图像的区域。	4
href	链接的目标 URL。	4	5
hreflang	规定目标 URL 的基准语言。仅在 href 属性存在时使用。	4	5
media	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。		5
name	不赞成。命名一个锚。不支持。使用 id 代替。	4
ping	由空格分隔的 URL 列表，当用户点击该链接时，这些 URL 会获得通知。仅在 href 属性存在时使用。		5
rel	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。	4	5
rev	不赞成。规定目标 URL 与当前文档之间的关系。	4
shape	不赞成。为当前 area 标签中的映射定义的地区类型。与 coords 属性一起使用。	4
target	在何处打开目标 URL。仅在 href 属性存在时使用。	4	5
type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。	4	5

HTML 5 <acronym> 标签

定义和用法

<acronym> 标签定义首字母缩写词，比如 "NASA"。通过对只取首字母缩写进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 不支持 <acronym>。请使用 <abbr> 代替。

例子：

输出：

WWW

HTML 5 <applet> 标签

定义和用法

<applet> 定义嵌入的 applet。

HTML 4.01 与 HTML 5 之间的差异

HTML 4.01 中不赞成使用 applet 元素。

HTML 5 中不支持 applet 元素。

提示和注释：

提示：HTML 5 中不支持 applet 元素。请使用 <object> 代替。

HTML 5 <article> 标签

定义和用法

<article> 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

HTML 4.01 与 HTML 5 之间的差异

<article> 标签是 HTML 5 的新标签。

例子：

提示和注释：

注释：<article> 标签的内容独立于文档的其余部分。

HTML 5 <area> 标签

定义和用法

<area> 标签定义图像映射中的区域。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 有一些新的属性，且不再支持 HTML 4.01 的一些属性。

例子：

</map>

属性

属性	描述	4	5
alt	定义此区域的替换文本。如果 href 存在，则该属性是必需的。仅在 href 属性存在时使用。	4	5
coords	定义可点击区域的坐标。	4	5
href	定义此区域的目标 URL。	4	5
hreflang	规定目标 URL 的基准语言。仅在 href 属性存在时使用。	4	5
nohref	不赞成。从图像映射排除一个区域。	4
media	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。		5
ping	由空格分隔的 URL 列表，当用户点击该链接时，这些 URL 会获得通知。仅在 href 属性存在时使用。		5
rel	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。		5
shape	规定区域的形状。	4	5
target	在何处打开目标 URL。	4	5
type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。		5

HTML 5 <aside> 标签

定义和用法

<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

HTML 4.01 与 HTML 5 之间的差异

<aside> 标签是 HTML 5 的新标签。

例子：

<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>

提示和注释：

注释：<aside> 的内容可用作文档的侧栏。

HTML 5 <audio> 标签

定义和用法

<audio> 标签定义声音，比如音乐或其他音频流。

HTML 4.01 与 HTML 5 之间的差异

<audio> 标签是 HTML 5 的新标签。

例子：

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

属性

属性	值	描述
autoplay	true \| false	如果是 true，则音频在就绪后马上播放。
controls	true \| false	如果是 true，则向用户显示控件，比如播放按钮。
end	numeric value	定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。
loopend	numeric value	定义在音频流中循环播放停止的位置，默认是 end 属性的值。
loopstart	numeric value	定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount	numeric value	定义音频片断播放多少次。默认是 1。
src	url	所播放音频的 url。
start	numeric value	定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放

HTML 5 <basefont> 标签

定义和用法

<basefont> 标签定义基准字体。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 不支持 <basefont> 标签。请用 CSS 代替。

HTML 5 <big> 标签

定义和用法

<big> 标签制作更大的文本。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 不支持 <big> 标签。请用 CSS 代替。

HTML 5 <body> 标签

定义和用法

body 元素定义文档的主体。其中包含文档的所有内容（比如文本、图像、颜色、图形等等）。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，删除了所有 <body> 的特殊属性。而那些属性在 HTML 4.01 中是不被赞成使用的。

例子：

<html>

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

</html>

HTML 5 <button> 标签

定义和用法

<button> 标签定义按钮。您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

HTML 4.01 与 HTML 5 之间的差异

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

例子：

<button>Click Me!</button>

属性

属性	值	描述	4	5
autofocus	true \| false	在页面加载时，是否让按钮获得焦点。		5
disabled	disabled	禁用按钮	4	5
name	button_name	为按钮规定为一的名称。	4	5
type	button reset submit		定义按钮的类型。
value	some_value	为按钮规定初始值。该值可通过脚本改变。	4	5

HTML 5 <canvas> 标签

定义和用法

<canvas> 标签定义图形，比如图表和其他图像。

HTML 4.01 与 HTML 5 之间的差异

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

<canvas> 的历史

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。

我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。参见：http://excanvas.sourceforge.net/。

<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。参见：http://www.whatwg.org/specs/web-apps/current-work/

<canvas> 标记和 SVG 以及 VML 之间的差异

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

要从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。

如何使用 <canvas> 标记绘图

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。

例子：

function drawCanvas()

{

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

}

</script>

...

your browser does not support the canvas tag

</canvas>

属性

属性	值	描述
height	pixels	设置 canvas 的高度。
width	pixels	设置 canvas 的宽度。

HTML 5 <caption> 标签

定义和用法

<caption> 标签定义表格标题。<caption> 标签必须紧随 <table> 标签之后。

HTML 4.01 与 HTML 5 之间的差异

HTML 4.01 不赞成使用 align 属性。在 HTML 5 中，不支持该标签。请使用 CSS 代替。

例子：

<table>

<caption>This is a caption</caption>

<tr>

</tr>

</table>

属性

值

描述

align

left

right

top

bottom

如何对齐标题。不支持。请使用样式代替。

HTML 5 <center> 标签

定义和用法

<center> 标签对其包围的文本进行水平居中处理。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，不支持该标签。请使用 CSS 代替。

提示和注释

提示：请使用 CSS 来居中文本。

HTML 5 <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签

定义和用法

以下元素都是短语元素。并不返回使用它们，但是通过使用样式表，可能取得更丰富的效果。

<em>	呈现为被强调的文本。
<strong>	定义重要的文本。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，<strong> 定义语气更重的强调文本，但是在 HTML 5 中，<strong> 定义重要的文本。

HTML 5 <colgroup> 标签

定义和用法

<colgroup> 标签定义表格列的组。通过此标签，您可以对列进行组合，以便格式化。该元素只有在 <table> 中才是合法的。

HTML 4.01 与 HTML 5 之间的差异

4.01 中的大多数属性都不再得到支持。

提示和注释

注释：colgroup 元素只能包含 col 元素。

注释：colgroup 元素无法创建表格列。如需创建列，必须在 tr 元素内规定 td 元素。

提示：如果需要向一个列组规定相同的属性值，请使用该元素。

提示：如果需要为一个或多个列规定属性值，请使用 col 元素。

例子：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

属性

属性	值	描述	4	5
align	right left center justify char		定义列中的单元格内容的水平对齐方式。
char	character	定义一个字符，按照该字符对齐文本。	4
charoff	pixels %		规定第一个对齐字符的偏移量。
span	number	定义 <colgroup> 应当横跨的列数。	4	5
valign	top middle bottom baseline		定义列中的单元格内容的垂直对齐方式。
width	% pixels relative_length		定义列的宽度。