怎么學(xué)會(huì)HTML5-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)怎么學(xué)會(huì)HTML5的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)淳安免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

語(yǔ)義標(biāo)簽和頁(yè)面布局
我們首先講一個(gè)關(guān)于一所大學(xué)的經(jīng)典故事。這所大學(xué)在建設(shè)校園草地時(shí)，沒(méi)有開(kāi)辟任何步行小道，他們把整個(gè)空地種上草，然后等待。
一年以后，人們經(jīng)常走過(guò)的地方，草都被踩光了。于是，這所大學(xué)就將這些地方鋪設(shè)為真正的人行道。
棒極了！這些人行道是人們真正“走”出來(lái)的。
HTML5新語(yǔ)義元素的誕生正是基于同樣的邏輯。（關(guān)于這一點(diǎn)，可以參看W3C設(shè)計(jì)指南中的“Pave the Cowpaths”。）
語(yǔ)義元素清晰地向?yàn)g覽器和開(kāi)發(fā)人員表明了它們的涵義和用途，要理解這一點(diǎn)，可以將它們與< p>標(biāo)簽進(jìn)行對(duì)比。在HTML文件內(nèi)，< p>標(biāo)簽?zāi)芏x出一個(gè)分區(qū)或者一個(gè)小節(jié)，但是它無(wú)法告訴我們分區(qū)里的內(nèi)容，不能傳達(dá)任何清晰的涵義。
開(kāi)發(fā)人員通常會(huì)將ID或者類名與< p>標(biāo)簽配合使用，這會(huì)向程序員傳達(dá)更多的涵義。但遺憾的是，這并不能幫助瀏覽器領(lǐng)會(huì)那種標(biāo)簽的用途。< p id="header">
在HTML5中，有不少新的富含語(yǔ)義的元素，可以向?yàn)g覽器和開(kāi)發(fā)人員傳達(dá)元素的用途。< header>
W3C挖掘了數(shù)億個(gè)的Web頁(yè)面，找出開(kāi)發(fā)人員一直在使用的ID和類名。一旦開(kāi)發(fā)人員拋出p1、p2這些無(wú)意義標(biāo)簽，他們就得到了一個(gè)描述非常細(xì)致的已經(jīng)在使用的元素的列表，并讓其成為W3C的標(biāo)準(zhǔn)設(shè)置。
下面是HTML5的一部分新的語(yǔ)義元素：
? article
? aside
? figcaption
? figure
? footer
? header
? hgroup
? mark
? nav
? section
? time
由于這些元素的語(yǔ)義很豐富，相信你可能會(huì)猜出其中大部分元素的作用。
為了說(shuō)得更清楚，下面給出一張圖示。
怎么學(xué)會(huì)HTML5
header和footer的作用不言自明，nav將創(chuàng)造一個(gè)導(dǎo)航條或者菜單條。此外，你可以用section和article將頁(yè)面內(nèi)容分為幾個(gè)部分。最后，aside元素用來(lái)安置附帶的內(nèi)容，比如說(shuō)，以邊欄的形式放上一些相關(guān)鏈接。
下面是一個(gè)簡(jiǎn)單的例子，其中的代碼就用到了這些元素。


     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h2>Header in h2</h2>
            <h3>Subheader in h3</h3>
        </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>
    <section>
        <article>
            <header>
                <h2>Article #1</h2>
            </header>
            <section>
                This is the first article.  This is 
<mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h2>Article #2</h2>
            </header>
            <section>
                This is the second article.  These articles could be blog 
posts, etc.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h2>Links</h2>
            <ul>
                <li><a href="#">Link 
1</a></li>
                <li><a href="#">Link 
2</a></li>
                <li><a href="#">Link 
3</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman" />
            <figcaption>Jennifer Marsman</figcaption>
        </figure>
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>
</html>

