首頁 > 開發者 > 網站開發

html5新特性

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：文本   關聯   知識庫   eval   標記語言   元素   1.2   ebs   min   

3.視頻與音頻 3.1Video

 Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的檔案；

MPEG4是帶有H.264視頻編碼和AAC音頻編碼的MPEG4檔案；

WebM是VP8視頻編碼和Vorbis音頻編碼的檔案；

HTML5的規範沒有指定特定的視頻轉碼器，它留給了瀏覽器來決定。

Safari和IE9預期支援H.264格式的視頻，Firefox和Opera堅持開源的Theora和Vorbis格式，所以需要提供兩種格式。

Video支援三種視頻格式：Ogg，MPEG4，WebM。

例：

<video controls=”preload”>

//此屬性工作表示視頻在頁面載入時進行載入，預備播放。如果設定為”autoplay”，就忽略該屬性。

//controls用於顯示如播放按鈕的控制項

<source src=”cohagenPhoneCall.ogv” type=”video/ogg;codecs=’vorbis,theora’”/>

<source src=”cohagenPhoneCall.mp4”

type=”vide0/mp4; codecs=’avc1.42E01E,mp4a.40.2’”/>

<p>你的瀏覽器太舊了。<a href=”cohagenPhoneCall.mp4”>下載這個視頻。</a></p>

</video>

註：

·        技術上是不需要設定type屬性的，但是不這樣做的話，瀏覽器就會自己去尋找類型，為了節省一些頻寬，最好還是聲明下。

·        不是所有的瀏覽器都支援Html5，所以在資源元素的下面，可以提供一個下載連結或者嵌入視頻的flash版本替代，這取決於個人。

·        如果想要所有的瀏覽器都支援HTML5標籤，只要連結一個js檔案就可以。在頁面的頭部或底部寫上：
<script src=”http://html5media.googlecode.com/svn/trunk/src/html5media.min.js”>
</script>

對於HTML部分，使用：

<video src=”video.mp4” width=”320” height=”240”controls=”autobuffer”>

</video>

3.2Audio

無需再依賴第三方產檢區渲染音頻了，因為HTML5提供了<audio>元素。

以MOozilla核心的Firefox瀏覽器只支援.ogg檔案，webkit核心的瀏覽器支援.mp3擴充，safari不承認.ogg,它會跳過並移到MP3版本。所以需要建立兩個版本的音頻。

Audio支援三種音頻格式：Ogg Vorbis，MP3，Wav。

例：

<audio autoplay=”autoplay” controls=”controls”>

<source src=”file.ogg”/>

<source src=”file.mp3”/>

</audio>

//標籤的屬性與video相同。沒有height與width。

4.Web儲存 4.1localStorage

 localStorage可以長期儲存資料而沒有時間限制。

4.2sessionStorage

 SessionStorage不能長期儲存資料，資料會隨著瀏覽器的關閉而刪除。

5.HTML5的特徵

 

5.1.1新的Doctype

 

<!DOCTYPE html>

5.1.2圖形元素

 

<img src=”path/to/image” alt=”About image”>

<p>Image of Mars</p>

文字裹在p的標籤中，與img標籤各行其道，讓人很難聯想到這就是標題。HTML5通過採用figure元素進行改正。當和figcaption組合使用時，就能夠語義化的聯想到這就是圖片相對應的標題。

<figure>

<img src=”path/to/image” alt=”About image”/>

<figcaption>

<p>This is an image of somethinginteresting</p>

</figcaption>

</figure>

5.1.3<small>重新定義

<small>元素不再被用來建立靠近logo且相關的副標題。在html5中，<small>被重新定義，指小字。

5.1.4指令碼（scripts）和連結（links）無需type

<link rel=”stylesheet” href=”path/to/stylesheet.css”type=”text/css”/>

<script type=”text/JavaScript”src=”path/to/script.js”></script>

在html5中：

<link rel=”stylesheet”href=”path/to/stylesheet.css”>

<script src=”path/to/script.js”></script>

5.1.5引號問題

Html5不是XHTML，所以可以不需要引號。

<p class="myclass" id=someID>Startthe reactor

但是如果傾向結構化，還是需要把引號加上的。

5.1.6內容可以編輯

contenteditable元素顧名思義就是允許使用者可以編輯元素內容包含的任意文本。

 

[html] view plain copy 
  1. <ul contenteditable=”true”>  
  2. <li>hello</li>  
  3. <li>Beijing</li>  
  4. <li>trs</li>  
  5. </ul>  

 

5.1.7email輸入（input）

在表單輸入框應用程式名稱為”email”的type屬性可以命令瀏覽器只允許符合有效電子郵件地址結構的字串。但是較舊的瀏覽器不識別，它們會簡單的退回到普通文字框。

 

