免费亚洲欧美精品电影_国内精品偷拍福利视频_美女黄网站色视免费国产_国产不卡福利片在线观看

24小時咨詢電話:0571-88023217營口網站建設公司 10年專業(yè)網絡服務供應商

資訊中心

- 直擊網站建設第一現場,掌握全球化的消息 -

當前位置 : 首頁 > 資訊中心 > 網站設計人員必知的15個HTML5新特性

網站設計人員必知的15個HTML5新特性

分享 2012.03.12 瀏覽次數:7139次

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

 

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

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

 

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

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

 

 
  1. >  

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

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

 

 
  1. <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> 
    • <script type="text/javascript" src="path/to/script.js">script>  

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

 

 
  1. <link rel="stylesheet" href="path/to/stylesheet.css" /> 
    • <script src="path/to/script.js">script>  

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

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

 

 
  1. <div id="header"> 
    • ... 
      • div> 
        • .......... 
          • <div id="footer"> 
            • ... 
              • div>  

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

 
  1. <header> 
    • ... 
      • header> 
        • <footer> 
          • ... 
            • footer> 

 

4.Hgroup

在HTML5中,有許多新引入的元素,hgroup就是其中之一。假設我的網站名下面緊跟著一個子標題,我可以用

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

 

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

 

 
  1. <header> 
    • <hgroup> 
      •   <h1> Recall Fan Page h1> 
        •   <h2> Only for people who want the memory of a lifetime. h2> 
          • hgroup> 
            • header>   

5.標記元素 (Mark Element)

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

 

 
  1. <h3> Search Results h3> 
    • <p> They were interrupted, just after Quato said, <mark>"Open your Mind"mark>. p>  

6.圖形元素 (Figure Element)

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

 

 
  1. <img src="path/to/image" alt="About image" /> 
    • <p>Image of Mars. p>  

然而,上述代碼沒有將文字和圖片內在聯系起來。因此,HTML5引入了元素。當和結合起來后,我們可以語義化地將注釋和相應的圖片聯系起來。

 

 
  1. <figure> 
    • <img src="path/to/image" alt="About image" /> 
      • <figcaption> 
        •   <p>This is an image of something interesting. p> 
          • figcaption> 
            • figure>  

7.重新定義 (Small Element redefined)

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

8.占位符 (Placeholder)

HTML4XHTML中,你需要用JavaScript來給文本框添加占位符。比如,你可以提前設置好一些信息,當用戶開始輸入時,文本框中的文字就消失。

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

9.必要屬性 (Required Attribute)

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

 

 
  1. <input type="text" name="someInput" required> 
    • <input type="text" name="someInput" required="required">  

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

 

 
  1. <form method="post" action=""> 
    • <label for="someInput"> Your Name: label> 
      • <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> 
        • <button type="submit">Gobutton> 
          • form>  

在上面那個例子中,如果輸入內容空且表格被提交,輸入框將被高亮顯示。

10.Autofocus 屬性 (Autofocus Attribute)

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

 

 
  1. <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  

11.Audio 支持 (Audio Support)

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

 

 
  1. <audio autoplay="autoplay" controls="controls"> 
    •      <source src="file.ogg" /> 
      •      <source src="file.mp3" /> 
        •      <a href="file.mp3">Download this file.a> 
          • audio>  

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

12.Video 支持 (Video Support)

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

 

 
  1. <video controls preload> 
    • <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> 
      • <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> 
        • <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.a> p> 
          • video>  

13.視頻預載 (Preload attribute in Videos element)

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

 

 
  1. <video preload>  

14.顯示控制條 (Display Controls)

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

 

 
  1. <video preload controls>  

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

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

 

 
  1. <form action="" method="post"> 
    • <label for="username">Create a Username: label> 
      •     <input type="text" 
        •     name="username" 
          •     id="username" 
            •     placeholder="4 <> 10" 
              •     pattern="[A-Za-z]{4,10}" 
                •     autofocus 
                  •     required> 
                    • <button type="submit">Go button> 
                      • form>  

結論

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

歡迎轉載,本文版權歸于杭州網站建設(http://www.sharetheflairshow.com)相關閱讀:HTML 5 & CSS 3 的新交互特性分享

最新網站案例

洞悉市場趨勢演變讓傳播回歸社會

    免費獲取網站建設與網絡推廣方案報價

    • 關于我們

      杭州帷拓科技有限公司,是一家新型的全案網絡開發(fā)公司,作為以互聯網高端網站建設、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網絡技術服務供應商,帷拓科技致力于全面分析市場環(huán)境、衡量與預測市場需求、整合區(qū)別于行業(yè)競爭對手的絕對優(yōu)勢,結合品牌理念深度挖掘項目優(yōu)勢和產品價值,提升客戶品牌認知、認可度。

    • 我們的客戶

      帷拓科技歷經十年沉淀,與國內外上千家客戶達成合作關系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動、浙江5G產業(yè)聯盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學校、健康中國杭州峰會、科雷機電等,帷拓科技始終堅持“帷有專業(yè),才能拓展無限”的服務理念,堅持“認真堅持細節(jié)”的優(yōu)質服務理念,不斷完善自身,成就企業(yè),最終實現共贏。

    • 我們的業(yè)務

      帷拓科技主營業(yè)務范圍包含互聯網高端網站建設、APP開發(fā)、小程序開發(fā)、商城網站建設、公眾號運營以及數字營銷等,涵蓋了服務、房產、數碼、服裝、物流貿易等行業(yè),根據品牌現狀,為每個客戶量身定制項目整體服務方案,以敏銳的市場洞察力、創(chuàng)新的市場策劃能力,全面把握市場變化,為客戶實現從企業(yè)到消費者的價值轉換。

    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur