html5学习笔记_html中clockwise-优快云博客

本文介绍了HTML5的一些核心特性，包括简化后的文档类型声明，新增的结构元素如<section>、<article>，以及语义元素如<figure>、<figcaption>。此外，重点讲述了HTML5的表单控制，如email和number输入类型，以及自动完成和验证功能。还提到了媒体元素<audio>和<video>的使用，以及<canvas>绘图API的基本操作，如绘制路径、矩形和圆形。

一、html5页面结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">改为<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />改为<meta charset="gb2312" />
<section>类似<div>,主要用于把文档分成不同的逻辑区域。<div>更适合格式化文档。
<article>，如果希望内容相对独立于其他内容，并可以对外部分发，可用此标签。
<aside>，旁注。一般用于文档内。
<header>，文头。不可以在<header>元素内使用<header>元素，否则会无法正确显示文档。
<hgroup>,组合<h1>到<h6>元素。
<footer>,文脚。该元素不能放在<header>和<footer>元素内,否则无法正确显示文档。
<nav>,导航。
<figure>插入图表。<figcaption>如果在图片上面，内容就显示在图片上面。

二、html5标记

1.<hr>,可用于分隔区域中的不同话题。

2.<iframe>，较以前版本的html更加重要。

3.<embed>，嵌入媒体文件。

4.<area>，可以把图像按区域进行超链接。

</map>

三、html5结构化语义元素

1.itemscope，布尔型的属性，用于创建一个条目。

2.itemprop，用于给条目或子条目增加一个属性。

3.itemtype，用于定义自定义词汇表。

四、表单

1.页面的任何地方都可以声明表单控件，然后通过元素的form属性就可以把元素和表单关联起来。<form id="testForm" />

2.使用email类型的输入，<input type="email" />

Email输入类型的有效属性：

name：包含于此元素关联的名值对的名称，用于提交表单；
disabled：设置禁用此插件；
type：表明该<input>元素是用于编辑给定的电子邮件地址或电子邮件地址列表的控件；
form：全部表单元素的容器；
autocomplete：存储用户输入的值；
autofocus：加载的时候，将焦点放到该元素上；
maxlength：元素中可输入的最大长度；
list：列出当前元素要建议给用户的预定义选项；
pattern：验证值的正则表达式；
readonly：表明控件的值不可编辑；

11 required：指明元素是否为必填；

12 size：该元素代表的控件中显示出来的字符数；

13 placeholder：<input>元素中显示的文字（一般用作提示信息）；

14 multiple：对于一个<input>元素，是否可以指定多个电子邮件地址或文件值；

15 value：包含一个电子邮件地址或者地址列表。

3.使用url输入类型，<input type=”url” />。(一般浏览器还都不支持)

4.数字微调控件，<input type=”number” />

Number输入类型的有效属性：

max：浮点值，使用并显示的最大数值；
min：浮点值，使用并显示的最小数值；
step：元素增减的单位；
value:代表数字的字符串。

5.滑动框控件，<input type=”range” />

有效属性同上。

6.发送多个文件<input type=”file” multiple />

7.输入的自动完成<input list=”movies”>

</datalist>

8.利用正则表达式自定义输入类型,<input pattern=”正则表达式” />。（不是所有浏览器都支持）

9.设置输入框的占位符文本，<input type=”text” placeholder=”占位符内容”>。（当输入域里面填写了内容时，该文本消失，没有时自动显示出来）

10.日期和时间控件<input type=”date” /> <input type=”time” />

五、html5媒体元素：audio和video

1.页面嵌入视频<video width=”640” height=”360” src=”视频路径” />。(由于现在每个浏览器支持的视频格式都不一样，有时会因为视频格式的原因显示不出来)

2.为视频提供交互，<video controls/>

3.预加载视频<video preload=”值” />

值为：①auto，页面加载后立即开始下载视频文件；

②none，不下载视频文件；

③metadata，获取资源的元数据。

4.音频，<audio>元素 <audio controls autoplay src=”音频路径”/>

属性：

src，一个包含源文件的本地或远程的url；
autoplay，加载时是否自动播放；
loop，是否循环播放；
controls，是否显示默认媒体控件；
preload，是否预加载；
play（），播放音频；
pause（），暂停音频；
canPlayType(),给定的MIME类型是否可以播放；
buffered(),指定音频缓冲的开始时间和结束时间。

六、html5绘图API

1.如何使用<canvas>元素的绘图API。（注：每个<canvas>只能有一个上下文）

①<canvas id="myCanvas" width="300" height="200" style="border:solid 1px #ccc">

</canvas>

②javascript代码：

//访问<canvas>

var canvas=document.getElementById("myCanvas");

//获得<canvas>的上下文对象

var context = canvas.getContext("2d");

2.使用路径和坐标

（1）<canvas>坐标系统，x向右为正值，y向下为正值。

（2）绘制过程：

①调用beginPath()方法开始路径；

②用moveTo(x,y)方法定义路径起点；

③用API方法绘制图形；

④调用closePath()方法关闭路径；

调用stroke()或者fill()方法来为图形添加描边或者填充。

（3）图形对应的API

①直线：lineTo(x,y);

②贝赛尔曲线：bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y,endPointX, endPointY);

③二次方曲线：quadraticCurveTo(controlPointX, controlPointY, endPointX, endPointY);

④圆：arc(centerX,centerY,radius,startAngle,endAngle,counter-clockwise);

centerX：圆心横坐标；

centerY：圆心纵坐标；

radius：半径；

start/end Angle：开始/结束圆的角度；

counter-clockwise：true时是逆时针，false是顺时针。

（4）设置形状样式

①线条链接样式：lineJoin，miter(尖角)、round（圆角）、bevel(斜角)。

②线条宽度样式：lineWidth，默认值是1。

③线条结束样式：lineCap，butt(对接)、round（圆）、square（方）。

3.绘制矩形和圆形的方法

(1)绘制矩形的方法：

①rect(x,y,width,height)：添加一个普通矩形

②fillRect(x,y,width,height)：绘制一个填充的矩形

③strokeRect(x,y,width,height)：绘制一个有线条的矩形

④clearRect(x,y,width,height)：删除一个矩形。

(2)画圆的方法：

arc(centerX,centerY,radius,startAngle,endAngle,counter-clockwise),此方法后还需要调用stroke()或者fill()方法才能显示。

七、html5 Canvas

1.<canvas>变换

①缩小/放大，scale(scaleX,scaleY);基数为1；

②移动<canvas>对象，translate(x,y), (x,y)将作为新的原点。

③旋转<canvas>对象，rotate(angle)，angle角度，以弧度为单位。

④变换矩阵，transform(a,b,c,d,e,f);

2.应用阴影和模糊

①shadowColor：阴影颜色；

②shadowOffsetX：设置或者返回水平阴影偏移量；

③shadowOffsetY：设置或者返回垂直阴影偏移量；

④shadowBlur：设置或者返回模糊级别，值必须大于1；