html5与css3
H5侧重移动端；
1.H5并不是新的语言，而是html语言的第五次重大修改--版本；
2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.
3.改变了用户与文档的交互方式：多媒体：video audio canvas
4.增加了其它的新特性：语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡，动画）
5.相对于h4:
1.进步：抛弃了一些不合理不常用的标记和属性
2.新增了一些标记和属性--表单
3.从代码角度而言，h5的网页结构代码更简洁。
一：什么是HTML5：
-
1、万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改 支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力 HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性 相比之前的进步：取消了一些过时的HTML4标记，将内容和展示分离，一些全新的表单输入对象，全新的，更合理的Tag，本地数据库，Canvas 对象，浏览器中的真正程序，Html5取代Flash在移动设备的地位 优点： a) 提高可用性和改进用户的友好体验； b) 有几个新的标签，这将有助于开发人员定义重要的内容； c) 可以给站点带来更多的多媒体元素(视频和音频)； d) 可以很好的替代FLASH和Silverlight； e) 当涉及到网站的抓取和索引的时候，对于SEO很友好； f) 将被大量应用于移动应用程序和游戏； g) 可移植性好。 缺点：该标准并未能很好的被Pc端浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。 未来趋势 a) 移动优先 b) 游戏开发者领衔“主演”
二：HTML5中的新增标签
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。 canvas 标签 描述 <canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API 多媒体 标签 描述 <audio> 定义音频内容 <video> 定义视频（video 或者 movie） <source> 定义多媒体资源 <video> 和 <audio> 字体 <embed> 定义嵌入的内容，比如插件。 <track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 表单 标签 描述 <datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 <keygen> 规定用于表单的密钥对生成器字段。 <output> 定义不同类型的输出，比如脚本的输出。 语义和结构 HTML5提供了新的元素来创建更好的页面结构： 标签 描述 <article> 定义页面的侧边栏内容 <aside> 定义页面内容之外的内容。 <bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。 <command> 定义命令按钮，比如单选按钮、复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框，比如提示框 <summary> 标签包含 details 元素的标题 <figure> 规定独立的流内容（图像、图表、照片、代码等等）。 <figcaption> 定义 <figure> 元素的标题 <footer> 定义 section 或 document 的页脚。 <header> 定义了文档的头部区域 <mark> 定义带有记号的文本。 <meter> 定义度量衡。仅用于已知最大和最小值的度量。 <nav> 定义运行中的进度（进程）。 <progress> 定义任何类型的任务的进度。 <ruby> 定义 ruby 注释（中文注音或字符）。 <rt> 定义字符（中文注音或字符）的解释或发音。 <rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 <section> 定义文档中的节（section、区段）。 <time> 定义日期或时间。 <wbr> 规定在文本中的何处适合添加换行符。
三HTML中移除的标签：
以下的 HTML 4.01 元素在HTML5中已经被删除: <acronym> 字体兼容 <applet> java组件 <basefont> 字体 <big> <center> <dir> 目录 <font> <frame> <frameset> <noframes> <strike>
四：HTML中的语义标签
-
1、传统页面的标签使用 HTML5页面中的标签使用，如： <body> <header>定义了文档的头部区域</header> <div> <article>定义页面的侧边栏内容</article> <aside>定义页面内容之外的内容</aside> </div> <footer>定义 section 或 document 的页脚</footer> </body> 五：兼容处理： 在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，
但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，
这样IE低版本也能正常解析HTML5新标签了。 处理方式：在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题（测试在IE下面的兼容性：ieTester软件的使用） <script src="../js/html5shiv.min.js"></script>
六：HTML5中表单新增的标签
- <datalist>:与input配合使用：类似于拥有输入功能的下拉列表
- <keygen>:提供一种验证用户数据的可靠方法。在提交表单数据的时候，会生成两个键，一个私钥，一个公钥。私钥存储在本地，公钥发送到服务器。在需要做验证的时候，我们可以从服务器下载一个客户端证书，通过私钥和证书来实现相关的验证操作。
- <meter>:度量器，可用于标示级别
|
属性 |
值 |
描述 |
|
high |
number |
定义度量的值位于哪个点，被界定为高的值。 |
|
low |
number |
定义度量的值位于哪个点，被界定为低的值。 |
|
max |
number |
定义最大值。默认值是 1。 |
|
min |
number |
定义最小值。默认值是 0。 |
|
optimum |
number |
定义什么样的度量值是最佳的值。 如果该值高于 "high" 属性，则意味着值越高越好。 如果该值低于 "low" 属性的值，则意味着值越低越好。 |
|
value |
number |
定义度量的值。 |
- <output>:用于展示内容，只能展示，不能进行编辑
七：表单新增的属性
placeholder 占位符 autofocus 获取焦点 multiple 文件上传多选或多个邮箱地址 autocomplete 自动完成，用于表单元素，也可用于表单自身
有2个前提：1、必须成功提交过；2、当前添加的元素必须有name属性。 form 指定表单项属于哪个form，处理复杂表单时会需要；（例如上面写了1个form表单，单面也有标签想提交到表单中，可以在里面添加form属性，等于上面表单的id值，就可以一块提交了。） novalidate 关闭验证，可用于<form>标签 required 验证条件，必填项 pattern 正则表达式 验证表单 autocomplete: 属性规定表单是否应该启用自动完成功能。
autocomplete 属性适用于 <form>，以及下面的 input 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。<br>
<form action="" autocomplete="on"> autofocus定位文本框焦点：<input type="text" autofocus> <br> placeholder设置文本框默认提示：<input type="text" placeholder="请输入***"><br> email邮件类型自带验证和提示：<input type="email"> <br> required属性设置非空特性：<input type="tel" required><br> pattern设置验证规则：<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$"><br> multiple多文件选择：<input type="file" multiple><br> <input type="submit" value="提交"/> </form> 八：表单的输入类型 a) email： 输入email格式 b) tel： 手机号码 （主要目的是在手机端打开数字键盘输入） c) url： 只能输入url格式， (必须包含http) d) number： 只能输入数字, 可以设置最大值max,最小值min,默认值value e) search： 搜索框; 里面有删除功能 f) range： 范围，可以进行拖动，通过value进行取值； 有max/min/value g) color ：拾色器，通过value进行取值 h) time ：时间 i) date： 日期 不是绝对的 j) datetime： 时间日期； 现在大多数浏览器不能用，现在苹果saf支持 k) month： 月份 l) week： 星期
datetime-local 时间日期，支持所有浏览器 说明：部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
八-九：新增表单元素：
select的使用：keygen （了解，浏览器一般不支持） output(了解，浏览器一般不支持)
keygen （了解，浏览器一般不支持）
output(了解，
九：表单新增的事件：
oninput 用户输入内容时触发，可用于移动端输入字数统计 oninvalid 验证不通过时触发 <script> /*oninput可以监听用户的每一次输入*/ document.getElementById("name").oninput=function(){ console.log(this.value); } /*onkeyup监听键盘弹起，每一个键盘弹出触发一次*/ document.getElementById("name").onkeyup=function(){ console.log("---"+this.value); } /*oninvalid当指定表单元素验证不通过时触发*/ document.getElementById("phone").oninvalid=function(){ console.log("验证不通过");
this.setCustomValidity(''); //可以设置默认的提示信息 } </script>
新增进度条有2种：
十：新增表单元素和属性的案例
效果图：
![]()
a 样式CSS <style> *{ margin: 0; padding: 0; } body{ max-width:600px; margin: 0 auto; } form{ width:100%; } form fieldset{ padding:20px 20px 10px; } form fieldset label{ font-weight:bold; line-height:20px; } form input, form meter{ width:100%; margin:10px 0; display: block; height:30px; border: 1px solid #ccc; padding-left:5px; } form meter{ width:100%; border: none; padding-left:0; } .btn{ width:100%; height: 40px; margin-top: 20px; } </style>
b) 结构html <body> <form action=""> <fieldset> <legend>学生档案</legend> <label for="userName">姓名:</label> <input type="text" name="userName" id="userName" placeholder="请输入姓名" required> <label for="phone">手机号码：</label> <input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$"> <label for="email">邮箱地址：</label> <input type="email" name="email" id="email"> 所属学院： <input type="text" list="school" name="college" id="college" placeholder="请选择"> <datalist id="school"> <option>移动与前端开发学院</option> <option>IOS</option> <option>andriod</option> <option>c++</option> </datalist> <label for="score">入学成绩:</label> <input type="number" max="100" min="0" step="1" name="score" id="score" value="0"> <label for="level">基础水平</label> <!--通过low/high的值来设置meter的颜色--> <meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter> <label for="inTime">入学日期</label> <input type="date" name="inTime" id="inTime"> <label for="leaveTime">毕业日期</label> <input type="date" name="leaveTime" id="leaveTime"> <input type="submit" name="submit" id="submit" class="btn"> </fieldset> </form> <script> /*通过score成绩的输入，动态修改meter的颜色*/ document.getElementById("score").oninput=function(){ document.getElementById("level").value=this.value; } </script> </body> 说明： 1.<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，
或者甚至可创建一个子表单来处理这些元素。 2. legend 元素为 fieldset 元素定义标题（caption）。
十一：多媒体
1.音频播放：audio标签的使用:
a) 属性：
|
autoplay |
如果出现该属性，则音频在就绪后马上播放。 |
|
|
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
|
loop |
如果出现该属性，则每当音频结束时重新开始播放。 |
|
|
preload |
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
|
|
url |
要播放的音频的 URL。 |
b) 示例:播放音频
<audio src="../mp3/See.mp3" controls autoplay></audio>
// controls音频播放器控制面板;autoplay背景播放；
2、视频播放：video标签的使用
a) 属性：
|
autoplay |
如果出现该属性，则视频在就绪后马上播放。 |
|
|
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
|
pixels |
设置视频播放器的高度。 |
|
|
loop |
如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
|
|
preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
|
|
url |
要播放的视频的 URL。 |
|
|
pixels |
设置视频播放器的宽度。 |
poster:当视频还没下载，或者用户还没点播放时的第一张画面，也可以是一张图片路径。
注意：当设置宽高的时候，一般情况下只会设置宽或高，另外一个由其自由变换，否则视频不会真的按照预想改变，除非设置正好。
b) 视频播放
<video src="../mp3/561902ae6ac6e6649.mp4" controls></video>
c) 说明：由于版权等原因，不同的浏览器可支持播放的格式是不一样的；
十二：DOM扩展：
获取元素： a) document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。getElementsByTagName b) document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。 c) document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。
![]()
类名操作： a) Node.classList.add('class') 添加class b) Node.classList.remove('class') 移除class c) Node.classList.toggle('class') 切换class，有则移除，无则添加 d) Node.classList.contains('class') 检测是否存在class![]()
自定义属性： a) 在HTML5中我们可以自定义属性，其格式如下data-*=""，例如：data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。 b) 当我们如下格式设置时，则需要以驼峰格式才能正确获取：data-my-name="itcast"，获取Node.dataset['myName']![]()
小案例：tab标签页 1、 练习重点： i. 获取元素的方式 ii. 自定义属性的使用 iii. 类名操作：如添加类样式，移除类样式 2、 效果图 3、 结构 <div class="tabs"> <div> <a href="javascript:;" data-target="local">国内新闻</a> <a href="javascript:;" data-target="global">国际新闻</a> <a href="javascript:;" data-target="sports">体育新闻</a> <a href="javascript:;" data-target="funny">娱乐新闻</a> </div> <section class="cont active" id="local"> <ol> <li>2名晋升为上将军官颁发命令状</li> <li>郭声琨了解指导公安消防部队抗洪工作</li> <li>媒体：曾任职中办的这位官员仕途有变</li> <li>广西警方端掉地下兵工厂缴获大批炮弹</li> <li>她完美诠释奇葩考题夺金牌</li> <li>中国奥运选手在里约多次遭抢劫</li> </ol> </section> <section class="cont active" id="global"> <ol> <li>河南再次发生矿难，死伤人数超过100</li> <li>禽流感次发生蔓延，***指示</li> <li>南方大旱，农作物减产绝收面积上亩</li> <li>猪流感在广减产绝收发</li> <li>禽流感在全国多作物减产绝收面积上亩</li> <li>猪流感在广东群体性暴发</li> </ol> </section> <section class="cont" id="sports"> <ol> <li>河南再次发生矿难，死伤人数超过10</li> <li>禽流感在全国多处农作物农延，***指示</li> <li>南方大旱，农作物减产绝收面积上亩</li> <li>猪流感在广东群体性暴发</li> <li>禽流感在全农作物继续蔓延，***指示</li> <li>南方大农作物减产绝收面积上亩</li> <li>猪流感在广东群体性暴发</li> </ol> </section> <section class="cont" id="funny"> <ol> <li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li> <li>四川原副省长李成云被查 5年前曾违纪又复出</li> <li>胡歌反对粉丝探班：以前请吃饭现在会黑脸</li> <li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li> <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li> <li>国子监大街门匾现错字 已悬挂近10年(图)</li> <li>猪流感在广东群体性暴发</li> </ol> </section> </div> 4、 js代码 <script> (function(key){ //1.获取所有a标签 var allA=document.querySelector(".tabs").querySelector("div:first-child").querySelectorAll("a"); //初始化操作 for(var i=0;i<allA.length;i++){ if(i==key){ allA[i].classList.add("active"); var active=allA[i].dataset["target"]; document.querySelector("#"+active).style.display='block'; } //2.循环遍历所有的a标签，为其添加点击事件 allA[i].onclick=function(){ //3.判断当前是否是当前已激活的页，如果是，则不进行处理 if(this.classList.contains("active")){ return; } //4.否则，则需要找到当前a标签对应的data-target属性，利用这个属性找到对应id的section进行样式的设置，让其显示 //4.1先移除之前a标签的active类样式 var aActive=document.querySelector(".active"); aActive.classList.remove("active"); //4.2让之前显示的section隐藏 var currentTarget=aActive.dataset["target"]; document.querySelector("#"+currentTarget) .style.display ="none"; //4.3为其添加active样式 this.classList.add("active"); //4.4获取当前被点击的a标签的data-target属性 var value=this.dataset["target"]; //4.5让对应id的section显示--添加active类样式即可 document.querySelector("#"+value).style.display="block"; }; } })(0); </script>
下面要学习的内容：
了解 网络状态改变事件
使用 全屏API 实现 元素全屏效果
使用 文件读取接口 实现 文件读取预览效果
使用 拖拽接口 实现 常见拖拽效果
使用 地理定位接口 获取 用户位置信息
使用 Web存储接口 实现数据的读写
了解 应用缓存接口
使用 多媒体接口 实现 自定义播放器
网络状态：
使用 全屏API 实现 元素全屏效果
![]()
![]()
![]()
![]()
![]()
使用 文件读取接口 实现 文件读取预览效果
![]()
![]()
![]()
使用 拖拽接口 实现 常见拖拽效果
五：拖拽： 1. 定义和用法：拖放是 HTML5 中非常常见的功能。 2. 在拖放的过程中会触发以下事件：
a) 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发
b) 释放目标时触发的事件— 当拖拽元素在目标容器上进行操作的时候: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
3. 注意： 1. 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。 2. 为了让元素可拖动，需要使用 HTML5 draggable 属性 3. 链接和图片默认是可拖动的，不需要 draggable 属性 4. 可以通过addEventListener来添加拖拽相关事件 5. 事件源：触发事件的源，一般情况下我们会将相同操作的多个对象绑定到同一个处理事件，同时传递当前的对象到处理方法，这就是事件源参数 小案例：实现元素的拖拽操作：
效果： 2. 网页结构代码： <!--标记是否可以拖动，true表示可以拖动--> <div class="div1"> <p draggable="true" id="pe">试着把我拖过去</p> </div> <div class="div2"></div>
3. Js代码 (几个事件的说明)： <script> /*这几次拖拽的事件源都是当前被拖拽的元素*/ /*开始拖拽*/ document.addEventListener("dragstart",function(e){ //设置当前目标元素的透明度，产生拖拽效果 e.target.style.opacity=0.4; //将当前的被拖拽元素的id号存储到事件源对象中 e.dataTransfer.setData("Text", e.target.id); }); /*拖拽进行中*/ document.addEventListener("drag",function(e){ e.target.parentNode.style.borderColor="green"; }); /*拖拽结束*/ document.addEventListener("dragend",function(e){ e.target.style.opacity=1; e.target.parentNode.style.borderColor="red"; }); /*下面几个方法的事件源是目标元素，而不是被拖拽的元素*/ /*当将当前元素拖拽到另外一个元素上时触发*/ document.addEventListener("dragenter",function(e){ if(e.target.className=="div2"){ e.target.style.borderColor="pink"; } else if(e.target.className=="div1"){ e.target.style.borderColor="red"; } }); /*拖拽元素在目标元素上移动时触发*/ document.addEventListener("dragover",function(e){ /*默认情况下，一个元素不能拖拽到另外一个元素内，如果想允许拖拽，我们必须阻止默认的事件冒泡*/ e.preventDefault(); }); /*当拖拽元素离开目标元素时触发*/ document.addEventListener("dragleave",function(e){ if(e.target.className=="div2"){ e.target.style.borderColor="blue"; } }); /*当拖拽元素在目标元素上松开的时候触发*/ document.addEventListener("drop",function(e){ //1.阻止事件冒泡 e.preventDefault(); if(e.target.className=="div2" || e.target.className=="div1"){ //2.还原目标元素的默认样式 e.target.style.borderColor="blue"; //3.获取被拖拽元素的id var id= e.dataTransfer.getData("Text"); //4.追加被拖拽元素到目标元素 e.target.appendChild(document.getElementById(id)); } }); </script>
使用 地理定位接口 获取 用户位置信息
四：地理定位：了解 1. 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service) 2. 获取地理信息方式 a) IP地址 b) 三维坐标 i. GPS（Global Positioning System，全球定位系统） ii. Wi-Fi iii. 手机信号 c) 用户自定义数据 如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。 4. 隐私: 推送通知 HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息 5. API说明： a) navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息 b) navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息 c) 1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标) d) position.coords.latitude纬度 e) position.coords.longitude经度 f) 当获取地理信息失败后，会调用errorCallback，并返回错误信息error g) 可选参数 options 对象可以调整位置信息数据收集方式 6. 百度地图案例-介绍
使用 Web存储接口 实现数据的读写
六：web存储： 1. 需求：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，
传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案
2. HTML5提供的解决方案： a) window.sessionStorage b) window.localStorage
3. 特点： a) 设置、读取方便 b) 容量较大，sessionStorage约5M、localStorage约20M c) 只能存储字符串，可以将对象JSON.stringify() 编码后存储
4. Window.sessionStorage的使用 a) 特点： i. 生命周期为关闭浏览器窗口：相当于存储在当前页面的内内存中 ii. 在同一个窗口下数据可以共享(在当前页面下可以获取到，换另外一个页面下不能获取到)
b) 方法介绍：(两种存储方式的方法一致) i. SetItem(key,value):设置数据，以键值对的方式 ii. getItem(key):通过指定的键获取对应的值内容 iii. removeItem(key):删除指定的key及对应的值内容 iv. clear():清空所有存储内容 c) 使用说明： <script> var userData=document.getElementById("userName"); //存储数据 document.getElementById("setData").onclick=function(){ window.sessionStorage.setItem("userName",userData.value); } //获取数据 document.getElementById("getData").onclick=function(){ var value=window.sessionStorage.getItem("userName"); alert(value); } </script>
5. Window.localStorage的使用 a) 特点： i. 永久生效，除非手动删除：存储在硬盘上 ii. 可以多窗口共享。但是不能跨浏览器 b) 使用说明： <script> var userData=document.getElementById("userName"); //存储数据 document.getElementById("setData").onclick=function(){ window.localStorage.setItem("userName",userData.value); } //获取数据 document.getElementById("getData").onclick=function(){ var value=window.localStorage.getItem("userName"); alert(value); } //删除数据 document.getElementById("removeData").onclick=function(){ window.localStorage.removeItem("userName"); } </script>
了解 应用缓存接口
1. 概念：使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本 2. 优势： a) 可配置需要缓存的资源 b) 网络无连接应用仍可用 c) 本地读取缓存资源，提升访问速度，增强用户体验 d) 减少请求，缓解服务器负担 3. Cache Manifest 基础： a) 如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性： <!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> b) 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。 c) manifest 文件的建议的文件扩展名是：".appcache"。 d) 注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置 4. Manifest 文件： a) 概念：manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容） b) manifest 文件可分为三个部分 CACHE MANIFEST – 开始 CACHE在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面） c) CACHE MANIFEST说明： CACHE MANIFEST，放置在第一行，是必需的： ---------------------------------------------------------------------------------------------------- CACHE ： /theme.css /logo.gif /main.js ---------------------------------------------------------------------------------------------------- 上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的 d) NETWORK说明： NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的，如 ----------------------------------------------------------------------------------------------------- NETWORK: login.asp ---------------------------------------------------------------------------------------------------- e) FALLBACK说明： FALLBACK 小节规定如果无法建立因特网连接，就使用指定的资源代替所请求的url的资源，如： ------------------------------------------------------------------------------------------------------ FALLBACK: /html5/ /404.html ------------------------------------------------------------------------------------------------------- 注释：当html5资源在离线状态下无法请求的时候，就使用404.html代替 f) 其它： 1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST 2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制 3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。 4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存 g) 更新缓存： 一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，也需要更新 manifest 文件，也就意味着一旦应用被缓存，它就会保持缓存直到发生下列情况： 1. 用户清空浏览器缓存 2. manifest 文件被修改（参阅下面的提示） 3. 由程序来更新应用缓存 说明：更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法
使用 多媒体接口 实现 自定义播放器
1
浙公网安备 33010602011771号