技術標籤：達達前端指路

哪吒人生信條：如果你所學的東西 處於喜歡 才會有強大的動力支撐。

把你的前端拿捏得死死的，每天學習得爽爽的，如果你所學的東西 處於喜歡 才會有強大的動力支撐。

感謝不負每一份熱愛前端的程式設計師，不論前端技能有多奇葩，歡迎關注加我入群vx:xiaoda0423

前言

希望可以通過這篇文章，能夠給你得到幫助。(感謝一鍵三連)

1.HTML5表單增加的輸入型別

1. url型別：專門為輸入url地址定義的文字庫，在驗證輸入文字的格式時，如果文字框中的的內容不符合url地址的格式，會提示驗證錯誤。
2. email型別：專門是為輸入email地址定義的文字框，在驗證輸入的文字的格式時，如果文字框中的內容不符合email
   地址的格式，會提示驗證錯誤。在email型別的input元素還有一個multiple屬性，表示在該文字框中可輸入用逗號隔開的多個郵件地址。
3. range型別：用於把輸入框顯示為滑動條，可以作為某一特定範圍內的數值選擇器。min和max特性，分別表示範圍的最小值，預設為0，範圍的最大值，預設為100.range型別有一個step特性，表示拖動的步長，預設為1。
4. number型別：專門為輸入特定的數字而定義的文字框，具有min,max,step特性。
5. tel型別：專門為輸入電話號碼而定義的文字框，沒有特殊的驗證規則。
6. search型別：專門為輸入搜尋引擎關鍵詞定義的文字框，沒有特殊的驗證規則。
7. color型別：color
   型別的input元素預設會提供一個顏色選擇器。
8. date型別：專門用於輸入日期的文字框，預設帶日期選擇器的輸入框。
9. month，week，time，datetime，datetime-local型別的input元素與date型別的input元素類似，提供一個相應的選擇器。

2.HTML5增加表單的特性以及元素

form特性在HTML5中，可以把從屬於表單的元素放在任何地方，然後指定該元素的form特性值為表單的id，該元素就從屬於表單。

<input name="da" type="text" form="form1" required/>
<form id="form1">
 <input type="submit" value="提交"/>
</form>
 

1. formaction特性：每個表單都會通過action特性把表單內容提交到另外一個頁面，而在html5中，為不同的“提交”按鈕分別新增formaction特性後，該特性會覆蓋表單的action特性，將表單提交至不同的頁面。

<form id="form1" method="post">
 <input name="name" type="text" form="form1"/>
 <input type="submit" value="提交page1" formaction="?page=1"/>
</form>

2. formmethod,formenctype,formnovalidate,formtarget特性：formmethod特性會覆蓋表單的method特性；formenctype特性可覆蓋表單的enctype；formnovalidate特性可覆蓋novalidate特性，formtarget特性可以覆蓋表單的target特性。

3. placeholder特性，向用戶提示描述性的資訊。

4. autofocus特性，用於所有型別的input元素，當頁面載入完成時，可自動獲取焦點，每個頁面只允許出現一個有autofocus特性的input元素，如果設定多個，相當於未指定該行為。

5. autocomplete特性：應用於form元素和輸入型的input元素，用於表單的自動完成。可以autocomplete="on"，其可以指定"on","off"和" " 不指定。

6. list特性和datalist元素，可以為某個可輸入的input元素定義一個選值列表。

<input name="email" type="email" list="emaillist"/>

<datalist id="emaillist">
 <option value="[email protected]"> dada </option>
 <option value="[email protected]"> dada2 </option>
</datalist>

7. keygen元素：提供了一種安全的方式來驗證使用者，該元素有金鑰生成的功能，在提交表單時，會分別生成一個私人金鑰和一個公共金鑰，私人金鑰儲存在客戶端，公共金鑰則通過網路傳輸至伺服器。

<form action="">
 <input type="text" name="name"/> <br>
 <keygen name="security"/>
 <br><input type="submit"/>
</form>

8. output元素用於不同型別的輸出，該元素必須從屬於某個表單，即是寫在表單的內部。

<form oninput="x.value=da.value">
 <input type="range" name="da" value="20"/>
 <output name="x"></output>
</form>

3.HTML5如何實現跨域

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST");
response.setHeader("Access-Control-Allow-Headers", "x-requested-width,content-type");

4.什麼是WebSql

WebSql是一個在瀏覽器客戶端的結構關係資料庫，是瀏覽器內的本地RDBMS關係型資料庫管理系統，可以使用SQL查詢。

WebSql是基於SQLite的。

5.應用快取中網路命令的作用是啥

// 在程式碼login.php始終都不應該快取或者離線訪問
NETWORK：
login.php

網路命令描述不需要快取的檔案。

6.Canvas和SVG的區別是什麼

