sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > HTML5教程

HTML5教程

作者:xuhongji发布时间:2020-09-05分类:Html浏览:21评论:0


导读:HTML5简介(HTML5是下一代的HTML)什么是HTML5?HTML5将成为HTML、XHTML以及HT...
HTML 5 简介(HTML5 是下一代的 HTML 什么是 HTML5?

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的?

HTML5 是 W3C 与 WHATWG 合作的结果。

编者注:W3C 指 World Wide Web Consortium,万维网联盟。

编者注:WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

为 HTML5 建立的一些规则:

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

减少对外部插件的需求(比如 Flash)

更优秀的错误处理

更多取代脚本的标记

HTML5 应该独立于设备

开发进程应对公众透明

新特性

HTML5 中的一些有趣的新特性:

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素,比如 article、footer、header、nav、section

新的表单控件,比如 calendar、date、time、email、url、search

HTML 5 视频 Web 上的视频

直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式(当前,video 元素支持两种视频格式)

Ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

如何工作

control 属性供添加播放、暂停和音量控件。包含宽度和高度属性也是不错的主意。 之间插入的内容是供不支持 video 元素的浏览器显示的:

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

Internet Explorer

Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。

HTML 5 音频 Web 上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。

视频格式(当前,audio 元素支持三种音频格式)

如何工作

与视频播放的 code 非常类似:

Internet Explorer

Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。

标签的属性

HTML 5 Canvas 什么是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度:


通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

理解坐标

上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

更多 Canvas 实例

下面的在 canvas 元素上进行绘画的更多实例:

实例 - 线条

通过指定从何处开始,在何处结束,来绘制一条线:

  实例 - 圆形

通过规定尺寸、颜色和位置,来绘制一个圆:

  实例 - 渐变

使用您指定的颜色来绘制渐变背景:

  实例 - 图像

把一幅图像放置到画布上:

HTML 5 Web 存储 在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法:

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

下面的例子对用户访问页面的次数进行计数:

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

如何创建并访问一个 sessionStorage:

下面的例子对用户在当前 session 中访问页面的次数进行计数:

HTML5 Input 类型 HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本章全面介绍这些新的输入类型:

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

浏览器支持

Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值

E-mail:  />

提示:iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com
选项)。

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。

Homepage:  />

提示:iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com
选项)。

Input 类型 - number

number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定:

Points:  min="1" max="10" />

提示:iPhone 中的 Safari 浏览器支持 number 输入类型,并通过改变触摸屏键盘来配合它(显示数字)。

请使用下面的属性来规定对数字类型的限定:

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定:

max="10" />
Input 类型 - Date Pickers(数据检出器)

HTML5 拥有多个可供选取日期和时间的新输入类型:

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

下面的例子允许您从日历中选取一个日期:

Date:  />
Input 类型 - search

search 类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

HTML5 表单元素 HTML5 的新的表单元素:

HTML5 拥有若干涉及表单的元素和属性。本章介绍以下新的表单元素:

浏览器支持

datalist 元素

datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

Webpage:  name="link" />

value="http://www.W3School.com.cn" />

/>

value="http://www.microsoft.com" />

提示:option 元素永远都要设置 value 属性。

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器(key-pair generator)。

当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。


Username: 
Encryption: 


output 元素

output 元素用于不同类型的输出,比如计算或脚本输出:

onforminput="resCalc()">
HTML5 表单属性 HTML5 的新的表单属性:本章讲解涉及
元素的新属性。 新的 form 属性: 新的 input 属性:

autocomplete

autofocus

form

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

height 和 width

list

min, max 和 step

multiple

pattern (regexp)

placeholder

required

浏览器支持

autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

注释:autocomplete 适用于 标签,以及以下类型的 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

autocomplete="on">
First name:  />
Last name: 
E-mail:  autocomplete="off" />


注释:在某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。

autofocus 属性

autofocus 属性规定在页面加载时,域自动地获得焦点,autofocus 属性适用于所有 标签的类型。

User name:  autofocus="autofocus" />
form 属性

form 属性规定输入域所属的一个或多个表单,form 属性适用于所有 标签的类型,form 属性必须引用所属表单的 id。

id="user_form">
First name:


Last name:  form="user_form" />
注释:如需引用一个以上的表单,请使用空格分隔的列表。

表单重写属性

表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。

formaction - 重写表单的 action 属性

formenctype - 重写表单的 enctype 属性

formmethod - 重写表单的 method 属性

formnovalidate - 重写表单的 novalidate 属性

formtarget - 重写表单的 target 属性

注释:表单重写属性适用于以下类型的 标签:submit 和 image。

id="user_form">
E-mail: 


formaction="demo_admin.asp" value="Submit
as admin" />

formnovalidate="true" value="Submit
without validation" />


注释:这些属性对于创建不同的提交按钮很有帮助。

height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。height 和 width 属性只适用于 image 类型的 标签

src="http://upload.server110.com/image/20140223/1642221495-25.gif"
/>

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。


欢迎 发表评论:

Html排行
«   2020年11月   »
1
2345678
9101112131415
16171819202122
23242526272829
30
标签列表
网站分类
文章归档
最近发表
推荐文章