HTML5的总结

新增的语义化结构标签新增的属性与元素表单-type新增选项表单新属性表单的新属性 音频和视频canvas(画布)svg(矢量图)自定义属性data-name 网络监听接口网络状态改变时间(了解) 全屏API实现 元素全屏效果(使用)文件读取接口 实现文件读取预览效果(使用)拖拽接口 实现常见拖拽效果(使用)地理定位接口 获取用户位置信息(使用)Web存储接口 实现数据的读写(使用)应用缓存接口(了解)

新增的语义化结构标签

（1）header（头部） （2）nav（导航） （3）section（主体） （4）aside（侧边栏） （5）article （内容）（6）footer（底部）

新增的属性与元素

表单-type新增选项

email : 验证邮箱格式是否正确，其中必须包含"@",后面还必须有( . ) ;url : 验证网址是否正确，其中必须包含" http:// ",否者将不发成功提交tel ： 这个属性只在移动端起作用，表示当这个input获得焦点后，自动弹出键盘，并且这能输入数字number : 表示这里只能出现数字，并且后面还有能调节数字的按钮range : 一个滑块空间，有min max，可以获取value的值知道当前的值，然后做一些计算date : 一个日期控件，默认的是年月日的类型，选取当前的时间，其相关的类型有：time 时分秒 ， 这两个可以混合使用 datetime-local 日期和时间 ， month 月份控件 week 周控件color : 选择颜色控件

表单新属性

placeholder : 提供默认提示内容，=“提示内容”multiipe : 允许输入多个值，中间使用逗号隔开autofocus : 自动获取焦点from : 允许表单元素定义再表单标签以外，提交时一起提交required : 验证当前元素值是否为空，为空不让提交表单pattern : 使用正则表达式验证当前元素值是否匹配 注意 - 并不能验证当前元素值是否为空min和max验证当前元素值最小值或最大值, 一般适用于number、range等元素minlength和maxlength : minlength - 验证当前元素值的最小长度,当再输入值时,允许输入小于指定值 ，挡在提交表单时,验证元素值最小长度，maxlength - 验证当前元素值的最大长度,当输入值时,长度不能大于指定值validity 表单验证HTML5提供一种有效状态 ， 有效状态通过validityState对象获取到， validityState对象可通过validity属性得到 验证(有效)状态 validityState对象提供了一系列的有效状态通过这些有效状态,进行判断 注意： 所有验证状态必须配合上述的验证属性使用 验证状态 valid 作用 - 判断当前元素值是否正确 注意 该状态返回true,表示验证成功 该状态返回false,表示验证失败 valueMissing * 作用 - 判断当前元素值是否为空 * 用法 - 配合required属性使用 typeMismatch * 作用 - 判断当前元素值的类型是否匹配 *用法 - 配合email、number、url等 patternMismatch * 作用 - 判断当前元素值是否与指定正则表达式匹配 * 用法 - 配合pattern属性使用 tooLong *作用 - 判断当前元素值的长度是否正确 *用法 - 配合maxlength属性 *注意 使用maxlength属性后,实际不可能出现长度大于maxlength的值 * tooLong很难出现这种情况 rangeUnderflow * 作用 - 判断当前元素值是否小于min属性值 * 用法 - 配合min属性 * 注意 - 并不能与max属性值进行比较 stepMismatch * 作用 - 判断当前元素值是否与step设置相符 *用法 - 配合step使用 * 注意 - 并不能与min或max属性值进行比较 customError *用法 - 配合setCustomValidity()方法 *如果使用该方法,该状态返回true setCustomValidity()方法 * 作用 - 设置自定义的错误提示内容 * 问题 - 使用该方法设置错误信息 * 当输入正确时,调用该方法将信息设置为空("") * 不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false) <script> var user=document.getElementById('user'); user.onblur=function(){ if(user.value!=""&&user.value!=null){ user.setCustomValidity(""); }else if(user.validity.valueMissing){ user.setCustomValidity('不能为空') } } // user.onblur=function(){ // if(user.validity.valueMissing){ // console.log("用户名不能为空"); // } // }; var email=document.getElementById('email'); email.onblur=function(){ if(email.validity.typeMismatch){ console.log('邮箱格式有误'); } }; var pwd=document.getElementById('pwd'); pwd.onblur=function(){ if(pwd.validity.patternMismatch){ console.log('密码格式有误'); } }; var repwd=document.getElementById('repwd'); repwd.onblur=function(){ if(repwd.validity.tooLong){ console.log('密码过长'); } }; var age=document.getElementById('age'); age.onblur=function(){ if(age.validity.rangeUnderflow){ console.log('年龄过小'); } }; var score = document.getElementById("score"); score.onblur = function(){ if(score.validity.valid){ console.log("成绩输入正确."); }else if(score.validity.stepMismatch){ console.log("成绩输入不符."); } } </script>

表单的新属性

datalist 建立输入框与datalist关联，再输入框里添加list=“datalistID”,这样以后不仅可以输入，还可以选择列表，<datalist id= datalistID><option>选项一</option></datalist>keygen 传递加密，不常用output显示输出信息 不常用

