- 相關(guān)推薦
用HTML5制作網(wǎng)頁的方法
如何用HTML5制作網(wǎng)頁呢?就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
HTML 5有什么不同?
首先，我們通過HTML 5表達(dá)什么?First off, what do we mean by HTML 5?理論上，我們表達(dá)所有的事——新的語義結(jié)構(gòu)標(biāo)簽，例如canvas或者離線儲(chǔ)存等API規(guī)范，以及新的內(nèi)聯(lián)語義標(biāo)簽。盡管如此，我們把實(shí)際的原因 (PS：瀏覽器支持問題)僅僅局限于結(jié)構(gòu)標(biāo)簽。canvas，離線儲(chǔ)存，本地視頻或者地理定位API都很絕妙，然而他們還不能被所有瀏覽器一致的支持。
“但是等等”你說，“大多數(shù)瀏覽器也都不支持新的結(jié)構(gòu)元素!”這是真的，但他們中的絕大多數(shù)將 會(huì)很樂意去接受你想要?jiǎng)?chuàng)建的任何標(biāo)簽。甚至連IE6也可以處理新標(biāo)簽，盡管如果你想要使用CSS設(shè)置樣式，你需要一點(diǎn)JavaScript的幫助。
當(dāng)你對新標(biāo)簽設(shè)置樣式時(shí)，你需要記住一件事，那就是未知標(biāo)簽在大部分瀏覽器中沒有默認(rèn)樣式。他 們同時(shí)被認(rèn)為是行級元素。盡管如此，由于大部分HTML 5的新標(biāo)簽可以構(gòu)造，我們將讓他們擁有塊級元素的行為。解決方法是確認(rèn)你在CSS樣式中包含了display:block;。
為了幫助了解當(dāng)今HTML 5的一些新玩意兒，我們現(xiàn)在就進(jìn)入正題，開始使用一些新的結(jié)構(gòu)元素。
最終，一個(gè)任何人都可以記住的文檔類型
我們創(chuàng)建HTML 5文檔第一件需要做的事情就是使用新的文檔類型�，F(xiàn)在，如果你還清楚的記得HTML 4或者XHTML 1.x的文檔類型，你真是一個(gè)比我們更強(qiáng)的淘氣鬼。每當(dāng)我們新建一個(gè)頁面，我們必須打開一個(gè)舊的文件，剪切并粘貼文檔類型定義。
這真是痛苦，也是為什么我們喜歡新的HTML 5文檔類型。你準(zhǔn)備好了么?他出現(xiàn)了：
不會(huì)太難記。簡單并且容易理解。不區(qū)分大小寫。
這個(gè)構(gòu)想是停止HTML版本化，使向后兼容變得更容易。從長遠(yuǎn)看是否成功是另外的事情，但至少 他節(jié)省了你輸入的平均時(shí)間。
最基本語義結(jié)構(gòu)
我們已經(jīng)將我們的頁面定義為HTML 5文檔。到現(xiàn)在為止，一切都還不錯(cuò)�，F(xiàn)在，這些我們已經(jīng)聽說的新標(biāo)簽到底是什么?
在我們鉆研新標(biāo)簽前，想想你一般網(wǎng)頁的結(jié)構(gòu)，大概像這樣：
這對于展示用途很好，但如果我們想要知道一些關(guān)于頁面元素包含什么的問題，這又怎么辦呢?
上面的例子中，我們?yōu)槲覀兯械慕Y(jié)構(gòu)div添加了ID。這在有見識的設(shè)計(jì)師中是很平常的事。目 的有兩個(gè)方面，首先，ID提供了可以能用于給頁面的特殊段落應(yīng)用樣式的錨，其次，ID充當(dāng)基本的偽語義結(jié)構(gòu)。高明的解析器將會(huì)查看標(biāo)簽的ID屬性，并嘗試 去猜測他們的含義，但當(dāng)每個(gè)站點(diǎn)的ID名稱不同的時(shí)候很難。
這就是新結(jié)構(gòu)標(biāo)簽到來的理由。
當(dāng)認(rèn)識到這些ID成為了慣例，HTML 5的締造者們更進(jìn)一步，使這些元素中的一部分變成他們獨(dú)立的標(biāo)簽。這兒有一個(gè)HTML 5中生效的新標(biāo)簽的快速概要：
頭部標(biāo)簽被設(shè)計(jì)作為關(guān)于一個(gè)章節(jié)或者一整張網(wǎng)頁介紹信息的容器。
標(biāo)簽可以包含從你位于大多數(shù)頁面頂部的典型標(biāo)志或者標(biāo)語，到介紹一個(gè)章節(jié)的標(biāo)語和開場白的任何東西。如果你還在你的頁面里使用，那可以使用替換
nav元素非常明顯，這是你的導(dǎo)航元素。當(dāng)然什么被算為導(dǎo)航是有一些爭議的，有一個(gè)基本的站點(diǎn) 導(dǎo)航，但一些情況下還可能有頁面導(dǎo)航元素。HTML5的締造者WHATWG最近在修改
的解釋，來表現(xiàn)怎樣在同一個(gè)頁面使用兩次。
更多關(guān)于nav的信息以及關(guān)于HTML5的激烈爭論，參見Jeffrey Zeldman關(guān)于nav元素的文章。
如果你還在使用
標(biāo)簽來包含你的頁面導(dǎo)航，你可以使用簡潔的標(biāo)簽來替換。
Section可能是新標(biāo)簽中最模糊的。根據(jù)HTML 5定義，一個(gè)章節(jié)是一個(gè)內(nèi)容的主題集合，通常在header標(biāo)簽后，在footer標(biāo)簽前。但是如果 需要，section也可以相互嵌套。
在我們上面的例子里，被“content”標(biāo)記的div就是一個(gè)變?yōu)閟ection的很好的選 擇。另外在那個(gè)section內(nèi)，根據(jù)內(nèi)容，我們可以增加section。
根絕WHATWG的注釋，article元素可以包含“組成文檔或站點(diǎn)獨(dú)立部分的一段內(nèi)容;例 如，雜志或者新聞的文章，或者博客條目。”
記住一個(gè)頁面里可以有多個(gè)article標(biāo)簽;例如一個(gè)博客首頁可能有最新的十篇文章，每一篇 包含在一個(gè)article標(biāo)簽內(nèi)。Article也可以通過使用section標(biāo)簽分為多個(gè)段落，然而當(dāng)你計(jì)劃你的結(jié)構(gòu)時(shí)需要稍微仔細(xì)一些，否則你容易引 起以一些難看的標(biāo)簽大雜燴結(jié)尾的情況。
另一個(gè)相當(dāng)模糊的標(biāo)簽，aside元素用于“與組成文檔主要的正文流內(nèi)容無關(guān)的”內(nèi)容。那表示 一條附加的評論，內(nèi)聯(lián)的腳注，引用，注解或者像你看到的在這篇文章右邊的更多典型的邊欄內(nèi)容。
根據(jù)WHATWG的注釋，看起來
可以用于所有的這些情況，盡管你邊 欄里的引用和標(biāo)簽云有著很大的不同。
沒人說HTML 5是完美的!
【用HTML5制作網(wǎng)頁的方法】相關(guān)文章：
網(wǎng)頁制作方法講解04-18
用Dreamweaver制作網(wǎng)頁的技巧01-15