HTML5学习笔记

attr&prop

（标签中）attribute:css
- html预约义属性html
- html自定义属性html5
（节点中）property：node
- js原生对象的直接属性
每个预约义的attribute都会有一个property与之对应web
- 布尔值属性：property是布尔值类型算法
- 非布尔值属性：property是非布尔值类型canvas
无论什么状况，property和attribute都会同步api
布尔值属性 property和attribute的同步问题数组
1. 改变property时，不会同步attribute浏览器
2. 在没有动过property时
  
  attribute会同步property
  
  一旦动过property
  
  attribute不会同步property
浏览器只认property，用户操做的也是property
在jQuery中的体现

attr()

prop()

总结

布尔值属性最好使用prop方法

非布尔值属性attr方法

html5中有关的属性

classlist：相对于class的property(className)

add

remove

toggle

dataset:自定义属性（限制 data-x-y）的property

h5中提供了操做class的方法
- classList.add(),增长class
- classList.remove()，删除class
- classList.toggle()，切换class
自定义属性data- 开头，dataset属性容许不管是在读取模式仍是写入模式下访问在HTML或DOM中的元素上设置的全部自定义数据属性（data-）集。在html中的命名若是有-，调用时要改为驼峰命名法
可编辑的属性contenteditable="true"

HTML5的定义及优点

HTML5是定义HTML标准的最新的标准，该术语表示两个不一样的概念；
- 它是一个新版本的HTML语言，具备新的元素，属性和行为。
- 它有更大的技术集，容许更多样化和强大的网站和应用程序。这个集合有时称为HTML5和朋友，一般缩写为HTML5
HTML5 约等于 HTML+css+js
HTML5的优点
- 跨平台：惟一一个通吃PC MAC iPhone ``Android等主流平台的跨平台语言
- 快速迭代
- 下降成本
- 导流入口多
- 分发效率高

H5与H4的区别

DOCTYPE和浏览器渲染模式

DOCTYPE，或者称为Document Type Declaration(文档类型声明，缩写DTD)

一般状况下，DOCTYPE位于一个HTML文档的最前面的位置，位于根元素HTML的起始标签以前。由于浏览器必须在解析HTML文档正文以前就肯定当前文档的类型，以决定其须要采用的渲染模式，不一样的渲染模式会影响到浏览器对于CSS代码甚至JavaScript 脚本的解析。

document.compatMode 属性是一个只读的属性，返回一个字符串，只可能存在两种返回值：
- BackCompat:标准兼容模式未开启（怪异模式）
- CSS1Compat：标准兼容模式已开启（标准模式）
在IE9往上的浏览器中，三种模式在渲染方面几乎没有区别，在IE7,8,9中，理论上存在怪异模式，实际上只有标准模式，在IE6中，标准模式和怪异模式渲染的区别最大，在IE6如下的浏览器中，只有怪异模式。
根元素
- H4中的根元素：
<html xmlns="http://www.w3.org/1999/xhtml">

xmlns是XHTML1.0的东西，意思是在这个页面上的元素都位于http://www.w3.org/1999/xhtml这个命名空间内，可是HTML5中的每一个元素都具备这个命名空间，不须要在页面上再显示指出
- H5中的根元素
<html></html>
head元素

MINE类型：每当浏览器请求一个页面时，web服务器会在发送实际页面内容以前，先发送一些头信息，浏览器须要这些信息来决定如何解析随后的页面内容，最重要的是Content-Type。
- H4中的head元素会有text/html
- H5不会有，由于放在了浏览器中的header中发送
语义化标签

经常使用的有
- header
- footer
- section
- nav
语义化的好处
- HTML可让不少更语义化结构化的代码标签代替大量的无心义的div标签
- 这种语义化的特性提高了网页的质量和意义
- 对搜索引擎更加的友好
- 他们这些标签功能就是代替<div>功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；
hgroup元素表明网页或section的标题，当元素有多个层级时，该元素能够将h1到h6元素放在其内，使用注意：
- 若是只须要一个h1-h6标签就不用hgroup
- 若是有连续多个h1-h6标签就用hgroup
若是有连续多个标题和其余文章数据，h1-h6标签就用hgroup包住，和其余文章元素一块儿放入到header标签

header元素表明网页或section的页眉

一般包含h1-h6元素或hgroup

使用注意：
- 能够是网页或任意section的头部部分
- 没有个数限制
- 若是hgroup或h1-h6本身就能工做的很好，就不要用header

