主頁 > 知識庫 > 前端面試必備之html5的新特性

前端面試必備之html5的新特性
熱門標簽：鶴壁手機自動外呼系統(tǒng)怎么安裝 濟南辦理400電話 威海營銷外呼系統(tǒng)招商 中紳電銷智能機器人 農村住宅地圖標注 跟電銷機器人做同事 ai電銷機器人連接網關 漳州人工外呼系統(tǒng)排名 鄭州電銷外呼系統(tǒng)違法嗎

前言

什么是HTML5:HTML5 是下一代的HTML,將成為 HTML、XHTML 以及 HTML DOM 的新標準。今天來談談前端面試中基本上每次一面的時候都會被問到的一個問題，那就是html5的新特性。這個是學習前端必須掌握的基礎知識。

新增的元素

html5新增了一些語義化更好的標簽元素。

結構元素

  1. article元素，表示頁面中的一塊與上下文不相關的獨立內容，比如博客中的一篇文章。
  2. aside元素，表示article內容之外的內容，輔助信息。
  3. header元素，表示頁面中一個內容區(qū)塊或整個頁面的頁眉。
  4. hgroup元素，用于對頁面中一個區(qū)塊或整個頁面的標題進行組合。
  5. footer元素，表示頁面中一個內容區(qū)塊或整個頁面的頁腳。
  6. figure元素，表示媒介內容的分組，以及它們的標題。
  7. section元素，表示頁面中一個內容區(qū)塊，比如章節(jié)。
  8. nav元素，表示頁面中的導航鏈接。

其他元素

  1. video元素，用來定義視頻。
  2. audio元素，用來定義音頻。
  3. canvas元素，用來展示圖形，該元素本身沒有行為，僅提供一塊畫布。
  4. embed元素，用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等。
  5. mark元素，用來展示高亮的文字。
  6. progress元素，用來展示任何類型的任務的進度。
  7. meter元素，表示度量衡，定義預定義范圍內的度量。
  8. time元素，用來展示日期或者時間。
  9. command元素，表示命令按鈕。
  10. details元素，用來展示用戶要求得到并且可以得到的細節(jié)信息。
  11. summary元素，用來為details元素定義可見的標題。
  12. datalist元素，用來展示可選的數(shù)據(jù)列表，與input元素配合使用，可以制作出輸入值的下拉列表。
  13. datagrid元素，也用來展示可選的數(shù)據(jù)列表，以樹形列表的形式來顯示。
  14. keygen元素，表示生成密匙。
  15. output元素，表示不同類型的輸出。
  16. source元素，為媒介元素定義媒介資源。
  17. menu元素，表示菜單列表。
  18. ruby元素，表示ruby注釋， rt元素表示字符的解釋或發(fā)音。 rp元素在ruby注釋中使用，以定義不支持ruby元素的瀏覽器所顯示的內容。
  19. wbr元素，表示軟換行。與br元素的區(qū)別是：br元素表示此處必須換行，而wbr元素的意思是瀏覽器窗口或父級元素的寬度夠寬時。不進行換行，而當寬度不夠時，主動在此處進行換行。
  20. bdi元素，定義文本的文本方向，使其脫離其周圍文本的方向設置。
  21. dialog元素，表示對話框或窗口。

廢除的元素

html5中廢除了一些純表現(xiàn)的元素，只有部分瀏覽器支持的元素還有一些會對可用性產生負面影響的元素。

純表現(xiàn)元素

純表現(xiàn)的元素就是那些可以用css替代的元素。basefont、big、center、font、s、strike、tt、u這些元素，他們的功能都是純粹為頁面展示服務的，html5提倡把頁面展示性功能放在css樣式表中統(tǒng)一處理，所以將這些元素廢除，用css樣式進行替代。

對可用性產生負面影響的元素

對于frameset元素、frame元素與noframes元素，由于frame框架對網頁可用性存在負面影響，在html5中已不支持frame框架，只支持iframe框架，html5中同時將frameset、frame和noframes這三個元素廢除。

只有部分瀏覽器支持的元素

對于applet、bgsound、blink、marquee等元素，由于只有部分瀏覽器支持，特別是bgsound元素以及marquee元素，只被IE支持，所以在html5中被廢除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由javascript編程的方式替代。

新增的API

Canvas API

