五分鐘學會HTML

時間 2021-08-12

標籤 javascript css html html5 java git 程序員 web 編程 canvas 欄目 HTML 简体版

原文原文鏈接

語義標籤和頁面佈局javascript

咱們首先講一個關於一所大學的經典故事。這所大學在建設校園草地時，沒有開闢任何步行小道，他們把整個空地種上草，而後等待。css

一年之後，人們常常走過的地方，草都被踩光了。因而，這所大學就將這些地方鋪設爲真正的人行道。html

棒極了!這些人行道是人們真正「走」出來的。html5

HTML5新語義元素的誕生正是基於一樣的邏輯。(關於這一點，能夠參看W3C設計指南中的「Pave the Cowpaths」。)java

語義元素清晰地向瀏覽器和開發人員代表了它們的涵義和用途，要理解這一點，能夠將它們與< div>標籤進行對比。在HTML文件內，< div>標籤能定義出一個分區或者一個小節，可是它沒法告訴咱們分區裏的內容，不能傳達任何清晰的涵義。git

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

在HTML5中，有很多新的富含語義的元素，能夠向瀏覽器和開發人員傳達元素的用途。< header>web

W3C挖掘了數億個的Web頁面，找出開發人員一直在使用的ID和類名。一旦開發人員拋出div一、div2這些無心義標籤，他們就獲得了一個描述很是細緻的已經在使用的元素的列表，並讓其成爲W3C的標準設置。編程

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

• article

• aside

• figcaption

• figure

• footer

• header

• hgroup

• mark

• nav

• section

• time

因爲這些元素的語義很豐富，相信你可能會猜出其中大部分元素的做用。

爲了說得更清楚，下面給出一張圖示。

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

下面是一個簡單的例子，其中的代碼就用到了這些元素。

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<h1>Header in h1</h1>

<h2>Subheader in h2</h2>

</hgroup>

</header>

<nav>

<ul>

<li><a href="#">Menu Option 1</a></li>

<li><a href="#">Menu Option 2</a></li>

<li><a href="#">Menu Option 3</a></li>

</ul>

</nav>

<h1>Article #1</h1>

</header>

This is the first article. This is <mark>highlighted</mark>.

</section>

</article>

<h1>Article #2</h1>

</header>

This is the second article. These articles could be blog posts, etc.

</section>

</article>

</section>

<aside>

<h1>Links</h1>

<ul>

</ul>

</section>

<img width="85" height="85"

src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"

alt="Jennifer Marsman" />

<figcaption>Jennifer Marsman</figcaption>

</figure>

</aside>

</body>

</html>

複製代碼

固然，在這個例子裏，我也引出了另外幾個新元素。

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

咱們能夠用mark元素將重要文本高亮顯示或標記出來。若是要在內容中插入一張圖(圖像、圖表、照片和代碼片斷等)，可使用figure元素。而figcaption元素能爲圖加上標題。當把以上代碼和一些CSS代碼組合後，獲得的Web頁面以下圖所示。

在一些擅長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的支持了。

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

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

你可能須要爲canvas元素賦予一個id屬性，這樣就能經過JavaScript代碼以編程的方式訪問它。若是你正在使用jQuery，而且在頁面上只有一個canvas，你可使用$(‘canvas’)來訪問它，而不用爲它命名。

你也能夠爲canvas指定height(高度)和width(寬度)，但這不是必需的。在< canvas> 和< /canvas>標籤之間，你還能夠指定一些文本，顯示在不支持canvas元素的瀏覽器中。

下面是使用canvas進行繪畫的一個簡單例子。(我但願畫一張蘇格蘭國旗，若是畫得不是很是精確，請見諒。)

<!DOCTYPE HTML>

<html>

<body>

<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

// Draw blue rectangle

ctx.fillStyle = '#0065BD';

ctx.fillRect(0, 0, 125, 75);

// Draw white X

ctx.beginPath();

ctx.lineWidth = "15";

ctx.strokeStyle = "white";

ctx.moveTo(0, 0);

ctx.lineTo(125, 75);

ctx.moveTo(125, 0);

ctx.lineTo(0, 75);

ctx.stroke();

</script>

</body>

</html>

複製代碼

上面的代碼將生成如下結果。

如今咱們從頭至尾分析一下代碼。

首先，我建立了一塊畫布(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來進行操做。

二者其餘的區別以下表所示。

若是想了解更多細節的不一樣之處，推薦你去閱讀下面一些文章(前面的表就是通過做者贊成後從下面的文章裏拿來的)。

SVG和Canvas使用心得(Patrick Dengler著)

深刻HTML5 Canvas(Jatinder Mann著)

HTML5 Canvas入門(John Bristowe著)

音頻和視頻支持

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頁面上。

例如：

Your browser does not support the audio element.

</audio>

複製代碼

執行這段代碼時，瀏覽器將首先試圖播放laughter.mp3文件。若是沒有合適的編碼×××去播放，它會轉向播放下一個文件laughter.ogg。若是瀏覽器根本不認識audio元素，它會在音頻控件的位置顯示文本「Your browser does not support the audio element」。

關於音頻和視頻，須要警告你們的是：HTML5並無內置的數字版權管理(digital rights management，簡稱DRM)支持，做爲開發人員，你必須本身實現它。

如今，讓咱們深刻探討這兩個新元素。

音頻

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

Your browser does not support the audio element.

</audio>

複製代碼

前面已經介紹過，瀏覽器會依次嘗試播放每一個音頻源，直到找到一個能播放的源。

注意這裏多了一個controls屬性。使用這個屬性後，瀏覽器將顯示音頻回放控件，包括播放/暫停按鈕、時間顯示控件、靜音按鈕和音量控件。在絕大多數情形下，把這些控件展現給用戶是明智的。我很是討厭打開一個網頁時有聲音響起，並且無法把它中止、靜音或者調低，難道你不是這樣?

在IE瀏覽器中，各類音頻控件以下圖所示。

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

下圖是Firefox中的控件樣式，截圖停在了一首歌暫停的時刻。和Chrome同樣，它也有一個彈出式的音量控制條(本圖未顯示)，能夠經過將鼠標指針懸停在控件最右邊的聲音圖標上彈出它。

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

下面這段示例代碼，執行時將顯示音頻回放控件，並在音頻文件加載完成後馬上自動播放，完成後再一遍又一遍地重複播放。

Your browser does not support the audio element.

</audio>

複製代碼

若是你想在本身的瀏覽器中好好研究< audio>元素，能夠參考http://w3schools.com/上的「Tryit Editor」。它能夠用來編輯一些示例代碼，而後看看會發生什麼。此外，你也能夠參閱下面這篇文章——How to add an HTML5 audio player to your site(如何向你的站點添加HTML5音頻播放器)。

視頻

如今，讓咱們試試< video>元素。

Your browser does not support the video tag.

</video>

複製代碼

前面講過，video元素也支持多個源，它會按順序依次嘗試播放。

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

video元素其餘一些有趣的屬性以下表所示。

若是你但願繼續研究< video>元素，可使用來自http://w3schools.com/的「Tryit Editor」，用它來編輯一些示例代碼，而後看看代碼生成的效果。

若是想學習關於video和audio的更多內容，請訪問如下幾個連接。

使用< audio>和< video>必須知道的5件事情

如何向你的站點添加HTML5音頻文件