1. html5.1中有哪些新特性

1.為響應設計定義多個圖像資源
<picture>
<source srcset="mobile.jpg, mobile-hd.jpg 2x" media="(max-width: 360px)">
<source srcset="large.jpg, large-hd.jpg 2x" media="(min-width: 1920px)">
<img src="default.jpg" srcset="default-hd.jpg 2x" alt="your image">
</picture>

在HTML 5.1中，你可以使用<picture>標簽和srcset屬性來使響應式圖像選擇成為可能。<picture>標簽表示圖像容器，其允許開發者聲明不同的圖像資源以便適應UA的視口大小，屏幕像素密度，屏幕類型和在響應設計中使用的其他參數。
2.顯示或隱藏額外信息
<section>
<h2>Error Message</h2>
<details>
<summary>We couldn't finish downloading this video.</summary>
<dl>
<dt>File name:</dt><dd>yourfile.mp4</dd>
<dt>File size:</dt><dd>100 MB</dd>
<dt>Duration:</dt><dd>00:05:27</dd>
</dl>
</details>
</section>

使用<details>和<summary>標簽，可以向內容項添加擴展信息。 默認情況下不顯示額外信息，但如果用戶感興趣，他們可以選擇查看。 在你寫代碼的時候，應該將<summary>標簽放在<details>中。 你可以在<summary>標簽之後添加要隱藏的額外信息。
3.將功能添加到瀏覽器的上下文菜單
<button contextmenu="rightclickmenu">Right click me</button>
<menu type="context" id="rightclickmenu">
<menuitem type="checkbox" label="I HTML5.1.">
</menu>

使用<menuitem>元素及其type =「context」屬性，可以將自定義功能添加到瀏覽器的上下文菜單中。你需要將<menuitem>指定為<menu>標簽的子元素。<menu>元素的id需要與我們要添加上下文菜單的元素（即上面示例中的<button>元素）的contextmenu屬性的值相同。
注意：瀏覽器對這個功能的支持還不是很好。 Chrome 54並不支持，而Firefox 50僅允許一個額外的上下文菜單。
4.嵌入頁眉和頁腳
<article>
<header>
<h1>Article Title</h1>
<aside>
<header>
<h2>About the author</h2>
<p><a href="#">Email</a><a href="#">Twitter</a></p>
</header>
<img src="photo.jpg" alt="Author photo">
<p>Author bio ... </p>
</aside>
</header>
<p>Article intro</p>
<p>Other paragraphs ...</p>
</article>

在HTML 5.1中，如果每個級別都包含在分段內容里，則允許嵌套頁眉和頁腳。
如果要向語義分段元素（例如<article>和<section>）添加精細的標題話，這個功能會非常有用。 下面的代碼示例在標題中創建一個側邊欄，<aside>標簽也是一個分段元素，並在其中添加了關於作者的額外信息。 標題中的側邊欄也有自己的標題，以及一個副標題和作者的聯系方式。
5.對樣式和腳本使用加密隨機數
<script nonce='adfjaf8eda64U7'>
// some javaScript
</script>

使用HTML 5.1，通過在<script>和<style>元素中使用nonce屬性。你可以將加密隨機數添加到樣式和腳本中。加密隨機數是隨機生成的數字並且一個只能使用一次，而且是在每次頁面請求的時候重新生成。網站的內容安全策略可以使用隨機數來決定是否應在網頁上應用特定的腳本或樣式。在Google 開發者的網頁基礎中，你可以進一步了解如何正確使用隨機數和CSP。
6.創建反向鏈路關系
<!-- Current document is the parent of the linked category.html document -->
<link rev="parent" href="category.html">

你可以再次將rev屬性添加到你的鏈接。它之前在HTML 4中被定義，但HTML5不支持。 HTML 5.1允許開發人員再次為<link>和<a>元素使用此屬性。rev屬性與rel相反，它指定當前文檔和鏈接文檔在相反方向上的關系（當前文檔與鏈接文檔的關系）。
rev屬性已包含在HTML 5.1規范中，主要用於支持RDFa，後者是一種廣泛使用的結構化數據標記格式，並擴展了HTML語言。
7.使用零寬度圖像
<img src="yourimage.jpg" width="0" height="0" alt="">

