HTML頁面輸出應(yīng)該遵循的幾點(diǎn)原則
來源:程序員人生 發(fā)布時(shí)間:2013-12-05 16:23:42 閱讀次數(shù):3434次
不能少了DOCTYPE,瀏覽器根據(jù)你申明的DOCTYPE決定頁面渲染規(guī)則,如果不聲明,不同的瀏覽器顯示效果可能不一樣。在<title>之前加上<meta>標(biāo)簽說明頁面所用的編碼。否則可能導(dǎo)致部分瀏覽器顯示的頁面標(biāo)題為亂碼。
<style>應(yīng)該放在<head>標(biāo)簽內(nèi)。否則會(huì)導(dǎo)致頁面在下載完成之前不美觀,而且在下載完<style>的內(nèi)容以后瀏覽器還要對(duì)頁面重新進(jìn)行渲染,會(huì)影響用戶體驗(yàn)。
CSS中盡量避免使用表達(dá)式。否則在每次頁面內(nèi)容改變(比如javascript動(dòng)態(tài)添加或刪除元素,改變?yōu)g覽器窗口大小)時(shí),瀏覽器都會(huì)重新計(jì)算表達(dá)式的值。一種可以替代的方法是用javascript在window.onload中動(dòng)態(tài)判斷并確認(rèn)樣式。用戶端的資源我們也應(yīng)該珍惜。
在使用javascript改變頁面元互的顯示效果時(shí),盡量用className屬性更改。應(yīng)該盡量避免用element.style.color = "#ff0000"之類的語句,尤其是在一次更改多次屬性的時(shí)候。這樣做有兩個(gè)理由:方便維護(hù)和節(jié)約客戶端資源。使用className改更的時(shí)候,頁面只需要重新渲染一次,而且style屬性更改時(shí),每次都要重新渲染,這比開銷是很大的。
<script />標(biāo)簽應(yīng)該緊靠在</body>標(biāo)簽之前。瀏覽器在下載<script>中的內(nèi)容時(shí),不會(huì)同時(shí)下載其它內(nèi)容(圖片、flash、<script>后面的html文檔等),如果使用了較多的外部script文件,有可能導(dǎo)致用戶失支繼續(xù)等待頁面顯示的耐心。
一個(gè)簡(jiǎn)單的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示范 liehuo.net</title>
<meta name="keywords" content="test,示范" />
<link rel="Stylesheet" type="text/css" href="common.css" />
<style type="text/css">
.test{border:1px solid #ff0000;}
.dom{width:200px;height:100px;}
.notdom{width:202px;height:102px;}
</style>
</head>
<body>
<div id="main" class="test"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
if($.support.boxModel){
$("#main").addClass("dom");
}else{
$("#main").addClass("notdom");
}
});
</script>
</body>
</html>
生活不易,碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)