當(dāng)然，在這個(gè)例子里，我也引出了另外幾個(gè)新元素。
不知道你是否注意到hgroup元素，它將h2和h3這兩個(gè)header組合到一起了？
我們可以用mark元素將重要文本高亮顯示或標(biāo)記出來(lái)。如果要在內(nèi)容中插入一張圖（圖像、圖表、照片和代碼片段等），可以使用figure元素。而figcaption元素能為圖加上標(biāo)題。當(dāng)把以上代碼和一些CSS代碼組合后，得到的Web頁(yè)面如下圖所示。
怎么學(xué)會(huì)HTML5
在一些擅長(zhǎng)CSS的朋友（可惜我不擅長(zhǎng)CSS）的幫助下，上面這個(gè)結(jié)果看起來(lái)靚爆了！實(shí)際上，有了HTML的描述性，完成這個(gè)頁(yè)面非常容易。
還要說(shuō)明一點(diǎn)，如果你是Visual Studio的擁躉，請(qǐng)確保已經(jīng)安裝了Visual Studio 2010 SP1。否則，你將發(fā)現(xiàn)Visual Studio并不理解HTML5元素，從而導(dǎo)致Web頁(yè)面上到處是歪歪曲曲的線條。
然后，在Visual Studio菜單中依次選擇“Tools”-“Options”，打開(kāi)一個(gè)“Options”對(duì)話框。從左側(cè)的導(dǎo)航面板，依次展開(kāi)“Text Editor”和“HTML”，單擊“Validation”。在“Target”下拉列表框中選擇HTML5，這樣就能得到對(duì)HTML5 IntelliSense的支持了。
怎么學(xué)會(huì)HTML5

使用Canvas元素在HTML5中進(jìn)行繪畫(huà)
HTML5中另外一個(gè)新元素是< canvas>標(biāo)簽。顧名思義，它就是一塊用來(lái)繪畫(huà)的空白平面。你需要使用JavaScript在這塊畫(huà)布上進(jìn)行操作和繪畫(huà)。
你可能需要為canvas元素賦予一個(gè)id屬性，這樣就能通過(guò)JavaScript代碼以編程的方式訪問(wèn)它。如果你正在使用jQuery，并且在頁(yè)面上只有一個(gè)canvas，你可以使用$(‘canvas’)來(lái)訪問(wèn)它，而不用為它命名。
你也可以為canvas指定height（高度）和width（寬度），但這不是必需的。在< canvas> 和< /canvas>標(biāo)簽之間，你還可以指定一些文本，顯示在不支持canvas元素的瀏覽器中。
下面是使用canvas進(jìn)行繪畫(huà)的一個(gè)簡(jiǎn)單例子。（我希望畫(huà)一張?zhí)K格蘭國(guó)旗，如果畫(huà)得不是非常精確，請(qǐng)見(jiàn)諒。）

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

        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>

上面的代碼將生成以下結(jié)果。

怎么學(xué)會(huì)HTML5

