2. 程式人生 > >10分鐘HTML5入門基礎知識（一）

10分鐘HTML5入門基礎知識（一）

阿新 • • 發佈：2018-11-28
毫無疑問，對於開發人員而言， HTML5 已是一個熱點話題。如果你需要快速瞭解HTML5的功能的基本原理，閱讀本文是你最好的選擇。

本文來自The Code Project的付費搜尋位置，由Solution Center提供。這裡的文章致力於向大家提供我們認為對開發人員來說有用和有價值的產品和服務的相關資訊由IE9和HTML5 /  CSS3  Zone帶來 。

本文會涵蓋新的語義標籤、為繪圖和動畫而設計的畫布（canvas）、音訊和視訊支援，以及在舊版瀏覽器上如何使用HTML5。看完這些內容所用的時間可能會比五分鐘多一點點，但我保證會講得快一些。請接著看下去，下面的內容肯定值得你這麼做！


語義標籤和頁面佈局

我們首先講一個關於一所大學的經典故事。這所大學在建設校園草地時，沒有開闢任何步行小道，他們把整個空地種上草，然後等待。
一年以後，人們經常走過的地方，草都被踩光了。於是，這所大學就將這些地方鋪設為真正的人行道。

棒極了！這些人行道是人們真正“走”出來的。

HTML5新語義元素的誕生正是基於同樣的邏輯。（關於這一點，可以參看W3C設計指南中的“Pave the Cowpaths”。）

語義元素清晰地向瀏覽器和開發人員表明了它們的涵義和用途，要理解這一點，可以將它們與< div>標籤進行對比。在HTML檔案內，< div>標籤能定義出一個分割槽或者一個小節，但是它無法告訴我們分割槽裡的內容，不能傳達任何清晰的涵義。


開發人員通常會將ID或者類名與< div>標籤配合使用，這會向程式設計師傳達更多的涵義。但遺憾的是，這並不能幫助瀏覽器領會那種標籤的用途。< div id="header">

在HTML5中，有不少新的富含語義的元素，可以向瀏覽器和開發人員傳達元素的用途。< header>

W3C挖掘了數億個的Web頁面，找出開發人員一直在使用的ID和類名。一旦開發人員丟擲div1、div2這些無意義標籤，他們就得到了一個描述非常細緻的已經在使用的元素的列表，並讓其成為W3C的標準設定。

下面是HTML5的一部分新的語義元素：
• article

• aside
• figcaption
• figure
• footer
• header
• hgroup
• mark
• nav
• section
• time

由於這些元素的語義很豐富，相信你可能會猜出其中大部分元素的作用。
為了說得更清楚，下面給出一張圖示。

1.jpg

header和footer的作用不言自明，nav將創造一個導航條或者選單條。此外，你可以用section和article將頁面內容分為幾個部分。最後，aside元素用來安置附帶的內容，比如說，以邊欄的形式放上一些相關連結。

下面是一個簡單的例子，其中的程式碼就用到了這些元素。
  1.             <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Title</title>
  6.     <link href="css/html5reset.css" rel="stylesheet" />
  7.     <link href="css/style.css" rel="stylesheet" />
  8. </head>
  9. <body>
  10.     <header>
  11.         <hgroup>
  12.             <h1>Header in h1</h1>
  13.             <h2>Subheader in h2</h2>
  14.         </hgroup>
  15.     </header>
  16.     <nav>
  17.         <ul>
  18.             <li><a href="#">Menu Option 1</a></li>
  19.             <li><a href="#">Menu Option 2</a></li>
  20.             <li><a href="#">Menu Option 3</a></li>
  21.         </ul>
  22.     </nav>
  23.     <section>
  24.         <article>
  25.             <header>
  26.                 <h1>Article #1</h1>
  27.             </header>
  28.             <section>
  29.                 This is the first article.  This is <mark>highlighted</mark>.
  30.             </section>
  31.         </article>
  32.         <article>
  33.             <header>
  34.                 <h1>Article #2</h1>
  35.             </header>
  36.             <section>
  37.                 This is the second article.  These articles could be blog posts, etc.  
  38.             </section>
  39.         </article>
  40.     </section>
  41.     <aside>
  42.         <section>
  43.             <h1>Links</h1>
  44.             <ul>
  45.                 <li><a href="#">Link 1</a></li>
  46.                 <li><a href="#">Link 2</a></li>
  47.                 <li><a href="#">Link 3</a></li>
  48.             </ul>
  49.         </section>
  50.         <figure>
  51.             <img width="85" height="85" 
  52.                 src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
  53.                 alt="Jennifer Marsman" />
  54.             <figcaption>Jennifer Marsman</figcaption>
  55.         </figure>
  56.     </aside>
  57.     <footer>Footer - Copyright 2011</footer>
  58. </body>
  59. </html>
