1、学习要求 1、了解HTML4.01和XHTML相关知识 2、具备CSS2使用能力 3、能够熟练应用javascript。4、有耐心和毅力，勤于动手。HTML5标准介绍一、HTML5初体验二、Canvas在网站设计中的应用三、增强的表单Form四、媒体支持：Video&Audio 五、HTML5丰富的交互功能体验 HTML5初体验HTML5在WEB前端设计的发展前景 HTML5网页标签的改变HTML5编写规范HTML1.0 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)HTML 2.0 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之
2、后被宣布已经过时HTML 3.2(复杂 网景和微软)1996年1月14日,W3C推荐标准HTML 4.0（精简 统一）1997年12月18日,W3C推荐标准HTML 4.01(微小改进)1999年12月24日,W3C推荐标准ISO/IEC 15445:2000(ISO HTML)2000年5月15日发布,基于严格的HTML 4.01语法,是国际标准化组织和国际电工委员会的标准XHTML 1.0 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布XHTML 1.1 于2001年5月31日发布XHTML 2.0（没发布 网景与微软竞争）HTML5初体验HTML的
3、BOSS们W3C：World Wide Web Consortium万维网联盟从HTML1.0到HTML4.01从XHTML1.0-XHTML2.1WHATWG:Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG）HTML5HTML 5是什么HTML 5 HTML5标签+CSS 3+Javascript+HTML5APIHTML5初体验浏览器厂商的支持移动互联网的蓬勃发展GOOGLE、苹果、YOUTUBE、微软、腾讯、新浪、网易、百度、优酷IE9+Firefox3.5+OpearSafariChrom
4、e猎豹UC遨游海豚百度HTML5初体验HTML5初体验Trident：又称为MSHTML，IE其他：Maxthon遨游、世界之窗、腾讯TT、Netcapter、Avant等等，但Trident只能应用于Windows平台，且是不开源的Gecko：Mozilla Firefox Netscape能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行WebKit：Safari、ChromePresto：OperaHTML5初体验标准的改变标准的改变-不是SGML和XML1、HTML5 并不是定义为SGML或者XML的应用程序。2、在HTML5中并不存在有效性检查，取
5、而代之的是用规范来检测规范的一致性3、HTML5的DTD声明中不需要使用DTD文件4、拥有十分松散的编写手法，但不是没有底线标准的改变松散的语法 不允许写的结束符的标签：area、base、br、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr 可以Q省略结束符的标签：li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th 可以完全省略的标签：html、head、body、colgroup、tbody标准的改变标准的改变HTML5的未来的
6、未来对于HTML5来说，既是一种进步，也是一种妥协。HTML5诞生之初的目的就是为了向下兼容。所以我们大可不必为了HTML5来临而恐慌，因为：这种语法极大地兼容了编程人员的不规范代码，同时保证渲染的效果不会改变。HTML4.01版本及语法依然有效。这种语法既支持XML的简洁标记，也认为XML的编写方式是正确的XHTML版本及严格的XML编写都是有效的。HTML5支支持持松松散散的的语语法法。HTML5也也没没有有认认为为XHTML是是错错误误的的。(XHTML5)HTML标签的改变HTML5初体验1.新的文档类型声明(DTD)2.新增的HTML5标签3.删除的HTML标签4.重新定义的HTML
7、标签5.崭新新的页面布局新的文档类型声明(DTD)文档类型声明HTML 5的DTD声明为:等也是正确的，因为HTML语法是不区分大小写的。在编写在编写HTML5文档时，要求指定文档类型，以确保浏览器能在文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。的标准模式下进行渲染。新增的HTML5标签-结构标签结构标签：结构标签：(块状元素块状元素)有意义的有意义的div 标记定义一篇文章 标记定义一个页面或一个区域的头部 标记定义导航链接 标记定义一个区域 标记定义页面内容部分的侧边栏 标记定义文件中一个区块的相关信息 标记定义一组媒体内容以及它们的标题 标签定义 figur
8、e 元素的标题。标记定义一个页面或一个区域的底部 标记定义一个对话框(会话框)类似微信新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好新增的HTML5标签-多媒体标签多媒体交互标签多媒体交互标签 标记定义一个视频 标记定义音频内容 标记定义媒体资源 标记定义图片 标记定义外部的可交互的内容或插件 比如flashHTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验新增的HTML5标签-Web应用标签Web应应用用标标签签命命令令列列表表menu命命令令列列表表标标签签 FF（嵌嵌入入系系统统）menu标标记记定定义义一一个个命命令
9、令按按钮钮状状态态标标签签(实实时时状状态态显显示示:气气压压、气气温温)C、O状状态态标标签签(任任务务过过程程:安安装装、加加载载)C、F、O 为为input标标记记定定义义一一个个下下拉拉列列表表,配配合合option F、O 标标记记定定义义一一个个元元素素的的详详细细内内容容，配配合合dt、dd C新增的HTML5标签-其他标签注注释释标标签签 标记定义 注释或音标 告诉那些不支持 Ruby元素的浏览器如何去显示 标记定义对ruby的注释内容文本其其他他标标签签 标标记记定定义义表表单单里里一一个个生生成成的的键键值值(加加密密信信息息传传送送)O、F 标标记记定定义义有有标标记记的
10、的文文本本(黄黄色色选选中中状状态态)标标记记定定义义一一些些输输出出类类型型,计计算算表表单单结结果果配配合合oninput事事件件 标标记记定定义义一一个个日日期期/时时间间 目目前前所所有有主主流流浏浏览览器器都都不不支支持持删除的HTML标签纯表现的元素：basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；产生混淆的元素：acronym，applet，isindex，dir。重新定义的HTML标签Body传统div+CSS页面布局方式崭新的页面布局BodyHTML5布局方式崭新的页面布
11、局HTML5初体验简洁的DOCTYPE简单的编码类型不需要闭合废弃多余的标记HTML5*HTML5初体验HTML5 DemoHTML4HTML5HTML5初体验编写规范符合web标准，语义化，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。HTML5初体验文件规范html,css,js,images文件归档;html文件命名、css文件命名、Js文件命名HTML5初体验 html书写规范 文档类型声明及编码 样式文件及JS文件的引入 无兼容性问题的html自身标签 语义化html 布局嵌套 重定向问题，style使用 lable使用
12、 图片控制 注释 特殊符号使用HTML5初体验 css书写规范编码统一为utf-8;协作开发及分工class与id的使用css属性书写顺序样式重复使用率;html自身属性及继承原理中文字体名转码;背景图片使用sprite技术table标签使用兼容ie8;用png图片避免兼容性属性的使用减少使用影响性能的属性注释代码缩进与格式HTML5初体验JavaScript书写规范书写规范文件编码统一为utf-8库引入变量命名类命名函数命名命名语义化避免用存在兼容性及消耗资源的方法或属性转换成unicode编码注释.提高函数重用率注重与html分离,减小reflowHTML5初体验 归档;图片格式仅限于gi
13、f|png|jpg;命名 减少加载时间;运用css sprite技术图片规范HTML5初体验注释规范 html注释 css注释 JavaScript注释HTML5初体验测试工具 前期开发仅测试FF&IE6&IE7&IE8,后期优化时加入Opera&Chrome&Safari;建议测试顺序:FireFoxIE7IE8IE6OperaChromeSafari,建议安装firebug及IE Tab Plus插件.准备学习 HTML5的推广网站http:/www.html5cn.org/http:/ 1.3 Web浏览器中引入，Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图
14、像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容或者进行画图操作，需要借助canvas API(HTML5的内置对context 对象)和javascript操作实现画图或者其他图像操作。Canvas在网站设计中的应用 Canvas在网站设计中的应用使用CANVAS的基本步骤 A.建立CANVAS对象 B.通过JAVASCRIPT绘制 Canvas在网站设计中的应用 Canvas在网站设计中的应用案例演示canvas的常见属性Canvas的APIcanvas主要属性和方法Canva
15、s的API颜色、样式和阴影颜色、样式和阴影属性和方法Canvas的API线条样式线条样式属性和方法Canvas的API矩形方法Canvas的API-路径路径方法Canvas的API-转换方法Canvas的API-文本属性和方法Canvas的API-图像绘制方法Canvas的API-像素操作方法和属性Canvas的API图像合成属性 Canvas在网站设计中的应用 Canvas在网站设计中的应用 JavaScript在设计中的应用 JavaScript与HTML5 BOM JavaScript应用思想 Canvas在网站设计中的应用 JavaScript应用方法 使用频繁的方法 常规交互操作 C
16、anvas在网站设计中的应用 Canvas在网站设计中的应用 Canvas在网站设计中的应用 Canvas在网站设计中的应用 Canvas在网站设计中的应用 Canvas在网站设计中的应用 Canvas在网站设计中的应用Canvas在网站设计中的应用 Canvas在网站设计中的应用 CANVAS图形图片处理机制 了解坐标：Canvas在网站设计中的应用 CANVAS图形图片处理机制基础CANVAS API：属性与方法 Canvas在网站设计中的应用CANVAS动画设计原理 清空CANVAS存储CANVAS状态 重绘FRAME恢复CANVAS状态 Canvas在网站设计中的应用 动画测试1Can
17、vas在网站设计中的应用动画测试1Canvas在网站设计中的应用动画测试2Canvas在网站设计中的应用动画测试2Canvas在网站设计中的应用 Canvas在网站设计中的应用Canvas在网站设计中的应用操作思路 1.准备工作？2.画表盘？3.画12个时间刻度？4.画60个分钟刻度？5.取当前系统时间？6.画时针画分针画秒针画中心点？7.触发？Canvas在网站设计中的应用准备工作？Canvas在网站设计中的应用2.画表盘？Canvas在网站设计中的应用 3.画12个时间刻度？Canvas在网站设计中的应用4.画60个分钟刻度?5.取当前系统时间？Canvas在网站设计中的应用6.画时针Ca
18、nvas在网站设计中的应用6.画分针？画秒针Canvas在网站设计中的应用 7.触发？增强的表单Formweb form 2.0p 改进功能p 改进语义化p 增强用户体验p 提高工作效率增强的表单Form(所有HTML4的标签在 HTML5还是100支持)表单结构松散丰富的INPUT增强表单属性增强的表单Form HTML4一个大容器增强的表单Form 放在页面任何位置，通过新增的form属性指向ID .增强的表单Form自动获取焦点自动获取焦点 autofocus属性新版Chrome或Safari(FF也可)增强的表单Form 文本框的输入提示（输入框占位符输入框占位符）：placehold
19、er属性Opera或Chrome或Safari增强的表单Form 表单验证功能判断必填项判断数据格式email输入类型：url输入类型：增强的表单Form 滑动块输入 Opera或Chrome或Safari增强的表单Form案例增强的表单Form 数字输入框（Opera或Chrome）增强的表单Form 输入框下拉提示增强的表单Form 日期选择框 增强的表单Form媒体支持：Video&Audio早早期期：+文文件件问题：不是所有浏览器都支持，而且embed不是标准。现现状状：Realplay、window media、Quick Time、Flash问题：每个厂商每个标准，网站编码和格式也
20、都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。HTML5认为浏览器应该原生支持音视频，因为他们现在也是web中的一等公民了！音视频格式的简单介绍1、常常见见的的视视频频格格式式视频的组成部分：画面、音频、编码格式视频编码：H.264、Theora、VP8(google开源)常常见见的的音音频频格格式式视频编码：ACC、MP3、VorbisHTML5支持的格式HTML5能在完全脱离插件的情况下播放音视频但是不是所有格式都支持。HTML5支持的视频格式：Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件支持的浏览器:F、C、OME
21、PG4=带有H.264视频编码+AAC音频编码的MPEG4文件支持的浏览器:S、CWebM=带有VP8视频编码+Vorbis音频编码的WebM格式支持的浏览器:I、F、C、O的使用您的浏览器暂不支持您的浏览器暂不支持video标签。播放视频标签。播放视频您的浏览器暂不支持您的浏览器暂不支持video标签。播放视频标签。播放视频Video的常见属性Video的API方法Video的API属性Video的常用事件HTML5支持的音频格式HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的HTML5支持的音频格式：Ogg 免费 支持的浏览器:C、F、OMP3 收费
22、支持的浏览器:I、C、SWav 收费 支持的浏览器:F、O、S的使用您的浏览器暂不支持您的浏览器暂不支持audio标签。播放视频标签。播放视频您的浏览器暂不支持您的浏览器暂不支持audio标签。播放标签。播放视频视频audio的常见属性HTML5丰富的交互功能体验 contentEditable Dom方法处理编辑 拖放 编辑APIHTML5丰富的交互功能体验 contentEditableHTML5丰富的交互功能体验 哪些元素可编辑？Div,img,table.HTML5丰富的交互功能体验 HTML5丰富的交互功能体验 制作一个可编辑的TABLEHTML5丰富的交互功能体验 Drag&DropHTML5丰富的交互功能体验 HTML5丰富的交互功能体验 实现拖放HTML5丰富的交互功能体验 文件拖放HTML5丰富的交互功能体验 HTML5中的File及FileReader接口dragover、dragend、drop是三个与拖拽相关的事件。File及FileReader判断读取拖拽的文件。用FileReader的readAsDataURL方法将图片读取。如果想显示 文本文件内容，应如何操作？谢 谢！
