HTML知识点总结 .docx

《HTML知识点总结 .docx》由会员分享，可在线阅读，更多相关《HTML知识点总结 .docx（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精品名师归纳总结HTML5HTML5新特性HTML5中的一些好玩的新特性：.用于绘画的 canvas元素.用于媒介回放的 video和 audio元素.对本的离线储备的更好的支持.新的特别内容元素,比如 article、footer 、header 、nav、section.新的表单控件,比如 calendar、date 、time 、email 、url 、search.HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据储备,以及交互式文档。其他特性包括新的页面元素,比如, , ,以及 。Article定义 article。Canvas定义图形Command定义命令按钮。d

2、atalist定义下拉列表。Footer定义 section或 page的页脚。Header定义 section或 page的页眉。Commend定义命令按钮。Web上的视频直到现在,仍旧不存在一项旨在网页上显示视频的标准。今日,大多数视频是通过插件（比如Flash ）来显示的。然而,并非全部浏览器都拥有同样的插件。HTML5规定了一种通过 video元素来包含视频的标准方法。画布可编辑资料 - - - 欢迎下载精品名师归纳总结canvas 元素本身是没有绘图才能的 。全部的绘制工作必需在 JavaScript内部完成：var c=document.getElementByIdmyCanvas

3、; var cxt=c.getContext2d; cxt.fillStyle=#FF0000;cxt.fillRect0,0,150,75;JavaScript使用 id来查找 canvas元素：var c=document.getElementByIdmyCanvas;然后,创建 context对象：var cxt=c.getContext2d;getContext2d对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像 的方法。下面的两行代码绘制一个红色的矩形：cxt.fillStyle=#FF0000; cxt.fillRect0,0,150,75;fillS

4、tyle方法将其染成红色, fillRect方法规定了外形、位置和尺寸var c=document.getElementByIdmyCanvas;可编辑资料 - - - 欢迎下载精品名师归纳总结var cxt=c.getContext2d; cxt.fillStyle=#FF0000; cxt.beginPath; cxt.arc70,18,15,0,Math.PI*2,true; cxt.closePath;cxt.fill;制作一个圆var c=document.getElementByIdmyCanvas; var cxt=c.getContext2d; cxt.fillStyle=#F

5、F0000;cxt.beginPath;cxt.arc70,18,15,0,Math.PI*2,true; cxt.closePath;cxt.fill;下面是他的定义以及参数描述：定义和用法arc语法arcx, y, radius, startAngle, endAngle, counterclockwise方法使用一个中心点和半径,为一个画布的当前子路径添加一条弧。可编辑资料 - - - 欢迎下载精品名师归纳总结参数参数描述x, y描述弧的圆形的圆心的坐标。radius描述弧的圆形的半径。startAngle, endAngle个角度用弧度来衡量。沿着时针方向而增加。X沿着圆指定弧的开头点

6、和终止点的一个角度。这轴正半轴的三点钟方向的角度为0 ,角度沿着逆counterclockwise（ FALSE）遍历。描述这个方法的头 5弧沿着圆周的逆时针方向（ TRUE）仍是顺时针方向个参数指定了圆周的一个起始点和终止点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来, 它沿着圆周, 在子路径的起始点和终止点之间添加弧。最终一个 counterclockwise参数指定了圆应当沿着哪个方向遍历来连接起始点和终止点。这个方法将当前位置设置为弧的终点除此之外,在 canvas 上仍可以作颜色的渐变,做出来特别好看,老师在上课时也给我们演示过,仍有就是在 canvas 上放

7、图像：代码跟上面差不多：JavaScript使用 id来查找 canvas元素：var c=document.getElementByIdmyCanvas;然后,创建 context对象： var cxt=c.getContext2d; 然后增加图像：var img=new Image img.src=flower.png cxt.drawImageimg,0,0;HTML5供应了两种在客户端储备数据的新方法：可编辑资料 - - - 欢迎下载精品名师归纳总结.localStorage -没有时间限制的数据储备.sessionStorage -针对一个 session的数据储备.localSto

