用HTML5.0制作網(wǎng)頁的教程

2020-03-24 16:40:45

字體：大中小

供稿：網(wǎng)友

根據(jù)你們詢問的人，HTML 5不是邁向創(chuàng)造更語義化的網(wǎng)絡(luò)的下一個重要步伐，就是用一系列不完整的標(biāo)簽和標(biāo)記大雜燴讓網(wǎng)絡(luò)陷入困境的災(zāi)難。爭論雙方的問題在于，很少的站點(diǎn)在自然環(huán)境下使用HTML 5，所以現(xiàn)在所認(rèn)識到的問題的理論解決方案仍然在很大程度上未經(jīng)考驗(yàn)。即便如此，我們不難發(fā)現(xiàn)下一代網(wǎng)絡(luò)標(biāo)記工具的好處和潛在的問題。1. HTML 5有什么不同？2. 最終，一個任何人都可以記住的文檔類型3. 最基本的語義結(jié)構(gòu)1. header 2. nav 3. section 1. article 2. aside 3. footer 4. 把他們放在一起5. 為新元素編寫樣式6. 兼容老的瀏覽器7. 現(xiàn)在你可以使用HTML 5了，但你會用么？HTML 5有什么不同？首先，我們通過HTML 5表達(dá)什么？First off, what do we mean by HTML 5?理論上，我們表達(dá)所有的事新的語義結(jié)構(gòu)標(biāo)簽，例如canvas或者離線儲存等API規(guī)范，以及新的內(nèi)聯(lián)語義標(biāo)簽。盡管如此，我們把實(shí)際的原因（PS：瀏覽器支持問題）僅僅局限于結(jié)構(gòu)標(biāo)簽。canvas，離線儲存，本地視頻或者地理定位API都很絕妙，然而他們還不能被所有瀏覽器一致的支持。但是等等你說，大多數(shù)瀏覽器也都不支持新的結(jié)構(gòu)元素！這是真的，但他們中的絕大多數(shù)將會很樂意去接受你想要創(chuàng)建的任何標(biāo)簽。甚至連IE6也可以處理新標(biāo)簽，盡管如果你想要使用CSS設(shè)置樣式，你需要一點(diǎn)JavaScript的幫助。當(dāng)你對新標(biāo)簽設(shè)置樣式時，你需要記住一件事，那就是未知標(biāo)簽在大部分瀏覽器中沒有默認(rèn)樣式。他們同時被認(rèn)為是行級元素。盡管如此，由于大部分HTML 5的新標(biāo)簽可以構(gòu)造，我們將讓他們擁有塊級元素的行為。解決方法是確認(rèn)你在html' target='_blank'>CSS樣式中包含了display:block;。為了幫助了解當(dāng)今HTML 5的一些新玩意兒，我們現(xiàn)在就進(jìn)入正題，開始使用一些新的結(jié)構(gòu)元素。最終，一個任何人都可以記住的文檔類型我們創(chuàng)建HTML 5文檔第一件需要做的事情就是使用新的文檔類型。現(xiàn)在，如果你還清楚的記得HTML 4或者XHTML 1.x的文檔類型，你真是一個比我們更強(qiáng)的淘氣鬼。每當(dāng)我們新建一個頁面，我們必須打開一個舊的文件，剪切并粘貼文檔類型定義。這真是痛苦，也是為什么我們喜歡新的HTML 5文檔類型。你準(zhǔn)備好了么？他出現(xiàn)了：不會太難記。簡單并且容易理解。不區(qū)分大小寫。這個構(gòu)想是停止HTML版本化，使向后兼容變得更容易。從長遠(yuǎn)看是否成功是另外的事情，但至少他節(jié)省了你輸入的平均時間。最基本語義結(jié)構(gòu)我們已經(jīng)將我們的頁面定義為HTML 5文檔。到現(xiàn)在為止，一切都還不錯。現(xiàn)在，這些我們已經(jīng)聽說的新標(biāo)簽到底是什么？在我們鉆研新標(biāo)簽前，想想你一般網(wǎng)頁的結(jié)構(gòu)，大概像這樣：這對于展示用途很好，但如果我們想要知道一些關(guān)于頁面元素包含什么的問題，這又怎么辦呢？上面的例子中，我們?yōu)槲覀兯械慕Y(jié)構(gòu)div添加了ID。這在有見識的設(shè)計師中是很平常的事。目的有兩個方面，首先，ID提供了可以能用于給頁面的特殊段落應(yīng)用樣式的錨，其次，ID充當(dāng)基本的偽語義結(jié)構(gòu)。高明的解析器將會查看標(biāo)簽的ID屬性，并嘗試去猜測他們的含義，但當(dāng)每個站點(diǎn)的ID名稱不同的時候很難。這就是新結(jié)構(gòu)標(biāo)簽到來的理由。當(dāng)認(rèn)識到這些ID成為了慣例，HTML 5的締造者們更進(jìn)一步，使這些元素中的一部分變成他們獨(dú)立的標(biāo)簽。這兒有一個HTML 5中生效的新標(biāo)簽的快速概要： header 頭部標(biāo)簽被設(shè)計作為關(guān)于一個章節(jié)或者一整張網(wǎng)頁介紹信息的容器。 header 標(biāo)簽可以包含從你位于大多數(shù)頁面頂部的典型標(biāo)志或者標(biāo)語，到介紹一個章節(jié)的標(biāo)語和開場白的任何東西。如果你還在你的頁面里使用 div id= header ，那可以使用 header 替換 nav nav元素非常明顯，這是你的導(dǎo)航元素。當(dāng)然什么被算為導(dǎo)航是有一些爭議的，有一個基本的站點(diǎn) 導(dǎo)航，但一些情況下還可能有頁面導(dǎo)航元素。HTML5的締造者WHATWG最近在修改 nav 的解釋，來表現(xiàn)怎樣在同一個頁面使用兩次。更多關(guān)于nav的信息以及關(guān)于HTML5的激烈爭論，參見Jeffrey Zeldman關(guān)于nav元素的文章。如果你還在使用 div id= nav 標(biāo)簽來包含你的頁面導(dǎo)航，你可以使用簡潔的 nav 標(biāo)簽來替換。 section Section可能是新標(biāo)簽中最模糊的。根據(jù)HTML 5定義，一個章節(jié)是一個內(nèi)容的主題集合，通常在header標(biāo)簽后，在footer標(biāo)簽前。但是如果需要，section也可以相互嵌套。在我們上面的例子里，被 content 標(biāo)記的div就是一個變?yōu)閟ection的很好的選擇。另外在那個section內(nèi)，根據(jù)內(nèi)容，我們可以增加section。 article 根絕WHATWG的注釋，article元素可以包含組成文檔或站點(diǎn)獨(dú)立部分的一段內(nèi)容；例如，雜志或者新聞的文章，或者博客條目。記住一個頁面里可以有多個article標(biāo)簽；例如一個博客首頁可能有最新的十篇文章，每一篇包含在一個article標(biāo)簽內(nèi)。Article也可以通過使用section標(biāo)簽分為多個段落，然而當(dāng)你計劃你的結(jié)構(gòu)時需要稍微仔細(xì)一些，否則你容易引起以一些難看的標(biāo)簽大雜燴結(jié)尾的情況。 aside 另一個相當(dāng)模糊的標(biāo)簽，aside元素用于與組成文檔主要的正文流內(nèi)容無關(guān)的內(nèi)容。那表示一條附加的評論，內(nèi)聯(lián)的腳注，引用，注解或者像你看到的在這篇文章右邊的更多典型的邊欄內(nèi)容。根據(jù)WHATWG的注釋，看起來 aside 可以用于所有的這些情況，盡管你邊欄里的引用和標(biāo)簽云有著很大的不同。沒人說HTML 5是完美的！ footer Footer的用處也應(yīng)該是很明顯的，除了可能你不清楚可以擁有多個腳標(biāo)。換句話說，除了通常在大多數(shù)頁面底部看到的主腳標(biāo)，段落也可以含有腳標(biāo)。把他們放在一起讓我們使用新標(biāo)簽重新編寫我們原來的例子：非常清楚，并且容易理解，不是么？一些注釋：我們可以在header標(biāo)簽中包含我們的 h1 My Article /h1 標(biāo)題。我沒有這樣做，因?yàn)閔1元素已經(jīng)表達(dá)了標(biāo)題的含義，但如果你還有發(fā)布日期，署名或者其他數(shù)據(jù)在你文章的頂部，為標(biāo)簽集添加一個header容器標(biāo)簽是一個很好的選擇。同時注意我們可以在article元素下添加第二個footer元素來包含諸如翻頁導(dǎo)航，相關(guān) 文章或者其他內(nèi)容。為新標(biāo)簽編寫樣式在大多數(shù)瀏覽器中，所有你需要做的就是像你通常做的那樣，為在新標(biāo)簽上應(yīng)用樣式表，簡單的定義你的樣式。但請確認(rèn)為每一個元素添加了display:block;規(guī)則，無論如何，從現(xiàn)在開始。經(jīng)過一段時間后，當(dāng)瀏覽器開始標(biāo)準(zhǔn)化，并支持新元素后，那就不必要了。例如，讓我們在我們的header里應(yīng)用一些樣式：記住，你仍然可以給這些標(biāo)簽添加類和ID屬性。所以，如果你想要單獨(dú)為一個導(dǎo)航設(shè)置樣式，你可以輕易的給這個標(biāo)簽添加一個類或者樣式，就象這樣：然后你可以應(yīng)用一個樣式：兼容老的瀏覽器但等一下，IE怎么辦？這些樣式完全不能在IE6下工作。如果你仍然需要支持像IE6一類遺產(chǎn) 般的瀏覽器，這兒有一個解決方法。IE6解析和顯示這些標(biāo)簽還好，但你不能對他們設(shè)置任何CSS。解決方法是使用一點(diǎn)JavaScript。我們只需要讓IE去給我們使用createElement方法創(chuàng)造的的HTML 5標(biāo)簽設(shè)置樣式。在HTML 5文件的head標(biāo)簽內(nèi)添加這點(diǎn)東西。或者，你可以把他保存在一個特定的文件里，并用這種方法包含。我知道你在想什么：哥，你根本沒有為那個腳本標(biāo)簽定義一個MIME類型。你根本不需要在HTML 5做這些事情。在HTML 5中，所有的腳本都被假定為type= text/javascript ，所以沒有必要讓屬性把你的腳本標(biāo)簽搞得亂七八糟（除非你的腳本并不是 JavaScript）。這解決了IE的問題，但我們并沒有擺脫困境。現(xiàn)在被證明Gecko渲染引擎有一個bug，導(dǎo)致了Firefox2和Camino的一些版本在這些標(biāo)簽上卡住。這兒有兩個方法來處理這個bug，沒有一個是理想的。更多的細(xì)節(jié)請查看HTML5doctor的這篇文章。這篇文章同時附有一個讓所有HTML 5元素都生效的方便腳本。記住，盡管Firefox 2的使用率很快在所有網(wǎng)站流量中降到了10%以下，但單純忽略這個bug可能還是需要根據(jù)你網(wǎng)站的訪問者來定。現(xiàn)在你可以使用HTML 5了，但你會用么？簡短的回答是：我們會。復(fù)雜一點(diǎn)的是：那要看站點(diǎn)了。如果你指責(zé)重新制作CNN主頁，好吧，你可能會有一點(diǎn)抗拒，直到瀏覽器的支持變好些。但如果你要給你的博客改版，我們支持你。這兒還有一些可以幫助你的Wordpress插件，如果你正在使用這么流行的發(fā)布系統(tǒng)。這兒是一個Jeff Starr制作的HTML 5主題。同時，試試以站點(diǎn)為主的HTML 5美術(shù)館，并且查看源代碼，看看他們做了什么。盡管如此，如果IE的缺點(diǎn)阻止你了，這樣考慮吧：就連Google也在他們的主要搜索頁面上使用了HTML 5的文檔類型。就算如果你不使用所有新的結(jié)構(gòu)標(biāo)簽，你可以至少利用一下簡潔的腳本聲明和下次我們會介紹的關(guān)于一些非結(jié)構(gòu)的語義標(biāo)簽。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML文本格式化的實(shí)例詳解

下一篇：html5貪吃蛇游戲使用63行代碼完美實(shí)現(xiàn)