2022年HTML知识点总结.docx

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

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

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

3、llStyle=#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;fillStyle方法将其染成红色, fillRect方法规定了外形、位置

4、和尺寸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=#FF0000;cxt.beginPath;cxt.arc70,18,15,0,Math.PI*2,true; cx

5、t.closePath;cxt.fill;下面是他的定义以及参数描述：定义和用法arc语法arcx, y, radius, startAngle, endAngle, counterclockwise方法使用一个中心点和半径,为一个画布的当前子路径添加一条弧；参数参数描述x, y描述弧的圆形的圆心的坐标；radius描述弧的圆形的半径；startAngle, endAngle个角度用弧度来衡量；沿着时针方向而增加；X沿着圆指定弧的开头点和终止点的一个角度；这轴正半轴的三点钟方向的角度为0 ,角度沿着逆counterclockwise（ FALSE）遍历；描述这个方法的头 5弧沿着圆周的逆时针方

6、向（ TRUE）仍是顺时针方向个参数指定了圆周的一个起始点和终止点；调用这个方法会在当前点和当前子路径的起始点之间添加一条直线；接下来, 它沿着圆周, 在子路径的起始点和终止点之间添加弧；最终一个 counterclockwise参数指定了圆应当沿着哪个方向遍历来连接起始点和终止点；这个方法将当前位置设置为弧的终点除此之外,在 canvas 上仍可以作颜色的渐变,做出来特别好看,老师在上课时也给我们演示过,仍有就是在 canvas 上放图像：代码跟上面差不多：JavaScript使用 id来查找 canvas元素：var c=document.getElementByIdmyCanvas;然后

7、,创建 context对象： var cxt=c.getContext2d; 然后增加图像：var img=new Image img.src=flower.png cxt.drawImageimg,0,0;HTML5供应了两种在客户端储备数据的新方法：.localStorage -没有时间限制的数据储备.sessionStorage -针对一个 session的数据储备.localStorage.lastname=Smith;.document.writelocalStorage.lastname;.如何创建并拜访一个 sessionStorage：.实例.sessionStorage.la

8、stname=Smith;.document.writesessionStorage.lastname;.HTML5新的 Input类型Input 类型 emailE-mail: Input类型 - Date Pickers（数据检出器）HTML5拥有多个可供选取日期和时间的新输入类型：.date -选取日、月、年.month -选取月、年.week -选取周和年.time -选取时间（小时和分钟）.datetime -选取时间、日、月、年（ UTC 时间）.datetime-local -选取时间、日、月、年（本地时间） 如 date ：Date: 注：其它用法与 date 相像,在课堂上老

9、师演示过, 没有直接输代码, 而是在 Dreamweaver 自带的 HTML5 属性上直接插入,我感觉这样更便利一些；Input类型 - numbernumber 类型用于应当包含数值的输入域；您仍能够设定对所接受的数字的限定：实例Points: 属性值描述MaxNum答应的最大值MinNum答应的最小值StepNum合法的数据间隔ValueNum默认值Input类型 - searchsearch类型用于搜寻域,比如站点搜寻或Google搜寻；search域显示为常规的文本域；HTML5的新的表单元素：HTML5拥有如干涉及表单的元素和属性；以下新的表单元素：datalist元素datali

10、st元素规定输入域的选项列表；列表是通过 datalist内的 option元素创建的；（ option元素永久都要设置value属性）如需把 datalist绑定到输入域,请用输入域的 list属性引用 datalist的id ：keygen 元素keygen 元素的作用是供应一种验证用户的牢靠方法；keygen 元素是密钥对生成器（ key-pair generator）；当提交表单时,会生成两个键,一个是私钥,一个公钥；Encryption: Username：encryption：output元素output元素用于不同类型的输出,比如运算或脚本输出：如简易运算器的部分代码：funct

11、ion resCalcnumA=document.getElementByIdnum_a.value;numB=document.getElementByIdnum_b.value;document.getElementByIdresult.value=NumbernumA+NumbernumB; + =HTML5的表单属性：autocomplete属性autocomplete属性规定 form或 input域应当拥有自动完胜利能； 当用户在自动完成域中开头输入时,浏览器应当在该域中显示填写的选项：其只需在代码开头和终止时加上autocomplete= ”on” autocomplete= ”

12、off ”实例：First name: Last name: E-mail: autofocus属性autofocus属性规定在页面加载时,域自动地获得焦点；注释： autofocus属性适用于全部 标签的类型；老师上课时在Dreamweaver仍演示过它的作用；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:如不输入,系统提示操作错误.