複製程式碼
當然，在這個例子裡，我也引出了另外幾個新元素。

不知道你是否注意到hgroup元素，它將h1和h2這兩個header組合到一起了？

我們可以用mark元素將重要文字高亮顯示或標記出來。如果要在內容中插入一張圖（影象、圖表、照片和程式碼片段等），可以使用figure元素。而figcaption元素能為圖加上標題。當把以上程式碼和一些CSS程式碼組合後，得到的Web頁面如下圖所示。

2.jpg

在一些擅長CSS的朋友（可惜我不擅長CSS）的幫助下，上面這個結果看起來靚爆了！實際上，有了HTML的描述性，完成這個頁面非常容易。

還要說明一點，如果你是Visual Studio的擁躉，請確保已經安裝了Visual Studio 2010 SP1。否則，你將發現Visual Studio並不理解HTML5元素，從而導致Web頁面上到處是歪歪曲曲的線條。

然後，在Visual Studio選單中依次選擇“Tools”-“Options”，開啟一個“Options”對話方塊。從左側的導航面板，依次展開“Text Editor”和“HTML”，單擊“Validation”。在“Target”下拉列表框中選擇HTML5，這樣就能得到對HTML5 IntelliSense的支援了。

3.jpg

使用Canvas元素在HTML5中進行繪畫

HTML5中另外一個新元素是< canvas>標籤。顧名思義，它就是一塊用來繪畫的空白平面。你需要使用JavaScript在這塊畫布上進行操作和繪畫。

你可能需要為canvas元素賦予一個id屬性，這樣就能通過JavaScript程式碼以程式設計的方式訪問它。如果你正在使用jQuery，並且在頁面上只有一個canvas，你可以使用$(‘canvas’)來訪問它，而不用為它命名。

你也可以為canvas指定height（高度）和width（寬度），但這不是必需的。在< canvas> 和< /canvas>標籤之間，你還可以指定一些文字，顯示在不支援canvas元素的瀏覽器中。

下面是使用canvas進行繪畫的一個簡單例子。（我希望畫一張蘇格蘭國旗，如果畫得不是非常精確，請見諒。）

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.     <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
  5.     <script type="text/javascript">

  7.         var canvas = document.getElementById('myCanvas');
  8.         var ctx = canvas.getContext('2d');

  10.         // Draw blue rectangle
  11.         ctx.fillStyle = '#0065BD';
  12.         ctx.fillRect(0, 0, 125, 75);

  14.         // Draw white X
  15.         ctx.beginPath();
  16.         ctx.lineWidth = "15";
  17.         ctx.strokeStyle = "white";
  18.         ctx.moveTo(0, 0);
  19.         ctx.lineTo(125, 75);
  20.         ctx.moveTo(125, 0);
  21.         ctx.lineTo(0, 75);
  22.         ctx.stroke();

  24.     </script>
  25. </body>
  26. </html>
複製程式碼 上面的程式碼將生成以下結果。

4.jpg

現在我們從頭到尾分析一下程式碼。

