html5新特性

時間  2019-11-12
標籤 html5 html 特性 欄目 HTML5 简体版
原文   原文鏈接

3.視頻與音頻

3.1Video

 Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件；javascript

MPEG4是帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件；css

WebM是VP8視頻編碼和Vorbis音頻編碼的文件；html

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

Safari和IE9預期支持H.264格式的視頻，Firefox和Opera堅持開源的Theora和Vorbis格式，因此須要提供兩種格式。java

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

例：react

<video controls=」preload」>web

//此屬性表示視頻在頁面加載時進行加載，預備播放。若是設置爲」autoplay」，就忽略該屬性。正則表達式

//controls用於顯示如播放按鈕的控件sql

<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=」trs@trs.com」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.5正則表達式

使用正則表達式可以輕鬆的驗證一個特定的文本。

<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），用於描述二維矢量圖的一種圖形格式。

·        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);

})();

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程