如何構(gòu)建HTML5Web頁面

這篇文章的內(nèi)容主要圍繞如何構(gòu)建HTML 5 Web頁面進(jìn)行講述，文章內(nèi)容清晰易懂，條理清晰，非常適合新手學(xué)習(xí)，值得大家去閱讀。感興趣的朋友可以跟隨小編一起閱讀吧。希望大家通過這篇文章有所收獲！

我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、山海關(guān)ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的山海關(guān)網(wǎng)站制作公司

HTML 5是時下Web開發(fā)領(lǐng)域炒得火熱的一個術(shù)語，是的，很多人都看好它，也有很多業(yè)內(nèi)知名公司開始正式使用HTML 5重新構(gòu)建自己的網(wǎng)站，如YouTube開始使用HTML 5視頻，Google已經(jīng)棄用自家的Gears，開始全面擁抱HTML 5實現(xiàn)離線解決方案，各大瀏覽器廠家也紛紛開始支持HTML 5，連被人詬病的微軟也聲稱要在IE 9中增加對HTML 5的支持。

HTML 5有何不同？

首先我們要明白HTML 5是新的語義結(jié)構(gòu)標(biāo)記，包括畫布，離線存儲規(guī)范和一些新的內(nèi)聯(lián)語義標(biāo)記，但由于客觀原因（主要是瀏覽器支持的原因），我們不得不限制標(biāo)記的討論范圍，如畫布，離線存儲，原生視頻或地理定位API等，還不是所有的瀏覽器都支持。

由于新的HTML 5標(biāo)記大都是結(jié)構(gòu)性的，它們的行為與塊元素有些類似，為了幫助大家加深對HTML 5的理解，我將在下面的內(nèi)容使用一些新的結(jié)構(gòu)元素。

每個人都應(yīng)該記住的doctype（文檔類型）

要創(chuàng)建HTML 5 Web頁面的第一件事情是使用新的doctype，你一定記住了HTML 4或XHTML 1.x的doctype，當(dāng)我們要從舊的文檔通過復(fù)制粘貼到新的文檔中，必須要修改doctype，請記住，下面就是HTML 5的doctype：

1	`<!DOCTYPE html>`

還是很容易記住吧，而且也不區(qū)分大小寫，與現(xiàn)在廣泛使用的版本要簡單得多了，而且保持了向后兼容。

語義結(jié)構(gòu)

在深入標(biāo)記前，我們先初略看一下一個Web頁面的大致結(jié)構(gòu)吧。

<html>

<head>

...stuff...

</head>

<body>

<p id="header">

<h2>My Site</h2>

</p>

<p id="nav">

<ul>

<li>Home</li>

<li>About</li>

<li>Contact</li>

</ul>

</p>

<p id=content>

<h2>My Article</h2>

<p>...</p>

</p>

<p id="footer">

<p>...</p>

</p>

</body>

</html>

在上面的例子中，我為所有DIV標(biāo)記增加了ID，相信大多數(shù)Web設(shè)計師都很熟悉這種做法了，這么做有兩個目的，首先，ID提供了一個鉤子，通過它可以對頁面的特定部分應(yīng)用樣式，其次，ID作為一種原始的，偽語義結(jié)構(gòu)，智能解析器將查找標(biāo)簽上的ID屬性，并嘗試猜測其含義，但這是一件很困難的事情，因為每個網(wǎng)站的ID可能都不一樣。

于是就有了增加新標(biāo)簽的想法，HTML 5的創(chuàng)造者們就設(shè)計了一些新的元素，下面我們就來看看HTML 5中新增的一些關(guān)鍵的結(jié)構(gòu)性標(biāo)記。

◆ <header>

這個標(biāo)記計劃用來描述一節(jié)或一個完整Web頁面的介紹性信息，<header>標(biāo)記可以包括所有的通常放在頁面頭部的標(biāo)志，如果你在頁面中使用了<p id="header">，它將被<header>取代。

◆ <nav>

這個元素的含義就不說了，你的導(dǎo)航元素就放在這里，如主站點導(dǎo)航，但在某些情況下也可能有頁面導(dǎo)航元素，HTML 5的創(chuàng)建人WHATWG最近修改了<nav>的解釋，展示了如何在一個頁面上使用兩次.

簡單說來，如果你在頁面中使用了<p id="nav">標(biāo)記來容納導(dǎo)航元素，那么你可以使用<nav>進(jìn)行替換。

◆ <section>

這個可能是最模糊不清的標(biāo)記了，按照HTML 5規(guī)范的解釋，一個section是一個有主題的內(nèi)容組，前面通常有一個header標(biāo)記，后面通常跟一個footer標(biāo)記，如果需要，section也可以嵌套使用。

在我們上面的例子中，標(biāo)記為“content”的DIV是section的一個很好候選者，在這個section中，根據(jù)內(nèi)容的不同，我們可能有更多的section。

◆ <article>

根據(jù)WHATWG的注釋，article元素是將section進(jìn)行打包形成一個文檔或網(wǎng)站獨立的部分，例如一篇雜志或報紙文章，或一篇博客文章。

記住，在一個頁面中可以有多個article元素，例如一個博客首頁可能會有10多個article元素，article也可以進(jìn)入section元素，因此你在嵌套使用時需要小心，可能一不小心就會出錯。

◆ <aside>

另一個模糊不清的標(biāo)記是aside，這個元素表現(xiàn)的是與文檔主要文本流無關(guān)的內(nèi)容，也就是相當(dāng)于一個括號備注，腳注，引用，注釋，或者說是類似于側(cè)邊欄的東西，根據(jù)WHATWG的注釋，<aside>可以用于所有這些情況。

◆ <footer>

Footer的含義也非常清楚，它可以用在section中，也可以用于一個頁面的底部。

全部放在一起

現(xiàn)在我們?nèi)渴褂眯聵?biāo)記重寫前面的示例頁面。

<!DOCTYPE html>

<html>

<head>

...stuff...

</head>

<body>

<header>

<h2>My Site</h2>

</header>

<nav>

<ul>

<li>Home</li>

<li>About</li>

<li>Contact</li>

</ul>

</nav>

<section>

<h2>My Article</h2>

<article>

<p>...</p>

</article>

</section>

<footer>

<p>...</p>

</footer>

</body>

</html>

是不是更干凈，更易于理解呢？我們可以把<h2>My Article</h2>打包到header標(biāo)記中。另外請注意，我們可以在article元素下再增加一個footer元素，用來容納如翻頁導(dǎo)航，相關(guān)文章或其它內(nèi)容。

新標(biāo)記的樣式

在大多數(shù)瀏覽器中，你只需要如往常一樣對元素使用樣式，但是請一定要對每個元素加上display:block;規(guī)則，隨著時間的推移，瀏覽器對HTML 5新元素的支持越來越標(biāo)準(zhǔn)后，就可以不使用了。

下面我們隊header應(yīng)用一些樣式：

header {

display: block;

font-size: 36px;

font-weight: bold;

}

記住，你現(xiàn)在仍然可以在這些元素上添加class和ID屬性，因此，如果你想對導(dǎo)航小節(jié)單獨使用一個樣式，你可以向下面這樣增加一個class或ID屬性：

1	`<nav` `class="main-menu">`

然后再應(yīng)用一個樣式：

nav.main-menu {

font-size: 18px;

}

與舊瀏覽器的兼容

這些樣式都不能在IE 6下使用，如果你堅持要保持與舊瀏覽器兼容，也是有補(bǔ)救辦法的，IE 6可以解析這些標(biāo)記，但不能應(yīng)用樣式，解決辦法就是使用JavaScript，使用createElement方法就可以讓IE支持HTML 5標(biāo)記的樣式了，你可以在HTML 5文件的頭部包括這段代碼，也可以保存到一個獨立文件中，然后進(jìn)行引用。

<script>

document.createElement('header');

document.createElement('nav');

document.createElement('section');

document.createElement('article');

document.createElement('aside');

document.createElement('footer');

</script>

你可能要問，為什么沒有給這段腳本指定MIME類型呢？在HTML 5中無需指定了，在HTML 5中，所有的腳本都假設(shè)是type="text/javascript"，因此不必再多此一舉了。

雖然IE的問題得到了解決，但據(jù)我所知，F(xiàn)irefox 2中的Gecko渲染引擎仍然存在一個bug，解決辦法有兩個，但這兩個辦法都不是很理想，考慮到Firefox 2的使用人數(shù)已經(jīng)很少，你可以完全忽視這個bug。

現(xiàn)在你已經(jīng)可以使用HTML 5了，但應(yīng)該使用嗎？

答案很簡單：是的！

但這也要根據(jù)網(wǎng)站的性質(zhì)做出調(diào)整，例如，假設(shè)你要重構(gòu)CNN主頁，那可能不太現(xiàn)實，最好還是等瀏覽器的支持更好一些再說，但如果你是在翻新你的博客系統(tǒng)，那么你可以一試，如果你使用的WordPress，目前已經(jīng)出現(xiàn)了一些插件可以幫助你，這里就有一個HTML 5的WordPress主題。

你也可以去HTML 5畫廊（http://html5gallery.com/）瞧瞧，因為它全部是用HTML 5構(gòu)建的，可以看看其源碼，加深對HTML 5標(biāo)記的理解。還可以繼續(xù)關(guān)注51CTO.com的HTML 5專題，我們會持續(xù)更新關(guān)于HTML 5的技術(shù)應(yīng)用和資訊報道。

如果你還有點猶豫不決，那你去看看Google的主頁，已經(jīng)是HTML 5了，保險一點的話，你可以使用JavaScript聲明這些新標(biāo)記進(jìn)行使用。HTML 5的標(biāo)記遠(yuǎn)不止這些，希望本文能消除你的疑慮，大膽使用HTML 5，只有使用的人多了，這個規(guī)范才能真正見效。

感謝你的閱讀，相信你對“如何構(gòu)建HTML 5 Web頁面”這一問題有一定的了解，快去動手實踐吧，如果想了解更多相關(guān)知識點，可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站！小編會繼續(xù)為大家?guī)砀玫奈恼拢?/p>

網(wǎng)站標(biāo)題：如何構(gòu)建HTML5Web頁面
URL網(wǎng)址：http://www.chinadenli.net/article30/piigso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、、網(wǎng)站策劃、用戶體驗

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

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何構(gòu)建HTML5Web頁面