HTML5完整教程.ppt

培训教程 1 什么是HTML5 HTML5是一个新的网络标准 现在仍处于发展阶段 目标是取代现有的HTML4 01和XHTML1 0标准 它希望能够减少互联网富应用 RIA 对Flash Silverlight JavaFX等的依赖 并且提供更多能有效增强网络应用的API 2 HTML5时间表 3 HTML5的八大新特性 语义 离线存储 设备通用 连接 多媒体 三维 图形与特效 性能与集成 CSS3 4 语义 5 思考 什么是语义化 语义化 是指用合理HTML标记以及其特有的属性去格式化文档内容 通俗地讲 语义化就是对数据和信息进行处理 使得机器可以理解 语义化的 X HTML文档有助于提升你的网站对访客的易用性 比如使用PDA 文字浏览器以及残障人士将从中受益 对于搜索引擎或者爬虫软件来说 则有助于它们建立索引 并可能给予一个较高的权值 6 简化的文档类型和字符集 声明位于HTML文档中的最前面的位置 它位于标签之前 该标签告知浏览器文档所使用的HTML或XHTML规范 在HTML4中 标签可以声明三种DTD类型 分别表示严格版本 Strict 过渡版本 Transitional 和基于框架 Frameset 的HTML文档 7 HTML5的标签 8 HTML5的字符集 HTML5的字符集也得到了简化 只需要使用UTF 8即可 使用一个meta标记就可以指定HTML5的字符集 代码如下 9 HTML5的字符集 HTML5的字符集也得到了简化 只需要使用UTF 8即可 使用一个meta标记就可以指定HTML5的字符集 代码如下 10 语义化的文档标签 HTML5的设计者们认为网页应该像XML文档和图书一样有结构 通常 网页中有导航 网页体内容 工具栏 页眉和页脚等结构 HTML5中增加了一些新的标记以实现这些网页结构 这些新标记及其定义的网页布局 11 十个常用的新标签列表 定义文章定义文章的侧边栏一组媒体对象以及文字定义figure的标题定义页脚 定义页眉定义导航定义文档中的区段定义日期和时间 被弃用的标签 和 12 标签 标签用于定义文档的页眉 介绍信息 使用标签的例子 欢迎光临我的网站我是黑龙江傲立网页的其他部分 13 标签 标签用于定义导航链接 例1 17 使用标签的例子 欢迎光临我的网站我是黑龙江傲立首页简介联系方式网页的其他部分 本文档创建于2012 10 07 14 标签示例 15 标签 标签用于定义文档中的区段 例如章节 页眉 页脚或文档中的其他部分 使用标签的例子 HTML5HTML5是最新的HTML标准 16 标签 标签用于定义文章或网页中的主要内容 使用标签的例子 微软在发布WindowsPhone8时曾表示 移动版IE10在HTML5上比起IE9将会有长足的进步 看来他们并没有吹嘘 根据外站WPCentral近日对各大浏览器进行的跑分测试 我们可以看到 IE10的成绩是IE9的两倍有余 17 标签 标签用于定义主要内容之外的其他内容 使用标签的例子 微软在发布WindowsPhone8时曾表示 移动版IE10在HTML5上比起IE9将会有长足的进步 看来他们并没有吹嘘 根据外站WPCentral近日对各大浏览器进行的跑分测试 我们可以看到 IE10的成绩是IE9的两倍有余 HTML5HTML5是最新的HTML标准 目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步 预期要到2022年才会成为W3C推荐标准 HTML5无疑会成为未来10年最热门的互联网技术 18 aside标签示例 19 标签 标签用于定义独立的流内容 图像 图表 照片 代码等等 使用元素为figure添加标题 黄浦江上的的卢浦大桥拍摄者 W3School项目组 拍摄时间 2010年10月 20 标签示例 21 标签 标签用于定义区段 section 或文档的页脚 通常 该元素包含作者的姓名 文档的创作日期或者联系方式等信息 使用标签的例子 Postedby W3SchoolContactinformation someone 22 标签示例 23 一个综合示例 网页标题次级标题提示信息导航链接1链接2链接3文章标题文章内容 文章注脚相关内容相关辅助信息或者服务 页脚 24 25 HTML5的新增内联元素 1 标签2 标签3 标签4 标签 26 标签 标签用于定义带有记号的文本 使标签的例子 目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步 预期要到2022年才会成为W3C推荐标准 27 标签示例 28 标签 标签用于定义公历的时间 24小时制 或日期 时间和时区 标签的属性如下 datetime 用于指定日期 时间 如果不指定此属性 则元素的内容给定日期 时间 其语法格式如下 pubdate 用于指定指示元素中的日期 时间是文档 或最近的前辈元素 的发布日期 其语法格式如下 29 标签示例 使标签的例子 2013年春节是2013 02 102013年春节目前所有主流浏览器都不支持标签 30 标签 标签用于定义度量衡 仅用于已知最大和最小值的度量 浏览器会使用图形方式表现标签 标签的属性说明如下 high 定义度量的值位于哪个点 被界定为高的值 low 定义度量的值位于哪个点 被界定为低的值 max 定义最大值 默认值是1 min 定义最小值 默认值是0 optimum 定义什么样的度量值是最佳的值 如果该值高于 high 属性 则意味着值越高越好 如果该值低于 low 属性的值 则意味着值越低越好 value定义度量的值 目前IE浏览器不支持标签 31 标签 标签的例子 30 32 标签示例 Chrome IE Edge 33 标签 标签用于定义定义一个进度条 它的属性说明如下 max 定义完成的值 value 定义进度条的的当前值 如果不指定value值 则显示一个动态的进度条 InternetExplorer9以及更早的版本浏览器不支持标签 34 标签 使用标签的例子 下载进度 85 处理中 请稍候 35 标签示例 36 支持动态页面 1 菜单2 右键菜单3 在标签中使用async属性4 标签 37 标签 在HTML5中 可以使用标签定义菜单 多用于表单中组织控件列表 标签的常用属性如表1 3所示 38 标签示例 新建打开保存剪切复制粘贴 39 标签示例 40 使用标签定义菜单项 标签的常用属性如表所示 目前仅Firefox8 0以及更高的版本支持标签 41 使用标签定义菜单项 HTML5支持在网页中创建和使用自定义的右键菜单 在网页元素中可以使用contextmenu属性指定此元素使用的右键菜单 42 标签示例 请在框中右键点击 就可以看到快捷菜单 本例只在Firefox中有效 43 标签示例 44 Script脚本异步加载 无阻塞并发处理 async属性是HTML5的新属性 在标签中使用async属性可以指定异步执行指定的脚本 也就是在加载网页的同时执行指定的脚本 如果不指定async属性 正常情况下 当浏览器在解析HTML源文件时如果遇到外部的script 那么解析过程会暂停 并发送请求来下载script文件 只有script完全下载并执行后才会继续执行DOM解析 45 演示一个传统的执行JavaScript脚本的例子 HelloWorld 46 47 需要等到外部脚本加载完成执行后 才加载剩余网页部分 48 使用async属性异步执行JavaScript脚本的例子 HelloWorld 49 50 并发执行 51 标签 标签用于描述文档或文档某个部分的细节 标签描述文档细节的例子 数据库文档说明 本文档用于描述数据库结构 由开发部数据库小组维护 最后修改于2012 10 15 52 标签 53 拾色器 日期字段时间字段 数字字段滑动组件 类型匹配 除了这些 还有 搜索进度条25 密钥输出10 5 Andsoon 正则匹配 必填字段 选项列表 增强的表单控件 54 HTML5表单 新的Input类型 emailurlnumberrangeDatepickers date month week time datetime datetime local searchcolor 55 Input类型 email email类型用于应该包含e mail地址的输入域 在提交表单时 会自动验证email域的值 56 Input类型 url url类型用于应该包含URL地址的输入域 在提交表单时 会自动验证url域的值 Homepage 57 Input类型 number number类型用于应该包含数值的输入域 还能够设定对所接受的数字的限定 58 Input类型 number 一般限定 Points 59 Input类型 number 多限定 60 Input类型 range range类型用于应该包含一定范围内数字值的输入域 range类型显示为滑动条 还能够设定对所接受的数字的限定 61 Input类型 range 62 Input类型 DatePickers 日期选择器 HTML5拥有多个可供选取日期和时间的新输入类型 date 选取日 月 年month 选取月 年week 选取周和年time 选取时间 小时和分钟 datetime 选取时间 日 月 年 UTC时间 datetime local 选取时间 日 月 年 本地时间 63 Input类型 DatePickers 日期选择器 64 Input类型 DatePickers 日期选择器 65 Input类型 DatePickers 日期选择器 66 Input类型 search search类型用于搜索域 比如站点搜索或Google搜索 search域显示为常规的文本域 67 Input类型 tel tel类型用于应该包含手机号码的输入域 在提交表单时 配合属性设置后 会自动验证tel域的值 68 Input类型 color color类型用于颜色拾取 69 Input类型 color 70 HTML5表单 HTML5表单元素 HTML5拥有若干涉及表单的元素和属性 datalistkeygenoutput 浏览器支持 71 HTML5表单元素 datalist元素 datalist元素规定输入域的选项列表 列表是通过datalist内的option元素创建的 如需把datalist绑定到输入域 请用输入域的list属性引用datalist的id Webpage option元素永远都要设置value属性 72 HTML5表单元素 datalist元素 73 HTML5表单元素 keygen元素 keygen元素的作用是提供一种验证用户的可靠方法 keygen元素是密钥对生成器 key pairgenerator 当提交表单时 会生成两个键 一个是私钥 一个公钥 私钥 privatekey 存储于客户端 公钥 publickey 则被发送到服务器 公钥可用于之后验证用户的客户端证书 clientcertificate Username Encryption 74 HTML5表单元素 keygen元素 75 HTML5表单元素 output元素 output元素用于不同类型的输出 比如计算或脚本输出 functionmulti a parseInt prompt 请输入第1个数字 0 b parseInt prompt 请输入第2个数字 0 document forms form result value a b 两数的乘积为 76 HTML5表单元素 output元素 77 HTML5表单元素 output元素 78 HTML5表单 HTML5表单属性 HTML5新的表单属性 本次只涉及和元素的新属性 新的form属性 autocompletenovalidate 新的input属性 autocompleteautofocusformformoverrides formaction formenctype formmethod formnovalidate formtarget height和widthlistmin max和stepmultiplepattern regexp placeholderrequired 79 新的form属性 autocomplete属性 autocomplete属性 autocomplete属性规定form或input域应该拥有自动完成功能 autocomplete适用于标签 以及以下类型的标签 text search url telephone email password datepickers range以及color 当用户在自动完成域中开始输入时 浏览器应该在该域中显示填写的选项 在某些浏览器中 需要启用自动完成功能 以使该属性生效 80 新的form属性 autocomplete属性 Firstname Lastname E mail 81 新的form属性 autocomplete属性 82 新的form属性 autocomplete属性 83 新的form属性 autofocus属性 autofocus属性 autofocus属性规定在页面加载时 域自动地获得焦点 注释 autofocus属性适用于所有标签的类型 84 新的form属性 autofocus属性 85 微数据 Microdata 一个页面的内容 例如人物 事件或评论不仅要给用户看 还要让机器可识别 而要让机器知会特定内容含义 我们就需要使用规定的标签和属性 HTML5微数据规范是一种标记内容以描述特定类型的信息 例如评论 人物信息或事件 每种信息都描述特定类型的项 例如人物 事件或评论 例如 事件可以包含venue startingtime name和category属性 评分 四星商户618封点评 86 离线存储 87 Web存储 WebStorage HTML5提供了两种在客户端存储数据的新方法 localStorage 用于持久化的本地存储 除非主动删除数据 否则数据是永远不会过期 sessionStorage 用于存储一个会话 session 中的数据 这些数据只有在同一个会话中的页面才能访问 当会话结束后数据也随之销毁 以前 这些都是由Cookie完成的 但是Cookie有4KB的大小限制 而且会随HTTP请求一起被传递 无形中拖慢网页速度而且效率不高 localStorage length localStorage key index localStorage setItem foo bar localStorage getItem foo localStorage removeItem foo localStorage clear 88 IndexedDataBase 对于存储少量的数据 WebStorage能够很好的完成任务 但是对大量的结构化数据进行处理时 它就力所不及了 而这正是IndexedDB的应用所在 IndexedDB严格遵循W3C的同源策略 每个源都拥有独立的存储空间 每个存储空间内又可以创建多个数据库 每个数据库可以包含多个表 每个表都是一个json对象列表 可以存储多个json对象 比如 name sonic age 27 89 ApplicationCache 使用ApplicationCache 你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用的 这时候你的网站工作起来就像是线上一样 并且他们不会感觉到和真正在线使用有任何差异 那么 哪一部分文件是浏览器要保存的呢 这一切都定义在缓存清单文件中 CACHEMANIFEST version1 0 0 缓存 定义了哪些资源是浏览器可以缓存的CACHE html5 src logic js html5 src style css html5 src background png 网络 定义了哪些资源是需要用户在线才能使用的NETWORK 90 设备通用 91 拖拽与拖放 Drag Drop 与文件处理 FileAPI 过去我们想实现网页中的拖拽效果 基本上都是使用DOM事件模型中的mousedown mousemove mouseup的鼠标事件监听来模拟拖拽效果 为了实现实时的拖拽移动效果 还要不停地获取鼠标的坐标 不停的修改元素的位置 代码要堆很多 而且性能也很差 现在有了HTML5原生的Drag Drop拖拽事件 再结合FileAPI中的FileReader 一切变得soeasy 92 连接 93 WebSocket 现在 很多网站为了实现即时通讯 所用的技术都是轮询 这种模式需要浏览器不断的向服务器发出请求 然而HTTP请求的header信息是非常长的 这样会占用很多的带宽和服务器资源 WebSockets是在一个 TCP 接口进行双向通信的技术 PUSH技术类型 能更好的节省服务器资源和带宽并达到实时通讯 在WebSocketAPI中 浏览器和服务器只需要做一个握手的动作 然后 浏览器和服务器之间就形成了一条快速通道 两者之间就直接可以数据互相传送 94 桌面通知 Notifications 通过桌面通知系统 网站可以在用户桌面弹出一条通知 无论用户是否浏览当前网页 甚至最小化了浏览器 通知均可到达用户桌面 if window webkitNotifications checkPermission 0 vartitle 领跑HTML5支持傲游升级自主内核 text 桌面通知时HTML5的独门秘籍 window webkitNotifications createNotification title text show 95 多媒体 96 音频和视频 Audio Video Audio和Video是首批添加到HTML规范中的标签 它们的加入使得我们可以像插入图片一样来处理音频及视频文件 97 三维 图形与特效 98 Canvas画布元素 传统的网页 总是使用GIF或者JPEG来显示图像 这种图形是需要事先画好的 静态 的图像 而Canvas 则是用Javascript的一种绘图手段 可以用它来画图 合成图象 或做简单的 和不那么简单的 动画 varctx document getElementById canvas 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 99 WebGL WebGL是一种3D绘图标准 有别于过往需加装浏览器插件 透过WebGL的技术 只需要编写网页代码即可实现3D图像的展示 WebGL完美地解决了现有的Web交互式三维动画的两个问题 第一 它通过HTML脚本本身实现Web交互式三维动画的制作 无需任何浏览器插件支持 第二 它利用底层的图形硬件加速功能进行的图形渲染 是通过统一的 标准的 跨平台的OpenGL接口实现的 100 性能与集成 101 XMLHttpRequest2 作为XMLHttpRequest的改进版 XMLHttpRequestLevel2在功能上有了很大的改进 支持跨源XMLHttpRequest和进度事件 Progressevents 计算上传进度 xhr upload addEventListener progress function e varpc parseInt 100 e loaded e total 100 progress style backgroundPosition pc 102 CSS3 103 CSS选择器 CSSSelector 完整的CSS3选择器 http www w3 org TR css3 selectors selectors 104 颜色 Color 透明度 opacity 0 1 opacity 0 5 opacity 0 9 RGBA色彩模式 color rgba 255 0 0 0 75 PS RGBA是在RGB的基础上多了控制alpha透明度的参数 HSL色彩模式 color hsl 0 100 50 PS HSL色彩模式是工业界的一种颜色标准 HSL分别代表色调 饱和度 亮度三个通道 105 分栏 Columns column count 3 column r