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：着重