文章2
簡介
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)HTML5中新增加的元素及使用方法是怎樣的,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、池州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為池州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
考慮我們開發(fā)一個(gè)頁面的過程:
1.設(shè)計(jì)頁面的結(jié)構(gòu) - HTML:這個(gè)過程是使用各種HTML元素構(gòu)建網(wǎng)頁的結(jié)構(gòu)。
2.設(shè)計(jì)頁面的外觀 - CSS:這個(gè)過程是使用CSS去改善網(wǎng)頁的外觀。
3.設(shè)計(jì)頁面的行為 - Javascript:這個(gè)過程是給網(wǎng)頁的元素賦予一定的行為。
上面這些除了CSS外,HTML5在另外兩個(gè)方面都不同程度的進(jìn)行了擴(kuò)充。這個(gè)系列是集中在第一個(gè)方面。在前面,我們已經(jīng)學(xué)習(xí)了復(fù)雜的canvas和svg元素,下面的章節(jié)會(huì)總結(jié)其他HTML5增加的元素。
結(jié)構(gòu)型元素
HTML5中加入了全新的結(jié)構(gòu)型元素,例如頁眉header,頁腳footer,導(dǎo)航nav,內(nèi)容article,章節(jié)section等。含義如下圖所示:
除了這種整個(gè)頁面的結(jié)構(gòu)型元素,html5也加入了塊級別的語義元素,例如輔助元素aside,圖像元素figure,細(xì)節(jié)描述元素details等。這些元素除了更能顯示頁面的布局含義外,與普通的div并沒有其它的區(qū)別,仍然需要靠CSS去展示這些元素。這里就是簡單看一個(gè)小例子:
代碼如下:
簡介
簡介
雖然這些元素使用起來都比較簡單,但還是需要注意幾點(diǎn):
1. 不要使用section作為div的替代品
section并不是樣式容器。section元素表示的是內(nèi)容中用來幫助構(gòu)建文檔概要的語義部分。它應(yīng)該包含一個(gè)頭部。它通常是最為article的部分存在(當(dāng)然article作為它的部分也是可以的)。如果你想找一個(gè)用作頁面容器的元素或者是需要額外的樣式容器,還是繼續(xù)使用div吧。
2. 只在需要的時(shí)候使用header和hgroup
寫不需要寫的標(biāo)簽是毫無意義的。header和hgroup的使用場景通常如下:
• header元素表示的是一組介紹性或者導(dǎo)航性質(zhì)的輔助文字,經(jīng)常用作section的頭部。
• 當(dāng)頭部有多層結(jié)構(gòu)時(shí),比如有子頭部,副標(biāo)題,各種標(biāo)識文字等,使用hgroup將h2-h7元素組合起來作為section的頭部。
這里如果header或hgroup只有少數(shù)頭部元素,不如就去掉這2個(gè)雞肋標(biāo)簽吧,例如:
代碼如下:
My best blog post
直接修改成:
代碼如下:
My best blog post
同樣的道理:
代碼如下:
by Rich Clark
My best blog post
直接改成:
代碼如下:
by Rich ClarkMy best blog post
3. 不要濫用nav
nav元素表示頁面中鏈接到其他頁面或者本頁面其他部分的區(qū)塊;包含導(dǎo)航鏈接的區(qū)塊。
但是不是所有頁面上的鏈接都需要放在nav元素中——這個(gè)元素本意是用作主要的導(dǎo)航區(qū)塊。舉個(gè)具體的例子,在footer中經(jīng)常會(huì)有眾多的鏈接,比如服務(wù)條款,主頁,版權(quán)聲明頁等等。footer元素自身已經(jīng)足以應(yīng)付這些情況,雖然nav元素也可以用在這里,但通常我們認(rèn)為是不必要的。
4. 不要濫用figure
figure應(yīng)該是“一些流動(dòng)的內(nèi)容,有時(shí)候會(huì)有包含于自身的標(biāo)題說明。一般在文檔流中會(huì)作為獨(dú)立的單元引用。”這正是figure的最佳適用場景——它可以從主內(nèi)容頁移動(dòng)到sidebar中,而不影響文檔流。figure只應(yīng)該被引用在文檔中,或者被section元素圍繞。
如果純粹只是為了呈現(xiàn)的圖(比如logo),也不在文檔其他地方引用,也沒有移動(dòng)位置的需要,那就絕對不要使用figure。
5. 不要使用不必要的type屬性
在HTML5中,script和style元素不再需要type屬性。當(dāng)然寫上并沒有什么問題,只不過從最佳實(shí)踐的角度,是不需要寫的。
音頻元素
audio元素用于標(biāo)識聲音內(nèi)容,比如說音樂或是任何的其他音頻流。該元素支持的格式如下表所示:
IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
---|---|---|---|---|---|
Ogg Vorbis | √ | √ | √ | ||
MP3 | √ | √ | √ | ||
Wav | √ | √ | √ |
audio標(biāo)簽有一些屬性用來控制音頻的內(nèi)容、何時(shí)以及如何播放等方面的情況,這些屬性分別是:src(文件名)、preload(在頁面加載時(shí)加載)、controls(顯示控制)、loop(循環(huán))和autoplay(自動(dòng)播放)。在下面的例子中,只要頁面一加載音頻就開會(huì)播放,其會(huì)持續(xù)播放,所提供的控制可以讓用戶停止或是重新開始播放音頻:
代碼如下:
如果瀏覽器不支持該元素,則顯示元素的文本信息。
如果設(shè)置了autoplay元素,則自動(dòng)忽略preload屬性。設(shè)置preload="auto"的話,則頁面加載后載入音頻。
audio元素允許指定多個(gè)source元素來兼容瀏覽器的問題。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個(gè)可識別的格式:
代碼如下:
視頻元素
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。最后兩個(gè)意思不用說了。當(dāng)視頻正在加載或是視頻處于完全沒有加載的情況中時(shí),poster屬性(指定一個(gè)絕對的或相對的URL)可讓你找出一張圖像來應(yīng)付著先;muted代表靜音。
video也支持利用source元素解決兼容性問題??匆粋€(gè)小例子:
代碼如下:
如果想不播放視頻的聲音,則設(shè)置muted="muted"即可。
除此以外,video元素還提供了一些方法、屬性和事件來支持在DOM操作中控制播放的進(jìn)程。比如調(diào)用元素的播放、暫停、加載等方法。還有音量、播放時(shí)間等屬性可以直接讀取或設(shè)置。此外還有開始播放、暫停、結(jié)束的事件等可以使用。看下面的例子:
代碼如下:
這里其實(shí)需要注意一種新的寫法:上面的例子中我們是這樣寫音頻元素的:
代碼如下:
其實(shí),在html5中引入了很多項(xiàng)controls,autoplay,loop這種布爾屬性,這些屬性你像上面這種寫是沒問題的,但是推薦的寫法是下面這種:
代碼如下:
因?yàn)闉g覽器遇到這些屬性就說明這些屬性開啟了,也就是說如果你寫上這些屬性,并強(qiáng)行設(shè)置為false,效果還是等同于true,所以一般推薦只寫屬性名稱。
這個(gè)寫法問題在form中也是存在的,很多form和input的新屬性都是布爾屬性,都應(yīng)該使用推薦的寫法。
指示度量的元素
下面這些元素并不是每個(gè)瀏覽器都支持,但是基本上在Chrome上還可以可以看到效果的。
進(jìn)度條元素
使用這個(gè)元素顯示下載的進(jìn)度條,只有value和max兩個(gè)屬性,非常簡單。Chrome和FireFox都支持了。
代碼如下:
下載進(jìn)度:
度量元素
使用這個(gè)元素可以顯示給定的值在標(biāo)準(zhǔn)范圍類的指示圖示,不同范圍內(nèi)的值會(huì)顯示不同的顏色。某些網(wǎng)站就采用這個(gè)東西顯示用戶的當(dāng)前經(jīng)驗(yàn)值。當(dāng)瀏覽器不支持這個(gè)元素的時(shí)候,會(huì)直接顯示元素中間的文本。目前Chrome已經(jīng)支持了。
代碼如下:
你的分?jǐn)?shù)是:
運(yùn)行一下,你會(huì)看到一個(gè)黃顏色的類似滾動(dòng)條的東西;如果你把value改成50,你會(huì)發(fā)現(xiàn)指示條的顏色編程紅色了。
新增加的元素介紹就是這么多了,更多的元素說明請參看W3C中的完整Tag列表。
上述就是小編為大家分享的HTML5中新增加的元素及使用方法是怎樣的了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。