HTML知识点总结_2

HTML5HTML5新特性•HTML5中的一些有趣的新特性•用于绘画的canvas元素•用于媒介回放的video和audio元素•对本地离线存慢的更好的支持•新的特殊内容元素，比如article、footer header、nav section新的表单控件，比如calendar datetime、email urlsearch中的一些新特性嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档HTML5其他特性包括新的页面元素，比如〈〉,〈〉,〈〉，以及〈〉header sectionfooter figureArticle定义articleCanvas定义图形Command定义命令按钮datalist定义下拉列表Footer定义section或page的页脚Header定义section或page的页眉Commend定义命令按钮Web上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准今天，大多数视频是通过插件（比如Flash）来显示的然而，并非所有浏览器都拥有同样的插件HTML5规定了一种通过video元素来包含视频的标准方法画布canvas元素本身是没有绘图能力的所有的绘制工作必须在JavaScript内部完成〈script type=〃text/javascript”var—document.getElementByld/zmyCanvas/z;var cxt=c.getContext〃2d〃;ext.fillStyle=z/#FF0000，z;ext.fillRect0,0,150,75;/scriptJavaScript使用id来寻找canvas元素var c=document.getElementByld〃myCanvas〃;然后，创建context对象var cxt=c.getContext〃2d〃;getContext〃2d〃对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法下面的两行代码绘制一个红色的矩形ext.fillStyle=，z#FF0000z，;ext.fillRect0,0,150,75;fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸script type=〃text/javascript”〉var c=document.getElementByld〃myCanvas〃;var cxt=c.getContext〃2d〃;ext.fillStyle=，z#FF0000z/;ext.beginPath;ext.arc70,18,15,0,Math.PI*2,true;ext.closePath;ext.fill;/script制作一个圆script type=〃text/javascript”var rdocument.getElementByld/zmyCanvas/z;var cxt=c.getContext〃2d〃;ext.fillStyle=z/#FF0000z/;ext.beginPath;ext.arc70,18,15,0,Math.PI*2,true;ext.closePath;ext.fill;下面是他的定义以及参数描述定义和用法方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧arc语法arcx y,radius,startAngle endAngle^counterclockwiseJ参数参数描述描述弧的圆形的圆心的坐标x,y描述弧的圆形的半径radius沿着圆指定弧的开始点和结束点的一个角度这个角度用弧startAngle-,endAngle度来衡量沿着轴正半轴的三点钟方向的角度为角度沿着逆时针方向而增加X0,弧沿着圆周的逆时针方向还是顺时针方向counterclockwise TRUE遍历FALSE描述这个方法的头个参数指定了圆周的一个起始点和结束点调用这个方法会在当前5点和当前子路径的起始点之间添加一条直线接下来，它沿着圆周，在子路径的起始点和结束点之间添加弧最后一个参数指定了圆应该沿着哪个方向遍历来连接起始点和结counterclockwise束点这个方法将当前位置设置为弧的终点除此之外，在上还可以作颜色的渐变，做出来非常好看，老师在上课时也canvas给我们演示过，还有就是在上放图像canvas代码跟上面差不多JavaScript使用id来寻找canvas元素var c=document.getElementByld/zmyCanvas/z;然后，创建context对象var cxt=c.getContext〃2d〃;然后增加图像var img=new Imageimg.src=flower,pngext.drawlmage img,0,0;HTML5提供了两种在客户端存储数据的新方法localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储scripttype=text/javascript”〉localStorage.lastname=〃Smith”;document,writelocalStorage.lastname;/script•如何创建并访问一个sessionstorage:实例••script type二〃text/javascript”•sessionStorage.lastname=〃Smith”;•document,writesessionStorage.lastname;•/scriptHTML5新的Input类型Input类型-emailE-mail:input type=〃email〃name=,,user_emair,/Input类型-Date Pickers（数据检出器）•HTML5拥有多个可供选取日期和时间的新输入类型•date-选取日、月、年•month-选取月、年•week-选取周和年•time-选取时间（小时和分钟）•datetime-选取时间、日、月、年（UTC时间）•datetime-local-选取时间、日、月、年（本地时间）如date:Date:input type二〃date“name=,,user_dateM/注其它用法与相似，在课堂上老师演示过，没有直接输date代码，而是在自带的属性上直接插入，我Dreamweaver HTML5感觉这样更方便一些Input类型-numbernumber类型用于应该包含数值的输入域您还能够设定对所接受的数字的限定实例Points:〈input type二〃number“name=〃points min二〃1〃max=〃10〃/属性描述值Max Num允许的最大值Min Num允许的最小值Step Num合法的数据间隔Value Num默认值Input类型-searchsearch类型用于搜索域，比如站点搜索或Google搜索search域显示为常规的文本域HTML5的新的表单元素HTML5拥有若干涉及表单的元素和属性以下新的表单元素datalist元素datalist元素规定输入域的选项列表列表是通过datalist内的option元素创建的（option元素永远都要设置value属性）如需把datalist绑定到输入域,请用输入域的list属性引用datalist的id:keygen元素keygen元素的作用是提供一种验证用户的可靠方法keygen元素是密钥对生成器key-pair generator当提交表单时，会生成两个键，o一个是私钥，一个公钥Encryption:keygen name=〃security”/Username:encryption:output元素output元素用于不同类型的输出，比如计算或脚本输出如简易计算器的部分代码function resCalcnumA=document.getElementByld,,num_a,l.value;numB=document.getElementByld,,num_b,,.value;日document,get ementByld”result.value=NumbernumA+NumbernumB;input id=,,num_an/+input id=,lnum_b,1/=output id=,,resultn onforminput=,,resCalcHx/outputHTML5的表单属性autocomplete属性autocomplete属性规定form或input域应该拥有自动完成功能当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项其只需在代码开始和结束时加上autocomplete=v on”autocomplete二off”实例form action=/zdemo_form.asp〃method=〃get”autocomplete=z/on/zFirst name:input type=〃text“name=〃fname〃/Xbr/Last name:input type二〃text“name=〃lname〃/Xbr/E-mail:〈input type二〃email“name二〃email”autocomplete=//off/z/Xbr/input type=〃submit”//formautofocus属性autofocus属性规定在页面加载时，域自动地获得焦点注释autofocus属性适用于所有＜input＞标签的类型老师上课时在Dreamweaver还演示过它的作用。