nav元素表明页面的导航链接区域，用于定义页面的主要导航部分。

使用注意：用于整个页面主要导航部分上，不合适就不要用nav元素；

canvas基本用法

<canvas>是HTML5新增的元素，可用于经过使用JavaScript中的脚原本绘制图形，例如，它能够用于绘制图形，建立动画，<canvas>最先由Apple引入Webkit，咱们可使用<canvas>标签来定义一个canvas元素
使用<canvas>标签时，建议要成对出现，不要使用闭合的形式。
canvas元素默认具备高宽

width：300px

height：150px
替换内容

<canvas>很容易定义一些替代内容，因为某些老的浏览器（尤为IE9以前的IE）不支持HTML元素“canvas”，可是在这些浏览器上应该要给用户展现些替代内容，只须要在<canvas>标签中提供替换内容就能够。
- 支持<canvas>的浏览器将会忽略在容器中包含的内容，而且只是正常渲染canvas
- 不支持<cansvas>
canvas标签的两个属性
- <canvas>看起来和<img>元素很相像，惟一不一样的就是它并无src和alt属性，实际上，<canvas>标签只有两个属性- width和height，这些都是可选的。当没有设置宽度和高度的时候，canvas会初始化宽度为300px和高度为150px
画布的高宽

html属性设置width，height时只影响画布自己不影响画布内容。

css属性设置width，height时不但会影响画布自己的高宽，还会使画布中的内容等比例缩放（缩放参照与画布默认的尺寸）
渲染上下文
- <canvas>元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，咱们须要找到它的渲染上下文
- <canvas>元素有一个叫作getContext()的方法，这个方法是用来得到渲染上下文和它的绘画功能。
- getContext（）只有一个参数，上下文的格式
- 获取方式
  
  var canvas = document.getElementById('box');
  
  var ctx = canvas.getContext('2d');
- 检查支持性
  
  var canvas = document.getElementById('tutorial');
  
  if(canvas.getContext){ var ctx = canvas.getContext('2d');}
canvas绘制矩形
- HTML中的元素canvas只支持一种原生的图形绘制：矩形，全部其余的图形的绘制都至少须要生成一条路径。
1. 绘制矩形
  
  canvas提供了三种方法绘制矩形：
  - 绘制一个填充的矩形（填充色默认为黑色）
    
    注意不加单位
    
    fillRect（x，y,width,height）
  - 绘制一个矩形的边框（默认边距为：一像素实心黑色）
    
    边框会在偏移量向上取0.5px，向下取0.5px,可是css中不支持小数，会向上取整，因此会变成两像素的边框，
    
    100： 99.5 --- 100.5（99---101）
    
    100.5:100 --- 101
    
    strokeRect（x,y,width,height）
  - 清除指定矩形区域，让清除部分彻底透明
    
    clearRect（x,y,width,height）
    
    x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标
    
    width和height设置矩形的尺寸，（存在边框的话，边框会在width上占据一个边框的宽度，height同理）
2. 添加样式和颜色
  
  fillStyle：设置图形的填充颜色
  
  背景fillStyle的值能够是createPattern（image，repetition）返回的对象
  
  线性渐变：fillStyle的值能够是createLinearGradient（x1,y1,x2,y2）返回的对象
  
  addColorStop（position，color）
  
  径向渐变：fillStyle的值能够是createRadialGradient（x1,y1,r1,x2,y2,r2）返回的对象
  
  addColorStop（position，color）
  
  strokeStyle：设置图形轮廓的颜色
  
  默认状况下，线条和填充颜色都是黑色（css 颜色值#000000）
  
  lineWidth：这个属性设置当前绘线的粗细。属性值必须为正数。
  
  描述线段宽度的数字,0,负数，Infinity和NaN会被忽略
  
  默认值是1.0
3. 在写canvas时要有同步思想，有别于浏览器自己的渲染机制，因此会产生覆盖渲染问题
4. lineJoin
  
  设定线条与线条间接合处的样式（默认是miter）
  
  round：圆角
  
  bevel：斜角
  
  miter：直角
5. lineCap：线条两端的展示形式
高宽问题

绘制canvas画布时必定不要在css中设置高宽，这样画布内部会按比例缩放。
canvas绘制路径

图形的基本元素是路径，路径是经过不一样颜色和宽度的线段或曲线相连造成的不一样形状的点的集合。

