中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站設(shè)計人員必知的15個HTML5新特性

2022-07-17    分類: 網(wǎng)站設(shè)計

網(wǎng)站設(shè)計人員想必對HTML5都很熟悉了,因為太多的媒體在討論這一技術(shù),也出現(xiàn)大量的大師級的HTML5新作品。然而,你能準確地說出HTML5帶來了哪些新特性嗎?本文總結(jié)了HTML5帶來的15項你必須知道的新特性。


1.新的文檔類型 (New Doctype)

目前許多網(wǎng)頁還在使用XHTML 1.0 并且要在第一行像這樣聲明文檔類型:


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

在HTML5中,上面那種聲明方式將失效。下面是HTML5中的聲明方式:


  >  2.腳本和鏈接無需type  (No More Types for Scripts and Links)

在HTML4或XHTML中,你需要用下面的幾行代碼來給你的網(wǎng)頁添加CSS和JavaScript文件。


    script>  

而在HTML5中,你不再需要指定類型屬性。因此,代碼可以簡化如下:


    script>   3.語義Header和Footer (The Semantic Header and Footer)

在HTML4或XHTML中,你需要用下面的代碼來聲明"Header"和"Footer"。


    ...  div>  ..........    ...  div>  

在HTML5中,有兩個可以替代上述聲明的元素,這可以使代碼更簡潔。

 
  ...  header> 
  ...  footer> 
4.Hgroup

在HTML5中,有許多新引入的元素,hgroup就是其中之一。假設(shè)我的網(wǎng)站名下面緊跟著一個子標(biāo)題,我可以用

和 標(biāo)簽來分別定義。然而,這種定義沒有說明這兩者之間的關(guān)系。而且,h2標(biāo)簽的使用會帶來更多問題,比如該頁面上還有其他標(biāo)題的時候。

在HTML5中,我們可以用hgroup元素來將它們分組,這樣就不會影響文件的大綱。


 
 
 

 Recall Fan Page h1> 

 Only for people who want the memory of a lifetime. h2>  hgroup>  header>    5.標(biāo)記元素 (Mark Element)

你可以把它當(dāng)做高亮標(biāo)簽。被這個標(biāo)簽修飾的字符串應(yīng)當(dāng)和用戶當(dāng)前的行動相關(guān)。比如說,當(dāng)我在某博客中搜索“Open your Mind”時,我可以利用一些JavaScript將出現(xiàn)的詞組用修飾一下。


 

 Search Results h3> 

 They were interrupted, just after Quato said, "Open your Mind"mark>. p>   6.圖形元素 (Figure Element)

在HTML4或XHTML中,下面的這些代碼被用來修飾圖片的注釋。


   

Image of Mars. p>  

然而,上述代碼沒有將文字和圖片內(nèi)在聯(lián)系起來。因此,HTML5引入了元素。當(dāng)和結(jié)合起來后,我們可以語義化地將注釋和相應(yīng)的圖片聯(lián)系起來。


 
   
 

This is an image of something interesting. p>  figcaption>  figure>   7.重新定義 (Small Element redefined)

在HTML4或XHTML中,元素已經(jīng)存在。然而,卻沒有如何正確使用這一元素的完整說明。在HTML5中,被用來定義小字。試想下你網(wǎng)站底部的版權(quán)狀態(tài),根據(jù)對此元素新的HTML5定義,可以正確地詮釋這些信息。

8.占位符 (Placeholder)

在HTML4或XHTML中,你需要用JavaScript來給文本框添加占位符。比如,你可以提前設(shè)置好一些信息,當(dāng)用戶開始輸入時,文本框中的文字就消失。

而在HTML5中,新的“placeholder”就簡化了這個問題。

9.必要屬性 (Required Attribute)

HTML5中的新屬性“required”指定了某一輸入是否必需。有兩種方法聲明這一屬性。


      

當(dāng)文本框被指定必需時,如果空白的話表格就不能提交。下面是一個如何使用的例子。


     Your Name: label>    Gobutton>  form>  

在上面那個例子中,如果輸入內(nèi)容空且表格被提交,輸入框?qū)⒈桓吡溜@示。

10.Autofocus 屬性 (Autofocus Attribute)

同樣,HTML5的解決方案消除了對JavaScript的需要。如果一個特定的輸入應(yīng)該是“選擇”或聚焦,默認情況下,我們現(xiàn)在可以利用自動聚焦屬性。


    11.Audio 支持 (Audio Support)

目前我們需要依靠第三方插件來渲染音頻。然而在HTML5中,元素被引進來了。


        Download this file.a>  audio>  

當(dāng)使用元素時請記得包含兩種音頻格式。FireFox想要.ogg格式的文件,而Webkit瀏覽器則需要.mp3格式的。和往常一樣,IE是不支持的,且Opera 10及以下版本只支持.wav格式。

12.Video 支持 (Video Support)

HTML5中不僅有元素,而且還有。然而,和類似,HTML5中并沒有指定視頻解碼器,它留給了瀏覽器來決定。雖然Safari和Internet Explorer9可以支持H.264格式的視頻,F(xiàn)irefox和Opera是堅持開源Theora 和Vorbis格式。因此,指定HTML5的視頻時,你必須提供這兩種格式。


       

 Your browser is old. Download this video instead.a> p>  video>   13.視頻預(yù)載 (Preload attribute in Videos element)

當(dāng)用戶訪問頁面時這一屬性使得視頻得以預(yù)載。為了實現(xiàn)這個功能,可以在元素中加上preload="preload"或者只是preload。


    14.顯示控制條 (Display Controls)

如果你使用過上面的每一個提到的技術(shù)點,你可能已經(jīng)注意到,使用上面的代碼,視頻僅僅顯示的是張圖片,沒有控制條。為了渲染出播放控制條,我們必須在video元素內(nèi)指定controls屬性。


    15.正規(guī)表達式 (Regular Expressions)

在HTML4或XHTML中,你需要用一些正規(guī)表達式來驗證特定的文本。而HTML5中新的pattern屬性讓我們能夠在標(biāo)簽處直接插入一個正規(guī)表達式。


    Create a Username: label>    Go button>  form>   結(jié)論

事實上,還有很多新元素和特性,上面提到的只是HTML5中一些我認為網(wǎng)站開發(fā)中常用的,剩下的就由你們自己去摸索HTML5啦。

歡迎轉(zhuǎn)載,本文版權(quán)歸于成都網(wǎng)站建設(shè)(www.rwnh.cn)相關(guān)閱讀:HTML 5 & CSS 3 的新交互特性分享

名稱欄目:網(wǎng)站設(shè)計人員必知的15個HTML5新特性
文章來源:http://www.rwnh.cn/news/180555.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站設(shè)計

廣告

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

余庆县| 东阿县| 华坪县| 盘山县| 宾川县| 彰化市| 湟源县| 饶河县| 红原县| 航空| 游戏| 固阳县| 广宁县| 洛浦县| 榆树市| 宁国市| 潮州市| 中方县| 潢川县| 凉城县| 乌恰县| 莱阳市| 宜兰县| 鄂托克前旗| 屏南县| 中西区| 汉寿县| 扬中市| 高密市| 木里| 博罗县| 和林格尔县| 阿坝县| 襄汾县| 衡阳市| 望都县| 北京市| 阳曲县| 张家口市| 府谷县| 柳州市|