HTML 5.1允許開發人員創建width屬性值為0的 零寬度圖像 。 如果你想要包含不想向用戶顯示的圖像（例如跟蹤圖像文件）則此功能很有用。建議將零寬度圖像與空alt屬性一起使用。
8.分離瀏覽器上下文以防止網路釣魚攻擊
<a href="#" target="_blank" rel="noopener">
Your link that won't make troubles
</a>

在你的網站上使用相同的源鏈接最終可能會讓你陷入麻煩。 該漏洞被稱為target =「_ blank」漏洞，這是一個讓討厭的網路釣魚攻擊。你可以（安全地）測試下這個漏洞是如何在這個機智的Github演示頁上進行攻擊的，你可以在Github上查看該代碼。
HTML 5.1已經標准化了rel =「noopener」屬性的用法，它消除了分隔瀏覽器上下文的問題，你可以在<a>和<area>元素中使用rel =「noopener」。
9.創建一個空選項
HTML 5.1允許開發人員創建一個空的<option>元素。<option>標簽可以是<select>，<optgroup>或<datalist>元素的子元素。 如果你不想建議用戶應該選擇哪個選項，以及在想要設計用戶友好的表單時，使用空的<option>可能很有用。
10.更靈活地處理圖形標題
<figcaption>標簽表示<figure>元素的題注或說明，其是用於視覺（例如插圖，照片和圖表）的容器。以前，<figcaption>標記只能用作<figure>元素的第一個或最後一個子元素。HTML 5.1已放鬆此規則，現在<figcaption>可以出現在其<figure>容器中的任何位置。

2. HTML5新特性大概包括哪些

H5新特性主要包括：

  1. 語義化標簽：header,footer,nav etc.

  2. canvas 畫布

  3. audio, video

  4. drag 拖拽

  5. 本地存儲 localStorage, sessionStorage

  6. webSocket 長連接

  7. 定位

  8. 增強型版表單 input number, datalist, keygen, output, progress

  9. svg 矢量繪圖

  10. webWorker 實現js多進權程。

3. html5的新特性有哪些 figure

跟HMTL相比，HTML5新增了很多內容，其中有一些特性是作為開發人員必須要了解的。一個叫秒秒學的教學網站上有專門針對HTML5的課程，講解得還蠻細致，推薦你去看看。
1.新的文檔類型 (New Doctype)
HTML5簡化了文檔類型的聲明方式。HTML5的聲明方式為：<!DOCTYPE html>。
而之前的文檔類型的聲明方式是非常復雜，並且難以記憶的，比如XHTML 1.0的文檔類型是：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

2.腳本和鏈接無需type

在HTML4或XHTML中，你需要用下面的幾行代碼來給你的網頁添加CSS和JavaScript文件。
< link rel="stylesheet" href="stylesheet.css" type="text/css" />
< script type="text/javascript" src="script.js"></script>

而在HTML5中，你不再需要指定type屬性。因此，代碼可以簡化如下：
< link rel="stylesheet" href="stylesheet.css" />
< script src="script.js"></script>

3.更加語義化的元素
HTML5 新增的一些更具有語義化的新標簽來替代<div> 標簽，但它們並不提供額外的功能。這些新增的標簽是：<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>等。

4.佔位符 (Placeholder)
在HTML4或XHTML中，一般需要用JavaScript來給文本框添加佔位符。比如：通過腳本設置，當用戶開始輸入時，文本框中的文字就消失。而在HTML5中，新增的逗placeholder地功能可以很簡單的解決這個問題。

5.Audio 和Video 支持
在HTML5之前，網頁通常需要依靠第三方插件來渲染音頻。而在HTML5中，<audio>元素被引進來後，我們可以使用audio元素來渲染音頻。
在HTML5中，不僅新增渲染音頻的元素，同時也新增了支持視頻的元素video。
6.離線 & 存儲
IndexedDB 是一個為了能夠在客戶端存儲可觀數量的結構化數據，並且在這些數據上使用索引進行高性能檢索的 API。雖然 DOM 存儲 對於存儲少量數據是非常有用的，但是它對大量結構化數據的存儲就顯得力不從心了。IndexedDB 則提供了這樣的一個解決方案。
7.HTML5 canvas
<canvas> 是 HTML5 新增的元素，可使用JavaScript腳本來繪制圖形。例如：畫圖，合成照片，創建動畫甚至實時視頻處理與渲染。