現(xiàn)在我們從頭到尾分析一下代碼。
首先，我創(chuàng)建了一塊畫(huà)布（canvas），并為它賦予了一個(gè)ID叫“myCanvas”。如果運(yùn)行這段代碼的瀏覽器不支持canvas元素，它就會(huì)在旗幟原本要出現(xiàn)的位置顯示“Your browser does not support the canvas tag”。
接下來(lái)，我編寫(xiě)了一段腳本。記住，canvas標(biāo)簽只是一個(gè)用來(lái)畫(huà)圖的容器，你必須用JavaScript來(lái)畫(huà)圖并將其呈現(xiàn)出來(lái)。我首先通過(guò)使用ID“myCanvas”獲得了對(duì)canvas的一個(gè)引用，然后得到canvas的上下文。上下文所提供的方法和屬性，都可以用來(lái)在canvas上操作圖形和進(jìn)行繪畫(huà)。這里指定了參數(shù)“2d”，表示我將在2維的環(huán)境中來(lái)進(jìn)行繪畫(huà)。
第三步，完成藍(lán)色矩形的繪畫(huà)。我用fillStyle方法指定了矩形的顏色為藍(lán)色，再用fillRect方法畫(huà)出了矩形，后者的參數(shù)指定了矩形的大小與位置。fillRect(0, 0, 125, 75)表示：從左上角的頂點(diǎn)（0,0）開(kāi)始畫(huà)一個(gè)矩形，寬為125像素，高為75像素。
最后，我在旗幟上畫(huà)出了一個(gè)白色的“X”。我首先調(diào)用beginPath方法啟動(dòng)畫(huà)路徑的進(jìn)程。指定的lineWidth屬性值（也就是路徑的寬度）為15像素，這是通過(guò)不斷猜想加嘗試才找到的看起來(lái)最合適的值。另一個(gè)屬性strokeStyle則被指定為“white”，以表示路徑顏色為白色。接下來(lái)，依靠moveTo和lineTo兩個(gè)方法描繪出了整個(gè)路徑。這兩個(gè)方法都會(huì)定位出一個(gè)用來(lái)繪圖的光標(biāo)，其區(qū)別在于：前者移動(dòng)光標(biāo)的時(shí)候不會(huì)畫(huà)出一條線，而后者在移動(dòng)的同時(shí)會(huì)畫(huà)線。在畫(huà)X的過(guò)程中，首先從（0,0）——左上角開(kāi)始，然后畫(huà)一條線到（125,75）——右下角。接著把光標(biāo)移到（125,0）——右上角，一筆畫(huà)到（0,75）——左下角。最后的stroke方法將真正地呈現(xiàn)這些筆畫(huà)。
canvas與SVG的簡(jiǎn)單對(duì)比
可縮放矢量圖形（Scalable Vector Graphics，簡(jiǎn)稱SVG）是在瀏覽器窗口進(jìn)行繪畫(huà)的一個(gè)早期標(biāo)準(zhǔn)。隨著HTML5的canvas的發(fā)布，許多人都想知道它們之間到底孰優(yōu)孰劣。
在我看來(lái)，它們之間較大的區(qū)別就是：canvas使用立即呈現(xiàn)模式，而SVG使用保留呈現(xiàn)模式。這意味著，canvas可以讓所畫(huà)的圖形立即呈現(xiàn)在顯示器里。在上面給出的代碼中，一旦旗幟畫(huà)完，系統(tǒng)就會(huì)“忘掉”它，且不會(huì)有任何狀態(tài)保留下來(lái)。如果對(duì)它進(jìn)行改動(dòng)，將會(huì)導(dǎo)致徹底的重畫(huà)。與之相比，SVG保留了所呈現(xiàn)對(duì)象的一個(gè)完整模型。要對(duì)圖做出改動(dòng)時(shí)，你只需要指出改動(dòng)的地方（例如矩形的新位置），瀏覽器來(lái)負(fù)責(zé)呈現(xiàn)新的圖形。這節(jié)省了開(kāi)發(fā)人員的工作，但也為維護(hù)模塊付出了性能上的代價(jià)。
能夠同時(shí)通過(guò)CSS和JavaScript來(lái)進(jìn)行設(shè)計(jì)，是SVG另一個(gè)值得稱道的優(yōu)點(diǎn)。與之相比，canvas只能通過(guò)JavaScript來(lái)進(jìn)行操作。


怎么學(xué)會(huì)HTML5

如果想了解更多細(xì)節(jié)的不同之處，推薦你去閱讀下面一些文章（前面的表就是經(jīng)過(guò)作者同意后從下面的文章里拿來(lái)的）。

SVG和Canvas使用心得（Patrick Dengler著）


深入HTML5 Canvas（Jatinder Mann著）


HTML5 Canvas入門(mén)（John Bristowe著）


音頻和視頻支持
HTML5較大的新特色之一就是支持音頻和視頻。在HTML5之前，我們必須使用插件如Silverlight 或Flash來(lái)實(shí)現(xiàn)這些功能。在HTML5中，你可以直接使用新標(biāo)簽< audio> 和 < video>將音頻和視頻嵌入到頁(yè)面。
從編碼的角度來(lái)看，audio和video元素使用起來(lái)很簡(jiǎn)單（下面我會(huì)深入地談到它們的一些屬性）。所有的主流瀏覽器都支持audio和video元素，包括新版本的IE、Firefox、Chrome、Opera和Safari。雖然如此，有一點(diǎn)很關(guān)鍵：你需要編碼解碼器去播放音頻和視頻，而不同的瀏覽器支持的編碼解碼器是不同的（想要進(jìn)一步了解視頻容器和編碼解碼器，可以訪問(wèn)鏈接http://peintohtml5.org/video.html）。幸運(yùn)的是，這不會(huì)成為技術(shù)障礙，因?yàn)镠TML5對(duì)音頻和視頻的支持方式非常靈活（各個(gè)瀏覽器支持的音頻和視頻格式一般有好幾種，它會(huì)輪流使用這幾種格式去播放音頻和視頻）。*當(dāng)然，你好提供多種格式的音頻和視頻源，以滿足不同瀏覽器的需求。*此外，你還可以繼續(xù)使用Silverlight或Flash插件。最后，在開(kāi)始和結(jié)束標(biāo)簽（例如< audio> 和 < /audio>）之間的文本，會(huì)在瀏覽器不支持audio或video元素的時(shí)候顯示到web頁(yè)面上。
例如：

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

