HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團隊。

　　HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。

　　2012年12月17日，萬維網聯盟(W3C)正式宣布凝結了大量網絡工作者心血的HTML5規范已經正式定稿。根據W3C的發言稿稱：“HTML5是開放的Web網絡平臺的奠基石。”

　　2013年5月6日， HTML 5.1正式草案公布。該規范定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言(HTML)。在這個版本中，新功能不斷推出，以幫助Web應用程序的作者，努力提高新元素互操作性。

　　本次草案的發布，從2012年12月27日至今，進行了多達近百項的修改，包括HTML和XHTML的標簽，相關的API、Canvas等，同時HTML5的圖像img標簽及svg也進行了改進，性能得到進一步提升。

　　HTML5 的瀏覽器兼容

　　支持Html5的瀏覽器包括Firefox(火狐瀏覽器)，IE9及其更高版本，Chrome(谷歌瀏覽器)，Safari，Opera等;國內的 遨游瀏覽器(Maxthon)，以及基于IE或Chromium(Chrome的工程版或稱實驗版)所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹 瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。

　　HTML5 語法

　　內容類型(ContentType)HTML5的文件擴展符與內容類型保持不變，仍然為".html"或".htm"。DOCTYPE聲明不區分大小寫指定字符集編碼meta charset="UTF-8"可省略標記的元素不允許寫結束標記的元素：br、col、embed、hr、img、input、、link、meta

　　可以省略結束標記的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

　　可以省略全部標記的元素：html、head、body、colgroup、tbody省略引號屬性值可以使用雙引號，也可以使用單引號。

　　HTML5 新增語義化標簽

　　section元素 表示頁面中的一個內容區塊

　　article元素 表示一塊與上下文無關的獨立的內容

　　aside元素 在article之外的，與article內容相關的輔助信息

　　header元素 表示頁面中一個內容區塊或整個頁面的標題

　　footer元素 表示頁面中一個內容區塊或整個頁面的腳注

　　nav元素 表示頁面中導航鏈接部分

　　figure元素 表示一段獨立的流內容，使用figcaption元素為其添加標題(第一個或最后一個子元素的位置)

　　main元素 表示頁面中的主要的內容 (ie不兼容)

　　兼容低版本瀏覽器：

　　Video和audio的應用

　　video元素 定義視頻Video元素audio元素 定義音頻Audio元素

　　controls屬性：如果出現該屬性，則向用戶顯示控件，比如播放按鈕。

　　autoplay屬性：如果出現該屬性，則視頻在就緒后馬上播放。

　　loop屬性：重復播放屬性。

　　muted屬性：靜音屬性。

　　poster屬性：規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。

接上文]

// 多數情況下，可通過KeyChain.choosePrivateKeyAlias啟動一個Activity供用戶選擇合適的私鑰

@TargetApi(Build.VERSION_CODES.LOLLIPOP)

public void onReceivedClientCertRequest(WebView view, ClientCertRequest request) {

request.cancel();

}

我們以往看到的頁面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我將介紹如何使用純HTML打造屬于自己的實用效果。

1. 折疊手風琴

使用Details和Summary標簽可以創建沒有JavaScript代碼的可折疊手風琴。

效果：

HTML

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>

<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>

CSS

