（1）HTML5的經常使用新特性你必須知道

時間 2020-05-23

標籤 html5 html 經常使用特性必須知道欄目 HTML5 简体版

原文原文鏈接

HTML5的經常使用新特性你必須知道

1 新的<!DOCTYPE> 聲明

HTML 有多個不一樣的版本，只有徹底明白頁面中使用的確切 HTML 版本，瀏覽器才能徹底正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。<!DOCTYPE> 不是 HTML 標籤。它爲瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。javascript

1.1 經常使用的聲明

HTML5html

<!DOCTYPE html>

HTML 4.01 混雜模式（該 DTD 包含全部 HTML 元素和屬性，包括展現性的和棄用的元素（好比 font）。不容許框架集（Framesets）。）html5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 嚴格模式（該 DTD 包含全部 HTML 元素和屬性，但不包括展現性的和棄用的元素（好比 font）。不容許框架集（Framesets）。）java

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2 Figure元素

figure 標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。瀏覽器

<figure>
  <p>黃浦江上的的盧浦大橋</p>
  <p>拍攝者：W3School 項目組，拍攝時間：2010 年 10 月</p>
  <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

3 從新定義的small

small 標籤呈現小號字體效果。 small 標籤和它所對應的 big 標籤同樣，但它是縮小字體而不是放大。若是被包圍的字體已是字體模型所支持的最小字號，那麼 small 標籤將不起任何做用。與 big 標籤相似，small 標籤也能夠嵌套，從而連續地把文字縮小。每一個 small 標籤都把文本的字體變小一號，直到達到下限的一號字。框架

4 Local Storage

使用Local Storage能夠永久存儲大的數據片斷在客戶端（除非主動刪除），目前大部分瀏覽器已經支持，在使用以前能夠檢測一下window.localStorage是否存在字體

5 html5表單新特性

5.1 autofocus 屬性

autofocus 屬性規定在頁面加載時，域自動地得到焦點。註釋：autofocus 屬性適用於全部 input 標籤的類型。this

User name: <input type="text" name="user_name"  autofocus="autofocus" />

5.2 form 屬性

form 屬性規定輸入域所屬的一個或多個表單。註釋：form 屬性適用於全部 input 標籤的類型。 form 屬性必須引用所屬表單的 id：url

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

5.3 height 和 width 屬性

height 和 width 屬性規定用於 image 類型的 input 標籤的圖像高度和寬度。註釋：height 和 width 屬性只適用於 image 類型的 input 標籤。spa

<input type="image" src="img_submit.gif" width="99" height="99" />

5.4 placeholder 屬性

placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。註釋：placeholder 屬性適用於如下類型的 input 標籤：text, search, url, telephone, email 以及 password。提示（hint）會在輸入域爲空時顯示出現，會在輸入域得到焦點時消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

6 Audio支持

HTML5提供了audio 標籤，你不須要再按照第三方插件來渲染音頻，大多數現代瀏覽器提供了對於HTML5 Audio的支持，不過目前仍舊須要提供一些兼容處理，如

<audio autoplay=」autoplay」 controls=」controls」> 
<source src=」file.ogg」 /><!–FF–> 
<source src=」file.mp3″ /><!–Webkit–> 
<a href=」file.mp3″>Download this file.</a> 
</audio>

7 Mark元素

把 mark 元素看作是高亮的做用，當我選擇一段文字的時候，javascript對於HTML的markup效果應該是這樣的：

<h3> Search Results </h3> 
<p> They were interrupted, just after Quato said, <mark>」Open your Mind」</mark>. </p>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。