1、,培训教程,什么是HTML5？,HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。,HTML5时间表,HTML5的八大新特性,语义,离线存储,设备通用,连接,多媒体,三维、图形与特效,性能与集成,CSS3,语义,思考：什么是语义化？,语义化：是指用合理HTML标记以及其特有的属性去格式化文档内容。 通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的
2、网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。,简化的文档类型和字符集,2018/11/18, 声明位于HTML文档中的最前面的位置，它位于 标签之前。 该标签告知浏览器文档所使用的HTML或 XHTML规范。 在HTML4中，标签可以声明三种 DTD 类型，分别表示严格版本（Strict）、过渡版本（Transitional）和基于框架（Frameset）的 HTML 文档。,HTML5的标签,2018/11/18,HTML5的字符集,2018/11/18,HTML5的字符集也得到了简化，只
3、需要使用UTF-8即可，使用一个meta标记就可以指定HTML5的字符集，代码如下： ,HTML5的字符集,2018/11/18,HTML5的字符集也得到了简化，只需要使用UTF-8即可，使用一个meta标记就可以指定HTML5的字符集，代码如下： ,语义化的文档标签,HTML5的设计者们认为网页应该像XML文档和图书一样有结构。 通常，网页中有导航、网页体内容、工具栏、页眉和页脚等结构。 HTML5中增加了一些新的标记以实现这些网页结构，这些新标记及其定义的网页布局,十个常用的新标签列表, 定义文章定义文章的侧边栏一组媒体对象以及文字定义 figure 的标题 定义页脚,定义页眉 定义导航定
4、义文档中的区段 定义日期和时间,被弃用的标签：、 、 、和。,标签,2018/11/18,标签用于定义文档的页眉（介绍信息）。 使用标签的例子。欢迎光临我的网站 我是黑龙江傲立网页的其他部分.,2018/11/18,标签,标签用于定义导航链接。 【例1-17】 使用标签的例子。欢迎光临我的网站 我是黑龙江傲立首页 简介 联系方式网页的其他部分. 本文档创建于2012-10-07,2018/11/18,标签示例,标签,2018/11/18, 标签用于定义文档中的区段，例如章节、页眉、页脚或文档中的其他部分。 使用标签的例子。HTML5HTML5是最新的HTML标准. ,标签,2018/11/18
5、,标签用于定义文章或网页中的主要内容。 使用标签的例子。微软在发布Windows Phone 8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。 ,标签,2018/11/18,标签用于定义主要内容之外的其他内容。 使用标签的例子。 微软在发布Windows Phone 8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两
6、倍有余。HTML5 HTML5是最新的HTML标准。目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步。预期要到2022年才会成为 W3C 推荐标准。HTML5无疑会成为未来10年最热门的互联网技术。 ,2018/11/18,aside标签示例,2018/11/18,标签,标签用于定义独立的流内容（图像、图表、照片、代码等等）。 使用 元素为 figure 添加标题。黄浦江上的的卢浦大桥拍摄者：W3School 项目组，拍摄时间：2010 年 10 月,2018/11/18,标签示例,2018/11/18,标签,标签用于定义区段（section）或文档的页脚。通常，该元素包含作者的
7、姓名、文档的创作日期或者联系方式等信息。 使用标签的例子。Posted by: W3SchoolContact information: .,2018/11/18,标签示例,2018/11/18,一个综合示例,网页标题次级标题提示信息导航链接1 链接2 链接3 文章标题文章内容文章注脚相关内容相关辅助信息或者服务页脚,2018/11/18,2018/11/18,HTML5的新增内联元素,1标签 2标签 3标签 4标签,2018/11/18,标签,标签用于定义带有记号的文本。 使标签的例子。 目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步。预期要到2022年才会成为 W3C 推
8、荐标准。,2018/11/18,标签示例,2018/11/18,标签,标签用于定义公历的时间（24小时制）或日期，时间和时区。标签的属性如下： datetime，用于指定日期 / 时间。如果不指定此属性，则元素的内容给定日期 / 时间。其语法格式如下： pubdate，用于指定指示 元素中的日期 / 时间是文档（或最近的前辈 元素）的发布日期。其语法格式如下： ,2018/11/18,标签示例,使标签的例子。 2013年春节是2013-02-10 2013年 春节目前所有主流浏览器都不支持 标签。,2018/11/18,标签,标签用于定义度量衡。仅用于已知最大和最小值的度量。浏览器会使用图形方
9、式表现标签。 标签的属性说明如下： high，定义度量的值位于哪个点，被界定为高的值。 low，定义度量的值位于哪个点，被界定为低的值。 max，定义最大值。默认值是 1。 min，定义最小值。默认值是 0。 optimum，定义什么样的度量值是最佳的值。如果该值高于 “high“ 属性，则意味着值越高越好。如果该值低于 “low“ 属性的值，则意味着值越低越好。 value 定义度量的值。,目前IE浏览器不支持 标签。,2018/11/18,标签,标签的例子。30%,2018/11/18,标签示例,Chrome,IE,Edge,2018/11/18,标签,标签用于定义定义一个进度条。它的属性
10、说明如下： max，定义完成的值。 value，定义进度条的的当前值，如果不指定value值，则显示一个动态的进度条。,Internet Explorer 9 以及更早的版本浏览器不支持 标签。,2018/11/18,标签,使用标签的例子。 下载进度：85%处理中，请稍候： ,2018/11/18,标签示例,2018/11/18,支持动态页面,1菜单 2右键菜单 3在标签中使用async属性 4标签,2018/11/18,标签,在HTML5中，可以使用标签定义菜单，多用于表单中组织控件列表。标签的常用属性如表1-3所示。,2018/11/18,标签示例,新建打开保存剪切复制粘贴,2018/11
11、/18,标签示例,2018/11/18,使用标签定义菜单项, 标签的常用属性如表所示。,目前仅Firefox 8.0 以及更高的版本支持 标签。,2018/11/18,使用标签定义菜单项,HTML5支持在网页中创建和使用自定义的右键菜单。在网页元素中可以使用contextmenu属性指定此元素使用的右键菜单。,2018/11/18,标签示例,请在框中右键点击，就可以看到快捷菜单！本例只在 Firefox 中有效！,2018/11/18,标签示例,2018/11/18,Script脚本异步加载（无阻塞并发处理）,async属性是HTML5的新属性。 在标签中使用async属性可以指定异步执行指定
12、的脚本。也就是在加载网页的同时执行指定的脚本。 如果不指定async属性，正常情况下，当浏览器在解析HTML源文件时如果遇到外部的script，那么解析过程会暂停，并发送请求来下载script文件，只有script完全下载并执行后才会继续执行DOM解析。,2018/11/18,演示一个传统的执行JavaScript脚本的例子。Hello World!,2018/11/18,2018/11/18,需要等到外部脚本加载完成执行后，才加载剩余网页部分,2018/11/18,使用async属性异步执行JavaScript脚本的例子。Hello World!,2018/11/18,2018/11/18,
13、并发执行,2018/11/18,标签,标签用于描述文档或文档某个部分的细节。 标签描述文档细节的例子。数据库文档说明. 本文档用于描述数据库结构.由开发部数据库小组维护。最后修改于2012-10-15,2018/11/18,标签,http:/ ,数字字段滑动组件 ,类型匹配,除了这些，还有搜索进度条 25%密钥输出 10 + 5 = And so on,正则匹配,必填字段,选项列表,增强的表单控件,2018/11/18,HTML5表单-新的 Input 类型,email url number range Date pickers (date, month, week, time, dateti
14、me, datetime-local) search color,2018/11/18,Input 类型 - email,email 类型用于应该包含 e-mail 地址的输入域。 在提交表单时，会自动验证 email 域的值。,2018/11/18,Input 类型 - url,url 类型用于应该包含 URL 地址的输入域。 在提交表单时，会自动验证 url 域的值。,Homepage: ,2018/11/18,Input 类型 - number,number 类型用于应该包含数值的输入域。 还能够设定对所接受的数字的限定：,2018/11/18,Input 类型 number（一般限定）
15、,Points: ,2018/11/18,Input 类型 number（多限定）,2018/11/18,Input 类型 - range,range 类型用于应该包含一定范围内数字值的输入域。 range 类型显示为滑动条。 还能够设定对所接受的数字的限定：,2018/11/18,Input 类型 - range,2018/11/18,Input 类型 - Date Pickers（日期选择器）,HTML5 拥有多个可供选取日期和时间的新输入类型： date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime -
16、选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间）,2018/11/18,Input 类型 - Date Pickers（日期选择器）,2018/11/18,Input 类型 - Date Pickers（日期选择器）,2018/11/18,Input 类型 - Date Pickers（日期选择器）,2018/11/18,Input 类型 - search,search 类型用于搜索域，比如站点搜索或 Google 搜索。 search 域显示为常规的文本域。,2018/11/18,Input 类型 - tel,tel 类型用于应该包含
17、手机号码的输入域。 在提交表单时，配合属性设置后，会自动验证 tel 域的值。,2018/11/18,Input 类型 - color,color类型用于颜色拾取。,2018/11/18,Input 类型 - color,2018/11/18,HTML5表单-HTML5 表单元素,HTML5 拥有若干涉及表单的元素和属性。 datalist keygen output,浏览器支持,2018/11/18,HTML5 表单元素-datalist 元素,datalist 元素规定输入域的选项列表。 列表是通过 datalist 内的 option 元素创建的。 如需把 datalist 绑定到输入域
18、，请用输入域的 list 属性引用 datalist 的 id：,Webpage: ,option 元素永远都要设置 value 属性。,2018/11/18,HTML5 表单元素-datalist 元素,2018/11/18,HTML5 表单元素-keygen 元素,keygen 元素的作用是提供一种验证用户的可靠方法。 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client cert
19、ificate）。, Username: Encryption: ,2018/11/18,HTML5 表单元素-keygen 元素,2018/11/18,HTML5 表单元素-output 元素,output 元素用于不同类型的输出，比如计算或脚本输出：,function multi()a=parseInt(prompt(“请输入第1个数字。“,0);b=parseInt(prompt(“请输入第2个数字。“,0);document.forms“form“result“.value=a*b;两数的乘积为: ,2018/11/18,HTML5 表单元素-output 元素,2018/11/18,
20、HTML5 表单元素-output 元素,2018/11/18,HTML5表单-HTML5 表单属性,HTML5 新的表单属性。 本次只涉及 和 元素的新属性。,新的 form 属性： autocomplete novalidate,新的 input 属性： autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height 和 width list min, max 和 step multiple pattern (regexp)
21、 placeholder required,2018/11/18,新的 form 属性-autocomplete 属性,autocomplete 属性。 autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。,在某些浏览器中，需要启用自动完成功能，以使该属性生效。,2018/11/18
22、,新的 form 属性-autocomplete 属性, First name: Last name: E-mail: ,2018/11/18,新的 form 属性-autocomplete 属性,2018/11/18,新的 form 属性-autocomplete 属性,2018/11/18,新的 form 属性-autofocus 属性,autofocus 属性。 autofocus 属性规定在页面加载时，域自动地获得焦点。 注释：autofocus 属性适用于所有 标签的类型。,2018/11/18,新的 form 属性-autofocus 属性,微数据 (Microdata),一个页面
23、的内容，例如人物、事件或评论不仅要给用户看，还要让机器可识别。而要让机器知会特定内容含义，我们就需要使用规定的标签和属性。 HTML5 微数据规范是一种标记内容以描述特定类型的信息，例如评论、人物信息或事件。每种信息都描述特定类型的项，例如人物、事件或评论。例如，事件可以包含 venue、starting time、name 和 category 属性。,http:/ ,离线存储,Web 存储 (Web Storage),HTML5 提供了两种在客户端存储数据的新方法：localStorage - 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期。 sessionStorage
24、- 用于存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束后数据也随之销毁。以前，这些都是由 Cookie 完成的。但是 Cookie 有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页速度而且效率不高。,localStorage.length; localStorage.key(index); localStorage.setItem(foo, bar); localStorage.getItem(foo); localStorage.removeItem(foo); localStorage.clear();,Indexed Dat
25、aBase,对于存储少量的数据，Web Storage能够很好的完成任务，但是对大量的结构化数据进行处理时，它就力所不及了，而这正是IndexedDB的应用所在。 IndexedDB严格遵循W3C的同源策略，每个源都拥有独立的存储空间，每个存储空间内又可以创建多个数据库，每个数据库可以包含多个表，每个表都是一个json对象列表，可以存储多个json对象，比如“name“: “sonic“, “age“: 27。,Application Cache,使用Application Cache，你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用的。这时候你的网站工作起来就像是线上一样，并且他们
26、不会感觉到和真正在线使用有任何差异。 那么，哪一部分文件是浏览器要保存的呢？这一切都定义在缓存清单文件中。,CACHE MANIFEST # version 1.0.0 #缓存 定义了哪些资源是浏览器可以缓存的 CACHE: /html5/src/logic.js /html5/src/style.css /html5/src/background.png #网络 定义了哪些资源是需要用户在线才能使用的 NETWORK: *,设备通用,拖拽与拖放 (Drag & Drop) 与 文件处理 (File API),过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、
27、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag & Drop 拖拽事件，再结合FileAPI 中的 FileReader，一切变得so easy,连接,WebSocket,现在，很多网站为了实现即时通讯，所用的技术都是轮询。这种模式需要浏览器不断的向服务器发出请求，然而HTTP请求的header信息是非常长的，这样会占用很多的带宽和服务器资源。 WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。能更好的节省服务
28、器资源和带宽并达到实时通讯。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。,桌面通知 (Notifications),通过桌面通知系统，网站可以在用户桌面弹出一条通知，无论用户是否浏览当前网页，甚至最小化了浏览器，通知均可到达用户桌面。,if (window.webkitNotifications.checkPermission() = 0) var title = 领跑HTML5支持 傲游升级自主内核,text = 桌面通知时HTML5的独门秘籍;window.webkitNotifi
29、cations.createNotification(, title, text).show(); ,多媒体,音频和视频 (Audio + Video),Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。,三维、图形与特效,Canvas 画布元素,传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好的“静态”的图像。而Canvas，则是用Javascript的一种绘图手段。 可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。,var ctx = document.getElementById(“can
30、vas“).getContext(“2d“);ctx.fillRect(20, 25, 150, 100);ctx.beginPath();ctx.arc(220, 110, 100, Math.PI * 1/2, Math.PI * 3/2);ctx.lineWidth = 15;ctx.lineCap = round;ctx.strokeStyle = rgba(255, 127, 0, 0.5);ctx.stroke(); ,WebGL,WebGL是一种3D绘图标准，有别于过往需加装浏览器插件，透过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。 WebGL完美地解决了现有的
31、Web交互式三维动画的两个问题： 第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持； 第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。,性能与集成,XMLHttpRequest 2,作为XMLHttpRequest的改进版，XMLHttpRequest Level 2在功能上有了很大的改进。支持跨源XMLHttpRequest和进度事件（Progress events）。,计算上传进度：xhr.upload.addEventListener(“progress“, function (e) var pc
32、= parseInt(100 (e.loaded / e.total * 100);progress.style.backgroundPosition = pc + “ %“; ,CSS3,CSS选择器 (CSS Selector),完整的CSS3选择器：http:/www.w3.org/TR/css3-selectors/#selectors,颜色 (Color),透明度：opacity: 0.1; opacity: 0.5; opacity: 0.9;,RGBA色彩模式：color: rgba(255, 0, 0, 0.75);PS: RGBA是在RGB的基础上多了控制alpha透明度的参
33、数。,HSL色彩模式：color: hsl(0, 100%, 50%);PS: HSL色彩模式是工业界的一种颜色标准，HSL分别代表色调，饱和度，亮度三个通道。,分栏 (Columns),column-count: 3; column-rule: 1px solid #bbb; column-gap: 2em;,边框 (Border),盒阴影：box-shadow: 2px 2px 2px rgba(0,0,0,.5);,圆角边框：border-radius: 20px 20px 20px 20px;,文本 (Text),文本阴影：text-shadow: 0 0 20px #fefcc9,1
34、0px -10px 30px #feec85, -20px -20px 40px #ffae34,20px -40px 50px #ec760c,-20px -60px 60px #cd4606,0 -80px 70px #973716,10px -90px 80px #451b0e;,省略标记：text-overflow: ellipsis;PS: 需配合 white-space: nowrap;overflow: hidden; 一起使用。,渐变 (Gradients),变形 (Transforms),transform: skew(30deg, -10deg),CSS3私有前缀 (-pr
35、efix-),Q: 什么时候可以去掉前缀呢？ A: 当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。,举例来说，一个标准渐变的代码是：background: linear-gradient(#fff, #000);而现在，我们需要这样写：background: -webkit-linear-gradient(#fff, #000); /*为兼容Chrome /*标准的渐变代码*/,CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。,更多,Geolocation 获取浏览器用户的地理信息 postMessage 实现跨文档跨域的消息传输 Web Workers Javascript多线程工作解决方案 Transitions & Animations CSS的过渡效果及动画效果 Custom data-* attributes 定义合法的DOM属性 CSS Media Query 针对不同的设备显示不同的样式表 And so on ,浏览器支持情况,http:/ IE8 IE9 FIREFOX 3.6 FIREFOX 4+ OPERA 11 SAFARI 5.1 CHROME,THANK YOU,
