前端HTML5面試官和應試者一問一答

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

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

感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關注加我入羣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>

1. formmethod,formenctype,formnovalidate,formtarget特性：formmethod特性會覆蓋表單的method特性；formenctype特性可覆蓋表單的enctype；formnovalidate特性可覆蓋novalidate特性，formtarget特性能夠覆蓋表單的target特性。
2. placeholder特性，向用戶提示描述性的信息。
3. autofocus特性，用於全部類型的input元素，當頁面加載完成時，可自動獲取焦點，每一個頁面只容許出現一個有autofocus特性的input元素，若是設置多個，至關於未指定該行爲。
4. autocomplete特性：應用於form元素和輸入型的input元素，用於表單的自動完成。能夠autocomplete="on"，其能夠指定"on","off"和" " 不指定。
5. list特性和datalist元素，能夠爲某個可輸入的input元素定義一個選值列表。

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

<datalist id="emaillist">
 <option value="1@qq.com"> dada </option>
 <option value="2@qq.com"> dada2 </option>
</datalist>

1. keygen元素：提供了一種安全的方式來驗證用戶，該元素有密鑰生成的功能，在提交表單時，會分別生成一個私人密鑰和一個公共密鑰，私人密鑰保存在客戶端，公共密鑰則經過網絡傳輸至服務器。

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

1. 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爲郵政編碼"/>

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

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

1. willValidate屬性，用於獲取一個布爾值，表示表單元素是否須要驗證，若是表單元素設置了required特性或pattern特性，則willValidate屬性爲true，即表單的驗證將執行。

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

1. 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(達達前端)，感謝各位人才的：點贊、收藏和評論，咱們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一塊兒學習了)

咱們下期見！

文章持續更新，本文 http://www.dadaqianduan.cn/#/ 已經收錄

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