h5新特性

時間 2019-11-10

標籤 h5 特性简体版

原文原文鏈接

1、簡化的文檔類型和字符集css

（1）文檔類型html

<!DOCTYPE HTML>html5

　　之因此如此簡單，是由於HTML5再也不是SGML（ Standard Generalized Markup language，標準通用標記語言）的一部分，而是獨立的標記語言，不須要再考慮文檔類型web

（2）字符集數據庫

　　只須要utf-8便可跨域

2、富有語義化的新結構元素瀏覽器

<header>
　　<h1>HTML5新結構<h1/>
　　<nav>導航部分</nav>
　　<p></p>

</header>緩存

<section>服務器

<p>再也不全是div</p>
　　。。。

</section>
<footer>
　　
</footer>

　　section元素能夠認爲div是section元素,一個普通的分塊元素，可用來定義網站中的特定的可區別的區域

　　header元素包括標題，logo，導航和其餘頁眉的內容，能夠在網站上加多個header，就像給內容加多個標題

　　hgroup元素即將標題進行分組的元素

　　nav元素主要用於主導航菜單

　　article元素獨立成文且以其餘格式重用的內容應該置於一個article元素中

　　aside元素用途包涵內容周圍的相關內容

3、新增的內聯元素

</figure>

　　figure元素一個典型用途是包含圖像,代碼和其餘內容對主要內容進行說明，刪除不會影響主內容

　　figcaption元素主要用於figure的標題

　　mark元素突出顯示以表示引用的內容，或者突出顯示與用戶當前活動相關的內容，他不一樣於en或strong元素

　　time元素，當須要在內容中顯示時間或者日期時，則建議使用time元素

　　time元素能夠包涵兩個屬性，一個datetime表示在元素中指定的確切日期和世家，pubdate表示文章或者整個文檔發佈時time元素所指定的日期和時間

　　meter元素用於定義度量衡，規定最大最小寬高，一般要結合css一塊兒做用，效果以下：

　　progress元素用於定義一個進度條，有max（完成值）和value（進度條當前值）兩個屬性。

4、支持動態頁面

　　1）菜單<menu>

　　用於表單中組織控件列表，經常使用屬性以下：

定義一個選擇列表的例子：

<menu>

</menu>

　　2）右鍵菜單<menitem>

　　3）在<script>標籤中使用async屬性

　　用於指定異步執行的腳本

　　4）<detail>元素

　　用於描述文檔或文檔某個部分的細節

<summary>details</summary>

<p>用於描述文檔細節<p>

</details>

　　效果：

展開後：

5、全新的表單設計

　　HTML5 新的 Input 類型

　　HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

　　HTML5 的新的表單元素：

datalist
keygen
output

　　新的 form 屬性：

autocomplete
novalidate

　　新的 input 屬性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

　　autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
　　當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：
　　實例：

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>請填寫並提交此表單，而後重載頁面，來查看自動完成功能是如何工做的。</p>

結果：

6、強大的繪圖功能和多媒體功能

　　1）canvas 能夠動態地繪製各類效果精美的圖形，結合js就能讓網頁圖形動起來

　　2）SVG 繪製可伸縮的矢量圖形

　　3）audio和 video 能夠不依賴任何插件播放音頻和視頻

7、打造桌面應用的一系列新功能

　　離線緩存 Web Storage（爲HTML5開發移動應用提供了基礎）

　　傳統的web應用程序中，數據處理都由服務器處理，html只負責展現數據，cookie只能存儲少許的數據，跨域通訊只能經過web服務器。

　　HTML5擴充了文件存儲的能力，多達5MB，支持WebSQL等輕量級數據庫，能夠開發支持離線web應用程序。

　　HTML5 Web Storage API能夠看作是增強版的cookie，不受數據大小限制，有更好的彈性以及架構，能夠將數據寫入到本機的ROM中，還能夠在關閉瀏覽器後再次打開時恢復數據，以減小網絡流量。

　　同時，這個功能算得上是另外一個方向的後臺「操做記錄」，而不佔用任何後臺資源，減輕設備硬件壓力，增長運行流暢性。

8、獲取地理位置信息