上文提到的canvas元素可以為頁面提供一塊畫布來展示圖形。結合Canvas API，就可以在這塊畫布上動態(tài)生成和展示各種圖形、圖表、圖像以及動畫了。Canvas本質上是位圖畫布，不可縮放，繪制出來的對象不屬于頁面DOM結構或者任何命名空間。不需要將每個圖元當做對象存儲，執(zhí)行性能非常好。

利用Canvas API進行繪圖，首先要獲取canvas元素的上下文，然后用該上下文中封裝的各種繪圖功能進行繪圖。

<canvas id="canvas">替代內容</canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context =canvas.getContext("2d"); // 獲取上下文
    //設置純色
    context.fillStyle = "red";
    context.strokeStyle = "blue";
    // 實踐表明在不設置fillStyle下的默認fillStyle為black
    context.fillRect(0, 0, 100, 100);
    // 實踐表明在不設置strokeStyle下的默認strokeStyle為black
    context.strokeRect(120, 0, 100, 100);
</script>

SVG

SVG是html5的另一項圖形功能，它是一種標準的矢量圖形，是一種文件格式，有自己的API。html5引入了內聯(lián)SVG，使得SVG元素可以直接出現(xiàn)在html標記中。

<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>

音頻和視頻

audio和video元素的出現(xiàn)讓html5的媒體應用多了新選擇，開發(fā)人員不必使用插件就能播放音頻和視頻。對于這兩個元素，html5規(guī)范提供了通用、完整、可腳本化控制的API。
html5規(guī)范出來之前，在頁面中播放視頻的典型方式是使用Flash、QuickTime或者Windows Media插件往html中嵌入音頻視頻，相對這種方式，使用html5的媒體標簽有兩大好處。

  1. 作為瀏覽器原生支持的功能，新的audio和video元素無需安裝。
  2. 媒體元素想Web頁面提供了通用、集成和可腳本化控制的API。
<video src="video.webm" controls>
    <object data="videoplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="video.swf" />
    </object>
    Your browser does not support HTML5 video.
</video>

瀏覽器支持性檢測

瀏覽器檢測是否支持audio元素或者video元素最簡單的方式是用腳本動態(tài)創(chuàng)建它，然后檢測特定函數(shù)是否存在。

var hasVideo = !!(document.createElement('video').canPlayType);

Geolocation API

html5的Geolocation API（地理定位API），可以請求用戶共享他們的位置。使用方法非常簡單，如果用戶同意，瀏覽器就會返回位置信息，該位置信息是通過支持html5地理定位功能的底層設備（如筆記本電腦或手機）提供給瀏覽器的。位置信息由緯度、經度坐標和一些其他元數(shù)據(jù)組成。

位置信息從何而來

Geolocation API不指定設備使用哪種底層技術來定位應用程序的用戶。相反，它只是用于檢索位置信息的API，而且通過該API檢索到的數(shù)據(jù)只具有某種程度的準確性，并不能保證設備返回的位置是精確的。設備可以使用下列數(shù)據(jù)源：

  1. IP地址
    三維坐標
    GPS
    從RFID、WiFi和藍牙到WiFi的MAC地址
  2. GSM或CDMA手機的ID
  3. 用戶自定義數(shù)據(jù)
     

使用方法

// 一次更新
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
function updateLocation(position) {
    var latitude = position.coords.latitude;     // 緯度
    var longitude = position.coords.longitude;   // 經度
    var accuracy = position.coords.accuracy;     // 準確度
    var timestamp = position.coords.timestamp;   // 時間戳
}
// 錯誤處理函數(shù)
function handleLocationEror(error) {
    ....
}
// 重復更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再接受位置更新
navigator.geolocation.clearWatch(watchId);

Communication API

跨文檔消息傳遞

出于安全方面的考慮，運行在同一瀏覽器中的框架、標簽頁、窗口間的通信一直都受到了嚴格的限制。然而，現(xiàn)實中存在一些合理的讓不同站點的內容能在瀏覽器內進行交互的需求。這種情形下，如果瀏覽器內部能提供直接的通信機制，就能更好地組織這些應用。
 

html5中引入了一種新功能，跨文檔消息通信，可以確保iframe、標簽頁、窗口間安全地進行跨源通信。postMessage API為發(fā)送消息的標準方式，發(fā)送消息非常簡單：

window.postMessage('Hello, world', 'http://www.example.com/');

接收消息時，僅需在頁面中增加一個事件處理函數(shù)。當某個消息到達時，通過檢查消息的來源來決定是否對這條消息進行處理。

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
        // 處理消息
        processMessage(e.data);
        break;
    default: 
        // 消息來源無法識別
        // 消息被忽略
    }
}

消息事件是一個擁有data(數(shù)據(jù))和origin(源)屬性的DOM事件。data屬性是發(fā)送方傳遞的實際消息，而origin屬性是發(fā)送來源。

XMLHttpRequest Level2

XMLHttpRequest API使得Ajax技術成為可能，作為XMLHttpRequest的改進版，XMLHttpRequest Level2在功能上有了很大的改進。主要兩個方面：

  1. 跨源XMLHttpRequest
  2. 進度事件

跨源XMLHttpRequest

過去，XMLHttpRequest僅限于同源通信，XMLHttpRequest Level2通過CORS實現(xiàn)了跨源XMLHttpRequest。跨源HTTP請求包含一個Origin頭部，它為服務器提供HTTP請求的源信息。

WebSockets API

WebSockets是html5中最強大的通信功能，它定義了一個全雙工通信信道，僅通過Web上的一個Socket即可進行通信。

WebSockets握手

為了建立WebSockets通信，客戶端和服務器在初始握手時，將HTTP協(xié)議升級到WebSocket協(xié)議。一旦連接建立成功，就可以在全雙工模式下在客戶端和服務器之間來回傳遞WebSocket消息。

WebSockets接口

除了對WebSockets協(xié)議定義外，該規(guī)范還同時定義了用于JavaScript應用程序的WebSocket接口。WebSockets接口的使用很簡單。要連接遠程主機，只需要新建一個WebSocket實例，提供希望連接的對端URL。

Forms API

新表單元素

  1. tel元素，表示電話號碼。
  2. email元素，表示電子郵件地址文本框。
  3. url元素，表示網頁的url。
  4. search元素，用于搜索引擎，比如在站點頂部顯示的搜索框。
  5. range元素，特定值范圍內的數(shù)值選擇器，典型的顯示方式是滑動條。
  6. number元素，只包含數(shù)值的字段。

未來的表單元素

  1. color元素，顏色選擇器，基于調色盤或者取色板進行選擇。
  2. datetime元素，顯示完整的日期和時間，包括時區(qū)。
  3. datetime-local，顯示日期和時間。
  4. time元素，不含時區(qū)的時間選擇器和指示器。
  5. date元素，日期選擇器。
  6. week元素，某年中的周選擇器。
  7. month元素，某年中的月選擇器。

新的表單特性和函數(shù)

placeholder

當用戶還沒輸入值的時候，輸入型控件可以通過placeholder特性向用戶顯示描述性說明或者提示信息。

<input name="name" placeholder="First and last name">

autocomplete

瀏覽器通過autocomplete特性能夠知曉是否應該保存輸入值以備將來使用。

autofocus

通過autofocus特性可以指定某個表單元素獲得輸入焦點，每個頁面上只允許出現(xiàn)一個autofocus特性，如果設置了多個，則相當于未指定此行為。

spellcheck

可對帶有文本內容的輸入控件和textarea空間控制spellcheck屬性。設置完后，會詢問瀏覽器是否應該給出拼寫檢查結果反饋。spellcheck屬性需要賦值。

list特性和datalist元素

通過組合使用list特性和datalist元素，開發(fā)人員能夠為某個輸入型控件構造一張選值列表。

<datalist id="contactList">
    <option value="a@qq.com"></option>
    <option value="b@qq.com"></option>
</datalist>
<input type="email" id="contatcs" list="contactList">

min和max

通過設置min和max特性，可以將range輸入框的數(shù)值輸入范圍限定在最低值和最高值之間?？梢灾辉O置一個，也可以兩個都設置，也可以都不設置。

step

對于輸入型控件，設置其step特性能夠指定輸入值遞增或者遞減的粒度。

required

一旦為某輸入型控件設置了required特性，那么此項必填，否則無法提交表單。

拖放API

draggable屬性

如果網頁元素的draggable元素為true，這個元素就是可以拖動的。

<div draggable="true">Draggable Div</div>

拖放事件

拖動過程會觸發(fā)很多事件，主要有下面這些：

  1. dragstart：網頁元素開始拖動時觸發(fā)。
  2. drag：被拖動的元素在拖動過程中持續(xù)觸發(fā)。
  3. dragenter：被拖動的元素進入目標元素時觸發(fā)，應在目標元素監(jiān)聽該事件。
  4. dragleave：被拖動的元素離開目標元素時觸發(fā)，應在目標元素監(jiān)聽該事件。
  5. dragover：被拖動元素停留在目標元素之中時持續(xù)觸發(fā)，應在目標元素監(jiān)聽該事件。
  6. drap：被拖動元素或從文件系統(tǒng)選中的文件，拖放落下時觸發(fā)。
  7. dragend：網頁元素拖動結束時觸發(fā)。
draggableElement.addEventListener('dragstart', function(e) {
    console.log('拖動開始！');
});

dataTransfer對象

拖動過程中，回調函數(shù)接受的事件參數(shù)，有一個dataTransfer屬性，指向一個對象，包含與拖動相關的各種信息。

draggableElement.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text', 'Hello World!');
});

dataTransfer對象的屬性有：

  1. dropEffect：拖放的操作類型，決定了瀏覽器如何顯示鼠標形狀，可能的值為copy、move、link和none。
  2. effectAllowed：指定所允許的操作，可能的值為copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默認值，等同于all，即允許一切操作）。
  3. files：包含一個FileList對象，表示拖放所涉及的文件，主要用于處理從文件系統(tǒng)拖入瀏覽器的文件。
  4. types：儲存在DataTransfer對象的數(shù)據(jù)的類型。

dataTransfer對象的方法有：

  1. setData(format, data)：在dataTransfer對象上儲存數(shù)據(jù)。第一個參數(shù)format用來指定儲存的數(shù)據(jù)類型，比如text、url、text/html等。
  2. getData(format)：從dataTransfer對象取出數(shù)據(jù)。
  3. clearData(format)：清除dataTransfer對象所儲存的數(shù)據(jù)。如果指定了format參數(shù)，則只清除該格式的數(shù)據(jù)，否則清除所有數(shù)據(jù)。
  4. setDragImage(imgElement, x, y)：指定拖動過程中顯示的圖像。默認情況下，許多瀏覽器顯示一個被拖動元素的半透明版本。參數(shù)imgElement必須是一個圖像元素，而不是指向圖像的路徑，參數(shù)x和y表示圖像相對于鼠標的位置。

Web Workers API

Javascript是單線程的。因此，持續(xù)時間較長的計算，回阻塞UI線程，進而導致無法在文本框中填入文本，單擊按鈕等，并且在大多數(shù)瀏覽器中，除非控制權返回，否則無法打開新的標簽頁。該問題的解決方案是Web Workers，可以讓Web應用程序具備后臺處理能力，對多線程的支持性非常好。

但是在Web Workers中執(zhí)行的腳本不能訪問該頁面的window對象，也就是Web Workers不能直接訪問Web頁面和DOM API。雖然Web Workers不會導致瀏覽器UI停止響應，但是仍然會消耗CPU周期，導致系統(tǒng)反應速度變慢。

Web Storage API

Web Storage是html5引入的一個非常重要的功能，可以在客戶端本地存儲數(shù)據(jù)，類似html4的cookie，但可實現(xiàn)功能要比cookie強大的多。

sessionStorage

sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關閉數(shù)據(jù)就消失。

localStorage

localStorage則一直將數(shù)據(jù)保存在客戶端本地，除非手動刪除，否則一直保存。
 

不管是sessionStorage，還是localStorage，可使用的API相同，常用的有如下幾個（以localStorage為例）：

  1. 保存數(shù)據(jù)：localStorage.setItem(key,value);
  2. 讀取數(shù)據(jù)：localStorage.getItem(key);
  3. 刪除單個數(shù)據(jù)：localStorage.removeItem(key);
  4. 刪除所有數(shù)據(jù)：localStorage.clear();
  5. 得到某個索引的key：localStorage.key(index);

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

標簽：文山 甘南 紅河 惠州 咸陽 營口 蘇州 萍鄉(xiāng)

巨人網絡通訊聲明：本文標題《前端面試必備之html5的新特性》，本文關鍵詞  前端,面試,必備,之,html5,；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《前端面試必備之html5的新特性》相關的同類信息！
  • 本頁收集關于前端面試必備之html5的新特性的相關信息資訊供網民參考！
    • 推薦文章