SVG是可縮放向量圖形，它是基於文字的圖形語言，使用文字，線條，點等來繪製圖像。

a. 一旦Canvas繪製完成將不能訪問畫素或操作它，任何使用SVG繪製的形狀都能被記憶和操作，可以被瀏覽器再次顯示。

b. Canvas對繪製動畫和遊戲有利，SVG對建立影象有利。

c. 因為不需要記住之後的事，所以Canvas執行快，而SVG需要記錄座標，所以執行慢。

d. 在Canvas中不能為繪製物件繫結相關事件；在SVG中可以為繪製物件繫結相關事件。

e. Canvas繪製出的是點陣圖，因此與解析度有個，SVG是向量圖，與解析度無關。

使用SVG繪製：

<svg xmlns="http://ww.xx.xx/pic/svg" version="1.1">
 <rect stype="fill:rgb(255,100,0);" height="200" width="400"></rect>
</svg>

使用Canvas繪製：

<canvas id="myCanvas" width="500" height="500"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.rect(100,100,300,200);
ctx.fillStyle="red"
ctx.fill()

7.本地儲存的資料有生命週期嗎

本地儲存的資料沒有生命週期，它將一直儲存資料，直到使用者從瀏覽器清除或者使用javascript程式碼移除。

8.表單驗證的API

1. required特性：表示此項的值不能為空，否則無法提交表單。
2. pattern特性用於input元素定義一個驗證模式。

<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6為郵政編碼"/>

3. min,max,step特性
4. novalidate用於指定表單或表單內的元素在提交時不驗證，form元素應用novalidate特性，表示表單中的所有元素在提交時不再驗證。
5. validaty屬性用於獲取表單元素的ValidityState物件，該物件包含8個方面的驗證結果。ValidityState物件會持續存在，每次獲取validity屬性時，返回的是同一個ValidityState物件。

var validityState=document.getElementById("username").validity;

6. willValidate屬性，用於獲取一個布林值，表示表單元素是否需要驗證，如果表單元素設定了required特性或pattern特性，則willValidate屬性為true，即表單的驗證將執行。

var willValidate=document.getElementById("username").willValidate;

7. validationMessage屬性，用於獲取表單元素的錯誤提示資訊

var validationMessage = document.getElementById("username").validationMessage;

ValidityState物件，是通過validity屬性獲取的，該物件有8個屬性。

a. valueMissing屬性：必填的表單元素的值為空。如果表單元素設定了required特性，則表示必填，如果必填項為空，就無法通過表單的驗證，valueMissing屬性會返回true，否則反之。

b. typeMismatch屬性：輸入值與type型別不匹配。html5增加的表單型別email等，都包含一個原始的型別驗證，如果使用者輸入的內容與表單型別不符合，typeMismatch屬性將返回true，否則反之。

c. patternMismatch屬性：輸入值與pattern特性的正則不匹配。表單元素可通過pattern特性陣列正則表示式的驗證模式，如果輸入內容不符，patternMismatch將返回true，否則反之。

d. tooLong屬性：輸入的內容大小超過了表單的元素的maxLength特性限定的字元長度。如果超過tooLong屬性返回true，否則反之。

e. rangeOverflow屬性：輸入的值大於max特性的值。一般用於填寫數值的表單元素，也可能會使用max特性設定數值範圍的最大值，如果輸入的數值大於最大值，則rangeOverflow返回true，否則反之。

f. rangeUnderflow屬性，輸入的值小於min特性的值，上述雷同。

g. stepMismatch屬性，輸入的值不符合step特性所推算出的規則。不符為true，否則反之。

h. customError屬性，使用自定義的驗證錯誤提示資訊，在有些情況下不適合使用瀏覽器內建的驗證錯誤提示資訊，需要自定義，當輸入值不符合語義規則，頁面會提示自定義的錯誤資訊。

表單驗證的方法

1. checkValidity()方法，顯式驗證方法，每個表單元素都可以呼叫checkValidity()方法，它返回一個布林值，表示是否通過驗證。預設情況下，表單的驗證發生在表單提交時，如果使用checkValidity()方法，可以在需要的任何地方驗證表單。
2. setCustomValidity()方法，自定義錯誤提示資訊的方法。當預設的提示錯誤滿足不了需求時，可以通過該方法自定義錯誤提示。當通過此方法自定義錯誤提示資訊時，元素的validationMessage屬性值會更改為定義的錯誤提示資訊，同時ValidityState物件的customError屬性值變成true。

9.cookie,sessionStorage,localStorage