[html] view plain copy 
  1. <form action=”” method=”get”>  
  2. <label for=”email”>郵箱：</label><input id=”email”name=”email” type=”email”/>  
  3. <button type=”submit”>確定</button>  
  4. </form>  

 

5.1.8預留位置（placeholders）

placeholders意為文字框/文本域空間預設會有個文字提示，獲得焦點時，此提示文字就會消失；失去焦點時如果內容為空白，提示文字又出現。在表單控制項裡面顯示的提示性文字就是預留位置。

如果是以前需要一些javascript代碼實現預留位置的操作，而html5卻使得其非常輕鬆：

<label for=”email”>郵箱：</label>

<input id=”email” type=”email” placeholder=”[email protected]”size=”26”/>

一般webkit核心的瀏覽器支援此特性，如chrome、safari。

5.1.9本機存放區（localStorage）

傳統的HTML使用的是眾所周知的cookie，各種瀏覽器都支援，直接用js就可以調用，很方便。但是傳統的cookie也有它本身的缺陷和不足。比如儲存空間小，每個網站大小限制在4kb左右，又有時間期限，而且在請求網頁的時候cookie會被附在每個HTTP請求的header中，所以無形中增加了流量。HTTP請求中cookie是明文傳遞的，所以存有安全性問題，入股用SSL（Secure Sockets Layer 安全套接層；是為網路通訊提供安全及資料完整性的一種安全性通訊協定）通道另當別論。cookie也很容易受到跨站較穩的攻擊。在一個連結後面加上”?cookie=document.cookie”就可以輕易獲得使用者的cookie資訊。HTML5的本機存放區也可能會有跨站指令碼攻擊XSS（cross site script,跨站指令碼攻擊。惡意攻擊者往Web中插入惡意html代碼，當使用者瀏覽該頁時，嵌入其中web裡面的html代碼會被執行。）的問題。

HTML5的本機存放區可以儲存5M大小的資料，甚至還多。它主要有四種：localStorage,sessionStorage,webSQL,indexDB

例子：

 

[html] view plain copy 
  1. <ul id="edit" contenteditable="true">  
  2. <li><li>  
  3. </ul>  
  4. <script language="javascript">  
  5. <!--  
  6.     var edit=document.getElementById(edit);  
  7.     edit.onblur=function(){  
  8.         localStorage.setItem("tododata",this.innerHtml);  
  9.     };  
  10.     if(localStorage.getItem("tododata")){  
  11.         Edit.innerHTML = localStorage.getItem("tododata");  
  12.     }  
  13. //-->  
  14. </script>  

 

 

5.2.0語義的Header和Footer

以往：

<div id=”header”>

 …

</div>

<div id=”footer”>

…

</div>

有了HTML5，可直接替換成;

<header>

 …

</header.

<footer>

…

</footer>

5.2.1IE和HTML5

所有元素有個預設的inline的display。為了確保所有新的元素都以block正確的渲染，需要這樣定義：

header,footer,article,section,nav,menu,hgroup{

display:block;

}

但是由於IE不識別某些標籤，如header，就會忽略這些樣式，所以需要建立元素：

document.creatElement(“artical”);

document.creatElement(“footer”);

document.creatElement(“header”);

document.creatElement(“nav”);

document.creatElement(“menu”);

document.creatElement(“hgroup”);

另解：

<!—[if IE]>

<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>

<![endif]-->

5.2.2文檔某一部分的資訊（hgroup）

使用hgroup元素可以將標題組合在一起。

<header>

<hgroup>

<h1>recall fan page</h1>

<h2>only for people whowant the memory of a lifetime.</h2>

</hgroup>

</header>

5.2.3必要的屬性（required attribute）

<input type=”text” name=”someInput” required>

或者使用更結構化的方法:

<input type=”text” name=”someInput”required=”required”>

如果”someInput”文字框是空白，表單就不會被提交。

<form action=”” method=”get”>

<lable for=”name”>姓名：</label>

<input id=”name” name=”name” type=”text”placeholder=”trs” required=”required”/>

<button type=”submit”>提交<button>

</form>

如果input裡面內容是空白，在表單提交的時候，文字框的框會高亮顯示，但是好像只是在chrome裡有此效果。

5.2.4autocomplete屬性

autocomplete屬性規定form或者input域應該擁有自動完成的功能。

它使用於<form>標籤，以及以下類型的<input>標籤：text，search,url,telephone,email,password,datapickers,range以及color。

<form action=”” method=”get” autocomplete=”on”>

<label for=”email”>郵箱：</label>

<input type=”email” name=”email”autocomplete=”off”/>

</form>

5.2.5Regex

使用Regex能夠輕鬆的驗證一個特定的文本。