步骤：
1. 首先，须要建立路径起始点
2. 而后使用画图命令去画出路径
3. 以后把路径关闭
4. 一旦路径生成，就能经过描边或填充路径区域来渲染图形。
绘制三角形

beginPath（）用于清空路径容器

新建一条路径，生成以后，图形绘制命令被指向到路径上准备生成路径。

生成路径的第一个步叫作beginPath（）。本质上，路径是由不少子路径构成，这些子路径都是在一个列表中，全部子路径（线，弧形，等等）构成图形。而每次这个方法调用以后，列表清空重置，而后就能够从新绘制新的图形。
moveTo(x,y)

将笔触移动到指定的坐标x以及y上

当canvas初始化或者beginPath（）调用后，一般会使用moveTo（）函数设置起点。
lineTo（x,y）

绘制一条从当前位置到指定x以及y位置的直线。
closePath（）

闭合路径以后图形绘制命令又从新指向到上下文中。

闭合路径closePath（），不是必需的，这个方法会经过绘制一条从当前点到开始点的直线来闭合图形。

若是图形是已经闭合了的，即当前点为开始点，该函数什么都不作。

当调用fill（）函数时，全部没有闭合的形状都会自动闭合，因此你不须要调用closePath（）函数，可是调用stroke（）时不会自动闭合。
stroke（）

经过线条来绘制图形轮廓

不会自动调用closePath（）
fill（）

经过填充路径的内容区域生成实心的图形。

自动调用closePath（）
canvas的样式写在beginPath的上面，路径写在beginPath下面
canvas中的颜色是一个栈结构（先进后出），save（）压栈 restore（）出栈
save（）是Canvas 2D API经过将当前状态放入栈中，保存canvas所有状态的方法。

保存到栈中的绘制状态有下面部分组成：
- 当前的变换矩阵
- 当前的剪切区域
- 当前的虚线列表
- 如下属性当前的值：strokeStyle，fillStyle，lineWidth，lineCap，lineJoin

restore（）是Canvas 2D API经过在绘图状态栈中弹出顶端的状态，将canvas恢复到最近的保存状态的方法。

若是没有保存状态，此方法不做任何改变。

语法模板：

save();

关于样式的设置

save restore成对出现

beginPath（）;

关于路径

restore（）;

路径容器

每次调用路径api时，都会往路径容器里作登记

调用beginPath时，清空整个路径容器
样式容器

每次调用样式api时，都会往样式容器里作登记

调用save时，将样式容器里的状态压入样式栈，

调用restore时，将样式栈的栈顶状态弹出到样式容器里，进行覆盖。

角度与弧度的js表达式：radians=(Math.PI/180)*degrees

canvas 绘制圆形

arc（x,y,radius,startAngle,endAngle,anticlockwise）

画一个以（x,y）为圆心的以radius为半径的圆弧，从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
- true：逆时针
- false：顺时针
- x,y为绘制圆弧所在圆上的圆心坐标
radius为半径

startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准，参数anticlockwise为一个布尔值。为true时是逆时针方向，不然顺时针方向。

arcTo须要三个控制点，有一个点是经过moveTo给出的

arcTo（x1,y1,x2,y2,radius）

根据给定的控制点和半径画一段圆弧

确定会从（x1，y1）但不必定通过（x2，y2）;(x2,y2)只是控制了一个方向。
二次贝塞尔

quadraticCurveTo(cp1x,cp1y,x,y)

绘制二次贝塞尔曲线，cp1x，cp1y为一个控制点，x，y为结束点

起始点为moveto时指定的点

三次贝塞尔

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

起始点为moveto时指定的点
canvas中的变换

translate（x,y）是用来移动canvas的原点到一个不一样的位置。

translate方法接受两个参数，x是左右偏移量，y是上下偏移量

在canvas中translate是累加的

rotate（angle）

这个方法只接受一个参数，旋转的角度，他是顺时针方向的，以弧度为单位的值，

旋转的中心点始终是canvas的原点，若是要改变它，咱们须要用到translate方法。

在canvas中rotate是累加的

scale（x,y）

scale方法接受两个参数，x,y分别是横轴和纵轴的缩放因子，它们都必须是正值。

值比1.0小表示缩小，比1.0大则表示放大，值为1.0时什么效果都没有

缩放通常咱们用它来增减图形在canvas中的像素数目，对形状，位图进行缩小或放大。