8.設備訪問
HTML5新增的特性中，允許通過頁面元素訪問硬體設備，比如：[ ]攝像頭、地理位置服務、檢測方向、觸控事件等。

4. HTML5新特性有哪些，你都知道嗎

  • 用於繪畫的canvas 元素

  • 用於媒介回放的 video和 audio元素

  • 對本地離線存儲的更好的支持

  • 新的特殊內容元素，比如 article、footer、header、nav、section

  • 新的表單控制項，比如 calendar、date、time、email、url、search

    • css3:

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增加了更多的CSS選擇器 多背景 rgba

5. 在CSS3中唯一引入的偽元素是 ::selection.

6. 媒體查詢，多欄布局

7. border-image

5. html5的新特性有哪些

特性
A. 語義特性（Class：Semantic）
HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。
B. 本地存儲特性（Class: OFFLINE & STORAGE）
基於HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一） 和API說明文檔。

6. 跟HTML相比，HTML5新增了哪些新特性

HTML5跟HTML相比新增了很多內容，其中有一些特性是作為開發人員必須要了解的。

在網上有一個叫「秒專秒學」的教學屬網站上有專門針對HTML5的課程，推薦可以觀看；

新增的具體內容如下：

1、新的文檔類型 (New Doctype)；

2、腳本和鏈接無需type；

3、更加語義化的元素；

4、佔位符(Placeholder)；

5、Audio 和Video 支持；

6、離線 & 存儲；

7、HTML5 canvas；

8、設備訪問。

7. HTML5的強大特性有哪些

語義特性（Class：Semantic）HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。
本地存儲特性（Class: OFFLINE & STORAGE）
基於HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和API說明文檔。
設備兼容特性 (Class: DEVICE ACCESS)
從Geolocation功能的API文檔公開以來，HTML5為網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入開放介面。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。
連接特性（Class: CONNECTIVITY）
更有效的連接工作效率，使得基於頁面的實時聊天，更快速的網頁游戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的伺服器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現伺服器將數據「推送」到客戶端的功能。
網頁多媒體特性(Class: MULTIMEDIA)
支持網頁端的Audio、Video等多媒體功能， 與網站自帶的APPS，攝像頭，影音功能相得益彰。
三維、圖形及特效特性（Class: 3D, Graphics & Effects）
基於SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆於在瀏覽器中，所呈現的驚人視覺效果。
性能與集成特性（Class: Performance & Integration）
沒有用戶會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作。
CSS3特性(Class: CSS3)
在不犧牲性能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

8. HTML5都有哪些新特性

accesskey 規定激活元素的快捷鍵。
class 規定元素的一個或多個類名（引用樣專式表中的類）。屬
contenteditable 規定元素內容是否可編輯。
contextmenu 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。
data-* 用於存儲頁面或應用程序的私有定製數據。
dir 規定元素中內容的文本方向。
draggable 規定元素是否可拖動。
dropzone 規定在拖動被拖動數據時是否進行復制、移動或鏈接。
hidden 規定元素仍未或不再相關。
id 規定元素的唯一 id。
lang 規定元素內容的語言。
spellcheck 規定是否對元素進行拼寫和語法檢查。
style 規定元素的行內 CSS 樣式。
tabindex 規定元素的 tab 鍵次序。
title 規定有關元素的額外信息。
translate 規定是否應該翻譯元素內容。

9. html5新技術有哪些

微數據（Microdata）

