HTML5笔记

HTML5笔记

表单

form 属性

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on | off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded | multipart/form-data | text/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况） application/x-www-form-urlencoded : 默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）。 multipart/form-data : 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。 text/plain : 将空格转换为 “+” 符号，但不编码特殊字符。
method	get | post	规定用于发送表单数据的 HTTP 方法。
name	text	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank | _self | _parent | _top	规定在何处打开 action URL。

input 属性

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
autocomplete	on | off	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocus	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
form	form_id	form 属性规定 <input> 元素所属的一个或多个表单。
list	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
max	number | date	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
min	number | date	属性规定 <input>元素的最小值。
multiple	multiple	属性规定允许用户输入到 <input> 元素的多个值。
name	text	name 属性规定 <input> 元素的名称。
pattern	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholder	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
readonly	readonly	readonly 属性规定输入字段是只读的。
required	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
step	number	step 属性规定 <input> 元素的合法数字间隔。
type	button checkbox color date datetime datetimelocal email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 <input> 元素的类型。
value	text	指定 <input> 元素 value 的值。

表单元素 <datalist>

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的list列表属性与 <datalist> 元素绑定.

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

多媒体

音频

<audio controls height="100" width="100">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  <embed height="50" width="100" src="horse.mp3">
  您的浏览器不支持 audio 元素。
</audio>

在 <audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

如果播放音频失败，代码将回退尝试 <embed> 元素。<embed> 元素无法回退来显示错误消息。

音频格式的MIME类型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

<audio> 属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto | metadata | none	规定当网页加载时，音频是否默认被加载以及如何被加载。如果使用 “autoplay”，则忽略该属性。
src	URL	规定音频文件的 URL。

视频

以下实例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object>
</video>

<video> 元素提供了 width 和 height 属性控制视频的尺寸.如果设置了高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。

视频格式的MIME类型

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

<video> 属性（同<audio>）

属性	值	描述
height	pixels	设置视频播放器的高度。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
width	pixels	设置视频播放器的宽度。

画布

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

默认情况下 <canvas> 元素没有边框和内容。 <canvas> 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

颜色、样式和阴影

属性	值	描述
fillStyle	color gradient pattern	设置或返回用于填充绘画的颜色、渐变或模式。 color：指示绘图填充色的 CSS 颜色值。默认值是 #000000。 gradient：用于填充绘图的渐变对象（线性 或 放射性） pattern：用于填充绘图的 pattern 对象。
strokeStyle	color gradient pattern	设置或返回用于笔触的颜色、渐变或模式。

属性	值	描述
shadowColor	color	设置或返回用于阴影的颜色。
shadowBlur	number	设置或返回用于阴影的模糊级别。
shadowOffsetX	number	设置或返回阴影与形状的水平距离。
shadowOffsetY	number	设置或返回阴影与形状的垂直距离。

属性	参数	描述
createLinearGradient()	x0,y0,x1,y1	创建线性渐变（用在画布内容上）。 x0 : 渐变开始点的 x 坐标 y0 : 渐变开始点的 y 坐标 x1 : 渐变结束点的 x 坐标 y1 : 渐变结束点的 y 坐标
createPattern()	context.createPattern(image, “repeat|repeat-x|repeat-y|no-repeat”);	在指定的方向上重复指定的元素。 image ： 规定要使用的模式的图片、画布或视频元素。 repeat ： 默认。该模式在水平和垂直方向重复。 repeat-x ： 该模式只在水平方向重复。 repeat-y ： 该模式只在垂直方向重复。 no-repeat ： 该模式只显示一次（不重复）。
createRadialGradient()	x0,y0,r0,x1,y1,r1	创建放射状/环形的渐变（用在画布内容上）。 x0 : 渐变的开始圆的 x 坐标 y0 : 渐变的开始圆的 y 坐标 r0 : 开始圆的半径 x1 : 渐变的结束圆的 x 坐标 y1 : 渐变的结束圆的 y 坐标 r1 : 结束圆的半径
addColorStop()	stop,color	规定渐变对象中的颜色和停止位置。 stop ： 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 color ： 在 stop 位置显示的 CSS 颜色值。