首先，我建立了一塊畫布（canvas），併為它賦予了一個ID叫“myCanvas”。如果執行這段程式碼的瀏覽器不支援canvas元素，它就會在旗幟原本要出現的位置顯示“Your browser does not support the canvas tag”。

接下來，我編寫了一段指令碼。記住，canvas標籤只是一個用來畫圖的容器，你必須用JavaScript來畫圖並將其呈現出來。我首先通過使用ID“myCanvas”獲得了對canvas的一個引用，然後得到canvas的上下文。上下文所提供的方法和屬性，都可以用來在canvas上操作圖形和進行繪畫。這裡指定了引數“2d”，表示我將在2維的環境中來進行繪畫。

第三步，完成藍色矩形的繪畫。我用fillStyle方法指定了矩形的顏色為藍色，再用fillRect方法畫出了矩形，後者的引數指定了矩形的大小與位置。fillRect(0, 0, 125, 75)表示：從左上角的頂點（0,0）開始畫一個矩形，寬為125畫素，高為75畫素。

最後，我在旗幟上畫出了一個白色的“X”。我首先呼叫beginPath方法啟動畫路徑的程序。指定的lineWidth屬性值（也就是路徑的寬度）為15畫素，這是通過不斷猜想加嘗試才找到的看起來最合適的值。另一個屬性strokeStyle則被指定為“white”，以表示路徑顏色為白色。接下來，依靠moveTo和lineTo兩個方法描繪出了整個路徑。這兩個方法都會定位出一個用來繪圖的游標，其區別在於：前者移動游標的時候不會畫出一條線，而後者在移動的同時會畫線。在畫X的過程中，首先從（0,0）——左上角開始，然後畫一條線到（125,75）——右下角。接著把游標移到（125,0）——右上角，一筆畫到（0,75）——左下角。最後的stroke方法將真正地呈現這些筆畫。

canvas與SVG的簡單對比

可縮放向量圖形（Scalable Vector Graphics，簡稱SVG）是在瀏覽器視窗進行繪畫的一個早期標準。隨著HTML5的canvas的釋出，許多人都想知道它們之間到底孰優孰劣。

在我看來，它們之間最大的區別就是：canvas使用立即呈現模式，而SVG使用保留呈現模式。這意味著，canvas可以讓所畫的圖形立即呈現在顯示器裡。在上面給出的程式碼中，一旦旗幟畫完，系統就會“忘掉”它，且不會有任何狀態保留下來。如果對它進行改動，將會導致徹底的重畫。與之相比，SVG保留了所呈現物件的一個完整模型。要對圖做出改動時，你只需要指出改動的地方（例如矩形的新位置），瀏覽器來負責呈現新的圖形。這節省了開發人員的工作，但也為維護模組付出了效能上的代價。

能夠同時通過CSS和JavaScript來進行設計，是SVG另一個值得稱道的優點。與之相比，canvas只能通過JavaScript來進行操作。

兩者其他的區別如下表所示。

5.jpg

如果想了解更多細節的不同之處，推薦你去閱讀下面一些文章（前面的表就是經過作者同意後從下面的文章裡拿來的）。

音訊和視訊支援

HTML5最大的新特色之一就是支援音訊和視訊。在HTML5之前，我們必須使用外掛如Silverlight 或Flash來實現這些功能。在HTML5中，你可以直接使用新標籤< audio> 和 < video>將音訊和視訊嵌入到頁面。

從編碼的角度來看，audio和video元素使用起來很簡單（下面我會深入地談到它們的一些屬性）。所有的主流瀏覽器都支援audio和video元素，包括最新版本的IE、Firefox、Chrome、Opera和Safari。雖然如此，有一點很關鍵：你需要編碼解碼器去播放音訊和視訊，而不同的瀏覽器支援的編碼解碼器是不同的（想要進一步瞭解視訊容器和編碼解碼器，可以訪問連結 http://diveintohtml5.org/video.html ）。幸運的是，這不會成為技術障礙，因為HTML5對音訊和視訊的支援方式非常靈活（各個瀏覽器支援的音訊和視訊格式一般有好幾種，它會輪流使用這幾種格式去播放音訊和視訊）。*當然，你最好提供多種格式的音訊和視訊源，以滿足不同瀏覽器的需求。*此外，你還可以繼續使用Silverlight或Flash外掛。最後，在開始和結束標籤（例如< audio> 和 < /audio>）之間的文字，會在瀏覽器不支援audio或video元素的時候顯示到web頁面上。