HTML5 定義了一個標准化方法來標記 HTML 文檔主體的元數據。對於使用過微格式（如 hCard 和 hCalendar） 的人來說，對微數據會很熟悉，但其中還有一些重要的不同之處。最重要的是，微數據將相關信息從此前微格式控制的類移到了新的 itemprop 屬性中。
另外，此標准添加了其他能精確定義微數據格式的屬性，以及一個可以直接通過程序訪問微數據的方法：
itemscope 設置微數據段的范圍。
itemtype 提供了定義可用的具體數據格式的 URL。
document.getItems() 提供對頂層微數據條目的訪問；此方法會返回一個 NodeList，其中包含對應於可選參數 itemType 的條目，如果沒有參數，則返回所有類型。
回頁首
HTML5 中屬於單獨的規范和工作組的技術
多項技術已經成熟，脫離了 HTML5 規范，形成自己的文檔。還有其他一些，也從 HTML 脫離出來，歸類為 「Web 平台」。
SVG
也許歸類到 HTML5 大雜燴中最奇怪的技術就要算 Scalable Vector Graphics (SVG) 了。SVG 是用 XML 定義的矢量圖形語法。自從 1999 年起，就由 W3C 開始開發 SVG，因此將它作為 「新」 內容或 HTML5 一部分的一個延伸。
但依然值得為重新發掘 SVG 而感到高興，因為它實際推動了標准。主要瀏覽器的最新版本都提供或多或少的支持，而有些庫，如 Raphael.js 中還有支持舊版本 Internet Explorer 的 API。
Web 存儲
Web Storage 規范定義了一個 API，可對 Web 瀏覽器的中的鍵-值進行連續存儲。 此規范與 cookies 的功能類似，但有了很大的改進。
存儲有兩種形式：sessionStorage 與 localStorage。每一個都提供了類似的方法來管理條目（setItem()、removeItem() 和 getItem()) 和清除整個存儲（clear()）。Session 存儲是用來保存當前瀏覽器會話。Local 存儲用來對網站收藏或其他用戶數據進行長期存儲。還可以監聽存儲事件，以便監控存儲活動並對存儲活動作出響應。
對於現在就想體驗此功能的用戶，Persist.js 庫提供了完善的跨瀏覽器解決方案可在所有主要瀏覽器中使用 Web 存儲或等效的功能。
還有另外兩個規范可與 Web Storage 同時使用：
IndexedDB 是一個相關的綠色規范，它提供了更強大的在瀏覽器中長期存儲數據的功能，其中包括查詢資料庫，更重要是，能夠保存復雜對象而不僅是簡單的字元串。
Web Workers 是功能超強的規范，它定義了能在主頁運行 JavaScript 同時讓用戶在底層運行腳本的 API。此功能可以讓開發人員將時間較長的處理任務卸載到底層進程，從而釋放瀏覽器，可在主要環境中進行持續交互。
文件 API
此規范提供了操作 Web 應用程序中文件的 API。加上其他一些新興和成熟技術，如 XMLHttpRequest、拖放和 Web Workers，File API 能夠提供比目前可用技術更強大的 Web 和桌面交互功能。 與簡單文件上傳輸入元素將文件傳遞給 Web 伺服器進行處理或復雜的 Flash 界面不同的是，File API 允許直接訪問瀏覽器文件數據。
WebSocket
WebSocket API 可以通過一個 TCP 埠在 Web 瀏覽器和 Web 伺服器之間同時雙向通訊。在實現方面，WebSocket 還可以走得更遠一些，它支持最新版本 Firefox、Opera、Chrome 和 Apple Safari，但已發現的安全漏洞使得它在 Firefox 和 Opera 中默認禁用。
伺服器發送的事件
此規范定義了一個 API，可以打開一個 HTTP 連接，以 DOM 事件形式接收來自伺服器的推送通知。本規范改變了目前在固定時間間隔輪詢伺服器進行更新的模式，節約了大量不需要的請求和相關的處理器時間和帶寬。
WebGL
Web-based Graphics Library (WebGL) 增強了JavaScript，它具有在瀏覽器中創建三維交互圖形的功能。WebGL 是 canvas HTML 元素的上下文。此規范與 2011 年 3 月推出 1.0 版，由非營利的 Khronos Group 管理。
XMLHttpRequest Level 2
XMLHttpRequest Level 2 規范通過一些新特性增強了核心 XMLHttpRequest 對象。其中最有趣的大概就是 Cross-Origin Resource Sharing 了，它一種繞過同源安全策略的安全方式，可以實現 XMLHttpRequest 與第三方伺服器交互。目前，XMLHttpRequest 只能與相同協議的伺服器通訊。