Question to say "I can!"

網頁中代碼的順序

2012-11-17

作者:潛行者m

仿佛奇怪的問題總是喜歡找上那些初學者。當我在學習制作網頁的時候,經常遇到一些很特別的問題。例如:剛剛添加的樣式不起作用、jQuery 的代碼老是不起作用等等,這些問題往往是不關注細節導致的。而今天我要談的這個細節,就是關于網頁中代碼的順序。沒錯,代碼也是有順序的,順序不對有可能會出現一些意外的情況。

HTML 相關的代碼順序

下面先來介紹 HTML 中的代碼順序。

HTML 代碼的排序原理

排序原理很簡單,因為當瀏覽器訪問一個網頁的時候,要下載這個網頁。現在的網速,對于一個幾百K的網頁來說,很快就能下載完。但是如果網頁比較大或者網速比較卡,網頁下載就會需要一定的時間。這樣的話,瀏覽器顯示網頁的過程就很明顯了。從 HTML 代碼的上到下,依次下載。重要的內容要優先加載,所以就產生了 HTML 代碼排序的問題。

head 里面的元素排序

HTML 中的 head 元素里面,通常放置著文檔的描述信息。一般有:網頁編碼、title 標題、meta 描述網頁關鍵字、link 引入 CSS 文件、script 引入 Javascript 文件等等。下面就這幾個內容進行一個討論(以 HTML5 為例):

首先,先是標準的 DOCTYPE 聲明、HTML 結構那一套。

 <!DOCTYPE html> <html> <head></head> <body></body> </html> 

其次,編寫網頁編碼,我個人認為編碼是網頁中最重要的,因為它決定瀏覽器采用什么編碼來解析你的網頁,如果編碼沒有設置好的話,網頁顯示出來就是一整個亂碼。關于網頁編碼的更詳細的文章,可以看一下?潛行者m?寫的網頁編碼就是那點事?。編碼寫完之后,應該讓瀏覽器立刻顯示出網頁的標題,這時候就應該寫出 title 標題了。

 <meta charset="utf-8" /> <title>標題</title> 

接下來,就應該是聲明文檔的各種信息,例如 關鍵詞、描述、作者等等信息。之后就要加載 CSS 樣式表。讓瀏覽器先下載好 CSS 樣式表,之后下載的網頁內容,就會立刻加上 CSS 的樣式效果,誰也不希望打開網頁的時候,是沒有樣式的,然后加載完內容之后才出現正常的頁面。這也就是為什么 CSS 引用要寫在 head 里面。

 <meta name="keywords" content="水煮魚" />
<meta name="description" content="水煮魚是一個關注 WordPress 開源博客平臺應用和互聯網的 IT 博客。" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/> 

關于 JavaScript 的位置一直比較有爭議。因為 JavaScript 比較靈活,可以添加在頁面的任何位置。通常推薦的是加在頁面的最底部。因為JavaScript 文件通常比較大,瀏覽器下載比較費時間,由于 JavaScript 可能會影響到當前頁面的結構內容,所以瀏覽器通常會先下載完 JavaScript 代碼,“運行” 之后,再下載網頁的正文內容。這就導致了加載速度比較慢,因為要先加載 JavaScript 代碼才會顯示網頁內容。所以要放在頁面底部。這樣瀏覽器會先下載網頁的內容顯示出來,然后再下載 JavaScript 對當前的網頁進行處理。

body 主體內容的排序

前面說過瀏覽器先依次下載網頁然后顯示,那么網頁主體內容的排版布局就很明顯了:重要的內容排在前面

例如一個博客類型的網頁,最重要的內容肯定是 文章 。所以文章的內容要盡量放在網頁的頂部。雖然它可能要顯示在下面,但是也要放在代碼的上面,然后通過 CSS 布局等放在下面。當網速很卡的時候,排版合理的博客很明顯就可以看到,先顯示出來頭部、文章主體內容,之后再顯示 邊欄、底部 內容。這就是為了讓用戶最快的看到他們想要看的內容,即使網速很卡下載很慢,內容出來了邊欄等都下載不下來,用戶也會得到他需要的內容。這就是 body 元素里面的代碼排序原則。

CSS 代碼的排序

CSS中有很多排序的小細節需要注意,不注意的話很有可能就出現一些意外情況。

順序解決樣式沖突問題

當你對一個元素賦予了 background-color 屬性,你在其他地方,忘了之前的設置,又對這個元素賦予了一個屬性值與之前不同的 background-color 屬性。那么瀏覽器究竟會對這個元素渲染哪一個背景顏色呢?答案是代碼排在后面的屬性值。沖突的內容,后面的屬性值就會覆蓋前面的屬性值。

因此要注意,一些?CSS reset?等要先加載,然后在后面加載自己寫的屬性值。例如:CSS reset 通常會取消 strong 的加粗,但有時我們的網頁作品中,要 strong 顯示成加粗效果,所以我們要設置 strong{font-weight:bold;} 這樣的樣式。但如果 CSS reset 代碼放在后面,它之前對 strong 的取消加粗屬性就會覆蓋掉你的 加粗效果。所以無論刷新網頁多少遍,你的 strong 標簽里面的內容,還沒有加粗。

如果有時候,你真的無法修改加載文件的順序,那么面對這種情況,你可以使用 CSS 中的 !important 語法,告訴瀏覽器要使用這個屬性解決沖突。

鏈接的交互排序

一個超鏈接,默認是藍色的,當我們把鼠標移動上去,會變色,點擊的過程也會變色,訪問過后回來一看,通常也不會是原來的藍色了。控制這些顏色的,分別是 CSS 中的 :link 、:visited 、:hover、:active 這四個偽類選擇器,從名稱就可以看出,控制的狀態分別是:默認顯示、訪問過后、鼠標移動上去、點擊激活。有時候會出現一些意外情況,例如:同時設置了 :visited 和 :hover 的樣式,但一旦超鏈接訪問后,hover 的樣式就不出現了等。這是因為,這四個偽類選擇器對 a 元素定義的時候,是有一個順序的。如果不按照這個順序,就會出現一些意外情況。

這個順序有一個很好記的方法,那就是:love hate,即 l(link)ov(visited)e h(hover )a(active)te。

a:link{color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#666666; text-decoration:underline;} a:active{color:#666666; text-decoration:none;} 

屬性值的順序

CSS 中,有的屬性既可以分開寫,也可以合并起來寫。例如 margin 屬性,你可以分別制定 margin-left 、margin-right、margin-top、margin-bottom 的值,也可以直接寫成 margin:top right bottom left; 也可以寫兩個參數,分別代表上下和左右的外邊距。這樣的寫法簡練而且靈活,但是對不熟練的新手來說,比較容易搞混。當類似 margin 、 padding 這樣的屬性,寫四個參數的時候,以 top 開始,順時針旋轉。

除此之外,還有類似 font、background 這樣的屬性,它的屬性值也要有順序(雖然對順序要求不嚴格),它們的參數有缺省值,所以不需要全部定義,只需要定義自己需要的樣式即可。但是 border 這樣的屬性,就必須嚴格的按照語法編寫屬性值的順序。例如:border :1px solid #ccc;如果 1px solid #ccc 這三個值的順序出問題了,那么瀏覽器就可能無法解讀這段 CSS 的樣式。

JavaScript 代碼的順序

JavaScript 文件加載順序

jQuery 是一個比較常用的 JavaScript 庫,通常我們還要配合它強大的插件使用。對于新手來說,經常會遇到沒有產生相應效果的問題。就是說,代碼沒有檢查出問題,但就是沒有執行顯示應有的效果。原因就出在加載順序上面。你編寫的 JavaScript 代碼以及調用的 jQuery 插件,都需要基于 jQuery 庫,所以應該在所有 JavaScript 代碼之前,先引入 jQuery 庫。瀏覽器先把庫下載完了,才會識別后面的依賴這個庫的代碼實現相應的功能。同樣的,激活使用某個插件的代碼,也需要放在插件的后面才會有效。

 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.lazyload.js"></script>
<script type="text/javascript" src="jquery/插件.js"></script>
<script type="text/javascript" src="自己編寫的js/js.js"></script>
作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 新疆十一选五 太原按摩店推荐 炒股票新手入门 青海11选五开奖结果图 安徽11选5开奖号 四川麻将定缺算牌技巧 上马麻里子个人资料 上下分模式的麻将 快乐10分 吉林十一选五跨度走 极速快三是不是人为控制的 独行侠是以前哪个队 麻将游戏外挂视频 11选五5开奖新疆 幸运飞艇历史开奖查询 水咲萝拉高清在线播放