2022年HTML知识点总结.docx
HTML5HTML5新特性HTML5中的一些好玩的新特性：.用于绘画的 canvas元素.用于媒介回放的 video和 audio元素.对本地离线储备的更好的支持.新的特别内容元素,比如 article、footer 、header 、nav、section.新的表单控件,比如 calendar、date 、time 、email 、url 、search.HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据储备,以及交互式文档；其他特性包括新的页面元素,比如<header>, <section>, <footer>,以及<figure> ；Article定义 article；Canvas定义图形Command定义命令按钮；datalist定义下拉列表；Footer定义 section或 page的页脚；Header定义 section或 page的页眉；Commend定义命令按钮；Web上的视频直到现在,仍旧不存在一项旨在网页上显示视频的标准；今日,大多数视频是通过插件（比如Flash ）来显示的；然而,并非全部浏览器都拥有同样的插件；HTML5规定了一种通过 video元素来包含视频的标准方法；画布canvas 元素本身是没有绘图才能的 ；全部的绘制工作必需在 JavaScript内部完成：<script type="text/javascript">var c=document.getElementById"myCanvas" var cxt=c.getContext"2d" cxt.fillStyle="#FF0000"cxt.fillRect0,0,150,75;</script>JavaScript使用 id来查找 canvas元素：var c=document.getElementById"myCanvas"然后,创建 context对象：var cxt=c.getContext"2d"getContext"2d"对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像 的方法；下面的两行代码绘制一个红色的矩形：cxt.fillStyle="#FF0000" cxt.fillRect0,0,150,75;fillStyle方法将其染成红色, fillRect方法规定了外形、位置和尺寸<script type="text/javascript">var c=document.getElementById"myCanvas"var cxt=c.getContext"2d" cxt.fillStyle="#FF0000" cxt.beginPath; cxt.arc70,18,15,0,Math.PI*2,true; cxt.closePath;cxt.fill;</script>制作一个圆<script type="text/javascript">var c=document.getElementById"myCanvas" var cxt=c.getContext"2d" cxt.fillStyle="#FF0000"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沿着圆指定弧的开头点和终止点的一个角度；这轴正半轴的三点钟方向的角度为0 ,角度沿着逆counterclockwise（ FALSE）遍历；描述这个方法的头 5弧沿着圆周的逆时针方向（ TRUE）仍是顺时针方向个参数指定了圆周的一个起始点和终止点；调用这个方法会在当前点和当前子路径的起始点之间添加一条直线；接下来, 它沿着圆周, 在子路径的起始点和终止点之间添加弧；最终一个 counterclockwise参数指定了圆应当沿着哪个方向遍历来连接起始点和终止点；这个方法将当前位置设置为弧的终点除此之外,在 canvas 上仍可以作颜色的渐变,做出来特别好看,老师在上课时也给我们演示过,仍有就是在 canvas 上放图像：代码跟上面差不多：JavaScript使用 id来查找 canvas元素：var c=document.getElementById"myCanvas"然后,创建 context对象： var cxt=c.getContext"2d" 然后增加图像：var img=new Image img.src="flower.png" cxt.drawImageimg,0,0;HTML5供应了两种在客户端储备数据的新方法：.localStorage -没有时间限制的数据储备.sessionStorage -针对一个 session的数据储备.<script type="text/javascript">.localStorage.lastname="Smith".document.writelocalStorage.lastname;.</script>.如何创建并拜访一个 sessionStorage：.实例.<script type="text/javascript">.sessionStorage.lastname="Smith".document.writesessionStorage.lastname;.</script>HTML5新的 Input类型Input 类型 emailE-mail: <input type="email"name="user_email" />Input类型 - Date Pickers（数据检出器）HTML5拥有多个可供选取日期和时间的新输入类型：.date -选取日、月、年.month -选取月、年.week -选取周和年.time -选取时间（小时和分钟）.datetime -选取时间、日、月、年（ UTC 时间）.datetime-local -选取时间、日、月、年（本地时间） 如 date ：Date: <input type="date"name="user_date" />注：其它用法与 date 相像,在课堂上老师演示过, 没有直接输代码, 而是在 Dreamweaver 自带的 HTML5 属性上直接插入,我感觉这样更便利一些；Input类型 - numbernumber 类型用于应当包含数值的输入域；您仍能够设定对所接受的数字的限定：实例Points: <input type="number" name="points" min="1"max="10" />属性值描述MaxNum答应的最大值MinNum答应的最小值StepNum合法的数据间隔ValueNum默认值Input类型 - searchsearch类型用于搜寻域,比如站点搜寻或Google搜寻；search域显示为常规的文本域；HTML5的新的表单元素：HTML5拥有如干涉及表单的元素和属性；以下新的表单元素：datalist元素datalist元素规定输入域的选项列表；列表是通过 datalist内的 option元素创建的；（ option元素永久都要设置value属性）如需把 datalist绑定到输入域,请用输入域的 list属性引用 datalist的id ：keygen 元素keygen 元素的作用是供应一种验证用户的牢靠方法；keygen 元素是密钥对生成器（ key-pair generator）；当提交表单时,会生成两个键,一个是私钥,一个公钥；Encryption: <keygen name="security" />Username：encryption：output元素output元素用于不同类型的输出,比如运算或脚本输出：如简易运算器的部分代码：function resCalcnumA=document.getElementById"num_a".value;numB=document.getElementById"num_b".value;document.getElementById"result".value=NumbernumA+NumbernumB;<inputid="num_a" /> +<inputid="num_b" /> =<output id="result" onforminput="resCalc"></output>HTML5的表单属性：autocomplete属性autocomplete属性规定 form或 input域应当拥有自动完胜利能； 当用户在自动完成域中开头输入时,浏览器应当在该域中显示填写的选项：其只需在代码开头和终止时加上autocomplete= ”on” autocomplete= ”off ”实例：<form action="demo_form.asp" method="get" autocomplete="on">First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /><input type="submit" /></form>autofocus属性autofocus属性规定在页面加载时,域自动地获得焦点；注释： autofocus属性适用于全部 <input>标签的类型；老师上课时在Dreamweaver仍演示过它的作用；form属性form属性规定输入域所属的一个或多个表单；注释： form属性适用于全部 <input>标签的类型；form属性必需引用所属表单的 id；意思是假如 id= ”user-form ”那么 form=“ user-form ” 实例：<form action="demo_form.asp" method="get" id="user_form">First name:<input type="text" name="fname" /><input type="submit" /></form>Last name: <input type="text" name="lname" form="user_form" />height和 width属性height和 width属性规定用于 image类型的 input标签的图像高度和宽度；注释： height和 width属性只适用于 image类型的 <input>标签；multiple属性multiple属性规定输入域中可挑选多个值；运行结果如下：可在浏览中挑选多个 :Select images：placeholder属性浏览提交placeholder属性供应一种提示（ hint ）,描述输入域所期望的值；<inputtype="search"name="user_search" placeholder="Search XXX"/>required属性required属性规定必需在提交之前填写输入域（不能为空）；Name:<inputtype="text"name="usr_name" required="required"/>如不输入,系统提示操作错误.
