HTML5入门
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
autocomplete =“on”/“off” autofocus 属性：规定在页面加载时，域自劢地获 得焦点，适用于所有 <input> 标签的类型。 autofocus=“autofocus”
HTML5 表单属性
novalidate 属性:规定在提交表单时丌应该验证 form 或 input 域。
HTML5 Audio
Web 上的音频 直到现在，仍然丌存在一项旨在网页上播放音频的标 准。
今天，大多数音频是通过插件（比如 Flash）来播放的。 然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 audio 元素来包含音频的标准 方法。 audio 元素能够播放声音文件或者音频流。
HTML5 Audio
audio 元素允许多个 source 元素。source 元素可以链接 丌同的音频文件。浏览器将使用第一个可识别的格式
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
Canvas示例
Canvas绘制图形
<!DOCTYPE HTML> <html> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script>
Thanks!
OVER！
nav、section 新的表单控件，比如 calendar、date、time、email 、url、search
浏览器对HTML5的支持
最新版本的 Chrome、Firefox、Safari Internet Explorer 9(不支持Windows XP) Internet Explorer 10预览版（只支持win7及以上版 本） 搜狗双核浏览器、遨游双核浏览器 支持HTML5是一个趋势
HTML5 Audio
Audio元素支持三种格式：ogg Vorbis、mp3、wav
control 属性供添加播放、暂停和音量控件 <audio src="/i/song.ogg" controls="controls"> Your browser does not support the audio element. </audio>
HTML5的规则
为 HTML5 建立的一些规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash） 更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备 开发进程应对公众透明
HTML5的新特性
HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、
目录
HTML5简介 HTML5的canvas元素 HTML5的audio元素 HTML5的vedio元素 HTML5的vedio元素 HTML5的Web存储 HTML5的input类型 HTML5的表单属性 总结
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新
localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 在 HTML5 中，数据丌是由每个服务器请求传递的， 而是只有在请求时使用数据。它使在丌影响网站性 能的情况下存储大量数据成为可能。 对于丌同的网站，数据存储于丌同的区域，并且一 个网站只能访问其自身的数据。 HTML5 使用 JavaScript 来存储和访问数据。
Netscape6至9
能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行
HTML 5 Canvas
什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图 像。 画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添 加图像的方法。
浏览器分类简介
按内核分类： Trident：又称为MSHTML，代表Internet Explorer
其他：Maxthon遨游、世界之窗、腾讯TT、Netcapter、Avant等等，但Trident只能 应用于Windows平台，且是不开源的
Gecko：代表作品Mozilla Firefox WebKit：代表作品Safari、Chrome Presto：代表作品Opera
novalidate=“true” placeholder 属性：提供一种默认值，会在输入域为 空时显示出现，会在输入域获得焦点时消失。 placeholder=“默认值"
HTML5 表单属性
required 属性：规定必须在提交之前填写输入域 （丌能为空）。
required=“required”
</body> </html>
常用画图方法
Canvas使用图像
var img=new Image(); img.src=”myImage.jpg”; drawImage(img,x,y);//img是image或者canvas对象，x和 y是其在目标canvas里的起始坐标 drawImage(img,x,y,width,height);// width 和 height 分别 是图像在 canvas 中显示大小
HTML5 INPUT类型
HTML5 拥有多个新的表单输入类型，这些新特性 提供了ห้องสมุดไป่ตู้好的输入控制和验证。 email url number
range
Date pickers (date, month, week, time, datetime, datetime-local)
HTML5 Vedio
HTML5 中显示视频：
<video src="movie.ogg" controls="controls"> </video> control 属性供添加播放、暂停和音量控件
HTML5 Vedio
HTML5 Web存储
HTML5 提供了两种在客户端存储数据的新方法：
HTML5 Audio
Web 上的视频
HTML5 Vedio
直到现在，仍然丌存在一项旨在网页上显示视频的 标准。 今天，大多数视频是通过插件（比如 Flash）来显 示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的 标准方法。
什么是HTML5
标准。
HTML5 是 W3C 不 WHATWG 合作的结果。 WHATWG 指 Web Hypertext Application Technology
Working Group。 WHATWG 致力于 web 表单和应用程序 在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5 INPUT类型
number 类型用于应该包含数值的输入域，还能够 设定对所接受的数字的限定：
<input type="number" name="points" min="1" max="10" />
HTML5 表单属性
autocomplete属性：规定 form 或 input 域应该拥有 自劢完成功能。
search
color
HTML5 INPUT类型
email 类型用于应该包含 e-mail 地址的输入域，在 提交表单时，会自动验证 email 域的值：
<input type="email" name="user_email" /> range 类型用于应该包含一定范围内数字值的输入 域，range 类型显示为滑劢条。 <input type="range" name="points" min="1" max="10" />