開發者必須知道的HTML5十五大新特性

2020-12-16 CSDN技術社區

 HTML5想必大家都很熟悉了，因為太多的媒體在討論這一技術。然而，你能準確地說出HTML5帶來了哪些新特性嗎？本文總結了HTML5帶來的15項你必須知道的新特性。

一起來看下：

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

目前許多網頁還在使用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">  

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

 

  1. <!DOCTYPE html>  

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" /> 
  2. <script type="text/javascript" src="path/to/script.js"></script>  

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

 

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

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>  

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

  1. <header> 
  2. ... 
  3. </header> 
  4. <footer> 
  5. ... 
  6. </footer> 

4.Hgroup

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

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

 

  1. <header> 
  2. <hgroup> 
  3.   <h1> Recall Fan Page </h1> 
  4.   <h2> Only for people who want the memory of a lifetime. </h2> 
  5. </hgroup> 
  6. </header>   

5.標記元素 (Mark Element)

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

 

  1. <h3> Search Results </h3> 
  2. <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" /> 
  2. <p>Image of Mars. </p>  

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

 

  1. <figure> 
  2. <img src="path/to/image" alt="About image" /> 
  3. <figcaption> 
  4.   <p>This is an image of something interesting. </p> 
  5. </figcaption> 
  6. </figure>  

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

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

8.佔位符 (Placeholder)

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

而在HTML5中，新的「placeholder」就簡化了這個問題。

9.必要屬性 (Required Attribute)

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

 

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

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

 

  1. <form method="post" action=""> 
  2. <label for="someInput"> Your Name: </label> 
  3. <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> 
  4. <button type="submit">Go</button> 
  5. </form>  

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

10.Autofocus 屬性 (Autofocus Attribute)

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

 

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

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">Download this file.</a> 
  5. </audio>  

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

12.Video 支持 (Video Support)

HTML5中不僅有<audio>元素，而且還有<video>。然而，和<audio>類似，HTML5中並沒有指定視頻解碼器，它留給了瀏覽器來決定。雖然Safari和Internet Explorer9可以支持H.264格式的視頻，Firefox和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> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> 
  5. </video>  

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

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

 

  1. <video preload>  

14.顯示控制條 (Display Controls)

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

 

  1. <video preload controls>  

15.正規表達式 (Regular Expressions)

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

 

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

結論

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

 

文章出自：http://www.ansoncheung.tk/

