如何規(guī)范大型網(wǎng)站的HTML代碼
時(shí)間：2022-05-29 18:06:02 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷
時(shí)間：2022-05-29 18:06:02 來(lái)源：網(wǎng)絡(luò)營(yíng)銷
寫Web頁(yè)面就像我們建設(shè)房子一樣，地基牢固，房子才不會(huì)倒。同樣的，我們制作Web頁(yè)面也是一樣的，一個(gè)良好的HTML結(jié)構(gòu)是制作一個(gè)網(wǎng)站的開始，良好的CSS只存在同樣良好的HTML中，所以一個(gè)干凈的，語(yǔ)義的HTML的優(yōu)點(diǎn)很多，那么平時(shí)制作中，我們又該如何規(guī)范大型網(wǎng)站的HTML代碼呢？
1、DOCTYPE的聲明 如果我們想做好一件事情，首先要知道我們有哪些權(quán)利去做，就如網(wǎng)頁(yè)中“DOCTYPE”的聲明，我們沒(méi)有必要去討論是否使用HTML4.01或者XHTML1.0或者說(shuō)現(xiàn)在的HTML5都提供了嚴(yán)格版本或者過(guò)渡版本，這些都能很好的支持我們寫的代碼：
由于我們現(xiàn)在的布局不需要table布局也能做出很好的布局，那么我們就可以考慮不使用過(guò)渡型而使用嚴(yán)格型的“DOCTYPE”，為了向后兼容，對(duì)此，億企邦建議使用HTML5的聲明模式：
<!DOCTYPE HTML>
<html lang="en-US">
2、字符集和編碼字符 在每個(gè)頁(yè)面的開始中，我們都在<head>中設(shè)置了字符集，我們這里都是使用“UTF-8”。
<meta charset="UTF-8" />
而且我們?cè)谄綍r(shí)寫頁(yè)面中時(shí)，時(shí)常會(huì)碰到"&"這樣的符號(hào)，億企邦認(rèn)為我們不應(yīng)該直接在頁(yè)面這樣寫“&”，如下圖所示：
我們應(yīng)該在代碼中使用字符編碼來(lái)實(shí)現(xiàn)，比如說(shuō)“&”我們?cè)诖a中應(yīng)該使用“&”來(lái)代替它。
3、正確的代碼縮進(jìn) 在頁(yè)面編輯中，代碼的縮進(jìn)有沒(méi)有正確，他不會(huì)影響你網(wǎng)站的任何功能，但要是你沒(méi)有一個(gè)規(guī)范的縮進(jìn)原則，讓讀你代碼的人是非常的生氣，所以說(shuō)正確的代碼縮進(jìn)可以增強(qiáng)你的代碼可讀性。
標(biāo)準(zhǔn)程序的縮進(jìn)應(yīng)該是一個(gè)制表符（或幾個(gè)空格），我們來(lái)一起來(lái)看下面展示的這張圖，你看后就知道以后自己的代碼要怎么樣書寫了：
不用說(shuō)，大家都喜歡下面的那種代碼吧。這只是一個(gè)人的習(xí)慣問(wèn)題，不過(guò)億企邦建議從開始就要做好，利人利已。
4、CSS樣式和Javascript腳本 頁(yè)面中寫入CSS樣式有很多種方法，有些直接將樣式放入頁(yè)面的“<head>”中，這將是一個(gè)很不好的習(xí)慣，因?yàn)檫@樣不僅會(huì)搞亂我們的標(biāo)記，而且這些樣式只適合這一個(gè)HTML頁(yè)面。
所以，我們需要將CSS單獨(dú)提出，保存在外部，這樣后面的頁(yè)面也可以鏈接到這些樣式，如果你頁(yè)面需要修改，我們也只需要修改樣式文件就可以。正如下圖所示：
上面我們所說(shuō)的只是樣式，其實(shí)javascript腳本也和CSS樣式是同一樣的道理。
所以，億企邦建議大家在制作web頁(yè)面中，盡量將你的CSS樣式和javascript腳本單獨(dú)放在一個(gè)文件中，然后通過(guò)鏈接的方式引用這些文件，這樣做的最大好處是，方便你的樣式和腳本的管理與修改。
5、正確的標(biāo)簽嵌套 我們?cè)趯慔TML時(shí)總是需要標(biāo)簽的層級(jí)嵌套來(lái)幫我們完成HTML的書寫，但這些HTML的嵌套是有一定的規(guī)則的，如果要細(xì)說(shuō)的話，我們可能要用幾個(gè)章節(jié)來(lái)描述，那么我今天這里要說(shuō)的是，我們?cè)趯慔TML時(shí)不應(yīng)該犯以下這樣的超級(jí)錯(cuò)誤：
上圖的結(jié)構(gòu)我們是常見的，比如說(shuō)首頁(yè)的標(biāo)題，那么我們就應(yīng)該注意了，不能把“<h1>”放在“<a>”標(biāo)簽中，換句話說(shuō)，就是不能把塊元素放在行內(nèi)(inline)元素中。
當(dāng)然，上面只是一個(gè)例子，只是希望大家在平時(shí)的制作中不應(yīng)該犯這樣的超級(jí)錯(cuò)誤。
6、刪除不必要的標(biāo)簽 首先我們一起來(lái)看一個(gè)實(shí)例的截圖：
上圖明顯是一個(gè)導(dǎo)航菜單的制作，在上圖的實(shí)例中：有一個(gè)“div#topNav”包住了列表“ul#bigBarNavigation”，而“div”和“ul”列表都是塊元素，加上“div”此處用來(lái)包“ul”根本就沒(méi)有起到任何作用。
雖然“div”的出現(xiàn)給我們制作web頁(yè)面帶來(lái)了極大的好處，但我們也沒(méi)有必要到處這樣的亂用，不知道大家平時(shí)有沒(méi)有注意這樣的細(xì)節(jié)呢？我是犯這樣的錯(cuò)誤，如果你也有過(guò)這樣的經(jīng)歷，那么從今天開始，從現(xiàn)在開始，我們一起努力來(lái)改正這樣的錯(cuò)誤，當(dāng)然你也可以做好建站指南（具體可查看億企邦的《如何創(chuàng)建網(wǎng)站或應(yīng)用程序的樣式指南和標(biāo)準(zhǔn)》相關(guān)介紹）。
7、使用更好的命名 這里所說(shuō)的命名就是給你的頁(yè)面中相關(guān)元素定義類名或者是ID名，很多同學(xué)都有這類的習(xí)慣，比如說(shuō)有一個(gè)元素字體是紅色的，給他加上“red”，甚至布局都寫“left-sidebar”等，但是你有沒(méi)有想過(guò)，如果這個(gè)元素定義了“red”后，過(guò)幾天客戶要求使用“藍(lán)色”呢？或者又說(shuō)，那時(shí)的“left-sidebar”邊欄此時(shí)不想放在左邊了，而是想放在右邊，那么這樣一來(lái)我們前面的命名可以說(shuō)是一點(diǎn)意義都沒(méi)有了，正如下面的一個(gè)圖所示：
那么定義一個(gè)好的名就很得要了，不但自己能看懂你的代碼，而且別人也能輕松讀懂你的代碼，比如說(shuō)一個(gè)好的類名和ID名“mainNav”、“subNav”、“footer”等，他能描述所包含的事情。不好的呢，比如前面所說(shuō)的。
8、離開版本的CSS 我們?cè)谠O(shè)計(jì)菜單時(shí)，有時(shí)要求所有菜單選項(xiàng)的文本全部大寫，大家平時(shí)是不是直接在HTML標(biāo)簽中就將他們?cè)O(shè)置成大寫狀態(tài)呢？
如果是的話，我覺得不好，如果為了將來(lái)具有更好的擴(kuò)展性，我們不應(yīng)該在HTML就將他們?cè)O(shè)置為全部大寫，更好的解決方法是通過(guò)CSS來(lái)實(shí)現(xiàn)，如下圖所示：
9、定義<body>的類名或ID名 大家平時(shí)制作web頁(yè)面時(shí)不知道有沒(méi)有碰到這樣的問(wèn)題，就是整站下來(lái)，使用了相同的布局和結(jié)構(gòu)，換句話說(shuō)，你在頁(yè)面的布局上使用了相同的結(jié)構(gòu)，相同的類名，但是突然你的上級(jí)主管說(shuō)應(yīng)客戶的需求，有一個(gè)頁(yè)面的布局需要邊欄和主內(nèi)容對(duì)換一下。
此時(shí)你又不想為了改變一下布局而修改整個(gè)頁(yè)面的結(jié)構(gòu)，此時(shí)有一個(gè)很好的解決辦法，就是在你的這個(gè)頁(yè)面中的“<body>”中定義一個(gè)特殊的類名或ID名，這樣來(lái)你就可以輕松的達(dá)到你所要的需求。這樣的使用，不知道大家使用過(guò)沒(méi)有：
給“<body>”定義獨(dú)特的類和ID名稱是非常強(qiáng)大的，不僅僅是為了像上面一樣幫你改變布局，最主要的是有時(shí)他能幫你實(shí)現(xiàn)頁(yè)面中的某一部分達(dá)到特殊效果，而又不影響其它頁(yè)面的效果。
為什么有這樣的功能，不用我說(shuō)我想大家都是知道的，因?yàn)槊總€(gè)頁(yè)面的內(nèi)容都是“<body>”的后代元素。
10、驗(yàn)證你的代碼 人不免會(huì)出錯(cuò)，我們編寫代碼的時(shí)候也是一樣的，你有時(shí)候總會(huì)小寫或多寫，比如說(shuō)忘了關(guān)閉你的元素標(biāo)簽，不記得寫上元素必須的屬性，雖然有一些錯(cuò)誤不會(huì)給你帶來(lái)什么災(zāi)難性的后果，但也不免會(huì)給你帶來(lái)你無(wú)法意估的錯(cuò)誤。所以建議您寫完代碼的時(shí)候去驗(yàn)證你一下你的代碼，以免出現(xiàn)下面的錯(cuò)誤：
為一有效的驗(yàn)證你的代碼，我們可以使用相關(guān)的工具或者瀏覽器的插件來(lái)幫助我們完成。如果你的代碼沒(méi)有任何錯(cuò)誤，W3C驗(yàn)證工具會(huì)在你們面前呈現(xiàn)綠色的文字，這樣讓你是無(wú)比的激動(dòng)人心，因?yàn)樵俅巫C明了你寫的代碼經(jīng)得起W3C的標(biāo)準(zhǔn)（在此，推薦大家可以看下億企邦的《網(wǎng)頁(yè)制作過(guò)程中常用的20個(gè)功能代碼》相關(guān)介紹）。
11、邏輯順序 這是一個(gè)很少見的錯(cuò)誤情況，因?yàn)槲蚁氪蠹覍戫?yè)面都不會(huì)把邏輯順序打亂，換句話說(shuō)，如果可能的話，讓你的網(wǎng)站具有一個(gè)先后邏輯順序是最好的，比如說(shuō)先寫頁(yè)頭，在寫頁(yè)體，最后寫頁(yè)腳。
當(dāng)然有時(shí)也會(huì)碰到特殊情況，如何頁(yè)腳部分在于我們代碼的邊欄以上，這可能是因?yàn)樗钸m合你的網(wǎng)站設(shè)計(jì)需求，這樣或許是可以理解的，但是如果你有別的方式實(shí)現(xiàn)，我們都應(yīng)該把頁(yè)腳是放在一個(gè)頁(yè)面的最后，然后在通過(guò)特定的技術(shù)讓它達(dá)到你的設(shè)計(jì)需求：
12、堅(jiān)持良好的HTML代碼規(guī)則 我已經(jīng)總結(jié)了很多讓HTML代碼書寫的更加簡(jiǎn)潔的原則在這里，這將是一個(gè)很好的開始，但還有更多。當(dāng)你試圖修復(fù)你現(xiàn)的代碼，可能會(huì)發(fā)現(xiàn)很困難，而如果你完全當(dāng)做從頭開始學(xué)習(xí)，卻可能會(huì)容易的多。不管如何，重要的是，你應(yīng)該學(xué)習(xí)如何撰寫良好的HTML并且堅(jiān)持下去。
當(dāng)你下次書寫一個(gè)HTML代碼項(xiàng)目時(shí)，謹(jǐn)記這些簡(jiǎn)潔原則，Just do what you can，You’ll do better！
如果讓你從一個(gè)項(xiàng)目的開始，這一切可能都是非常容易的，但是如果需要你去修復(fù)一個(gè)現(xiàn)有的代碼，那多少都會(huì)有一定的難度。所以說(shuō)我們要將如何學(xué)習(xí)編寫一個(gè)良好的、整潔的HTML代碼，并且一直堅(jiān)持這樣的編寫。
億企邦點(diǎn)評(píng)： 要使搜索引擎收錄我們的網(wǎng)頁(yè)，其前提是要讓搜索引擎的Spider能讀懂我們的Web文件，搜索引擎Spider閱讀網(wǎng)頁(yè)的根據(jù)便是HTML規(guī)范，通過(guò)對(duì)HTML代碼的分析，Spider才能判斷網(wǎng)頁(yè)內(nèi)容，在此基礎(chǔ)上才能判斷針對(duì)相應(yīng)關(guān)鍵詞的相關(guān)性。
另外，有效的HTML也可以保證Web頁(yè)面可以在多種瀏覽器下被正確解釋，避免同一個(gè)頁(yè)面在不同的瀏覽器上顯示不同的頁(yè)面，同時(shí)，這對(duì)于提高網(wǎng)站的可用性方面也是有著極大好處的。
在線咨詢