音频和视频

controls 音频播放器的控制面板， autoplay 自动播放 loop 循环 width 宽度 height 高度

audio: 音频 ： <audio srt="root" controls autoplay></audio>video：视频： poster : 当视频还没有完全下载，或者用户还没有点击播放前的默认显示的封面。默认显示当前视频的第一帧 preload : 预加载 auto 默认值，不加载 none 不加载 metadata 只加载视频的基本信息(不含视频) source 在video里使用,因为不同的浏览器支持的视频格式不一样，所以可以准备多个格式的视频，让浏览器自动选择<source src='root' type='video/flv'>

canvas(画布)

再HTML中定义<canvas>再JavaScript中获取画布元素创建画布对象.getContext("2d"||"3d");使用相对应的API，常用的有： fillRect(x,y,width,height) - 绘制实心矩形 strokeRect(x,y,width,height) - 绘制空心矩形 fillText(text,x,y) - 绘制实心文字 strokeText(text,x,y) - 绘制空心文字 drawImage(img,x,y) - 按照图片原大小加载 clearRect(x,y,width,height) - 清除指定区域的矩形 fillStyle - 设置填充颜色 strokeStyle - 设置描边颜色 globalAlpha - 设置透明度(0-1) createLinearGradient(x1,y1,x2,y2)：颜色线型渐变 createRadialGradient(x1,y1,r1,x2,y2,r2)：颜色扇形(射线)渐变 createPattern(img,type) - 平铺图片 clip() - 切割(按照创建路径使用)

svg(矢量图)

svg的特点： 绘制的图形可以被搜索引擎抓取 在放大的时候不会失真， 它支持事件绑定， 不依赖分辨率 支持大型渲染区域的程序(百度地图)

<svg> <rect x="" y="" width="" height="" /> // * 矩形元素 <circle cx="" cy="" r="" /> // * 圆形元素 <ellipse cx="" cy="" rx="" ry=""> // * 椭圆元素 <line x1="" y1="" x2="" y2="" /> / * 直线元素 <polyline points=""> // * 折线元素 <polygon points="" /> // * 多边形元素 //定义渐变效果 <defs> <linearGradient x1="%" y1="%" x2="%" y2="%"> // 线性渐变 <stop offset="%" stop-color="color" /> </linearGradient> //扇形渐变 <radialGradient id="myrgrd" fx="50%" fy="50%" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="red" stop-opacity="1"/> <stop offset="20%" stop-color="green" stop-opacity="1"/> <stop offset="100%" stop-color="blue" stop-opacity="1"/> </radialGradient> </defs> <defs> //滤镜 - 高斯模糊 //需要使用<filter>包裹起来 <feGaussianBlur> - 高斯模糊 <filter id="gsmh"> // 固定写法 in="SourceGraphic" stdDeviation - 定义模糊程度 <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter> </defs> </svg>

TWO.js库 - - - 支持SVG Canvas WebGL

* 如何使用two.js * 在HTML页面中引入two.js文件 * 在HTML页面中定义容器(<div>) * 在javascript代码中 * 获取HTML页面中的容器 * 创建Two对象,将该对象添加到容器中 new Two(params).appendTo(Element); * 使用two.js提供的API方法进行绘制 * 利用two.js提供的方法,设置图形 * 利用update()方法进行绘制 * 创建Two对象 * 构造器 - new Two(params) * params参数 - 设置当前对象的信息 * type - 设置当前使用的格式(Two.Types.svg) * svg - 默认值 * canvas * webgl * width和height - 设置宽度和高度 * fullscreen - 设置是否全屏 * Boolean值,true表示全屏 * 图形方法 * makeLine() - 绘制线条 * makeRectangle() - 绘制矩形 * makeCircle() - 绘制圆形 * makeEllipse() - 绘制椭圆 * 动画方法 * update() - 更新动画 * play() - 添加动画(循环) * pause() - 删除动画 * 设置绘制图形的样式 * 调用Two对象的绘制方法绘制图形时,返回该图形对象 * 通过该图形对象,设置相关属性值 * 分组操作 * Two.Group * 动画效果 * bind(event,callback)方法 - 事件绑定 * event - 绑定事件名称 * update - 对应update()方法的作用 * 所有的DOM事件都可以绑定 * callback - 事件处理函数

自定义属性

data-name

规范

以data-开头data-后面必须至少有一个字符，多个单词用 - 连接

建议

名称中应该使用小写，不要包含任何的大写字符名称中不要有任何的特殊符号

获取自定义属性值，将data- 后面的单词使用camel命名法连接，必须使用camel方法取值，否者有可能无法取到值

<p data-hello-name="word"></p> var p=$("p"); //取值 p.dataset["helloName"] //==word

网络监听接口

网络状态改变时间(了解)

1.ononline 网络连接成功触发事件 2.onoffline 网络断开时触发事件

window.addEventListener("ononline",function(){}) window.addEventListener("onoffline",function(){})

