HTML知识点总结.docxVIP

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/javascriptvar c=document.getElementById(myCanvas);varcxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);/scriptJavaScript 使用 id 来寻找 canvas 元素：var c=document.getElementById(myCanvas);然后，创建 context 对象：varcxt=c.getContext(2d); getContext(2d) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75); fillStyle 方法将其染成红色，fillRect方法规定了形状、位置和尺寸script type=text/javascriptvar c=document.getElementById(myCanvas);varcxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();/script制作一个圆script type=text/javascriptvar c=document.getElementById(myCanvas);varcxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();下面是他的定义以及参数描述：定义和用法arc()?方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。语法arc(x,?y,?radius,?startAngle,?endAngle,?counterclockwise)参数参数描述x,?y????描述弧的圆形的圆心的坐标。????radius????描述弧的圆形的半径。????startAngle,?endAngle????沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。沿着?X?轴正半轴的三点钟方向的角度为?0，角度沿着逆时针方向而增加。????counterclockwise????弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。????描述这个方法的头?5?个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来，它沿着圆周，在子路径的起始点和结束点之间添加弧。最后一个?counterclockwise?参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。这个方法将当前位置设置为弧的终点除此之外，在canvas上还可以作颜色的渐变，做出来非常好看，老师在上课时也给我们演示过，还有就是在canvas上放图像：代码跟上面差不多：J