HTML頁面輸出應該遵循的幾點原則

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> HTML頁面輸出應該遵循的幾點原則

HTML頁面輸出應該遵循的幾點原則

編輯：關於HTML

不能少了DOCTYPE，浏覽器根據你申明的DOCTYPE決定頁面渲染規則，如果不聲明，不同的浏覽器顯示效果可能不一樣。

在<title>之前加上<meta>標簽說明頁面所用的編碼。否則可能導致部分浏覽器顯示的頁面標題為亂碼。
<style>應該放在<head>標簽內。否則會導致頁面在下載完成之前不美觀，而且在下載完<style>的內容以後浏覽器還要對頁面重新進行渲染，會影響用戶體驗。
CSS中盡量避免使用表達式。否則在每次頁面內容改變(比如javascript動態添加或刪除元素，改變浏覽器窗口大小)時，浏覽器都會重新計算表達式的值。一種可以替代的方法是用javascript在window.onload中動態判斷並確認樣式。用戶端的資源我們也應該珍惜。
在使用javascript改變頁面元互的顯示效果時，盡量用className屬性更改。應該盡量避免用element.style.color = "#ff0000"之類的語句，尤其是在一次更改多次屬性的時候。這樣做有兩個理由：方便維護和節約客戶端資源。使用className改更的時候，頁面只需要重新渲染一次，而且style屬性更改時，每次都要重新渲染，這比開銷是很大的。
<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>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <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>

上一頁:深度分析：HTML5能否成為Flash終結者
下一頁:html標簽marquee

關於HTML

網頁文字的處理技巧集錦: 1、段落首行自動縮進每個段落的首行要縮進兩個漢字大小是眾人皆知
HTML頁面輸出應該遵循的幾點原則: 不能
HTML語言剖析(十四) 特殊字符: 　　只要你認識了 HTML 標記，你便會知道特殊字符的用處。HTML 原始碼顯示結果描

HTML入門知識 HTML5教程關於HTML HTML和Xhtml HTML5特效代碼 HTML5詳解

小編推薦

將網站（主頁）變成黑白什麼是Web反向代理加快HTML網頁速度的10個技巧 HTML網頁頭部代碼全接觸 HTML5實戰與剖析之離線應用文本框只能輸入數字網頁代 marquee|各種文字滾動代碼(適用公告) 如何建站與站建好後期的運作 HTML5游戲開發實戰--注意點 iframe的高度隨內容變化而變化的代碼

DIV CSS 佈局教程網

相關文章