全屏API实现 元素全屏效果(使用)

主要方法和属性： 注意 不同浏览器需要添加不同的前缀 chrome: webkit firefox: moz ie: ms opera: o

requestFullScreen()：开启全屏显示 $("btn").onclick=function(){ div.webkitRequestFullScreen();} cancelFullScreen(): 退出全屏显示:也加前缀，在不同的浏览器下，退出全屏只能使用docunment来实现 $("btn").onclick=function(){ div.webkitCanceltFullScreen();} fullScreenElement: 是否是全屏状态，也只能是使用document来进行判断 **注意：**只有兼容火狐时才需要写成Full ScreenElement $("btn").onclick=function(){ div.webkitFullscreenElement();}

文件读取接口 实现文件读取预览效果(使用)

FileReader: 读取文件内容 - .readAsText():读取文本文件(可以使用txt打开的文件)，返回文本字符串，默认编码是UTF-8 - .readAsBinaryString():读取任意类型的文件，二进制字符串，这个方法通常不是用来读取文件.展示个用户看，而是存储文件。例如读取文件的内容，获取二进制数据，传递给后台，后台接受数据之后，再将数据存储 - .readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL, dataURL是一种将文件嵌入到文档的方案

拖拽接口 实现常见拖拽效果(使用)

为了使元素可拖动，需要把 draggable 属性设置为 true ： 拖拽元素事件： (常用)       (on)dragstart(开始拖拽是触发该事件)          (on)drag - 当鼠标拖放过程中,类似于mousemove事件,该事件在拖拽的过程中会一直触发          dragend- 当鼠标结束拖放时被触发 目标元素事件：          dragenter - 当鼠标拖放进入到目标元素内被触发 (常用)       dragover - 当鼠标到达目前元素被触发 - 进行拖放需要阻止事件的默认行为，要为该事件添加event.preventDefault(); (常用)       drop - 当鼠标松开时被触发          dragleave - 当鼠标拖放离开目标元素被触发

dataTransfer对象，使用event调 - 类似于window系统的剪切板的功能 作用 - 可以将源元素的信息(数据),存储在这里，将存储在该对象的源元素信息,提供给目标元素 该对象的方法：         - setData() - 设置(源元素的)数据，一般在源元素的事件里使用         -getData() - 获取设置的数据，一般在目标元素的事件中使用         -clearData() - 清除(设置的)数据,防止内存浪费         -setDragImage()方法 - 修改拖放过程中,鼠标跟随的图片效果(实际操作中,该方法几乎不用)

地理定位接口 获取用户位置信息(使用)

使用百度地图的接口，需要联网才能实现

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script> //密钥需要区百度地图里申请

在HTML中定义一个显示地图的容器<div> 创建一个Map对象

<script> var map=new BMap.Map("容器的ID")； map.centerAndZoom(point); //初始化地址 </script>

百度地图的组件：    map.centerAndZoom() - 初始化地图    map.addControl() - 添加控件    mao.addOverlay() - 添加标注(标记) Control 控件类     ScaleControl - 比例尺控件，在地图上显示一个比例尺     NavigationContro; - 缩放控件，在地图上显示一个放大缩小移动的按钮

//添加缩放比例尺控件 - 默认在左下角，设置参数控制其所在位置 BMAP_ANCHOR_+... var scale=new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}); //将控件添加至地图中 map.addControl(scale); //创建一个平移缩放控件 - 该控件默认位置在右上角，可设置位置，与比例尺设置位置方法相同 var nav=new BMap.NavigationControl(); map.addControl(nav);

Overlay 遮盖物类     Marker - 在地图上显示一个标注

//Overlay类 - 地图的遮盖物 //Marker - 表示地图上一个图像标注 // 构造器 - Marker(point) // point - 标注的坐标值 //Map对象添加遮盖物 var marker=new BMap.Marker(Point); map.addOverlay(marker);

太多了，感兴趣的话可以去http://lbsyun.baidu.com/jsdemo.htm#a1_2查看

Web存储接口 实现数据的读写(使用)

HTML5存储系统 * localStorage(本地存储) - 替代Cookie * sessionStorage(会话|临时存储) - 替代Session(类似于内存) 它们都有以下方法：

setItem(key,value)方法 - 设置或新增数据getItem(key) - 获取数据key(index) - 根据索引值获取key值removeItem(key) - 删除数据clear() - 将数据清空length - 获取数据的个数

应用缓存接口(了解)

首先必须<html lang=“en” manifest=“app.appcache”>添加manifest属性，app.appcache外部文件，在这个外部文件中写你需要缓存的文件配置 在app.appcache文件中的格式

CACHE MANIFEST # 使用#来注释，注意： 在这个文件中第一行必须是 CACHE MANIFEST #需要缓存的文件，就写在这下面 CACHE: /theme.css /logo.gif /main.js * # * 表示所有文件 #下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的： NETWORK: login.php * #下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 two.css 替代 three.css 目录中的所有文件，中间使用空格隔开 FALLBACK: three.css two.css