[禿破前端面試] —— HTML5

時間 2020-02-20

原文原文鏈接

前言

年前年後跳槽季，準備從面試內容入手看看前端相關知識點，旨在探究一個系列知識點，能力範圍以內的深刻探究一下。重在實踐，針對初級前端和準備面試的同窗，爭取附上實際的代碼例子以及相關試題～系列名字就用【禿破前端面試】—— 由於圈內你們共識，技術與髮量成正比。😄但願你們早日禿破瓶頸html

關於面試題或者某個知識點的文章太多了，這裏筆者只是想把我的的總結用代碼倉庫的形式記錄下來並輸出文章，畢竟理論不等於實踐，知其然也要知其因此然，實踐用過才能真正理解～前端

相關係列文章：html5

什麼是 HTML5

HTML的發展歷程以下：git

產生於1990年
1997年 HTML4 出現，成爲互聯網開發的標準
2008年，HTML5正式出現，2002年趨於穩定

HTML在發展過程當中，HTML4.01 版本維持了長達十年的時間，以後 HTML5 標準纔出現，它被認爲是下一代互聯網標準。咱們今天 Web 開發關於 HTML 內容相關的，絕大部分都是基於 HTML5 標準來進行開發的。github

下面是一個最基本的 HTML5 頁面代碼：web

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
複製代碼

全部<!DOCTYPE html>頭的 .html 文件，瀏覽器都會使用 HTML5 標準來解析。而若是是 HTML4.01，它的頭部代碼則是以下三種：面試

HTML4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
複製代碼

HTML4.01 Traditional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
複製代碼

HTML4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
複製代碼