在canvas中scale是累加的。
css像素是一个抽象单位

放大：放大css像素的面积，区域内css像素的个数变少，使单个css像素所占的实际物理尺寸变大

缩小：缩小css像素的面积，区域内css像素的个数变多，使单个css像素所占的实际物理尺寸边小
canvas注意点
- canvas图像的渲染有别于html图像的渲染，canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题
- 写canvas代码必定要具备同步思想
- 在获取上下文，必定要先判断
在canvas中插入图片（须要image对象）
1. canvas操做图片时，必需要等图片加载完成才能操做
2. drawImage（image，x,y,width,height）
其中image是image或者canvas对象，x和y是其在目标canvas里的起始坐标。这个方法多了2个参数：width和height，这两个参数用来控制当canvas画入时应该缩放的大小。

在canvas中设置背景（须要image对象）
1. createPattern(image,repetition)
image:图像源

repetition:repeat,repeat-x,repeat-y,no-repeat

通常状况下，咱们都会将createPattern返回的对象做为fillstyle的值。
渐变

canvas渐变（线性渐变）

createLinearGradient（x1,y1,x2,y2）

表示渐变的起点（x1，y1）与终点（x2，y2）

gradient.addColorStop(position,color)

gradient:createLinearGradient的返回值
- addColorStop 方法接受2个参数
  - position参数必须是一个0.0-1.0之间的数值，表示渐变中颜色所在的相对位置。例如，0.5表示颜色会出如今正中间。
  - color参数必须是一个有效的css颜色值（如#FFF,rgba(0,0,0,1)）
canvas渐变（径向渐变）

createRadialGradient（x1,y1,r1,x2,y2,r2）

前三个参数则定义另外一个以（x1,y1）为原点，半径为r1的值。

后三个参数则定义另外一个以（x2,y2）为原点，半径为r2的值。
document.documentElement.clientWidth表示视口的宽度
document.documentElement.clientHeight表示视口的高度
在canvas中绘制文本

canvas提供了两种方法来渲染文本，

fillText（text，x,y）

在指定的（x,y）位置填充指定的文本

strokeText(text,x,y)

在指定的（x,y）位置绘制文本边框
文本样式

font = value

当前用来绘制文本的样式，这个字符串使用和css font属性相同的语法。

默认的字体是10px，sans-serif

font属性在指定时，必需要有大小和字体，缺一不可。

textAlign = value

文本对齐选项，可选的值包括：left,right,center.

left

文本左对齐。

right

文本右对齐。

center

文本居中对齐

这里的textAlign=“center”比较特殊，textAlign的值为center时候，文本的居中是基于在fillText的时候所给的x的值。也就是说文本一半在x的左边，一半在x的右边
measureText

measureText（）方法返回一个TextMetrics对象，包含关于文本尺寸的信息（例如文本的宽度）
canvas中文本水平垂直居中

文本阴影

shadowOffsetX = float

shadowOffsetY = float

shadowOffsetX和shadowOffsetY用来设定阴影在x和y轴的延伸距离。

它们默认都为0

shadowBlur = float

shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为0

shadowColor =color(必需项)

shadowColor是标准的css颜色值，用于设定阴影颜色效果，默认是全透明的颜色。
在canvas中的像素操做

能够直接经过ImageDatad对象操纵像素数据，直接读取或将数据数组写入该对象中。
- 获得场景像素数据
getImageData（）：得到一个包含画布场景像素数据的ImageData对象，它表明了画布区域的对象数据。

ctx.getImageData(sx,sy,sw,sh)

sx:将要被提取的图像数据矩形区域的左上角x坐标

sy：将要被提取的图像数据矩形区域的左上角y坐标

sw：将要被提取的图像数据矩形区域的宽度。

sh:将要被提取的图像数据矩形区域的高度。
ImageData对象

ImageData对象中存储着canvas对象真实的像素数据，它包含如下几个只读属性：

width：图片宽度，单位是像素

height：图片高度，单位是像素

data：Uint8ClampedArrayl类型的一维数组，包含着RGBA格式的整型数据，范围在0-255之间（包括255）

R:0 -->255(黑色到白色)

G:0 -->255(黑色到白色)

B:0 -->255(黑色到白色)

A:0 -->255(透明到不透明)
在场景中写入像素数据

putImageData()方法去对场景进行像素数据的写入。

