DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> HTML頁面輸出應該遵循的幾點原則小結
HTML頁面輸出應該遵循的幾點原則小結
編輯:前端技巧     

1、不能少了DOCTYPE,浏覽器根據你申明的DOCTYPE決定頁面渲染規則,如果不聲明,不同的浏覽器顯示效果可能不一樣。
2、在<title>之前加上<meta>標簽說明頁面所用的編碼。否則可能導致部分浏覽器顯示的頁面標題為亂碼。
3、<style>應該放在<head>標簽內。否則會導致頁面在下載完成之前不美觀,而且在下載完<style>的內容以後浏覽器還要對頁面重新進行渲染,會影響用戶體驗。
4、CSS中盡量避免使用表達式。否則在每次頁面內容改變(比如javascript動態添加或刪除元素,改變浏覽器窗口大小)時,浏覽器都會重新計算表達式的值。一種可以替代的方法是用javascript在window.onload中動態判斷並確認樣式。用戶端的資源我們也應該珍惜。
5、在使用javascript改變頁面元互的顯示效果時,盡量用className屬性更改。應該盡量避免用element.style.color = "#ff0000"之類的語句,尤其是在一次更改多次屬性的時候。這樣做有兩個理由:方便維護和節約客戶端資源。使用className改更的時候,頁面只需要重新渲染一次,而且style屬性更改時,每次都要重新渲染,這比開銷是很大的。
6、<script />標簽應該緊靠在</body>標簽之前。浏覽器在下載<script>中的內容時,不會同時下載其它內容(圖片、flash、<script>後面的html文檔等),如果使用了較多的外部script文件,有可能導致用戶失支繼續等待頁面顯示的耐心。
一個簡單的例子:

復制代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示范</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>

簡單補充:
html寫的挺好,符合標准。
建議使用utf-8編碼。
http://zh.wikipedia.org/zh-cn/Gb2312
gb2312只包含6000多個漢字,不包含“镕”字。
windows記事本是gbk編碼的,包含2萬多個漢字。
utf-8包含全球10字。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved