編輯於2018年1月1日
算是《HTML5從入門到精通》這本書的讀書筆記，四百多頁就講了一點東西。
一、HTML基礎
文件開始標籤<html>、文件頭部標籤<head>、文件標題標籤<title>、文件主體標籤<body>。
二、HTML文件基本標記
1、元信息標記<meta>
1.1設置頁面關鍵字<meta name='keyname' content='具體的關鍵字'>
1.2設置頁面描述<meta name='description' content='對頁面的描述語言'>
1.3設置編輯工具<meta name='generator' content='編輯軟件的名稱'>
1.4設定作者信息<meta name='author' content='作者的姓名'>
1.5限制搜索方式<meta name='robots' content='搜索方式'>
content的值:all、index、nofollow、noindex、none
1.6設置網頁文字及語言
第一種方法：<meta http-equiv='Content-Type' content='text/html;charset=字符集類型'>
第二中方法：<meta http-equiv='Content-Language' content='語言'>
1.7設置網頁的定時跳轉<meta http-equiv='refresh' content='跳轉時間;url=鏈接地址'>
1.8設定有效期限<meta http-equiv='expires' content='到期的時間'>
1.9禁止從緩存中調用
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='pragma' content='no-cache'>
1.10刪除過期的cookie<meta http-equiv='set-cookie' content='到期的時間'>
1.11強制打開新窗口<meta http-equiv='windows-target' content='_top'>
1.12設置網頁的過渡效果<meta http-equiv='過渡事件' content='revealtrans(duration=過渡效果持續時間,transition=過渡方式)'>
進入頁面的http-equiv值爲page-enter，離開頁面的http-equiv值爲page-exist。
2、基底網址標記<base><base href='鏈接地址' target='新窗口打開的方式'>放在頭部定義，通常配合<a href='相對地址'>
3、頁面主體標記<body>
3.1設置文字顏色<body text='顏色代碼'>
3.2背景顏色屬性<body bgcolor='顏色代碼'>
3.3背景圖像屬性<body background='images/1.jpg' bgproperties='fixed'>將bgproperties設置爲fixed則背景圖片會固定在頁面上靜止不動，可以配合css是圖片不重複顯示。
3.4設置鏈接文字的顏色
<body link='鏈接顏色' alink='正在訪問的鏈接顏色' vlink='訪問過的鏈接顏色'>
3.5設置邊距<body topmargin='上邊距的值' leftmargin='左邊距的值'>
4、頁面的註釋<!--註釋的文字-->
三、文字標記和屬性
1、文字標記
1.1字號從大到小<h1></h1>...<h6></h6>
1.2設置文字格式<font></font>
1.3粗體、斜體、下劃線<strong></strong>、<em></em>、<u></u>
1.4上標與下標<sup></sup>、<sub></sub>
1.5刪除線<strike></strike>或<s></s>
1.6等寬文字標記<code></code>或<samp></samp>
1.7段落標記<p></p>
1.8取消換行標記<nobr></nobr>
1.9換行標記</br>
1.10保留原始版式標記<pre></pre>
1.11居中對齊標記<center></center>
1.12向右縮進標記<blockquote></blockquote>
1.13水平線標記</hr>
1.14文字標註標記<ruby>被說明的文字<rt>文字的標註</rt></ruby>
1.15聲明變量標記<var></var>
1.16忽視HTML標記</plaintext>或</xmp>
2、特殊符號的輸入
2.1空格 
2.2引號"
2.3左尖括號<
2.4右尖括號>
2.5乘號×
2.6小節符號§
2.7版權所有符合©
2.8已註冊符合®
2.9商標符合&trade
3、標記屬性
3.1文字、水平線對齊方式align
3.2設置文字字體face
3.3設置字號size
3.4設置文字、水平線顏色color
3.5設置水平線的寬度與高度width、height
3.6去掉水平線陰影noshade
四、使用列表
1、無序列表標記ul
無序列表的符號類型屬性type：disc實心圓點，circle空心圓點，square實心方塊。
2、有序列表標記ol
有序列表的符號類型屬性type：1、a、A、i、I；
有序列表的起始數值start
3、菜單列表標記menu
4、目錄列表標記dir
5、列表項標記li
6、定義列表標記
<dl><dt>名詞</dt><dd>解釋</dd></dl>
五、超鏈接
1、<a href='鏈接地址' target='目標窗口的打開方式'>鏈接元素</a>
target值：_parent、_blank、_self、_top。
2、書籤鏈接
2.1<a name='書籤名稱'></a>
2.2鏈接到同一頁面的書籤<a href='#書籤的名稱'>內容</a>
2.3鏈接到不同頁面的書籤<a href='鏈接地址#書籤的名稱'>內容</a>
3、其他鏈接
<a href='http://...'></a>
<a href='ftp://...'></a>
<a href='mailto:電子郵件地址?CC=電子郵件地址&Subject=主題文字&BCC=電子郵件地址&Body=郵件內容'></a>
<a href='javascript:...'></a>
空鏈接<a href='#'></a>
六、使用圖像
1、<img src='圖像文件地址' width='寬' height='高' border='圖像邊框的寬度' hspace='水平間距' vspace='垂直間距' align='對齊方式' alt='提示文字的內容' href='鏈接地址' target='目標窗口的打開方式' usemap='#映射圖像名稱'/>
2、<map name='映像圖像的名稱'><area shape='熱區形狀' coords='熱區座標' href='鏈接地址' alt='提示文字的內容'/></map>
七、創建表格
1、標記
1.1表格標記table
1.2行標記tr
1.3單元格標記td
1.4表格的標題標記caption
1.5表頭標記th或者thead
1.6表主體標記tbody
1.7表尾標記tfoot
2、屬性
2.1寬度、高度、對齊方式width、height、align
2.2<table border='邊框寬度' bordercolor='邊框顏色' cellspacing='內框寬度' cellpadding='文字與邊框的距離' bgcolor='表格背景顏色' background='背景圖像地址' ></table>
2.3<trbordercolor='行的邊框顏色'bgcolor='行的背景顏色'align='水平對齊方式' valign='垂直對齊方式'></tr>
2.4<td colspan='跨的列數' rowspan='單元格跨行數' bordercolorlight='亮邊框顏色' bordercolordark='暗邊框顏色'bordercolor='單元格的邊框顏色'bgcolor='單元格的背景顏色'align='水平對齊方式' valign='垂直對齊方式'></td>
八、層標記
1、id='id' css規則：#id{css樣式}
2、class='.class' css規則：.class{css樣式}
3、style屬性
<div style='position:值;display:值;visibility:值'></div>
4、行內標籤span
5、浮動幀標籤iframe
6、層標籤layer和ilayer
九、編輯表單
1、<form name='表單名稱' action='表單的處理程序' method='傳送方式' enctype='編碼方式' target='目標窗口的打開方式'></form>
2、輸入類控件
<input type='控件名稱'></input>
2.1type的值：文字字段text、密碼域password、單選按鈕radio、複選框checkbox、普通按鈕button、提交按鈕submit、重置按鈕reset、圖像域image、隱藏域hidden、文件域file
3、列表/菜單標記
<select name='下拉菜單的名稱' multiple='是否可以多選'><option value='選項值' selected='是否選中'>選項顯示內容</option></select>
4、文本域標記<textarea></textarea>
十、多媒體頁面
1、設置滾動文字<marquee direction='滾動方向' behavior='滾動方式' scrollamount='滾動速度' scrolldelay='滾動延遲時間間隔' loop='循環次數' width='寬' height='高' bgcolor='背景顏色' hspace='水平範圍' vspace='垂直範圍'></marquee>
滾動方式：scroll循環滾動，slide只滾動一次，alternate來回交替進行滾動。
2、添加背景音樂
<bgsound src='背景音樂地址' loop='循環次數'/>
3、添加多媒體文件
<embed src='多媒體文件地址' width='播放界面的寬度' height='播放界面的高度' autostart='是否自動運行' loop='是否循環播放true|false' hidden='是否隱藏'></embed>
十一、HTML5的新特性
兼容性、實用性、互通性
十二、HTML5與HTML4的區別
全局屬性
1、contentEditable是否可編輯
2、designMode整個頁面是否可編輯，該屬性只能在JavaScript腳本里編輯修改
3、hidden是否可見
4、spellcheck是否檢查拼寫與語法
5、tabindex獲得焦點的順序
十三、HTML的結構
1、article一般有標題
2、section一般有標題
3、nav導航欄標記，通常子標記是列表標記
4、aside文章附屬標記
5、<time datetime='日期T時間Z'></time>
6、header
7、hgroup分組標記
8、footer
9、address
十四、HTML5中的表單
1、<input type='控件類型' placeholder='提示信息' autocomplete='是否保存輸入值' autofocus='是否獲得焦點' required='是否必填' pattern='正則法則'></input>
2、<input type='range' min='最小值' max='最大值' value='默認值' step='遞增遞減的梯度'></input>
3、<input type='控件類型'></input>
控件類型：email、url、date、time、datetime、datetime-local、month、week、number、range、search。
css寫法input[type='控件類型']{css樣式}
4、<output onforminput='輸出值'></output>
5、JavaScript是否可以通過checkValidity方法驗證是否符合格式
6、JavaScript中setCustomValidity("錯誤提示信息")
7、塊級圖像<figure><img src='圖像地址'/></br><figcaption>圖像描述</figcaption></figure>
8、可展開、收縮區域<details open='默認是否展開'><summary>點擊該元素，整個detail則會展開、收縮</summary><p></p></detail>
9、<mark>高亮顯示內容</mark>
10、<progress max='最大值' value='默認值'></progress>
11、<meter></meter>獲得標籤內的第一個數字
12、cite元素
13、small元素，具體仍需在CSS樣式中設置。
十五、HTML5中的文件與拖放
1、<input type='file' accept='image/*'/>
2、使用FileReader接口讀取文件
2.1檢測瀏覽器是否支持FileReader接口if(typeofFileReader=='undefined'){}
2.2fileReader.readAsDataURL(file)將文件以Data URL形式讀入頁面
2.3fileReader.readAsText(file)將文件以文本形式讀入頁面
2.4FileReader接口中的事件onabort、onerror、onload、onloadend、onloadstart、onprogress。
3、拖放API：dragstart、drag、dragenter、dragover、dragleave、drop、dragend。
4、dataTransfer對象API：dropEffect、effectAllowed、types、clearData、setData、getData、setDragImage。
十六、多媒體播放
1、audio和video元素
2、<video src='文件地址' autoplay='是否自動播放' perload='是否預加載none|metadata|auto' controls='controls'/>
controls控制條屬性
3、多媒體元素常用方法
video.play()、video.pause()、video.load()
4、多媒體元素事件處理
<video 事件方法='JavaScript函數名'></video>
video.addEventListener(type,listener,useCapture);type事件名，listener函數名,useCapture爲true則在Capture階段處理事件，false則在Bubble階段處理事件
Capture階段：DOCUMENT -> BODY -> 目標
Target階段：目標
Bubble階段：目標 -> BODY -> DOCUMENT
十七、繪製圖形
1、<canvas style='border:1px solid;' width='寬' height='高'/>
2、繪製方法：
2.1var context=canvas.getContext('2d');
2.2context.fillStyle='green';
context.strokeStyle='red';
context.lineWidth='1';
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
3、圓弧的繪製
context.beginPath();開始路徑的創建
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
4、moveTo(x,y)不繪製，移動到目標座標
lineTo(x,y)移動到目標座標，並繪製一條直線
5、貝塞爾三次曲線bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
貝塞爾二次曲線quadraticCurveTo(cp1x,cp1y,x,y)
6、運用樣式
6.1顏色：context.fillStyle='顏色'
6.2context.globalAlpha = 透明度；
6.3context.lineWidth=線寬;
context.lineCap=butt|round|square線段端點樣式;
context.lineJoin=round|bevel|miter兩線段連接處樣式;
7、繪製漸變圖形
7.1繪製線性漸變
context.createLinearGradient(xStart,yStart,xEnd,yEnd)
context.addColorStop(offset,color)
7.2繪製徑向漸變
context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
8、座標的變換
8.1平移context.translate(x,y)
8.2縮放context.scale(x,y)
8.3旋轉context.rotate(angle)
8.4矩陣變換context.transform(m11,m12,m21,m22,dx,dy)
9、組合多個圖形
context.globalCompositeOperation=type
type值：source-over、destination-over、source-in、destination-in、source-out、destination-out、source-atop、destination-atop、lighter、darker、xor、copy
10、給圖形繪製陰影shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor
11、繪製圖像
drawImage(image,x,y)
drawImage(image,x,y,width,height)
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
12、圖像的局部放大drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
13、圖像平鋪context.createPattern(image,type);type值no-repeat、repeat-x、repeat-y、repeat。
14、圖像剪裁context.clip();
15、像素的處理
獲取像素context.getImage(sx,sy,sw,sh)
設置像素context.putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]);
16、繪製文字fillText(text,x,y[,maxWidth]);strokeText(text,x,y[,maxWidth]);
17、保存與恢復狀態sava和restore
18、文件的保存canvas.toDataURL('保存地址');
19、設置動畫的間隔時間setInterval(動畫函數,動畫間隔時間);
十八、數據存儲
1、Web Storage
1.1形式sessionStorage、localStorage。
1.2數據的存儲與獲取setItem('key',key),getItem('key')
1.3數據的刪除與清空removeItem(key),clear()
2、JSON的使用
2.1var str=JSON.stringify(data);
localStorage.setItem(key值,str);
2.2var data=JSON.parse(str);
3、本地數據庫SQLite
十九、離線應用程序
1、manifest(緩存清單)
CACHE MANIFEST
version 201801012200
CACHE:
other.html
mr.js
images/mrphoto.jpg
NETWORK:
http://192.168.x.x:x/mr
mr.php
*
FALLBACK:
online.js locale.js
CACHE:
newmr.html
newmr.js
需要在Web應用程序頁面上的html標籤的manifest屬性中指定manifest文件的URL地址：
<html manifest='manifest文件位置'></html>
2、applicationCache對象
2.1swapCache()手工進行本地緩存的更新
2.2事件監聽applicationCache.addEventListener('事件名',回調函數)
二十、使用Web Worker處理線程
1、步驟
1.1var worker=new Worker('worker.js');
1.2worker.postMessage(message);發送消息
1.3worker.onmessage=function(event){//處理接受的消息};
2、導入多個JavaScript文件，importScripts('js文件','js文件');
二十一、通信API
otherWindow.postMessage(message,targetOrigin);
第一個參數可以是所發送的消息文本或者任何JavaScript對象，第二個參數可以爲具體的URL地址；
ｗindow.addEventListener('message',function(//發送消息的監聽處理){},false);
二十二、獲取地理位置信息Geolocation API
1、getCurrentPosition(成功後的回調函數，失敗後的回調函數，可選屬性列表);獲取當前地理位置
geolocation.getCurrentPosition(function(position){//成功回調函數},function(error){//失敗回調函數},options);
2、watchCurrentPosition(onSuccess,onError,options);持續監視當前地理位置的信息
3、clearWatch(watchId);停止獲取當前用戶的地理位置信息
4、position對象屬性：latitude、longitude、altitude、accuracy、altitudeAccurancy、heading、speed、timestamp。