putImage(myImageData，dx，dy)

dx和dy参数表示但愿在场景内左上角绘制的像素数据获得的设备坐标
- 建立一个ImageData对象
画布名.createImageData（width，height）；

width：ImageData新对象的宽度。

height：ImageData 新对象的高度。

默认建立出来的是透明的
全局透明度的设置

globalAlpha = value

这个属性影响到canvas里全部图形的透明度，有效的值的范围是0.0（彻底透明）到1.0（彻底不透明）默认是1.0
覆盖合成

source：新的图像（源）

destination:已经绘制过的图形（目标）

globalCompositeOperation

source-over(默认值)：源在上面，新的图像层级比较高

source-in：只留下源于目标的重叠部分（源的那一部分）

source-atop：砍掉源溢出的部分

destination-over：目标在上面，旧的图像层级比较高

destination-in：只留下源与目标的重叠部分（目标的那一部分）

destination-out：只留下目标超过源的部分

destination-atop：砍掉目标溢出的部分
将画布导出为图像

toDataURL（注意canvas元素接口上的方法）

事件操做

画布名.isPointInPath(x,y)

判断当前路径中是否包含监测点

x:检测点的x坐标

y：检测点的y坐标

注意,此方法只做用于最新画出的canvas图像

表单

表单仍然使用<form>元素做为容器，咱们能够在其中设置基本的提交特性，

form的action指向一个服务器地址（接口）
当用户或开发人员提交页面时，表单仍然用于向服务端发送表单中控件的值

注意表单项的name属性必须有值，服务器才能获取表单
全部以前的表单控制都保持不变
仍然可使用脚本操做表单控件
HTML5以前的表单

标签为input

type：text：文本框

type：password：密码框

type：radio：单选按钮

注意以name分组，确保单选关系，也为了后台能成功获取

必须有value属性，为了后台获取后的识别（不写统一为on）

checked属性，选中控制

type：checkbox：复选框

注意以name分组，确保单选关系，也为了后台能成功获取

必须有value属性，为了后台获取后的识别（不写统一为on）

checked属性，选中控制

type：submit：提交按钮

type：reset：重置按钮

type：button：普通按钮

标签为select：下拉框

name属性在select标签上

multiple：可选多项

子项能够经过optgroup来进行分组

label属性用来定义组名

子项为option标签

selected属性，选中控制

必须有value属性，为了后台获取后的识别

标签为textarea：文本域

标签为button：按钮

type：submit：提交按钮

type：reset：重置按钮

type：button：普通按钮

标签file:定义输入字段和 "浏览"按钮，供文件上传

标签为lable：控制文本与表单的关系

for属性指向一个input的id

标签fiedset 标签legend：来为表单分组

HTML5新增表单控件

type：email：email地址类型

当格式不符合email格式时，提交是不会成功的，会出现提示，只有当格式相符时，提交才会经过。

在移动端获焦的时候会切换到英文键盘
type：tel：电话类型

在移动端获焦的时候会切换到数字键盘
type：url：url类型

当格式不符合url格式时，提交是不会成功的，会出现展现，只有当格式相符时，提交才会经过。
type：search：搜索类型

有清空文本的按钮
type：range：特定范围内的数值选择器

属性：min,max.step
type:number:只能包含数字的输入框

type：color：颜色选择器

type：datetime：显示完整日期（移动端浏览器支持）

type：datetime-local：显示完整日期，不含时区

type：time：显示时间，不含时区

type：date：显示日期

type：week：显示周

type：month：显示月

新增表单属性

placeholder：输入框提示信息

怎么选中placeholder？ ::-webkit-input-placeholder

适用于form，以及type为text，search，url，tel，email，password类型的input

autofocus：指定表单获取输入焦点

required：此项必填，不能为空

pattern：正则验证 pattern=“\d{1,5}

formaction:在submit里定义提交地址

list和datalist：为输入框构造一个选择列表list值为datalist标签的id
表单验证反馈

validity对象，经过下面的valid能够查看验证是否经过，若是八种验证都经过返回true，一种验证失败返回false

node.addEventListener("invalid",fn1,false);

valueMissing :输入值为空时返回true

typeMismatch:控件值与与其类型不匹配返回true

patternMismatch：输入值不知足pattern正则返回true

tooLong：超过maxLength最大限制返回true

rangeUnderflow：验证maxLength最大值返回true