例如：

  1. <audio controls="controls">
  2.     <source src="laughter.mp3" type="audio/mp3" />
  3.     <source src="laughter.ogg" type="audio/ogg" />
  4.     Your browser does not support the audio element.
  5. </audio>
複製程式碼
執行這段程式碼時，瀏覽器將首先試圖播放laughter.mp3檔案。如果沒有合適的編碼解碼器去播放，它會轉向播放下一個檔案laughter.ogg。如果瀏覽器根本不認識audio元素，它會在音訊控制元件的位置顯示文字“Your browser does not support the audio element”。

關於音訊和視訊，需要警告大家的是：HTML5並沒有內建的數字版權管理（digital rights management，簡稱DRM）支援，作為開發人員，你必須自己實現它。

現在，讓我們深入探討這兩個新元素。

音訊

首先，讓我們看看< audio>的更多細節。

  1. <audio controls="controls">
  2.     <source src="laughter.mp3" type="audio/mp3" />
  3.     <source src="laughter.ogg" type="audio/ogg" />
  4.     Your browser does not support the audio element.
  5. </audio>
複製程式碼
前面已經介紹過，瀏覽器會依次嘗試播放每個音訊源，直到找到一個能播放的源。

注意這裡多了一個controls屬性。使用這個屬性後，瀏覽器將顯示音訊回放控制元件，包括播放/暫停按鈕、時間顯示控制元件、靜音按鈕和音量控制元件。在絕大多數情形下，把這些控制元件展示給使用者是明智的。我非常討厭開啟一個網頁時有聲音響起，而且沒法把它停止、靜音或者調低，難道你不是這樣？

在IE瀏覽器中，各種音訊控制元件如下圖所示。

6.jpg

在不同的瀏覽器中，這些控制元件的外觀並不一樣。Chrome瀏覽器中的音訊回放控制元件如下圖所示（它正在播放一首歌）。當你的滑鼠指標懸停在整個控制元件最右邊的聲音圖示上時，將會彈出一個下拉式的音量控制條。

7.jpg
下圖是Firefox中的控制元件樣式，截圖停在了一首歌暫停的時刻。和Chrome一樣，它也有一個彈出式的音量控制條（本圖未顯示），可以通過將滑鼠指標懸停在控制元件最右邊的聲音圖示上彈出它。

8.jpg

audio元素的其他一些有趣的屬性如下表所示。

9.jpg

下面這段示例程式碼，執行時將顯示音訊回放控制元件，並在音訊檔案載入完成後立刻自動播放，完成後再一遍又一遍地重複播放。

  1. <audio controls="controls" autoplay="autoplay" loop="loop">
  2.     <source src="laughter.mp3" type="audio/mp3" />
  3.     <source src="laughter.ogg" type="audio/ogg" />
  4.     Your browser does not support the audio element.
  5. </audio>
複製程式碼
如果你想在自己的瀏覽器中好好研究< audio>元素，可以參考 http://w3schools.com/ 上的“Tryit Editor”。它可以用來編輯一些示例程式碼，然後看看會發生什麼。此外，你也可以參閱下面這篇文章—— How to add an HTML5 audio player to your site（如何向你的站點新增HTML5音訊播放器） 。

視訊

現在，讓我們試試< video>元素。
  1. <video width="320" height="240" controls="controls">
  2.     <source src="movie.ogg" type="video/ogg" />
  3.     <source src="movie.mp4" type="video/mp4" />
  4.     <source src="movie.webm" type="video/webm" />
  5.     Your browser does not support the video tag.
  6. </video>
複製程式碼
前面講過，video元素也支援多個源，它會按順序依次嘗試播放。

與audio元素相同，video元素也有一個controls屬性。視訊控制元件在IE瀏覽器中的截圖如下所示。

10.jpg

video元素其他一些有趣的屬性如下表所示。
11.jpg

如果你希望繼續研究< video>元素，可以使用來自 http://w3schools.com/ 的“Tryit Editor”，用它來編輯一些示例程式碼，然後看看程式碼生成的效果。

如果想 學習 關於video和audio的更多內容，請訪問以下幾個連結。

10分鐘HTML5入門基礎知識（二）

相關推薦

10分鐘HTML5入門基礎知識（一）

毫無疑問，對於開發人員而言， HTML5 已是一個熱點話題。如果你需要快速瞭解HTML5的功能的基本原理，閱讀本文是你最好的選擇。 本文來自The Code Project的付費搜尋位置，由Solution Center提供。這裡的文章致力於向大家提供我們認為對開發人員來說有用和有價值

10分鐘HTML5入門基礎知識（二）

html5開發與舊式瀏覽器的相容我們已經討論了HTML5許多很酷的新功能，包括新的語義元素、為畫圖而生的canvas標籤，以及音訊與視訊支援。你可能會想：這些東西是很好，但當用戶的瀏覽器不相容HTML5時，可能就沒法使用它們了。更不用說一些所謂的“支援”HTML5的瀏覽器，

Lua入門基礎知識（一）

Lua是一種輕量小巧的指令碼語言，用標準C語言編寫，並以原始碼形式開放。其目的是為了嵌入應用程式中，從而為應用程式提供靈活的擴充套件和訂製功能。 LUA線上中文手冊: http://cloudwu.github.io/lua53doc/contents.html 1.1Lua語法 單行註釋：

c語言-樹的基礎知識（一）

相交 ges 最大 .cn nbsp 分享 blog com lin 第一、樹的定義： 1.有且只有一個稱為根的節點 2.有若幹個互不相交的子樹，這些子樹本身也是一顆樹 第二、專業術語： 樹的深度：從根節點到最低層，節點的層數 ，稱之為樹的深度。

Css 基礎知識（一）

mes 層疊 width 布局 增加 rgb 文本 用法 並集 1、Css概念 CSS 指層疊樣式表 (Cascading Style Sheets)(級聯樣式表)，Css是用來美化html標簽的，相當於頁面化妝。 ◆樣式表書寫位置 2、 選擇器 2.1、寫法 選擇器是選

MongoDB基礎知識（一）

解決方案 互聯網 我們很好 數據庫 基礎知識 互聯網行業的發展非常的迅速，數據存儲以及架構優化方面也有很多不同的解決方案，例如關系型數據庫、非關系型數據庫、數據倉庫技術等。更多數據庫類產品的出現，為我們很好的解決了數據存儲的問題，例如Redis緩存，MySQL關系型數據庫，MongoDB

Linux入門基礎命令（一）

linux運維Linux入門基礎命令內部命令常駐內存：由shell自帶的，而且通過某命令形式提供help：獲取所有內部命令列表（下圖只截取了一部分）enable COMMAND：執行此命令可以啟用COMMAND命令enable -n COMMAND:執行此命令可以禁用COMMAND命令enable -n：查看

.NET基礎知識（一）

ade t-sql語句 使用 連接 style 引用類型 初始 斷開 頁面 1、列舉ASP.NET頁面之間傳值的幾種方式。 答：分別是使用QueryString變量 、使用Application 對象變量、使用Session變量 、使用Cookie對象變量、Server

FPGA軟硬協同設計學習筆記及基礎知識（一）

擴展性 產生 新的 pll 多個 分配 每次 調用 span 一、FPGA軟件硬件協同定義： 軟件：一般以軟件語言來描述，類似ARM處理器的嵌入式設計。硬件定義如FPGA，裏面資源有限但可重配置性有許多優點，新的有動態可充配置技術。

