HTML5中新增加的元素及使用方法是怎樣的

這期內(nèi)容當中小編將會給大家?guī)碛嘘PHTML5中新增加的元素及使用方法是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設、網(wǎng)站重做改版、池州網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5開發(fā)、商城開發(fā)、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為池州等各大城市提供網(wǎng)站開發(fā)制作服務。

考慮我們開發(fā)一個頁面的過程：
1.設計頁面的結(jié)構 - HTML：這個過程是使用各種HTML元素構建網(wǎng)頁的結(jié)構。
2.設計頁面的外觀 - CSS：這個過程是使用CSS去改善網(wǎng)頁的外觀。
3.設計頁面的行為 - Javascript：這個過程是給網(wǎng)頁的元素賦予一定的行為。
上面這些除了CSS外，HTML5在另外兩個方面都不同程度的進行了擴充。這個系列是集中在第一個方面。在前面，我們已經(jīng)學習了復雜的canvas和svg元素，下面的章節(jié)會總結(jié)其他HTML5增加的元素。

結(jié)構型元素
HTML5中加入了全新的結(jié)構型元素，例如頁眉header，頁腳footer，導航nav，內(nèi)容article，章節(jié)section等。含義如下圖所示：

除了這種整個頁面的結(jié)構型元素，html5也加入了塊級別的語義元素，例如輔助元素aside，圖像元素figure，細節(jié)描述元素details等。這些元素除了更能顯示頁面的布局含義外，與普通的div并沒有其它的區(qū)別，仍然需要靠CSS去展示這些元素。這里就是簡單看一個小例子：

代碼如下:

<html>
<head>
<title>Dxy 博客 </title>
</head>
<body>
<header>
<h2><a href="http://www.cnblogs.com/dxy1982/%22%3Edxy1982 博客</a></h2>
</header>
<section>
<article>
<h3><a href="http://www.cnblogs.com/dxy1982/">文章1</a></h3>
<p>簡介</p>
</article>
<article>
<h3><a href="http://www.cnblogs.com/dxy1982/">文章2</a></h3>
<p>簡介</p>
</article>
<nav>
<a href="http://www.cnblogs.com/dxy1982/">博客</a>
</nav>
</section>
<nav>
<ul>
<li><h3>信息</h3>
<ul>
<li><a href="http://www.cnblogs.com/dxy1982/">政策</a></li>
<li><a href="http://www.cnblogs.com/dxy1982/">列表</a></li>
</ul></li>
<li><h3>文章</h3>
<ul>
<li><a href='/blog/2007/04/'>1月份</a></li>
<li><a href='/blog/2007/03/'>2月份</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2012 dxy1982</p>
</footer>
</body>
</html>

雖然這些元素使用起來都比較簡單，但還是需要注意幾點：
1. 不要使用section作為div的替代品
section并不是樣式容器。section元素表示的是內(nèi)容中用來幫助構建文檔概要的語義部分。它應該包含一個頭部。它通常是最為article的部分存在(當然article作為它的部分也是可以的)。如果你想找一個用作頁面容器的元素或者是需要額外的樣式容器，還是繼續(xù)使用div吧。
2. 只在需要的時候使用header和hgroup
寫不需要寫的標簽是毫無意義的。header和hgroup的使用場景通常如下：
• header元素表示的是一組介紹性或者導航性質(zhì)的輔助文字，經(jīng)常用作section的頭部。
• 當頭部有多層結(jié)構時，比如有子頭部，副標題，各種標識文字等，使用hgroup將h2-h7元素組合起來作為section的頭部。
這里如果header或hgroup只有少數(shù)頭部元素，不如就去掉這2個雞肋標簽吧，例如：

代碼如下:

直接修改成：

代碼如下:

同樣的道理：

代碼如下:

<header>
<hgroup>
　　<h2>My best blog post</h2>
</hgroup>
<p>by Rich Clark</p>
</header>

直接改成：

代碼如下:

<header>
<h2>My best blog post</h2>
<p>by Rich Clark</p>
</header>

3. 不要濫用nav
nav元素表示頁面中鏈接到其他頁面或者本頁面其他部分的區(qū)塊；包含導航鏈接的區(qū)塊。
但是不是所有頁面上的鏈接都需要放在nav元素中——這個元素本意是用作主要的導航區(qū)塊。舉個具體的例子，在footer中經(jīng)常會有眾多的鏈接，比如服務條款，主頁，版權聲明頁等等。footer元素自身已經(jīng)足以應付這些情況，雖然nav元素也可以用在這里，但通常我們認為是不必要的。
4. 不要濫用figure
figure應該是“一些流動的內(nèi)容，有時候會有包含于自身的標題說明。一般在文檔流中會作為獨立的單元引用?！边@正是figure的最佳適用場景——它可以從主內(nèi)容頁移動到sidebar中，而不影響文檔流。figure只應該被引用在文檔中，或者被section元素圍繞。
如果純粹只是為了呈現(xiàn)的圖(比如logo)，也不在文檔其他地方引用，也沒有移動位置的需要，那就絕對不要使用figure。
5. 不要使用不必要的type屬性
在HTML5中，script和style元素不再需要type屬性。當然寫上并沒有什么問題，只不過從最佳實踐的角度，是不需要寫的。

