首頁技術(shù)文章正文

Web前端開發(fā)培訓(xùn)之HTML5 如何重新定義web

更新時間:2017-06-21 來源:黑馬程序員web前端開發(fā)培訓(xùn)學(xué)院 瀏覽量:

HTML5的標簽重新定義,其屬性更加簡單高效,本地存儲、緩存技術(shù)更加完善,簡單易用,最重要的是其游戲開發(fā)方面,canvas的繪制,加之以用于開發(fā)3D游戲,更加方便快捷,無需下載,打開瀏覽器就可以玩。對視頻音頻的支持也更加完美,是web的重大革新。另本文總結(jié)了HTML5帶來的15項你必須知道的新特性(偏基礎(chǔ))。

一起來看下:

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  3. >
復(fù)制代碼

在HTML5中,上面那種聲明方式將失效。下面是HTML5中的聲明方式:
  1. <!DOCTYPE html
  2. >
復(fù)制代碼

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

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

  1. <link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
  2. <script type="text/javascript" src="js/script.js"></script>
復(fù)制代碼

而在HTML5中,你不再需要指定類型屬性。因此,代碼可以簡化如下:
  1. <link rel="stylesheet" href="css/stylesheet.css" />
  2. <script src="js/script.js"></script>
復(fù)制代碼

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

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

  1. <div id="header">
  2. ... 
  3. </div>
  4. .......... 
  5. <div id="footer">
  6. ... 
  7. </div>
復(fù)制代碼

在HTML5中,有兩個可以替代上述聲明的元素,這可以使代碼更簡潔。
  1. <header>
  2. ... 
  3. </header>
  4. <footer>
  5. ... 
  6. </footer>
復(fù)制代碼

4.Hgroup

在HTML5中,有許多新引入的元素,hgroup就是其中之一。假設(shè)我的網(wǎng)站名下面緊跟著一個子標題,我可以用<h1>和<h2>標簽來分別定義。然而,這種定義沒有說明這兩者之間的關(guān)系。而且,h2標簽的使用會帶來更多問題,比如該頁面上還有其他標題的時候。


在HTML5中,我們可以用hgroup元素來將它們分組,這樣就不會影響文件的大綱。
  1. <header>
  2. <hgroup> 
  3. <h1>
  4. Recall Fan Page 
  5. </h1> 
  6. <h2>
  7. Only for people who want the memory of a lifetime. 
  8. </h2>
  9. </hgroup>
  10. </header>
復(fù)制代碼

5.標記元素 (Mark Element)

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

  1. <h3>
  2. Search Results 
  3. </h3>
  4. <p>
  5. They were interrupted, just after Quato said, 
  6. <mark>
  7. "Open your Mind"
  8. </mark>
  9. . 
  10. </p>
復(fù)制代碼

6.圖形元素 (Figure Element)

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

  1. <img src="images/image" alt="About image" />
  2. <p>
  3. Image of Mars. 
  4. </p>
復(fù)制代碼

然而,上述代碼沒有將文字和圖片內(nèi)在聯(lián)系起來。因此,HTML5引入了<figure>元素。當和<figcaption>結(jié)合起來后,我們可以語義化地將注釋和相應(yīng)的圖片聯(lián)系起來。
  1. <figure>
  2. <img src="path/to/image" alt="About image" />
  3. <figcaption>  
  4. <p>
  5. This is an image of something interesting. 
  6. </p>
  7. </figcaption>
  8. </figure>
復(fù)制代碼

7.重新定義<small> (Small Element redefined)

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

8.占位符 (Placeholder)

在HTML4或XHTML中,你需要用JavaScript來給文本框添加占位符。比如,你可以提前設(shè)置好一些信息,當用戶開始輸入時,文本框中的文字就消失。
而在HTML5中,新的“placeholder”就簡化了這個問題。


9.必要屬性 (Required Attribute)

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

<input type="text" name="someInput" required>

<input type="text" name="someInput" required="required">

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

  1. <form method="post" action="">
  2. <label for="someInput">
  3. Your Name: 
  4. </label>
  5. <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
  6. <button type="submit">
  7. Go
  8. </button>
  9. </form>
復(fù)制代碼

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

10.Autofocus 屬性 (Autofocus Attribute)

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

  1. <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
復(fù)制代碼

11.Audio 支持 (Audio Support)

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

  1. <audio autoplay="autoplay" controls="controls">     
  2. <source src="file.ogg" />     
  3. <source src="file.mp3" />     
  4. <a href="file.mp3">
  5. Download this file.
  6. </a>
  7. </audio>
復(fù)制代碼

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

12.Video 支持 (Video Support)

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

  1. <video controls preload>
  2. <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
  3. <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
  4. <p>
  5. Your browser is old. 
  6. <a href="cohagenPhoneCall.mp4">
  7. Download this video instead.
  8. </a>
  9. </p>
  10. </video>
復(fù)制代碼

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

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

  1. <video preload>
復(fù)制代碼

14.顯示控制條 (Display Controls)

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

<
video preload controls
>

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

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

  1. <form action="" method="post">
  2. <label for="username">
  3. Create a Username: 
  4. </label>    
  5. <input type="text" name="username" id="username" 
  6.     placeholder="4 <> 10" 
  7.     pattern="[A-Za-z]{4,10}" 
  8.     autofocus 
  9.     required>
  10. <button type="submit">
  11. Go 
  12. </button>
  13. </form>
復(fù)制代碼


本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處,謝謝!
作者:黑馬程序員web前端培訓(xùn)學(xué)院;
首發(fā):http://web.itheima.com/ 

分享到:
在線咨詢 我要報名
和我們在線交談!