惡補計算機基礎知識（一）

知識 圖解 操作系統 協議 1.5 http tcp/ip協議 參考 height 三大基礎 1計算機原理，參考書：《程序是怎樣跑起來的》、《深入理解計算機系統》 2操作系統原理，參考書：《計算機的心智-操作系統之哲學原理》 3編譯原理，參考書：《編譯原理（龍書）》 二個協

Ajax——異步基礎知識（一）

計算 註冊事件 nbsp ajax 傳遞 ica 默認 tput response 基礎概念 1、異步請求可以做到偷偷向服務器發送請求，而頁面卻不刷新 2、get異步請求傳遞參數是通過url追加鍵值對的方式 3、post異步請求比較特殊，需要設置請求的類型 User-Ag

Python 之 基礎知識（一）

post 練習 初學 查看 http 變量 規則 style python程序 首先，對於初學者在一個項目中設置多個程序可以執行，是非常方便的，可以方便對不同知識點的練習和測試 對於商業項目而言，通常在一個項目中，只有一個可以執行的Python程序 一、註釋 為了提高可讀性

Python基礎知識（一） 初識Python

快捷 err ogl 熱門 HR 會有 社區 小型 palm Python簡介 一、Python介紹 Python（英國發音：/?pa?θ?n/ 美國發音：/?pa?θɑ?n/），是一種廣泛使用的高級編程語言，屬於通用型編程語言，由吉多·範羅蘇姆創造，第一版發布於1

HTML基礎知識（一）

chrom 就會 速度 通過 html 網頁 訪問 web 商務 如何訪問網頁？ 　　用戶訪問網頁的軟件稱為瀏覽器，比較流行的瀏覽器： 　　　　IE Firefox Chrome Safari Opera WEB服務器 　　當用戶用瀏覽器請求一個網頁時，這個請求通過In

Linux入門基礎知識（1）

win 字符設備 命令的使用 ESS pow 體驗 存放位置 編程 echo -e 描述計算機的組成及其功能計算機系統由硬件系統與軟件系統兩大部分組成。1.1 計算機硬件系統五大部分組成運算器、控制器、存儲器、輸入設備、輸出設備。1.2 計算機硬件系統五大部分功能解釋及作

PL/SQL程式設計基礎知識（一）

--PL/SQL變數的宣告和賦值 declare v_ename varchar2(30);--定義變數 begin v_ename:='&請輸入名字';--接受鍵盤輸入 dbms_output.put_line(v_ename); end; --put_line :列印換行

第2章 RFID基礎知識（一）

1.RFID即射頻識別。（常稱為電子標籤）RFID射頻識別是一種非接觸式的自動識別技術，識別高速運動物體並可同時識別多個標籤，識別距離可達幾十米。 2.RFID的組成：一套完整的RFID系統必須由標籤、閱讀器和天線組成。 3.電子標籤的分類：標籤類、注塑類、卡片類。 4.閱讀器與電子標籤之間的射頻訊

嵌入式linux學習之基礎知識（一） linux檔案許可權

linux 檔案許可權相關 Linux使用者分為： 擁有者、組群（Group）、其他（Other） linux檔案的許可權總共有10位，如 -rwxrwxr-x ,分為4段。 第一段 佔1位 表示檔案的型別 - ：表示普通檔案 d ：表示資料夾、目錄 l ：表示連結檔案，類似window

儲存基礎知識（一）重定向寫快照原理

           我目前所瞭解的快照有兩種，第一種是COFW 寫時拷貝，在修改資料塊時將原來資料原封不動的拷貝到快照資源儲存空間，已達到保護的目的，第二種，就是我將要說的寫時重定向ROW，他跟COFW不同的時在保護資料的時候不會發生

C語言基礎知識（一）結構體struct 和typedef struct區別

C與C++中struct 和typedef struct區別從三個方面對比 1、宣告變數方便： 在C語言中，常常見到typedef修飾結構體，如： #include<stdio.h> typedef struct _TEST { int value; char mat