8、rage.lastname=Smith;.document.writelocalStorage.lastname;.如何创建并拜访一个 sessionStorage：.实例.sessionStorage.lastname=Smith;.document.writesessionStorage.lastname;.HTML5新的 Input类型Input 类型 emailE-mail: Input类型 - Date Pickers（数据检出器）HTML5拥有多个可供选取日期和时间的新输入类型：.date -选取日、月、年.month -选取月、年.week -选取周和年.time -选取时间（小

9、时和分钟）.datetime -选取时间、日、月、年（ UTC 时间）.datetime-local -选取时间、日、月、年（本的时间） 如 date ：Date: 注：其它用法与 date 相像,在课堂上老师演示过, 没有直接输代码, 而是在 Dreamweaver 自带的 HTML5 属性上直接插入,我感觉这样更可编辑资料 - - - 欢迎下载精品名师归纳总结便利一些。Input类型 - numbernumber 类型用于应当包含数值的输入域。您仍能够设定对所接受的数字的限定：实例Points: 属性值描述MaxNum答应的最大值MinNum答应的最小值StepNum合法的数据间隔Valu

10、eNum默认值Input类型 - searchsearch类型用于搜寻域,比如站点搜寻或Google搜寻。search域显示为常规的文本域。HTML5的新的表单元素：HTML5拥有如干涉及表单的元素和属性。以下新的表单元素：datalist元素可编辑资料 - - - 欢迎下载精品名师归纳总结datalist元素规定输入域的选项列表。列表是通过 datalist内的 option元素创建的。（ option元素永久都要设置value属性）如需把 datalist绑定到输入域,请用输入域的 list属性引用 datalist的id ：keygen 元素keygen 元素的作用是供应一种验证用户的牢

11、靠方法。keygen 元素是密钥对生成器（ key-pair generator）。当提交表单时,会生成两个键,一个是私钥,一个公钥。Encryption: Username：encryption：output元素output元素用于不同类型的输出,比如运算或脚本输出：如简易运算器的部分代码：function resCalcnumA=document.getElementByIdnum_a.value;numB=document.getElementByIdnum_b.value;document.getElementByIdresult.value=NumbernumA+NumbernumB

12、; +可编辑资料 - - - 欢迎下载精品名师归纳总结 =HTML5的表单属性：autocomplete属性autocomplete属性规定 form或 input域应当拥有自动完胜利能。 当用户在自动完成域中开头输入时,浏览器应当在该域中显示填写的选项：其只需在代码开头和终止时加上autocomplete= ”on” autocomplete= ”off ”实例：First name: Last name: E-mail: autofocus属性autofocus属性规定在页面加载时,域自动的获得焦点。注释： autofocus属性适用于全部 标签的类型。老师上课时在Dreamweaver仍

13、演示过它的作用。可编辑资料 - - - 欢迎下载精品名师归纳总结form属性form属性规定输入域所属的一个或多个表单。注释： form属性适用于全部 标签的类型。form属性必需引用所属表单的 id。意思是假如 id= ”user-form ”那么 form=“ user-form ” 实例：First name:Last name: height和 width属性height和 width属性规定用于 image类型的 input标签的图像高度和宽度。注释： height和 width属性只适用于 image类型的 标签。multiple属性multiple属性规定输入域中可挑选多个值。运行结果如下：可在浏览中挑选多个 :可编辑资料 - - - 欢迎下载精品名师归纳总结可编辑资料 - - - 欢迎下载精品名师归纳总结Select images：placeholder属性浏览提交可编辑资料 - - - 欢迎下载精品名师归纳总结placeholder属性供应一种提示（ hint ）,描述输入域所期望的值。required属性required属性规定必需在提交之前填写输入域（不能为空）。Name:如不输入,系统提示操作错误.可编辑资料 - - - 欢迎下载