全方面了解html5特點「html5技術有哪些新特性」

語義化就是讓計算機能夠快速讀懂內容，高效的處理信息。搜索引擎只能通過標籤來判斷內容的語義，因為頁面的很大一部分流量來自搜索引擎，要使頁面儘可能地對搜索引擎友好，所以儘可能地使用語義化標籤，如：

div是division分離，span是span範圍，table是表格，ol是orderList有序列表，ul是unorderList無序列表，li是list item列表選項，html5進一步推進web語義化的發展，使用了一些新的標籤有header、artical、address等。

2、HTML標籤分類有哪些？都有啥特點?

塊級標籤

默認寬度是100%

塊級標籤獨佔一行

塊級標籤可以使用height設置高度

常見塊級標籤：div、p、h1~h6、ol、ul、table、form等等。

行級標籤

默認寬度由內容撐開

行級標籤不會自動換行，從左到右一次排列

行級標籤height設置高度失效，高度由內容撐開。

常見行級標籤：span、a、br、strong、lable、i、em。

行內塊標籤

結合行級和塊級的優點

可以設置元素的寬高

還可以將多個元素顯示在一行從左到右一次排列。

常見行內塊標籤：img、input。

3、網頁編碼設置有幾種方式？

Charset屬性規定HTML文檔的字符編碼，常見的屬性值有以下幾個：

UTF-8(8-bit Unicode Transformation Format)是一種針對Unicode的可變長度字符編碼，又稱萬國碼。用在網頁上可以同一頁面顯示中文簡體繁體以及其他語言。
GBK是漢字編碼，是雙字節碼，可表示簡體和繁體字。
ISO8859-2字符集，也稱Latin-2，收集了東歐字符。

4、HTML的框架優缺點有哪些？

Html框架有iframe和frame兩個，將多個頁面通過一個瀏覽器窗口顯示。

框架的優點：

重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁，減少數據傳輸，加快網頁加載速度。
Iframe使用簡單不需要引入任何插件，主要用於不需要搜索引擎搜索的頁面。
方便製作導航，多個頁面共用，方便開發和維護。

缺點：

會產生很多頁面，不容易管理。
不方便打印，不能實現對frameset的打印。
瀏覽器後退按鈕失效。
不利於SEO優化，不能為每個頁面設置標題和關鍵字，影響搜索。
多數小型移動設備無法完全顯示框架。
多框架頁面會增加服務器的http請求。
H5已經拋棄該標籤。

5、HTML5有哪些新特性，移除了哪些元素？

H5新增了圖像、位置、存儲、多任務等功能。

新增元素：

Canvas
video和audio元素
本地離線緩存：localStorage長期存儲，瀏覽器關閉之後數據不丟失，sessionStorage的數據在瀏覽器關閉後自動刪除。
語義化標籤：artical、footer、header、nav、section
位置API：Geolocation
表單控件：calendar、date、time、email、search、url
新技術：web worker(運行在後台的js,獨立於其他腳本，不影響頁面性能。可以在頁面繼續任何操作，此時web worker在後台運行)、web socket
拖放API：drag、drop

移除元素：

框架元素：frame、frameset、noframes。
純表現元素：basefont、font、center、u、big、strike、tt

Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標準規範，把 HTML5 的元素按優先級定義為結構性屬性、級塊性元素、行內語義性元素和交互性元素 4 大類。

6、如何區分HTML和HTML5？

DOCUMENT聲明方式是區分的重要元素。

Html聲明方式：<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Html5聲明方式：<!DOCTYPE html>

根據新增加的結構、功能來區分。H5有好多新增語義化標籤。

7、H5文件離線存儲怎麼使用，工作原理是什麼？

在線情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問那麼瀏覽器就會根據manifest文件的內容下載相應的資源，並進行離線存儲。如果已經訪問過並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面。然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有改變，就不會有任何操作，如果文件改變了，那麼就會重新下載資源，並進行離線緩存。

頁面頭部加入manifest屬性。如：<html manifest=”demo.appcache”>

在cache.manifest文件中編寫離線存儲的資源。

8、Cookies,sessionStorage和localStorage的區別？

共同點：都是保存在瀏覽器端，而且都是同源的。

區別：

Cookies是為了標識用戶身份而存儲在用戶本地的數據，始終在同源http請求中攜帶，在瀏覽器與服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小差異。Cookie保存的數據很小，不能超過4k，而sessionStorage和localStorage保存數據大，可達到5M。
存儲有效期不同。Cookie在設置的cookie過期前始終有效，而sessionStorage僅在瀏覽器關閉之前有效，localStorage始終有效，與瀏覽器窗口沒關係。
作用域不同：cookie在所有同源窗口都是共享，sessionStorage不能在不同瀏覽器窗口上共享，localStorage在所有同源窗口都是共享的。

9、title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義，只表示標題，h1表示層次明確的標題，對頁面信息抓取也有很大的影響。

strong標明重點內容，語氣加強含義，b表示無意義的視覺表示

em表示強調文本，i是斜體，是無意義的視覺表示

視覺樣式標籤：b、u、i、s

語義樣式標籤：strong、em、ins、del、code

10、viewport 所有屬性？

viewport是用戶網頁的可視區域，使用meta設置viewport時有很多屬性，分別對以下各個屬性介紹

width :設置layout viewport的寬度，為一個正整數，或字符串’device-width’;
initial-scale:設置頁面的初始縮放值，為一個數字，可以帶小數。
minimum-scale:允許用戶的最小縮放值，為一個數字，可以帶小數。
maximum-scale:允許用戶的最大縮放值，為一個數字，可以帶小數。
height:設置layout viewport的高度，這個屬性對我們並不重要，很少使用
user-scalable:是否允許用戶進行縮放，值為‘no’或者‘yes’。
target-densitydpi:值可以為一個數值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個

安卓中還支持：target-densitydpi，表示目標設備的密度等級，作用是決定css中的1px 代表多少物理像素。

11、meta標籤的name屬性值？

name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索機器人查找信息和分類信息用的。

Meta標籤的name屬性語法格式是：

Name主要有以下幾個參數：