音頻元素
audio元素用于標識聲音內(nèi)容，比如說音樂或是任何的其他音頻流。該元素支持的格式如下表所示：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

audio標簽有一些屬性用來控制音頻的內(nèi)容、何時以及如何播放等方面的情況，這些屬性分別是：src(文件名)、preload(在頁面加載時加載)、controls(顯示控制)、loop(循環(huán))和autoplay(自動播放)。在下面的例子中，只要頁面一加載音頻就開會播放，其會持續(xù)播放，所提供的控制可以讓用戶停止或是重新開始播放音頻：

代碼如下:

<audio src="MyFirstMusic.ogg" controls="controls" autoplay="autoplay" loop="loop">
你的瀏覽器不支持audio元素。
</audio>

如果瀏覽器不支持該元素，則顯示元素的文本信息。
如果設置了autoplay元素，則自動忽略preload屬性。設置preload="auto"的話，則頁面加載后載入音頻。
audio元素允許指定多個source元素來兼容瀏覽器的問題。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：

代碼如下:

<audio>
<source src="song.ogg" type="audio/ogg">
<source src="song.wma" type="audio/x-ms-wma">
<source src="song.mp3" type="audio/mpeg">
你的瀏覽器不支持audio元素。
</audio>

視頻元素
video元素允許你播放視頻片段或是流化視覺媒體。該元素支持的格式如下表所示：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

它擁有audio元素所有的屬性，另外再加上：muted(靜音)、poster(等待圖片)、width和height。最后兩個意思不用說了。當視頻正在加載或是視頻處于完全沒有加載的情況中時，poster屬性(指定一個絕對的或相對的URL)可讓你找出一張圖像來應付著先；muted代表靜音。

video也支持利用source元素解決兼容性問題?？匆粋€小例子：

代碼如下:

<video width="320" height="240" controls="controls" poster="/images/screen.gif">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
你的瀏覽器不支持video元素。
</video>

如果想不播放視頻的聲音，則設置muted="muted"即可。
除此以外，video元素還提供了一些方法、屬性和事件來支持在DOM操作中控制播放的進程。比如調(diào)用元素的播放、暫停、加載等方法。還有音量、播放時間等屬性可以直接讀取或設置。此外還有開始播放、暫停、結(jié)束的事件等可以使用?？聪旅娴睦樱?br/>

代碼如下:

<!DOCTYPE html>
<html>
<body>
<div >
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>

<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
你的瀏覽器不支持video元素。
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>

這里其實需要注意一種新的寫法：上面的例子中我們是這樣寫音頻元素的：

代碼如下:

<audio src="MyFirstMusic.ogg" controls="controls" autoplay="autoplay" loop="loop">
你的瀏覽器不支持audio元素。
</audio>

其實，在html5中引入了很多項controls，autoplay,loop這種布爾屬性，這些屬性你像上面這種寫是沒問題的，但是推薦的寫法是下面這種：

代碼如下:

<audio src="MyFirstMusic.ogg" controls autoplay loop>
你的瀏覽器不支持audio元素。
</audio>

因為瀏覽器遇到這些屬性就說明這些屬性開啟了，也就是說如果你寫上這些屬性，并強行設置為false，效果還是等同于true，所以一般推薦只寫屬性名稱。
這個寫法問題在form中也是存在的，很多form和input的新屬性都是布爾屬性，都應該使用推薦的寫法。

指示度量的元素
下面這些元素并不是每個瀏覽器都支持，但是基本上在Chrome上還可以可以看到效果的。
進度條元素
使用這個元素顯示下載的進度條，只有value和max兩個屬性，非常簡單。Chrome和FireFox都支持了。

代碼如下:

度量元素
使用這個元素可以顯示給定的值在標準范圍類的指示圖示，不同范圍內(nèi)的值會顯示不同的顏色。某些網(wǎng)站就采用這個東西顯示用戶的當前經(jīng)驗值。當瀏覽器不支持這個元素的時候，會直接顯示元素中間的文本。目前Chrome已經(jīng)支持了。

代碼如下:

運行一下，你會看到一個黃顏色的類似滾動條的東西；如果你把value改成50，你會發(fā)現(xiàn)指示條的顏色編程紅色了。

新增加的元素介紹就是這么多了，更多的元素說明請參看W3C中的完整Tag列表。

上述就是小編為大家分享的HTML5中新增加的元素及使用方法是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前標題：HTML5中新增加的元素及使用方法是怎樣的
分享地址：http://chinadenli.net/article44/jsijee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、服務器托管、移動網(wǎng)站建設、全網(wǎng)營銷推廣、網(wǎng)站建設、App設計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5中新增加的元素及使用方法是怎樣的