<form action=”” method=”get”>

<label for=”username”>姓名：</label>

<input id=”username ” name=”username” type=”text”placeholder=”4-10個英文字母”

Pattern=”[A-Za-z]{4,10}”required=”required” autofocus/>

<button type=”submit”>提交</button>

</form>

在[A-Za-z]{4,10}表示接受4-10位不區分大小寫英文字母。此特性好像只在chrome瀏覽器中支援。

5.2.6屬性支援檢測

利用優秀的Modernizr庫（http://www.modernizr.com/）可以檢測瀏覽器是否支援某些屬性。

只要建立和分析這些元素，就可以確定瀏覽器的能力。事實上，這是一種確定瀏覽器安全色的常用方法。比如確定pattern屬性，在javascrip中添加一小段代碼：

alert(‘pattern’ in document.creatElement(‘input’));//Boolean

//建立了一個新的input元素，並確定了裡面的pattern屬性瀏覽器是否支援。

也可以：

<script>

If(!’pattern’ in document.creatElement(‘input’)){

 //做操作

}

</script>

 

5.2.7mark元素（Mark Element）

<mark>元素作為高亮。此標籤包裹的字串應該與使用者當前的行動相關聯。

5.2.8div

div應該用在沒有更好的元素的時候。比如需要包裹一段代碼塊在對內容定位處理的封裝單元內。但是如果是文章，最好用<artical>，如果是連結清單，就用<nav>。

5.2.9小知識

·        SVG（scalable vector graphics）不是HTML5，它是基於可延伸標記語言 (XML)（XML），用於描述二維向量圖的一種圖形格式。

·        Geolocation不是HTML5，它意味地理位置，通過HTML5能夠使web應用程式確定位置並提供更多相關資訊。

·        檢索自訂屬性的價值：

5.3.0data屬性

Html代碼部分：<div id=”myDiv”data-custom-attr=”My Value”>lady嘎嘎</div>

檢索：

var theDiv = document.getElementById(“myDiv”);

var attr = theDiv.getAttribute(“data-custom-attr”);

alert(attr);//My Value

·        此屬性在CSS中的應用

CSS代碼:

.data_custom{display:inline-block;position:relative;}

.data_custom:hover{color:ransparent;}

.data_custom:hover:after{

content:attr(data-hover-response);

color:black;

position:absolute;

left:0;

}

HTML代碼：

<a class=”data_custom”data-hover-response=”我說過不要碰我！”href=”#”>不要碰我，嘎嘎</a>

註：瀏覽器支援偽類after一季content的attr的前提下。

5.3.1使用地區input建立滑塊

HTML5引進了range類型的input。

<input type=”range”>,它可以接收min，max，step和value屬性等。

·        標籤
<form method=”post”>
<h4>音量控制</h4>
<input type=”range” name=”range” min=”0” max=”10” step=”1”value=””/>
<output name=”result”></output>
</form>

·        CSS

使用:before和:after告知使用者指定的最大值和最小值

input {font-size:14px;font-weight:bold;}

input[type=range]:before{content:attr(min):padding-right:5px;}

input[type=range]:after{content:attr(max):padding-left:5px}

output{

 display:block;

 font-size:5.5em;

 font-weight:bold;

}

·        JavaScript

l  檢測瀏覽器是否能夠識別rangeinput，如果不識別就顯示提示資訊；

l  當使用者移動滑塊的時候，動態改變output的值；

l  監聽，當使用者離開滑塊的時候，就插入值，同時本機存放區；

l  然後當重新整理頁面的時候，選擇的地區和值會自動地設定成最後一次的選擇。

(function(){

    var f =document.forms[0],//返回對象中對所有文檔的引用

    range=f[‘range’],

    result=f[‘result’],

    cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;

    //檢測瀏覽器是否足夠酷

    //識別range input

    var o =document.creatElement(‘input’);

    o.type=’range’;

    if(o.type==’text’)

        alert(‘不好意思，你的瀏覽器還不夠酷，試試最新的chrome瀏覽器吧！’);

  //設定初始值

  //無論是否本機存放區了，都設定為5

   range.value=cachedRangeValue;

   result.value=cachedRangeValue;

  //當使用者選擇了一個值，更新本機存放區

   range.addEventListener(“mouseup”,function(){

       alert(“你的選擇是：”+range.value+”我現在正在用本機存放區儲存此值。在瀏覽器上重新整理驗證。”);

       localStorage?(localStorage.rangeValue=range.value):alert(“資料儲存到了資料庫或是其它地方。”);

     }，false);

   //滑動顯示選擇的值

   range.addEventListner(“change”,function(){

   result.value=range.value;

  },false);

})();

　　

html5新特性

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More