相關焦點

  • 開發者值得關注的HTML5新特性Canvas
    【IT168專稿】隨著IE 10的即將發布正式版，標誌者HTML5的時代已經越來離我們越來越近了，儘管HTML 5的最終標準草案還沒最終敲定，但象Chrome,Firefox等瀏覽器對HTML5的標準已經支持的十分完善了，IE 10的預覽版本也聲稱支持更多的HTML 5特性。
  • 怎麼理解Html5?Html5和html4相比有哪些優勢?怎麼學好html5?
    ，html5應用凝結很多人的心血，作為下一代超文本標記語言的核心，html5主要增加了新元素互操作性主要是針對行動裝置和多媒體。html5是現在前端培訓比較火熱的語言，今天為大家簡單介紹一下html5語言。Html5和html4相比有哪些優勢?
  • HTML5新特性開發者實踐之Canvas線條篇
    【IT168專稿】在HTML5中，其中最令開發者和用戶值得留意的新特性，莫過於Canvas的功能了，它能在目前的IE 9，IE 10以及Chrome,FireFox等多種瀏覽器中使用，是目前HTML5中富客戶端動畫效果的實現方式，有了它，HTML5就有了跟Adobe Flash對抗的資本，用戶以後只要使用支持HTML5
  • 事半功倍:你應該知道的HTML5五大特性
    1. DNS PrefetchingDNS主機名解析有時會出現拖慢網站速度的問題。DNS Prefetching特性允許開發者手動控制，告訴瀏覽器需要解析哪個域名。Link PrefetchingLink Prefetching特性允許開發者在頁面加載的時候預先加載他們希望指定的頁面或元素。
  • Html5在移動平臺獲得統治地位
    Flash的時代已經繁盛了很長一段時間，但是其諸多問題還是讓人無法忽視，Flash天生的特性就決定了它不適合手機和平板，這種致命缺陷讓Flash 在這個指尖時代明顯處於劣勢。開發者很容易就能做出適合手機和平板的界面，在手機上玩html5小遊戲也瞬間風靡世界。
  • 開發者所需要知道的iOS7 SDK新特性
    在iOS7界面重大變革的背後，開發者們需要知道的又有哪些呢。同去年一樣，我會先簡單縱覽地介紹iOS7中我個人認為開發者需要著重關注和學習的內容，之後再陸續對自己感興趣章節進行探索。計劃繼承類似WWDC2012的筆記的形式，希望對國內開發者有所幫助。
  • 【佳瑾學習】如何從Flash轉換到HTML5
    但是，隨著移動技術的快速發展，對於開發者來說，越來越難讓Flash滿足變化的需求，因為Flash課程需要針對不同的設備提供不同的課程版本。於是就出現了尋找響應式課程設計方式的需求。最終這一需求導向了html5，因為html5能夠提供靈活而強大的學習體驗。
  • HTML5調用攝像頭並拍照
    利用html5特性，調用攝像頭，並利用canvas拍照先簡單的添加需要的控制項<video id="video" autoplay=""style='width:640px;height:480px'></video><button id='picture
  • 手機QQ遊戲大廳發布Html5版 提振開發者信心
    但是業界對Html5技術的發展趨勢仍有不同看法，特別是遊戲開發者們對Html5仍然非常謹慎。近日，擁有上億用戶的手機QQ遊戲大廳針對iPad發布Html5版(h5.qq.com 體驗)，同步上線的還有當前最熱休閒遊戲Html5版歡樂鬥地主，分析認為手機QQ遊戲大廳對Html5的快速跟進，無疑是Html5遊戲開發市場的一針「強心劑」。
  • 讓IE瀏覽器支持HTML5標準的方法
    [endif]–> 上面這段代碼僅會在IE瀏覽器下運行，還有一點需要注意，在頁面中調用html5.js文件必須添加在頁面的head元素內，因為IE瀏覽器必須在元素解析前知道這個元素，所以這個js文件不能在頁面底部調用。
  • 口袋之旅新增精靈特性怎麼樣 精靈特性介紹
    口袋之旅新增精靈的特性介紹。口袋之旅h5一款還原口袋妖怪原作的回合制策略html5遊戲，不同的口袋妖怪有不同的屬性，招式也有其屬性，角色也是豐富多樣，一共400多個口袋妖怪，近千個不同的技能，給你帶來GBA時代那最初的激情與澎湃。
  • Python 3.8 即將到來,這是你需要關注的幾大新特性
    第二個 beta 版本發布後，Python 3.8 新特性已經添加完畢。官方目前已公布最終版本的發布時間，預計在今年的 10 月份。那麼，新的 Python 3.8 版本有哪些新特性和功能呢？機器之心根據 Python 基金會公開的文檔，整理出了以下值得期待的新特性和功能改進。
  • html5換行符元素:
    元素
    基本概念html5中的<br>元素用於產生一個換行符，它的名稱br正是單詞break的前兩個字母；break本身的含義為「打破、拆分」，在此處就引申為換行的意思。為什麼html5要專門定義一個元素來代表換行符呢？我們平常在辦公軟體中編輯文本的時候，如果要換行不是只要按下回車鍵就可以了嗎？
  • 前端HTML5面試官和應試者一問一答
    action特性把表單內容提交到另外一個頁面，而在html5中，為不同的「提交」按鈕分別添加formaction特性後，該特性會覆蓋表單的action特性，將表單提交至不同的頁面。特性。;form action=""> <input type="text" name="name"/> <br> <keygen name="security"/> <br><input type="submit"/></form>output元素用於不同類型的輸出，該元素必須從屬於某個表單
  • 用友iUAP馬太航:HTML5多媒體特性分析
    一是視頻截圖，video標籤本身並不支持視頻截圖功能，必須通過HTML5的canvas標籤實現，類似代碼如下：<video id="html5-video" width="500" height="380" controls autoplay><source src="video.mp4" type='video/mp4'></source>
  • 口袋之旅蜥蜴王怎麼樣 蜥蜴王形態特性詳解
    口袋之旅蜥蜴王怎麼樣，蜥蜴王形態特性詳解。口袋之旅h5一款還原口袋妖怪原作的回合制策略html5遊戲。遊戲內的口袋妖怪和原作一樣共分為17種不同屬性，例如火、水、草、電、冰、蟲、飛行、地面、巖石等等。小編今天帶給大家的是蜥蜴王形態特性介紹，還不知道蜥蜴王怎麼樣的小夥伴們一起來看看吧!
  • 每個Android開發者必須知道的資源集錦
    這篇文章比較適合於初學者和有一定經驗的Android開發者，文中羅列了最棒的資源。書也許你會認為從書中去學習新的開發框架會有點落伍，但這也確實是一條正確的道路。參見Jeff Atwood的《Programmers Don’t Read Books – But You Should》。
  • 大勢所趨 HTML5成Web開發者最關心的技術
    最近，在Stack Exchange上出現了一個比較熱門的問題：Web開發者最頭疼的問題是什麼？結果並不是大家通常認為的兼容性問題，而是關於HTML5。在所有與前端開發相關的技術中，如JavaScript、CSS3、HTML5等，Web開發者們私下最經常討論的技術領域是哪一個呢？理解這個問題就可以更好地了解當前在Web技術領域，大家所面臨的挑戰是什麼？
  • html5中progress標籤(進度條)的詳細介紹
    本篇將介紹html5中progress標籤（進度條）的詳細用法，有興趣的朋友可以了解一下！在html5中新增了很多實用的標籤，今天小編介紹的就是其中一個，即progress標籤。學會progress標籤，可以讓我們很輕鬆的創建一個進度條，接下來跟著小編一起來學習吧！
  • 微信小遊戲開發者必須知道的如何解決變現難題
    不過就適配度和體量而言，擁有強大社交基因的騰訊依然是開發者們最喜歡的平臺。而騰訊小遊戲也有一個變現的難題處於面前，就是iOS系統不支持內購。小遊戲開發者們只有通過廣告實現變現，所以積極進行生產自救!　　本文主要會講述騰訊微信小遊戲和QQ輕遊戲下的廣告分成比例，以及目前主流的廣告模式。