執(zhí)行這段代碼時(shí)，瀏覽器將首先試圖播放laughter.mp3文件。如果沒(méi)有合適的編碼解碼器去播放，它會(huì)轉(zhuǎn)向播放下一個(gè)文件laughter.ogg。如果瀏覽器根本不認(rèn)識(shí)audio元素，它會(huì)在音頻控件的位置顯示文本“Your browser does not support the audio element”。
關(guān)于音頻和視頻，需要警告大家的是：HTML5并沒(méi)有內(nèi)置的數(shù)字版權(quán)管理（digital rights management，簡(jiǎn)稱DRM）支持，作為開(kāi)發(fā)人員，你必須自己實(shí)現(xiàn)它。
現(xiàn)在，讓我們深入探討這兩個(gè)新元素。
音頻
首先，讓我們看看< audio>的更多細(xì)節(jié)

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

前面已經(jīng)介紹過(guò)，瀏覽器會(huì)依次嘗試播放每個(gè)音頻源，直到找到一個(gè)能播放的源。
注意這里多了一個(gè)controls屬性。使用這個(gè)屬性后，瀏覽器將顯示音頻回放控件，包括播放/暫停按鈕、時(shí)間顯示控件、靜音按鈕和音量控件。在絕大多數(shù)情形下，把這些控件展示給用戶是明智的。我非常討厭打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)有聲音響起，而且沒(méi)法把它停止、靜音或者調(diào)低，難道你不是這樣？
在IE瀏覽器中，各種音頻控件如下圖所示。


怎么學(xué)會(huì)HTML5

在不同的瀏覽器中，這些控件的外觀并不一樣。Chrome瀏覽器中的音頻回放控件如下圖所示（它正在播放一首歌）。當(dāng)你的鼠標(biāo)指針懸停在整個(gè)控件最右邊的聲音圖標(biāo)上時(shí)，將會(huì)彈出一個(gè)下拉式的音量控制條。


怎么學(xué)會(huì)HTML5

下圖是Firefox中的控件樣式，截圖停在了一首歌暫停的時(shí)刻。和Chrome一樣，它也有一個(gè)彈出式的音量控制條（本圖未顯示），可以通過(guò)將鼠標(biāo)指針懸停在控件最右邊的聲音圖標(biāo)上彈出它。

怎么學(xué)會(huì)HTML5

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

怎么學(xué)會(huì)HTML5

下面這段示例代碼，執(zhí)行時(shí)將顯示音頻回放控件，并在音頻文件加載完成后立刻自動(dòng)播放，完成后再一遍又一遍地重復(fù)播放。

<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="laughter.mp3" type="audio/mp3" />
    <source src="laughter.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

如果你想在自己的瀏覽器中好好研究< audio>元素，可以參考http://w3schools.com/上的“Tryit Editor”。它可以用來(lái)編輯一些示例代碼，然后看看會(huì)發(fā)生什么。此外，你也可以參閱下面這篇文章——How to add an HTML5 audio player to your site（如何向你的站點(diǎn)添加HTML5音頻播放器）。


視頻


現(xiàn)在，讓我們?cè)囋?lt; video>元素。

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

前面講過(guò)，video元素也支持多個(gè)源，它會(huì)按順序依次嘗試播放。

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


怎么學(xué)會(huì)HTML5

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

怎么學(xué)會(huì)HTML5

如果你希望繼續(xù)研究< video>元素，可以使用來(lái)自w3schools.com/的“Tryit Editor”，用它來(lái)編輯一些示例代碼，然后看看代碼生成的效果。


感謝各位的閱讀！關(guān)于“怎么學(xué)會(huì)HTML5”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)標(biāo)題：怎么學(xué)會(huì)HTML5-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://bm7419.com/article12/dihdgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、定制開(kāi)發(fā)、自適應(yīng)網(wǎng)站、虛擬主機(jī)、網(wǎng)站策劃、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司