stepMismatch：验证range的当前值是否符合min,max,step的规则返回true

customError：不符合自定义验证返回true

setCustomValidity
- 关闭验证
  
  formnovalidate属性

音频和视频

在html5以前，对视频乃至音频都尚未一个标准，所以在网页中看到的视频都是经过第三方插件的方式嵌入的，多是QuickTime,RealPlayer,Flash。

容器

avi，mp4是容器的格式。它只决定怎么将视频存储起来，而不关系存储的内容。

无论是音频文件仍是视频文件，实际上都只是一个容器文件，视频文件（视频容器）包含了音频轨道，视频轨道和其余一些元数据。视频播放的时候，音频轨道和视屏轨道是绑定在一块儿的。

元数据包含了视频的封面，标题，子标题，字幕等相关信息。

主流的视频文件格式（文件格式）

MPEG-4 ：一般以.mp4为扩展名

Flash视频：一般以.flv为扩展名

Ogg：一般以.ogv为扩展名

WebM：一般以.Webm为扩展名
音频视频交错：一般以.avi为扩展名
主流的音频文件格式

MPEG-3	.mp3
Acc音频	.acc
Ogg音频	.ogg

编解码器

音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频可以播放，原始的媒体文件体积很是巨大，若是不对其进行编码，那么数据量是很是惊人的，在互联网上传播则要耗费不少时间，若是不对其进行解码，就没法将编码后的数据重组为原始的媒体数据。

视频编解码器

H.264

VP8

Ogg Theora
音频编解码器

AAC

MPEG-3

Ogg Vorbis

H.264：别名MPEG-4的第十部分，由MPEG研发，他的目的是支持一切设备，不管是低带宽低cpu，仍是高带宽高cpu或者是二者之间。H.264标准被分红不一样的几种配置，

移动端是基本配置，电视是基本配置和主配置，电脑是基本配置，主配置，高级配置三种。
如今的视频编解码器会使用各类技巧减小从一帧到另外一帧过程当中传递的信息数量，它们不会存储每一帧的全部信息，而只是存储两帧之间的差别信息。
编码器也分有损和无损，无损视频文件通常太大，在网页中没有优点，有损编解码器中，信息在编码过程当中丢失是没法避免的，反复的对视频编码会致使其画面不均匀。
目前尚未一种编解码和容器的组合能应用于全部的浏览器中。

处理视频的一个流程
1. 制做一个Ogg容器中使用Theora视频和Vorbis音频的版本。
2. 制做另一个版本，使用WebM视频容器（VP8+Vorbis）
3. 再制做一个版本，使用MP4视频容器，并使用H.264基本配置的视频和ACC低配的音频
4. 连接上面3个文件到同一个video元素，并向后兼容基于Flash的视频播放器。
格式转换用ffmpeg

HTML5标签

<video>:html5提供的播放视频的标签

src:资源地址

controls：该属性定义是显示仍是隐藏用户控制界面

<audio>:html5提供的播放音频的标签

`src`:资源地址

`controls`：该属性定义是显示仍是隐藏用户控制界面
复制代码

<source>

视频：

type='video/webm;codecs="vp8 vorbis"'

type='video/ogg;codecs="theora, vorbis"'

type='video/mp4;codecs="avc1.42E01E vorbis"'

音频：

type='audio/ogg;codecs="vorbis"'

type='audio/aac;codecs="aac"'

type='audio/mpeg'
video标签的属性

width：视频显示区域的宽度，单位是css像素

height：视频展现区域的高度，单位是css像素

poster：一个海报帧的URL，用于在用户播放或者跳帧以前展现

src：要嵌到页面的视频的URL

controls：显示或隐藏用户控制界面

autoplay：媒体是否自动播放

loop：媒体是否循环播放

muted：是否静音

preload：该属性旨在告诉浏览器做者认为达到最佳的用户体验的方式是什么

none：提示做者认为用户不须要查看该视频，服务器也想要最小化访问流量；

换句话说就是提示浏览器该视频不须要缓存。

metadata：提示尽管做者认为用户不须要查看该视频

不过抓取元数据（好比：长度）仍是很合理的

auto：用户须要这个视频优先加载；换句话说就是提示：若是须要的话，能够下载整个视频，即便用户不必定会用它。

空字符串：也就是代指auto值。
audio标签的属性

src，controls，autoplay,loop,muted,preload

音视频js相关属性

currentTime：开始播放到如今所用的时间（可读写）