這是由於，HTML4.01 是基於 SGML，須要聲明 DTD 標記語言規則，瀏覽器才能夠正常解析頁面代碼。而 HTML5 不是基於 SGML 標準，因此不須要聲明 DTD，直接` 便可。跨域

HTML5「新」特性

這裏給新打上引號是由於，說它新可是也確實不新了，畢竟也出現十多年了，並且如今大部分的特性API都已經被開發使用的差很少了。可是說它不新吧也不太對，由於 HTML5 裏面不少 API 都是特性場景特定功能，若是隻是通常開發簡單的前端頁面，那麼大部分是不會用到的，因此不少人也不怎麼了解。所以，在這裏就根據實際代碼來基本瞭解一下，避免被某些專項開發問住，至少不至於一點也不知道～瀏覽器

語義化標籤

這個不須要多用語言文字說明，咱們來簡單實現一下以下圖所示的佈局代碼。緩存

第一種：原始標籤佈局

<div class="header">Header</div>
  <div class="nav">Nav</div>
  <div class="body">
    <div class="article">
      Article
      <div class="section">
        Section
      </div>
    </div>
    <div class="aside">
      Aside
    </div>
  </div>
<div class="footer">Footer</div>
複製代碼

第二種：語義化標籤佈局

<header>Header</header>
  <nav>Nav</nav>
  <div class="body">
    <article>
      Article
      <section>Section</section>
    </article>
    <aside>Aside</aside>
  </div>
<footer>Footer</footer>
複製代碼

看完上面兩種寫法相信大部分人仍是會常用第一種吧。兩種寫法孰優孰劣其實很難判定，由於單單從性能上來講可能並無太多區別，而第一種又比較習慣，寫起來比較快，可是語義化標籤具備以下優勢：

比全部佈局所有采用 div 標籤閱讀起來更清晰
利於 SEO，方便搜索引擎識別頁面結構 - 這也是很是重要的
方便設備解析，好比盲人閱讀，語義化標籤比 div 標籤要好不少

HTML5 標籤還有不少個，具體解釋釋義你們能夠去查看，對應地址：HTML5標籤。

表單功能加強

HTML5 對錶單功能進行了加強，input 標籤能夠輸入各類類型從而渲染相應的表單內容。具體以下所示：

<form action="" method="get">
    <p>郵箱標籤: <input type="email"></p>
    <p>數字標籤: <input type="number"></p>
    <p>滑動條標籤: <input type="range"></p>
    <p>搜索框標籤: <input type="search"></p>
    <p>日期框: <input type="date"></p>
    <p>星期框: <input type="week"></p>
    <p>月份框: <input type="month"></p>
    <p>顏色框: <input type="color"></p>
    <p>網址框: <input type="url"></p>
    <div>
      <input type="submit">
      <input type="reset">
    </div>
</form>
複製代碼

能夠看到，都是 input 標籤，可是渲染出來的是不一樣類型的頁面元素。除此以外，HTML5 對 form 表單還進行了內置屬性的加強。好比通用屬性 placeholder、autofocus，再好比若是是 number 類型，則能夠設置 min 和 max 屬性，若是是 password 類型，則能夠設置 minLength 和 maxLength 屬性。

更多相關屬性，請查閱HTML5 表單

音頻/視頻

音頻/視頻是 HTML5 提供的關鍵 API，由於在 HTML5 以前，瀏覽器支持音視頻方案都是經過 Flash 來實現的，相信不少人都知道，遠古的頁面確實嵌套着不少 Flash 插件。HTML5 的音頻視頻方案具體有以下優勢：

瀏覽器原生支持

<audio src="./media/luffy.mp3" controls="controls">
    本網頁不支持媒體標籤
</audio>
複製代碼

上面代碼，就直接嵌入了一段音頻在網頁上，而且增長了控制器，很是便捷。視頻選項也同樣，只不過換成了<video>標籤。

能夠設置多類型音視頻，兼容性良好

<audio controls="controls">
    <source src="./media/luffy.ogg"></source>
    <source src="./media/luffy.mp3"></source>
    本網頁不支持媒體標籤
</audio>
複製代碼

媒體標籤內部，還能夠經過<source>標籤來進行多種類型的兼容，好比低版本 IE 不支持 mp3 文件，那麼咱們就能夠經過上面的代碼來進行低版本瀏覽器的兼容，點擊播放按鈕，瀏覽器就會從上至下解析，直到解析成功，若是不成功，則顯示不支持媒體標籤，以下圖所示：

能夠看到，第一個播放的是 mp3 文件，第二個播放的是 ogg 文件。

畫布 — Canvas

關於 Canvas 這裏不想多說，由於這個地方太專業了，若是隻是問你知不知道那麼你必定知道，可是不常用繪圖 API 的話也講不太清楚細節，所以此處留做之後單獨講解。以後可能會單獨列出來 Canvas 各個 API 的詳細用法以及相關試題。

拖放

本地存儲

HTML5 的本地存儲新增了一些，好比 Storage 和 manifest 離線緩存。以前前端本地存儲都是經過 cookie 來進行的。

Storage

分爲 LocalStorage 和 SessionStorage，具體的相信你們都很清楚，也常常被問到，因此就很少作解釋了。真的爛大街了，我再寫也是浪費彼此時間。

Cache Manifest

應用程序緩存爲應用帶來三個優點：

離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減小服務器負載 —— 瀏覽器將只從服務器下載更新過或更改過的資源。

下面簡單來設置一下，以下圖所示，在有網絡的時候加載一個圖片連接，而後將網絡設置成離線，該連接就不可訪問了。

設置一下離線緩存，新建manifest.appcache，這裏的後綴名是官方建議的。具體能夠查看此處HTML5 應用緩存，而後寫入以下內容：

CACHE MANIFEST
https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3097378621,1517430839&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=7dcb802bd45e50b25868fc4d1302ffdc
複製代碼

裏面對應的內容就是咱們但願緩存的圖片線上地址，而後咱們在有網的時候訪問一下，再關閉網絡，刷新頁面就會發現圖片能夠正常展現，而且從圖中能夠看出，加載的圖片就變成了從 cache 裏獲取。

Web Worker

咱們都知道，HTMl 代碼的執行順序是從上而下，單線程執行，因此當瀏覽器執行到某個 js 腳本的時候，頁面的狀態是不可被響應的，也就是會阻塞。而 Web Worker 是運行在後臺的 JavaScript，它獨立於其餘腳本，不會影響頁面的性能。也就是說，相似於多線程，給 Worker 的腳本代碼開了另外一個線程來執行，通常來講配合 HTML5 的 postMessage 來進行與主頁面的交流。

Web Worker 看起來很是簡單，可是實際使用很是高深，用得好能夠提高應用性能，用得很差則不少餘。我實際上沒怎麼用過，因此這裏就簡單介紹一下。

// worker.js
var i=0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()", 500);
}

timedCount();
複製代碼

// webworker.html

<script>
    var w;
    
    function startWorker() {
      if (typeof (Worker) !== "undefined") {
        if (typeof (w) == "undefined") {
          w = new Worker("webworker.js");
        }
        w.onmessage = function (event) {
          document.getElementById("result").innerHTML = event.data;
        };
      }
      else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
      }
    }
    
    function stopWorker() {
      w.terminate();
    }
</script>
複製代碼

具體效果如上圖所示，這裏須要注意的是，本地文件是沒法訪問到 worker.js 的，若是想要使用，須要起一個小服務才行。

其餘內容

除了上面幾個大塊知識點，HTML5 還有幾個其餘 API，這些知識點在某些方面很是的有用，因此在這裏也就簡單說明一下。

地理定位

HTML5 還提供了地理定位功能，這個就是個封裝 API，因此沒什麼可說的。

<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>
複製代碼

datalist

這個屬性也是很是好用的，只不過咱們常用別人已經封裝好的 UI 組件，因此就沒怎麼用過，此標籤就是 HTML5 封裝的 Select API。

<input id="myCar" list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>
複製代碼

上面代碼表示，此標籤須要與input使用，而後呈現下拉框與選項，實際效果以下圖所示：

此功能也是很是值得二次開發的～

可編輯內容

這個屬性牛逼的不行，也是全部主流瀏覽器都支持的，而且它被普遍的應用，好比不少網頁編輯器，內容切換編輯狀態等等，均可以經過這個屬性來實現。

<div class="edit" contenteditable='true'></div>
複製代碼

以下圖所示：

div 標籤變成了可編輯的狀態，此屬性被不少頁面編輯器所應用。很是好用，值得你們二次開發～

跨域

此處知識點也就是 postMessage 和 WebSocket 兩個，這兩個詳細在另外一篇文章，能夠去查看～

前端跨域總結

總結

這就是我總結的前端新三劍客之一 —— HTML5 的一些特性使用方法，相信在面試過程當中，若是被面試官問到你瞭解的 HTML5 新特性，能夠拿來應付一下～

相關代碼地址：禿破前端面試系列代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。