• cookie資料存放在客戶的瀏覽器上，session資料存放在伺服器上。
• cookie不是很安全，別人可以分析存放在本地的cookie並進行cookie欺騙。
• session會在一定時間內儲存在伺服器上，當訪問增加時，會佔用較多伺服器的資源。為了減輕伺服器的負擔，應當使用cookie在適當的情況下。
• 單個cookie儲存的資料不能超過4kb,很多瀏覽器都限制一個站點最多儲存20個cookie
• 建議將登陸資訊等重要內容存放在session中，其他可以存放在cookie中。
• cookie的數量和長度有限制，每個domain最多隻能有20條cookie，每個cookie的長度不能超過4kb,否則會被裁掉。
• 安全問題，如果cookie被別人攔截了，就可以取得所有的session資訊，即使加密也是沒有用，攔截者不需要知道cookie的意義，只要原樣轉發cookie就可以到達目的。
• 有些狀態不能儲存在客戶端。
• 通過良好的程式設計，控制儲存在cookie中的session物件的大小。
• 通過加密和安全傳輸技術ssl，降低cookie被破解的可能性。
• 只在cookie中存放不敏感資料，即使被盜也不會有重大的損失。
• 控制cookie的生命週期，使之不會永遠有效，資料偷盜者很可能得到一個過期的cookie。
• cookie最大為4096位元組，為了相容性，一般不能超過4095位元組。
• 每個特定的域名下最多生成20個cookie
• ie6或更低版本最多有20個cookie
• ie7和之後的版本最多可以有50個cookie
• firefox最多可以有50個cookie
• Chrome和Safari沒有硬性限制
• sessionStorage用於在本地儲存一個會話中的資料，這些資料只有同一個會話中的頁面才能訪問，當會話結束後，資料也隨之銷燬，因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。
• localStorage用於持久化本地儲存，除非主動刪除資料，否則資料一般是永久不會過期的。
• localStorage是為了更大容量的儲存設計的，cookie的大小是有受限制的，並且每次請求一個新頁面時，cookie都會被髮送過去，這無形中浪費了頻寬，cookie需要制定作用域，不可以跨域呼叫。

10.HTML5為瀏覽器提供了哪些資料儲存方案

在較高版本的瀏覽器中，提供了sessionStorage和globalStorage，在html5規範中localStorage取代了globalStorage。

應用程式快取：

• 離線瀏覽，讓使用者可在應用離線時使用它們。
• 速度，讓已快取資源載入更快。
• 減少伺服器負載，讓瀏覽器將指下載伺服器更新過的資源。

HTML5應用快取的目的是幫助使用者離線瀏覽頁面，如果網路連線不可用，開啟的頁面就來自瀏覽器快取，離線應用快取可以幫助使用者達到這個目的。

本地儲存資料持續永久，但是會話儲存在瀏覽器開啟時有效，在瀏覽器關閉時會話重置儲存資料。

提升網站的效能：

<!doctype html>
<html manifest="dadda.appcache">
</html>

11.如何實現瀏覽器內多個標籤頁之間的通訊

在標籤頁之間，呼叫localstorage,cookies等資料儲存，可以實現標籤頁之間的通訊。

12.Web Worker和webSocket的作用

WebSocket：它是web應用程式的傳輸協議，提供了雙向的，按序到達的資料流，它是html5新增的協議，WebSocket的連線是持久的，它在客戶端和伺服器之間保持雙工連線，伺服器的更新可以及時推送到客戶端，而不需要客戶端以一定的時間間隔去輪詢。

Web Worker：通過worker=new Worker(url)載入一個javascript檔案，建立一個Worker，同時返回一個Worker例項；用worker.postMessage(data)向Worker傳送資料；繫結worker.onmessage接收Worker傳送過來的資料；可以使用worker.terminate()終止一個Worker的執行。

13. HTML5新特性

拖放api，語義化更好的內容標籤，音訊，視訊，畫布，地理api等，本地離線儲存，會話儲存，表單控制元件。

嵌入音訊：

<audio controls>
 <source src="dada.mp3" type="audio/mpeg">
 dadaqianduan.cn
</audio>

嵌入視訊：

<video width="450" height="100" controls>
 <source src="dada.mp4" type="video/mp4">
 dadaqianduan.cn
</video>

新增表單屬性包括：datalist,datetime,output,keygen,date,month,week,time,number,range,emailurl

提供了很多新的api，包括Media API, Text Track API, Application Cache API, User Interaction API, Data Transfer API, Command API, Constraint Validation API, History API

14.如何區別html和html5

用DOCTYPE宣告新增的結構元素和功能元素來區別它們。

HTML5使用的字符集<meta charset="UTF-8">

15.HTML5 Canvas元素有什麼用

Canvas元素用於在網頁上繪製圖形，該元素標籤的強大之處在於可以直接在html上進行圖形操作。

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，我們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一起學習了)

我們下期見！

文章持續更新，可以微信搜一搜「 程式設計師哆啦A夢 」第一時間閱讀，回覆【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily