面試： H5新特性：十個新特性

時間 2020-06-22

標籤面試 h5 特性十個欄目快樂工作简体版

原文原文鏈接

面試： H5新特性：十個新特性

PS：比較全面，故不本身總結了，轉載自：http://www.javashuo.com/article/p-awzxiuzt-by.htmljavascript

html5總的來講比html4多了十個新特性，但其不支持ie8及ie8如下版本的瀏覽器html

1、語義標籤html5

2、加強型表單java

3、視頻和音頻git

4、Canvas繪圖web

5、SVG繪圖面試

6、地理定位正則表達式

7、拖放APIcanvas

8、WebWorker瀏覽器

9、WebStorage

10、WebSocket

1、語義標籤

html5語義標籤，可使開發者更方便清晰構建頁面的佈局

標籤	描述
<header>	定義了文檔的頭部區域
<footer>	定義了文檔的尾部區域
<nav>	定義文檔的導航
<section>	定義文檔中的節
<article>	定義文章
<aside>	定義頁面之外的內容
<details>	定義用戶能夠看到或者隱藏的額外細節
<summary>	標籤包含details元素的標題
<dialog>	定義對話框
<figure>	定義自包含內容，如圖表
<main>	定義文檔主內容
<mark>	定義文檔的主內容
<time>	定義日期/時間

2、加強型表單

html5修改一些新的input輸入特性，改善更好的輸入控制和驗證

輸入類型	描述
color	主要用於選取顏色
date	選取日期
datetime	選取日期(UTC時間)
datetime-local	選取日期（無時區）
month	選擇一個月份
week	選擇周和年
time	選擇一個時間
email	包含e-mail地址的輸入域
number	數值的輸入域
url	url地址的輸入域
tel	定義輸入電話號碼和字段
search	用於搜索域
range	一個範圍內數字值的輸入域

html5新增了五個表單元素

<datalist>	用戶會在他們輸入數據時看到域定義選項的下拉列表
<progress>	進度條，展現鏈接/下載進度
<meter>	刻度值，用於某些計量，例如溫度、重量等
<keygen>	提供一種驗證用戶的可靠方法生成一個公鑰和私鑰
<output>	用於不一樣類型的輸出好比尖酸或腳本輸出

html5新增表單屬性

屬性	描述
placehoder	輸入框默認提示文字
required	要求輸入的內容是否可爲空
pattern	描述一個正則表達式驗證輸入的值
min/max	設置元素最小/最大值
step	爲輸入域規定合法的數字間隔
height/wdith	用於image類型<input>標籤圖像高度/寬度
autofocus	規定在頁面加載時，域自動得到焦點
multiple	規定<input>元素中可選擇多個值

3、音頻和視頻

html5提供了音頻和視頻文件的標準，既使用<audio>元素。

音頻：<audio src=" "></audio>

<audio controls>    //controls屬性提供添加播放、暫停和音量控件。
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。        //瀏覽器不支持時顯示文字
</audio>

視頻：<video src=" "></video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標籤。
</video>

4、Canvas繪圖

https://www.runoob.com/w3cnote/html5-canvas-intro.html

5、SVG繪圖

什麼是SVG?

SVG指可伸縮矢量圖形

SVG用於定義用於網絡的基於矢量的圖形

SVG使用XML格式定義圖形

SVG圖像在放大或改變尺寸的狀況下其圖形質量不會有損失

SVG是萬維網聯盟的標準

SVG的優點

與其餘圖像格式相比，是喲個SVG的優點在於：

SVG圖像可經過文本編譯器來建立和修改

SVG圖像可被搜索、索引、腳本化或壓縮

SVG是可伸縮的

SVG圖像可在任何的分辨率下被高質量的打印

SVG可在圖像質量不降低的狀況下被放大

SVG與Canvas區別

*SVG適用於描述XML中的2D圖形的語言

*Canvas隨時隨地繪製2D圖形（使用javaScript）

*SVG是基於XML的，意味這能夠操做DOM，渲染速度較慢

*在SVG中每一個形狀都被當作是一個對象，若是SVG發生改變，頁面就會發生重繪

*Canvas是一像素一像素地渲染，若是改變某一個位置，整個畫布會重繪。

Canvas	SVG
依賴分辨率	不依賴分辨率
不支持事件處理器	支持事件處理器
可以以.png或.jpg格式保存結果圖像	複雜度會減慢搞渲染速度
文字呈現功能比較簡單	適合大型渲染區域的應用程序
最合適圖像密集的遊戲	不適合遊戲應用

6、地理定位

使用getCurrentPosition()方法來獲取用戶的位置。以實現「LBS服務」

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

7、拖放API

拖放是一種常見的特性，即捉取對象之後拖到另外一個位置。

在html5中，拖放是標準的一部分，任何元素都可以拖放。

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

當元素拖動時，咱們能夠檢查其拖動的數據。

<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
    console.log(ev);
}
</script>

拖動生命週期	屬性名	描述
拖動開始	ondragstart	在拖動操做開始時執行腳本
拖動過程當中	ondrag	只要腳本在被拖動就運行腳本
拖動過程當中	ondragenter	當元素被拖動到一個合法的防止目標時，執行腳本
拖動過程當中	ondragover	只要元素正在合法的防止目標上拖動時，就執行腳本
拖動過程當中	ondragleave	當元素離開合法的防止目標時
拖動結束	ondrop	將被拖動元素放在目標元素內時運行腳本
拖動結束	ondragend	在拖動操做結束時運行腳本

8、Web Worker

Web Worker能夠經過加載一個腳本文件，進而建立一個獨立工做的線程，在主線程以外運行。

基本使用：

Web Worker的基本原理就是在當前javascript的主線程中，使用Worker類加載一個javascript文件來開闢一個新的線程，

起到互不阻塞執行的效果，而且提供主線程和新縣城之間數據交換的接口：postMessage、onmessage。

javascript:

//worker.js
onmessage =function (evt){
  var d = evt.data;//經過evt.data得到發送來的數據
  postMessage( d );//將獲取到的數據發送會主線程
}

html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB頁主線程
var worker =new Worker("worker.js"); //建立一個Worker對象並向它傳遞將在新線程中執行的腳本的URL
worker.postMessage("hello world");     //向worker發送數據
worker.onmessage =function(evt){     //接收worker傳過來的數據函數
   console.log(evt.data);              //輸出worker發送來的數據
}
</script>
</head>
<body></body>
</html>

9、Web Storage

WebStorage是HTML新增的本地存儲解決方案之一，但並非取代cookie而指定的標準，cookie做爲HTTP協議的一部分用來處理客戶端和服務器的通訊是不可或缺的，session正式依賴與實現的客戶端狀態保持。WebSorage的意圖在於解決原本不該該cookie作，卻不得不用cookie的本地存儲。

websorage擁有5M的存儲容量，而cookie卻只有4K，這是徹底不能比的。

客戶端存儲數據有兩個對象，其用法基本是一致。

localStorage：沒有時間限制的數據存儲

sessionStorage:在瀏覽器關閉的時候就會清除。

localStorage.setItem(key,value);//保存數據
    let value = localStorage.getItem(key);//讀取數據
    localStorage.removeItem(key);//刪除單個數據
    localStorage.clear();//刪除全部數據
    let key = localStorage.key(index);//獲得某個索引的值

10、WebSocket

WebSocket協議爲web應用程序客戶端和服務端之間提供了一種全雙工通訊機制。

特色：

（1）握手階段採用HTTP協議，默認端口是80和443

（2）創建在TCP協議基礎之上，和http協議同屬於應用層

（3）能夠發送文本，也能夠發送二進制數據。

（4）沒有同源限制，客戶端能夠與任意服務器通訊。

（5）協議標識符是ws（若是加密，爲wss），如ws://localhost:8023

文章參考：

http://www.javashuo.com/article/p-uoqsyxos-bq.html

http://www.javashuo.com/article/p-esfpdxbu-g.html

https://www.jianshu.com/p/37c0b1eb4145