* {
 font-size: 1rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
details {
 border: 1px solid #aaa;
 border-radius: 4px;
 padding: .5em .5em 0;
}
summary {
 font-weight: bold;
 margin: -.5em -.5em 0;
 padding: .5em;
}
details[open] {
 padding: .5em;
}
details[open] summary {
 border-bottom: 1px solid #aaa;
 margin-bottom: .5em;
}

瀏覽器支持：

2. 進度條

該Meter和Progress 的元素標簽的基礎上，你可以調整屬性呈現在屏幕上的進度條。進步有兩個屬性：max和value校準進度條，而Meter標簽提供了更多的定制屬性。

效果：

HTML:

<label for="upload">Upload progress:</label>
<meter id="upload" name="upload"
 min="0" max="100"
 low="33" high="66" optimum="80"
 value="50">
 at 50/100
</meter>
<hr/>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>

CSS:

body {
 margin: 50px;
}
label {
 padding-right: 10px;
 font-size: 1rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

瀏覽器支持：

3. 更多輸入類型

在定義輸入元素時，您要知道現代瀏覽器已經允許您指定足夠多的輸入類型了。除了你應該已經知道text，email，password，number這些類型外，還有下面的這些。

• date 將顯示本機日期選擇器
• datetime-local 更豐富的日期和時間選擇器
• month 友好的月份選擇器
• tel會讓你輸入一個電話號碼。在移動瀏覽器上打開它，彈出的鍵盤將發生變化，同樣的email也是如此。
• search 將輸入文本框設置為友好的搜索樣式。

效果：

HTML:

<label for="date">Enter date:</label>
<input type="date" id="date"/>
<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>
<label for="month">Enter month:</label>
<input type="month" id="month"/>
<label for="search">Search for:</label>
<input type="search" id="search"/>
<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">

CSS:

input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}

各種新輸入類型的MDN文檔非常廣泛且信息量很大。此外，檢查移動輸入類型以了解用戶在移動瀏覽器上時這些輸入元素的鍵盤行為。

4. 視頻和音頻

video和audio元素雖然現在已經成為HTML規范的一部分，但是你一樣會驚訝于你可以使用video標簽在屏幕上渲染出一個體面的視頻播放器。

<video controls>
 <source src="https://addpipe.com/sample_vid/short.mp4" 
 poster="https://addpipe.com/sample_vid/poster.png">
 Sorry, your browser doesn't support embedded videos.
</video

視頻標記中值得注意的一些屬性包括：

• poster 下載視頻時要顯示封面的URL
• preload 是否在頁面加載時預加載整個視頻
• autoplay 視頻是否應該在頁面加載后自動播放

瀏覽器支持：

5. 校對文本

當你想顯示歷史編輯及校對的情況時，blockquote，del和ins元素標簽可以派上用場了。

示例：

HTML：

<blockquote>
 There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

CSS：

del {
 text-decoration: line-through;
 background-color: #fbb;
 color: #555;
}
ins {
 text-decoration: none;
 background-color: #d4fcbc;
}
blockquote {
 padding-left: 15px;
 line-height: 30px;
 border-left: 3px solid #d7d7db;
 font-size: 1rem;
 background: #eee;
 width: 200px;
}

6.更統一的引號

由于中英文引號的不同，使用<q>標記可以讓您很好的解決這個問題，它可使你的內容在大多數瀏覽器上更一致地呈現引號。

HTML：

Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>
<hr/>
Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>

CSS：

body {
 margin: 50px;
}
q {
 font-style: italic;
 color: #000000bf;
}

7. 鍵盤標簽

<kbd>標簽應該是一個少為人知的冷門標簽，但這個能使用更好的方式來說明組合鍵的樣式。

HTML：

<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>

CSS：

body {
 margin: 50px;
}
kbd {
 display: inline-block;
 margin: 0 .1em;
 padding: .1em .6em;
 font-size: 11px;
 line-height: 1.4;
 color: #242729;
 text-shadow: 0 1px 0 #FFF;
 background-color: #e1e3e5;
 border: 1px solid #adb3b9;
 border-radius: 3px;
 box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
 white-space: nowrap;
}

8.使用HTML共享代碼

使用figcaption pre code標簽，您可以使用純HTML和CSS呈現出不錯的代碼片段。

HTML：

<figure>
 <figcaption>
 Defining a css <code>color</code> property for a class called 'golden'
 </figcaption>
 
 <pre>
 <code>
 .golden {
 color: golden;
 }
 </code>
 </pre>
</figure>

CSS：

pre {
 background-color: #ffbdbd;
}

這篇文章也只是拋磚引玉，也許您也有更多私藏的使用技巧，不妨也貼出來分享給大家。

另外，如果您不僅僅限于以上的效率，希望有更完整的動態功能。

例如：您希望在您的頁面中加入Excel功能，可以嘗試葡萄城的 純前端表格控件SpreadJS，再或者您希望為用戶提供更完備、更高效的前端UI控件，您也不妨可以試試 WijmoJS，相信它們都能為您的應用增色不少。

關于葡萄城

賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。