这几天一直都在研究HTML5,所以近期决定向大家分享一下HTML5的新特性,目的在于帮助大家更好的适应即将到来的HTML5浪潮,因为这是十年来的第一次重大革新,所以特性的叙述很多,可能需要连载很久,希望有兴趣的同学能够一如既往的关注。
注意:在测试新特性的时候强烈建议应使用Google chrome 、Firefox、Opera或者是Safari等浏览器,这些浏览器能够比较好的支持HTML5的众多新特性。
HTML 5 标签
定义和用法
声明是文档中的第一个成分,位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中有 3 个不同的文档类型,在 HTML 5 中只有一个:。
提示和注释:
注释: 标签没有结束标签!
提示: 对大小写不敏感。
HTML 5
在 HTML5 中,文档类型声明很简单:
在所有 HTML 文档中规定文档类型很重要,这样浏览器才能了解所预期的文档类型。
HTML 4.01 中的 doctype 需要引用一个 DTD,这是因为 HTML 4.01 基于 SGML。HTML 5 不基于 SGML,也不需要引用 DTD,但是需要声明文档类型让浏览器按照它们应该的方式来运行。
属性:NONE
HTML 5 标签
定义和用法
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中, 标签既可以是超链接,也可以是锚。这取决于是否描述了 href 属性。
在 HTML 5 中, 是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。
HTML 5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。
例子:
链接到 w3school:
在新窗口中打开 w3school:
属性
属性 |
描述 |
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 标签
定义和用法
标签定义首字母缩写词,比如 "NASA"。通过对只取首字母缩写进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
HTML 4.01 与 HTML 5 之间的差异
HTML 5 不支持 。请使用 代替。
例子:
WWW
输出:
WWW
HTML 5
定义和用法
HTML 4.01 与 HTML 5 之间的差异
HTML 4.01 中不赞成使用 applet 元素。
HTML 5 中不支持 applet 元素。
提示和注释:
提示:HTML 5 中不支持 applet 元素。请使用 代替。
HTML 5
定义和用法
HTML 4.01 与 HTML 5 之间的差异
例子:
x
提示和注释:
注释:
HTML 5 标签
定义和用法
标签定义图像映射中的区域。
HTML 4.01 与 HTML 5 之间的差异
HTML 5 有一些新的属性,且不再支持 HTML 4.01 的一些属性。
例子:
属性
属性 |
描述 |
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
定义和用法
HTML 4.01 与 HTML 5 之间的差异
例子:
提示和注释:
注释:
HTML 5
定义和用法
HTML 4.01 与 HTML 5 之间的差异
例子:
属性
属性 |
值 |
描述 |
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
定义和用法
HTML 4.01 与 HTML 5 之间的差异
HTML 5 不支持
HTML 5 标签
定义和用法
标签制作更大的文本。
HTML 4.01 与 HTML 5 之间的差异
HTML 5 不支持 标签。请用 CSS 代替。
HTML 5 标签
定义和用法
body 元素定义文档的主体。其中包含文档的所有内容(比如文本、图像、颜色、图形等等)。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 5 中,删除了所有 的特殊属性。而那些属性在 HTML 4.01 中是不被赞成使用的。
例子:
文档的内容 ......
HTML 5
定义和用法
HTML 4.01 与 HTML 5 之间的差异
在 HTML 5 中有一个新属性:autofocus。
例子:
属性
属性 |
值 |
描述 |
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
定义和用法
HTML 4.01 与 HTML 5 之间的差异
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 标记。
我们甚至可以在 IE 中使用 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。参见:http://excanvas.sourceforge.net/。
http://www.whatwg.org/specs/web-apps/current-work/
这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有强项和弱点。例如,SVG 绘图很容易编辑,只要从其描述中移除元素就行。
要从同一图形的一个
如何使用
大多数 Canvas 绘图 API 都没有定义在
Canvas API 也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法。
一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用。
注释:Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个
例子:
function drawCanvas()
{
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
}
...
your browser does not support the canvas tag
属性
属性 |
值 |
描述 |
height |
pixels |
设置 canvas 的高度。 |
width |
pixels |
设置 canvas 的宽度。 |
HTML 5
定义和用法
HTML 4.01 与 HTML 5 之间的差异 HTML 4.01 不赞成使用 align 属性。在 HTML 5 中,不支持该标签。请使用 CSS 代替。 例子: 属性 属性 值 描述 4 5 align left right top bottom 如何对齐标题。不支持。请使用样式代替。
HTML 5 定义和用法 HTML 4.01 与 HTML 5 之间的差异 在 HTML 5 中,不支持该标签。请使用 CSS 代替。 提示和注释 提示:请使用 CSS 来居中文本。
HTML 5 定义和用法 以下元素都是短语元素。并不返回使用它们,但是通过使用样式表,可能取得更丰富的效果。 呈现为被强调的文本。 定义重要的文本。 定义一个定义项目。 定义计算机代码文本。 定义样本文本。 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 定义变量。您可以将此标签与 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。 HTML 4.01 与 HTML 5 之间的差异 在 HTML 4.01 中, 定义语气更重的强调文本,但是在 HTML 5 中, 定义重要的文本。
HTML 5 定义和用法 HTML 4.01 与 HTML 5 之间的差异 4.01 中的大多数属性都不再得到支持。 提示和注释 注释:colgroup 元素只能包含 col 元素。 注释:colgroup 元素无法创建表格列。如需创建列,必须在 tr 元素内规定 td 元素。 提示:如果需要向一个列组规定相同的属性值,请使用该元素。 提示:如果需要为一个或多个列规定属性值,请使用 col 元素。 例子: 属性 属性 值 描述 4 5 align right left center justify char 定义列中的单元格内容的水平对齐方式。 char character 定义一个字符,按照该字符对齐文本。 4 charoff pixels % 规定第一个对齐字符的偏移量。 span number 定义 4 5 valign top middle bottom baseline 定义列中的单元格内容的垂直对齐方式。 width % pixels relative_length 定义列的宽度。
标签之后。
Cell 1
Cell 2
标签
及
标签配合使用。
中才是合法的。
1
2
3
4
1
2
3
4