线条样式

属性	值	描述
lineCap	butt|round|square	设置或返回线条的结束端点样式。 butt ： 默认。向线条的每个末端添加平直的边缘。 round ： 向线条的每个末端添加圆形线帽。 square ： 向线条的每个末端添加正方形线帽。 注意：“round” 和 “square” 值会使线条略微变长。
lineJoin	bevel|round|miter	设置或返回两条线相交时，所创建的拐角类型。 bevel : 创建斜角。 round : 创建圆角。 miter : 默认。创建尖角。 注意：“miter” 值受 miterLimit 属性的影响。
lineWidth	number	设置或返回当前的线条宽度。
miterLimit	number(正数)	设置或返回最大斜接长度。 斜接长度指的是在两条线交汇处内角和外角之间的距离。边角的角度越小，斜接长度就会越大。 **提示：**只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 “bevel” 类型来显示。

矩形

属性	参数	描述
rect()	x,y,width,height	创建矩形。 x : 矩形左上角的 x 坐标。 y : 矩形左上角的 y 坐标。 width : 矩形的宽度，以像素计。 height : 矩形的高度，以像素计。 **提示：**请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
fillRect()	x,y,width,height	绘制"被填充"的矩形。 **提示：**请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式.默认的填充颜色是黑色。
strokeRect()	x,y,width,height	绘制矩形（无填充）。笔触的默认颜色是黑色。
clearRect()	x,y,width,height	在给定的矩形内清除指定的像素。

路径

方法	描述
fill()	填充当前绘图（路径）。
stroke()	绘制已定义的路径。
beginPath()	起始一条路径，或重置当前路径。
moveTo()	把路径移动到画布中的指定点，不创建线条。
closePath()	创建从当前点回到起始点的路径。
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()	从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()	创建二次贝塞尔曲线。
bezierCurveTo()	创建三次贝塞尔曲线。
arc()	创建弧/曲线（用于创建圆形或部分圆）。
arcTo()	创建两切线之间的弧/曲线。
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。

arc()方法介绍

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数说明：

• x: 圆的中心的 x 坐标
• y: 圆的中心的 y 坐标
• r: 圆的半径
• sAngle: 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
• eAngle: 结束角，以弧度计
• counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。默认false

arc()基于的坐标系如下图：

转换

方法	描述
scale()	缩放当前绘图至更大或更小。
rotate()	旋转当前绘图。
translate()	重新映射画布上的 (0,0) 位置。
transform()	替换绘图的当前转换矩阵。
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()。

文本

属性	描述
font	设置或返回文本内容的当前字体属性。
textAlign	设置或返回文本内容的当前对齐方式。
textBaseline	设置或返回在绘制文本时使用的当前文本基线。

方法	描述
fillText()	在画布上绘制"被填充的"文本。
strokeText()	在画布上绘制文本（无填充）。
measureText()	返回包含指定文本宽度的对象。

图像绘制

方法	描述
drawImage()	向画布上绘制图像、画布或视频。

像素操作

属性	描述
width	返回 ImageData 对象的宽度。
height	返回 ImageData 对象的高度。
data	返回一个对象，其包含指定的 ImageData 对象的图像数据。

方法	描述
createImageData()	创建新的、空白的 ImageData 对象。
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上。

合成

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值(0.0~1.0)。
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。

其他

方法	描述
save()	保存当前环境的状态。
restore()	返回之前保存过的路径状态和属性。
createEvent()
getContext()
toDataURL()

当对画布有转换操作之前可以先使用context.save();保存画布当前状态,方便下面的图画好后需要恢复画布原来的状态时调用context.restore();

拖放

来回拖放图片：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true">

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 **event.preventDefault() **方法。

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

代码解释：

• 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
• 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
• 被拖数据是被拖元素的 id (“drag1”)
• 把被拖元素追加到放置元素（目标元素）中