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.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>

3.2Audio

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

以MOozilla核心的Firefox瀏覽器只支持.ogg文件，webkit核心的瀏覽器支持.mp3擴展，safari不認可.ogg,它會跳過並移到MP3版本。因此須要建立兩個版本的音頻。

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

例：

</audio>

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

4.Web存儲

4.1localStorage

localStorage能夠長期存儲數據而沒有時間限制。

4.2sessionStorage

SessionStorage不能長期存儲數據，數據會隨着瀏覽器的關閉而刪除。

5.HTML5的特徵

5.1.1新的Doctype

<!DOCTYPE html>

5.1.2圖形元素

<p>Image of Mars</p>

文字裹在p的標籤中，與img標籤各行其道，讓人很難聯想到這就是標題。HTML5經過採用figure元素進行改正。當和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

在html5中：

5.1.5引號問題

Html5不是XHTML，因此能夠不須要引號。

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

可是若是傾向結構化，仍是須要把引號加上的。

5.1.6內容能夠編輯

contenteditable元素顧名思義就是容許用戶能夠編輯元素內容包含的任意文本。

[html] view plain copy

<ul contenteditable=」true」>
<li>hello</li>
<li>Beijing</li>
<li>trs</li>
</ul>

5.1.7email輸入（input）

在表單輸入框應用名爲」email」的type屬性能夠命令瀏覽器只容許符合有效的電子郵件地址結構的字符串。可是較舊的瀏覽器不識別，它們會簡單的退回到普通文本框。

[html] view plain copy

<form action=」」 method=」get」>
<label for=」email」>郵箱：</label><input id=」email」name=」email」 type=」email」/>
<button type=」submit」>肯定</button>
</form>

5.1.8佔位符（placeholders）

placeholders意爲文本框/文本域空間默認會有個文字提示，得到焦點時，此提示文字就會消失；失去焦點時若是內容爲空，提示文字又出現。在表單控件裏面顯示的提示性文字就是佔位符。

若是是之前須要一些javascript代碼實現佔位符的操做，而html5卻使得其很是輕鬆：

通常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

<ul id="edit" contenteditable="true">
<li><li>
</ul>
<script language="javascript">
<!--
var edit=document.getElementById(edit);
edit.onblur=function(){
localStorage.setItem("tododata",this.innerHtml);
};
if(localStorage.getItem("tododata")){
Edit.innerHTML = localStorage.getItem("tododata");
}
//-->
</script>

5.2.0語義的Header和Footer

以往：

…

</div>

…

</div>

有了HTML5，可直接替換成;

…

</header.

…

</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]>

<![endif]-->

5.2.2文檔某一部分的信息（hgroup）

使用hgroup元素能夠將標題組合在一塊兒。

<h1>recall fan page</h1>

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

</hgroup>

</header>

5.2.3必要的屬性（required attribute）

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

若是」someInput」文本框是空白，表單就不會被提交。

</form>

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

5.2.4autocomplete屬性

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

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

</form>

5.2.5正則表達式

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

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

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

</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屬性瀏覽器是否支持。

也能夠：

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代碼：

注：瀏覽器支持僞類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);

})();

相關標籤/搜索

每日一句

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