duration：媒体总时间（只读）

muted：是否静音（可读写，相比于volume优先级更高）

volume：0.0-1.0的音量相对值（可读写）

paused:媒体是否暂停（只读）

ended：媒体是否播放完毕（只读）

error：媒体发生错误的时候，返回错误代码（只读）

currentSrc：以字符串的形式返回媒体地址（只读）

muted和volume之间不会同步，并且muted属性的优先级比较高

视频多的部分

poster：视频播放前的预览图片（读写）

width，height：设置视频的尺寸（读写）

videoWidth，videoHeight：视频的实际尺寸（只读）

音视频js相关函数

play（）：媒体播放

pause（）：媒体暂停

load（）：从新加载媒体（结合source标签的时候才有用）

js相关事件

视频：

about 在播放被终止时触发，例如，当播放中的视频从新开始播放时会触发这个事件。

canplay：在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PALY的readyState。

durationchange：元信息已载入或已改变，代表媒体的长度发生了改变，例如，在媒体已被加载足够的长度从而得知总长度时。

emptied：媒体被清空（初始化）时触发。

ended：播放结束时触发。

error：在发生错误时触发。元素的error属性会包含更多信息。

loadedmetadata媒体的元数据已经加载完毕，如今全部的属性包含了他们应有的有效信息。

loadeddata：媒体的第一帧已经加载完毕

mozaudioavailable：当音频数据缓存并交给音频层处理时

pause：播放暂停时触发。

play：在媒体回放被暂停后再次开始时触发，即，在一次暂停事件后恢复媒体回放。

playing：在媒体开始播放时触发（不管是初次播放，在暂停后恢复，或是在结束后从新开始）

progress：告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息能够在元素的buffered属性。

ratechange：在回放速率变化时触发。

seeked：在跳跃操做完成时触发。

seeking：在跳跃操做开始时触发。

stalled：在尝试获取媒体数据，但数据不可用时触发。

suspend：在媒体资源加载终止时触发，这多是由于下载已完成或由于其余缘由暂停。

timeupdate：元素的currentTime属性表示的时间已经改变。

volumechange：在音频音量改变时触发（既能够是volume属性改变，也能够是muted属性改变）

waiting：在一个待执行的操做（如回放）因等待另外一个操做（如跳跃或下载）被延迟时触发。
return false 禁止不了ie8如下浏览器事件的默认行为。若是想阻止ie8如下的浏览器事件，须要从源头阻止默认行为就是如下两个函数。

element.setCapture

在处理一个mousedown事件过程当中调用这个方法来把所有的鼠标事件从新定向到这个元素。

直到鼠标按钮被释放或者document.releaseCapture（）被调用

document.releaseCapture

若是该document中的一个元素之上当前启用了鼠标捕获，则释放鼠标捕获。

经过调用element.setCapture()实如今一个元素上启用鼠标捕获。

在谷歌底下：没有全局捕获

在火狐底下：全局捕获有定义，但没有实际的做用

在ie底下：全局捕获专治各类不服

拖拽中磁性吸附的原理就是减少元素的最大运动范围。
状态标签

meter：用来显示已知范围的标量值或者分数值。

value：当前的数值

min：值域的最小边界值。若是设置了，它必须比最大值要小，若是没设置，默认为0

max：值域的上限边界值，若是设置了，它必须比最小值要大，若是没设置，默认为1

low：定义了低值区间的上限值，若是设置了，它必须比最小值属性大，而且不能超过high值和最大值。

high：定义了高值区间的下限值。若是设置了，他必须小于最大值，同时必须大于low值和最小值。

optimum：这个属性用来指示最优/最佳取值。

progress：用来显示一项任务的完成进度

max：该属性描述了这个progress元素所表示的任务一共须要完成多少工做。

value：该属性用来指定该进度条已完成的工做量。

若是没有value属性，则进度条的进度为“不肯定”，

也就是说，进度条不会显示任何进度，没法估计当前的工做会在什么时候完成。
列表标签

datalist：datalist会包含一组option元素，这些元素表示其表单控件的可选值。它的id必需要和input中的list一致。

detail：一个ui小部件，用户能够从其中检索附加信息。

open属性来控制附加信息的显示和隐藏。

summary：用做一个<details>元素的一个内容摘要（标题）
注释标签

ruby

rt：展现文字拼音或字符注释。
标记标签

mark：着重