10分鐘瞭解HTML5
你須要知道的
何爲HTML5
HTML5屬於上一代HTML的新迭代語言，設計HTML5主要的目的也是爲了讓多媒體在移動端上獲得更好的支持！css
如：video、audio、及canvas等
H5優缺點
H5的優勢明顯，就是跨平臺，如開發了一款H5的遊戲，咱們能夠很輕易的移植到其餘開放平臺，甚至也能夠經過封裝的技術打包成app，因此跨平臺性很強大，這也是H5獲得開發者承認的主要緣由。
可是缺點也有，就是pc端瀏覽器支持不太友好，若是項目須要運行在ie8及如下版本或者其餘低版本瀏覽器就要作兼容。html
H5新增特性
1.加入了表單元素
2.取消了過期的顯示效果標記 font、center等
3.加入了語義標籤
4.增長本地存儲
5.加入了一些API
6.canvas標籤前端
下面會對這些新特性作大概的介紹↓↓↓html5
1、新表單元素及屬性
智能表單控件
以前在寫text標籤的時候，若是要檢驗用戶輸入合法性，就須要寫相應的正則表達式，可是在H5中爲咱們新增了智能表單控件，省去不少步驟，使用方式以下：git
<input type="email"> //email: 輸入合法的郵箱地址 //url： 輸入合法的url //number： 只能輸入數字 //range： 滑塊 //color： 拾色器 //date： 顯示日期 //month： 顯示月份 //week ： 顯示第幾周 //time： 顯示時間
表單屬性
- form屬性：
autocomplete=on // 顯示錶單元素的歷史記錄，默認開啓on，關閉爲off novalidate=off // 是否關閉檢驗，默認不關閉false，關閉爲true
- input屬性：
// autofocus : 自動獲取焦點
// form : 表單外部的標籤也能夠隨着表單提交，只須要在標籤是添加屬性form="formid"
// list : 在text標籤上加入list屬性並指定一個id，便可將下拉框與輸入框相結合，以下：
<input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>
// multiple： 實現多選效果
// placeholder ： 佔位符 （提示信息）
// required： 將該項做爲必填項
上面寫到的一些標籤，在表單提交的時候，若是不符合會彈出提示信息，咱們如何修改這個提示信息呢?正則表達式
1. 表單驗證是觸發oninvalid事件
2. 經過setCustomValidity方式設置修改內容
2、新語義標籤
網頁佈局結構標籤（兼容處理）
首先咱們看下H5中經常使用的語義標籤有哪些，以下：canvas
<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
// ……
那咱們在使用這些語義標籤的時候須要注意些什麼呢？
新的語義標籤和咱們以前使用的普通標籤，在使用上沒有任何區別，api
<nav></nav> = <div class="nav"></div>
能夠看到語義標籤就像是一個普通標籤加上了一個class，這時這個標籤就有必定的語義性，增長代碼可讀性，優化了網站seo。可是咱們以前說過H5有必定的兼容問題，語義標籤在ie8中就會出問題——不會被識別。這時瀏覽器會把語義標籤當作是【自定義】標籤，而且當作是一個行內元素。
那咱們如何處理兼容問題呢？數組
- 既然上面說了，瀏覽器把語義標籤當作是自定義標籤，那咱們就去建立這個【自定義】標籤，document.createElement('nav'); 以後別忘了一點，語義標籤還會被當成是行內元素，那再根據須要設置下display:block;就行啦。若是標籤使用多了這種方式有點麻煩，別急往下看↓↓↓。
- 經過js插件，html5shiv.js，在頁面內引入，就能夠支持語義標籤了。那在想下，若是是自己就能夠支持的瀏覽器就會多請求一個腳本，形成資源浪費，因此再往下看↓↓↓↓。
- 完美解決方案，將腳本引用放到下面的代碼塊中
<!--[if lte IE 8]>
// 這裏的含義是，噹噹前瀏覽器版本小於等於8時，就會走到這個if語句中，因此在這裏寫腳本的請求就將問題解決了。
<![endif]-->
3、H5中的API
H5中爲了方便開發，新增了不少api，包括獲取元素屬性、文件讀取、網絡狀態、地理位置、本地存儲等。
1. 獲取元素、類名、自定義屬性
- 獲取元素
傳統的方式咱們習慣引入jq，而後去寫$('')獲取一個元素，可是H5提供了比jq還方便的獲取方式。以下：
document.querySelector("選擇器");
// 選擇器： 能夠是css中的任意一種選擇器，經過該選擇器只能選中第一個元素。
document.querySelectorAll("選擇器");
// 與document.querySelector區別： querySelectorAll 能夠選中全部符合選擇器規則的元素，返回的是一個列表。querySelector返回的只是單獨的一個元素。
- 獲取類樣式
方式，以下：
Dom.classList.add("類名"): // 給當前dom元素添加類樣式
Dom.classList.remove("類名"); // 給當前dom元素移除類樣式
Dom.classList.contains("類名"); // 檢測是否包含類樣式
Dom.classList.toggle("active"); // 切換類樣式（有就刪除，沒有就添加）
- 自定義屬性
自定義屬性實際上是對原有自定義屬性的升級，咱們原來寫自定義屬性的方式是這樣的：
<input type="text" _name="123" id="text1">
var a = $('#text1').attr('_name');
H5中的自定義屬性是這樣的：
<input type="text" data-name="123" id="text1">
var a = document.querySelector('#text1').dataset.name;
var b = document.querySelector('#text1').dataset['name'];
是否是方便不少，直觀不少。可是要注意的是：
若是數姓名爲data-test-name，那麼在獲取的時候就要使用駝峯命名法獲取
document.querySelector('#text1').dataset.testName;
document.querySelector('#text1').dataset['testName'];
固然自定義屬性也能夠進行添加和賦值
Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值；
2. 文件讀取
直接上栗子：
<input type="file" id="file">
var input = document.querySelector("#file");
input.onchange = function(){
//獲取文件
var file=this.files[0];
//開始讀取 建立讀取器
var reader=new FileReader();
//開始讀取
reader.readAsText(file);
//獲取讀取結果
reader.onload = function(){
//文件讀取完成後才能夠獲取文件內容
console.log(reader.result);
}
}
上面的代碼很好理解，惟一須要注意的一點就是，獲取文件內容必定要等文件讀取結束後，就是觸發onload事件的時候。
- FileReader對象屬性，接口有3個用來讀取文件方法返回結果在result中：
readAsBinaryString ---將文件讀取爲二進制編碼
readAsText ---將文件讀取爲文本
readAsDataURL ---將文件讀取爲DataURL -
FileReader對象提供的事件：
onabort 中斷時觸發 onerror 出錯時觸發 onload 文件讀取成功完成時觸發 onloadend 讀取完成觸發，不管成功或失敗 onloadstart 讀取開始時觸發 onprogress 讀取中
3. 獲取網絡狀態
-
獲取當前網絡狀態
window.navigator.onLine 返回一個布爾值，true爲聯網，false爲斷網
-
網絡狀態事件
1. window.ononline 2. window.onoffline
4.獲取地理位置
-
獲取一次當前位置
window.navigator.geolocation.getCurrentPosition(success,error); 1.coords.latitude 維度 2.coords.longitude 經度
注：這個方法時不靠譜的，一些瀏覽器是獲取不到的。
- 實時獲取當前位置
window.navigator.geolocation.watchPosition(success,error);
function success(msg,position) {
}
5. 本地存儲
前端技術飛速發展，業務也愈來愈複雜，常常會在本地存儲大量的數據，傳統方式的cookie，由於大小隻有4k，而且解析複雜，已經不能知足開發需求。HTML5規範提出的新的解決方案，使用sessionStorage和localStorage存儲數據。
- localStorage：
1.永久生效，能夠手動清除
2.多窗口共享
3.容量爲20M
api使用方式以下：
window.localStorage.setItem(key,value); // 設置存儲內容 window.localStorage.getItem(key); // 獲取內容 window.localStorage.removeItem(key); // 刪除內容 window.localStorage.clear(); // 清空內容
- sessionStorage：
1.生命週期爲關閉當前瀏覽器
2.只能在當前窗口下訪問
3.數據大小爲5M
api使用方式以下：
window.sessionStorage.setItem(key,value); // 用法和localStorage一致 window.sessionStorage.getItem(key); window.sessionStorage.removeItem(key); window.sessionStorage.clear();
4、多媒體標籤
這裏只作簡單的介紹，由於詳細的說內容不少，後續會更新專門介紹多媒體標籤的文章。
<video></video> 視頻
屬性：controls 顯示控制欄 屬性：autoplay 自動播放 屬性：loop 設置循環播放
<audio></audio> 音頻
屬性：同video標籤
video，支持3種格式，ogg mp4 WebM，將三種格式文件放入source中，瀏覽器從上至下讀取，支持哪一個就播放哪一個。
<video>
<source src="test/多媒體/111.mp4">
<source src="111.ogg">
<source src="111.WebM">
</video>
5、canvas標籤
在這裏只寫一些基礎的api使用，後續會專門更新canvas詳細使用的文章
1. 開始繪圖
canvas其實就是H5提供的一個標籤，使用方式也很簡單。
首先設置畫布
<canvas width="600" height="500"></canvas>
這裏須要注意的一點就是，設置畫布大小必定要經過設置標籤屬性的方式，不能經過css方式改變，由於屬性改變的纔是畫布實際大小，而css改變的只是標籤大小，實際畫布大小不會改變。
var canvas = document.querySelector("canvas");//獲取canvas對象
var ctx = canvas.getContext("2d");//獲取繪圖上下文
2. 繪圖方法
設置好了畫布就開始繪圖了，繪圖分爲3個步驟，落筆、連線、描邊
- 落筆（找到起始點座標）
ctx.moveTo(x,y);
- 連線
ctx.lineTo(x,y);
- 描邊
ctx.stroke();//只有描邊後才能看到圖形
當畫完一個圖形後，須要開啓新的圖層，否則每次調用ctx.stroke()的時候都會將以前全部的圖形再畫一次，就會形成圖形重疊、顏色變深。開啓新圖層方式以下：
ctx.benginPath();
- 其餘屬性設置
顏色： ctx.strokeStyle="red"
線寬： ctx.linewidth="30" 備註：不須要帶單位
線鏈接方式： ctx.lineJoin: round | bevel | miter (默認)
線帽（線兩端的結束方式）： ctx.lineCap: butt(默認值) | round | square
在畫一個閉合圖形是，最後一條線能夠經過閉合路徑的方式畫出
ctx.closePath(); // 自動畫出圖形最後閉合的線
3. 漸變方案
- 線性漸變
var grd=ctx.createLinearGradient(x0,y0,x1,y1);
// x0-->漸變開始的x座標
// y0-->漸變開始的y座標
// x1-->漸變結束的x座標
// y1-->漸變結束的y座標
grd.addColorStop(0,"black"); // 設置漸變的開始顏色
grd.addColorStop(0.5,"yellow"); // 設置漸變的中間顏色
grd.addColorStop(1,"red"); /// 設置漸變的結束顏色
ctx.strokeStyle= grd; // 將漸變方案賦值給顏色屬性
ctx.stroke();
中漸變的開始位置和結束位置介於0-1之間，0表明開始，1表明結束。中間能夠設置任何小數。
- 徑向漸變
ctx.createradialGradient(x0,y0,r0,x1,y1,r1);
// (x0,y0)：漸變的開始圓的 x,y 座標
// r0：開始圓的半徑
// (x1,y1)：漸變的結束圓的 x,y 座標
// r1：結束圓的半徑
4. 填充效果
ctx.fill(); // 設置填充效果 ctx.fillstyle="值"; // 設置填充顏色
5. 非零環繞原則
當咱們繪製一個「回」形圖案時，進行顏色填充，就用到非零環繞原則。
- 非零環繞原則前提：
1.繪製的圖形是閉合圖形
2.繪製的時候，繪製不一樣圖形的順序有順時針和逆時針
- 非零環繞原則：
1.任意找一點，越簡單越好
2.以這個點位圓心，繪製一條射線（相交點越少越好）
3.以點爲軸將射線順時針旋轉，相交的邊繪製的方向若是和旋轉方向相同則+1，相反則-1，最後將一個區域內各邊的值相加，等於0則不填充。非0則填充。
6. 繪製虛線
原理： 設置虛線其實就是設置實線與空白部分直接的距離,利用數組描述其中的關係
var arr = [10,10];
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.setLineDash(arr);
ctx.stroke();
- 數組表示：
[10,5] 實線部分10px 空白部分5px
[10,5,20] 實線部分10px 空白5px 實線20px 空白部分10px 實線5px 空白20px....
注意：若是要將虛線改成實線，只要將數組改成空數組便可。
7. 繪製動畫效果
- 原理：
1.繪製一個描邊矩形： ctx.strokeRect(x,y,width,height)
2.繪製一個填充矩形： ctx.fillRect(x,y,width,height)
3.清除： ctx.clearRect(x,y,width,height) -
實現動畫效果步驟：
1.先清屏 2.繪製圖形 3.處理變量
8. 繪製文本
- 繪製填充文本
content.fillText(文本的內容,x,y);
- 繪製鏤空文本
content.strokeText(文本的內容,x,y);
- 設置文字大小
content.font="20px 微軟雅黑";
注： 該屬性設置文字大小，必須按照cssfont屬性的方式設置
- 文字水平對齊方式
content.textalign="left | right | center"
- 文字垂直對齊方式
content.textBaseline="top | middle | bottom | alphabetic(默認)"
- 文字陰影效果
ctx.shadowColor="red"; // 設置文字陰影的顏色 ctx.ShadowOffsetX=值; // 設置文字陰影的水平偏移量 ctx.shadowOffsetY=值; // 設置文字陰影的垂直偏移量 ctx.shadowBlur=值; // 設置文字陰影的模糊度，值越大越模糊
9. 繪製圖片
-
第一種
var img = document.createElement("img"); img.src="1.png";//或者獲取頁面內的img標籤 // 注：畫的方法必定要放到img.onload方法內 //將圖片繪製到畫布的指定位置 content.drawImage(圖片對象,x,y); 第二種
content.drawImage(img,x,y,width,height);
- 第三種
//將圖片的指定區域繪製到指定矩形區域內
content.drawImage(img,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
// sx,sy 指的是要從圖片哪塊區域開始繪製，swidth，sheight 是指截取圖片區域的大小
// dx,dy 是指矩形區域的位置，dwidth,dheight是值矩形區域的大小
- 解決圖片繪製到某一個區域的按原比例縮放繪製:
繪製寬：繪製高 = 原始寬：原始高
##### 10. 繪製圓弧
content.arc(x,y,radius,startradian,endradian[,direct]);
- 參數含義：
x,y 圓心的座標
radius 半徑
startradian 開始弧度，弧度制，通常從0開始
endradian 結束弧度，通常到2*Math.PI
direct 方向（默認順時針 false） true 表明逆時針
- 0度角在哪？
1.以圓心爲中心向右爲0角 順時針爲正，逆時針爲負。
2.0度在3點鐘放向。
- 備註：
180角度 = Math.PI
角度 和 弧度的關係： 角度:弧度= 180:pi
- 特殊值
0度 = 0弧度
30度 = π/6 (180度的六分之一)
45度 = π/4
60度 = π/3
90度 = π/2
180度 = π
360度 = 2π
- 繪製圓上任意點公式：
x=ox+r*cos( 弧度 );
y=oy+r*sin( 弧度 );
// ox: 圓心的橫座標
// oy: 圓心的縱座標
// r： 圓的半徑
栗子：
var x = 300 + 100 * Math.cos(Math.PI/3);
var y = 200 + 100 * Math.sin(Math.PI/3);
//獲取到圓上一點x,y
ctx.arc(x,y,10,0,Math.PI*2);
##### 11. 平移（座標系原點平移） 這裏的平移指的是將座標系原點平移。
ctx.translate(x,y);
- 特色：
經過該方法能夠將原點的位置進行從新設置。
- 注意：
1.translate(x,y) 中不能設置一個值
2.與moveTo(x,y) 的區別：
2-1.moveTo(x,y) 指的是將畫筆的落筆點的位置改變，而座標系中的原點位置並無發生改變
2-2.translate(x,y) 是將座標系中的原點位置發生改變
##### 12. 旋轉（座標系原點旋轉）
ctx.rotate(弧度);
// 弧度計算方式見圓弧繪製
##### 13. 縮放
ctx.scale(x,y);
能夠設置一個值，即x軸y軸同時縮放相同比例 也能夠設置兩個值，即x軸y軸按照相應的比例縮放 # 6、完結 就寫到這吧，HTML5真是好處多多，能夠大大的提高開發效率、增長代碼可讀性，固然前提是處理好兼容問題。文章只是作一個初步介紹，幫助沒用過的朋友快速瞭解H5，後續會針對其中幾個點作更詳細的解釋。
- 1. 10分鐘瞭解ZooKeeper
- 2. 10分鐘瞭解TiDB
- 3. 10分鐘瞭解react引入的hooks
- 4. 10分鐘瞭解什麼是BFC
- 5. 10分鐘瞭解Javascript-天碼營
- 6. 10分鐘瞭解 react 引入的 Hooks
- 7. 10分鐘瞭解設計模式（C#）
- 8. 10分鐘帶你瞭解DevOps工具
- 9. 10 分鐘瞭解 Actor 模型
- 10. 10分鐘瞭解微信小程序
- 更多相關文章...
- • SVN分支 - SVN 教程
- • IP地址分配（靜態分配+動態分配+零配置） - TCP/IP教程
- • Git五分鐘教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
- 1. 10分鐘瞭解ZooKeeper
- 2. 10分鐘瞭解TiDB
- 3. 10分鐘瞭解react引入的hooks
- 4. 10分鐘瞭解什麼是BFC
- 5. 10分鐘瞭解Javascript-天碼營
- 6. 10分鐘瞭解 react 引入的 Hooks
- 7. 10分鐘瞭解設計模式（C#）
- 8. 10分鐘帶你瞭解DevOps工具
- 9. 10 分鐘瞭解 Actor 模型
- 10. 10分鐘瞭解微信小程序