1.3 HTML5 · 前端面試知識點總結

# HTML5 HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。 > 中文網頁需要使用 `<mate charset="utf-8">` 進行聲明。 ## HTML5 新特性 1. 繪畫 canvas。 2. 用于媒介回放的 video 和 audio 元素。 3. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失。 4. sessionStorage 的數據在瀏覽器關閉后自動刪除。 5. 語意化更好的內容元素，比如 article、footer、header、nav、section。 6. 表單控件，calendar、date、time、email、url、search。 7.新的技術webworker, websocket, Geolocation。 ## HTML5 移除的元素 1. 純表現的元素：basefont，big，center，font, s，strike，tt，u。 2. 對可用性產生負面影響的元素：frame，frameset，noframes。 ## HTML5 新元素 header, section, footer, aside, nav, main, article, figure等。 > 這些新元素都是塊級元素。 > 更多新元素參考：[http://www.runoob.com/html/html5-new-element.html](http://www.runoob.com/html/html5-new-element.html) ## 添加自定義元素 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>為 HTML 添加新元素</title> <script> document.createElement("myHero") </script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <myHero>我的第一個新元素</myHero> </body> </html> ``` ## canvas > [canvas參考手冊](http://www.runoob.com/tags/ref-canvas.html) HTML5 canvas 元素用于圖形的繪制，通過腳本 (通常是 JavaScript )來完成. canvas 標簽只是圖形容器，您必須使用腳本來繪制圖形。你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。例如： ```javascript var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); ``` ### 漸變 createLinearGradient(x,y,x1,y1) -> 創建線條漸變 createRadialGradient(x,y,r,x1,y1,r1) -> 創建一個徑向/圓漸變 ### 文字 font -> 定義字體和大小 fillText(text,x,y) -> 在 canvas 上繪制實心的文本 strokeText(text,x,y) -> 在 canvas 上繪制空心的文本font - 定義字體 fillText(text,x,y) -> 在 canvas 上繪制實心的文本 strokeText(text,x,y) -> 在 canvas 上繪制空心的文本 ### 路徑（直線） moveTo(x,y) 定義線條開始坐標。 lineTo(x,y) 定義線條結束坐標。 ### 圖像 drawImage(image,x,y) ## SVG SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)。 SVG 用于定義用于網絡的基于矢量的圖形。 SVG 使用 XML 格式定義圖形。 SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失。 SVG 是萬維網聯盟的標準。 ### SVG優勢與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在于： - SVG 圖像可通過文本編輯器來創建和修改 - SVG 圖像可被搜索、索引、腳本化或壓縮 - SVG 是可伸縮的 - SVG 圖像可在任何的分辨率下被高質量地打印 - SVG 可在圖像質量不下降的情況下被放大 ### svg 標簽 ```html <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> ``` ### SVG 與 Canvas兩者間的區別 SVG 是一種使用 XML 描述 2D 圖形的語言。 Canvas 通過 JavaScript 來繪制 2D 圖形。 SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。 Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。 ## MathML > [參考文章](http://www.runoob.com/html/html5-mathml.html) ## 拖放（drag & drop） > [參考文章](http://www.runoob.com/html/html5-draganddrop.html) ## 更多類型的 input > [參考文章](http://www.runoob.com/html/html5-form-input-types.html) ## Page Visibility API ### document.hidden 返回表示頁面是否隱藏的布爾值。 ### document.visibilityState 有下面 4 個可能狀態的值： 1. hidden：頁面在后臺標簽頁中或者瀏覽器最小化 2. visible：頁面在前臺標簽頁中 3. prerender：頁面在屏幕外執行預渲染處理 document.hidden 的值為 true 4. unloaded：頁面正在從內存中卸載 ### Visibilitychange事件當文檔從可見變為不可見或者從不可見變為可見時，會觸發該事件。這樣，我們可以監聽 Visibilitychange 事件，當該事件觸發時，獲取 document.hidden 的值，根據該值進行頁面一些事件的處理。 ## 離線存儲在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。離線的情況下，瀏覽器就直接使用離線存儲的資源。 ## HTML5 兼容 1. IE8/IE7/IE6支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式。 2. 直接使用成熟的框架、比如 [html5shim](https://www.bootcdn.cn/html5shiv/)。例如： ```html  ``` > 以上代碼是一個注釋，作用是在 IE 瀏覽器的版本小于 IE9 時將讀取 html5.js 文件，并解析它。另外，以上代碼必須放在 head 中。 ## 如何區分HTML5 - DOCTYPE聲明 - 新增的結構元素 - 功能元素