盗墓笔记小说下载,盗墓笔记小说txt下载,绝色狂妃仙魅小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

重構(gòu)HTML改善Web應(yīng)用設(shè)計

本文從良構(gòu)，有效性，布局三個角度，結(jié)合往日項目開發(fā)經(jīng)歷，整理總結(jié)重構(gòu)HTML改善Web應(yīng)用設(shè)計的幾點規(guī)則和做法。部分參考自《重構(gòu)HTML改善Web應(yīng)用設(shè)計》。

重構(gòu)。什么是重構(gòu)？為什么要重構(gòu)。

重構(gòu)是在不改變程序行為的基礎(chǔ)上進(jìn)行小的改動，是代碼逐漸改善的過程。移除長期累積下來的爛碼，以得到更清晰和更容易維護(hù)，除錯以及添加新功能的代碼，這做法不能單純只出現(xiàn)在編碼的后期，甚至是你意識到你的代碼已經(jīng)無從再下手非重寫不可的時候，而是從開始開發(fā)起，逐漸積累，逐漸修改。以前因為日常編碼的隨意性，導(dǎo)致問題日益積累，逐步擴(kuò)散，***只能推倒重來。如果時間經(jīng)受不起推倒重來，你別無選擇，唯一實現(xiàn)的選擇就是重構(gòu)。

無論做什么，都不要因為追求***而忽略曉得改進(jìn)，如果眼下時間足夠做一點重構(gòu)，那就做一點兒。日后有時間還可以做更多。整體的重構(gòu)設(shè)計雖然惹人注目令人難忘，但沒有平日的積累，何以收獲龐大的成就？你的目標(biāo)應(yīng)該是讓代碼每天都有新變化。堅持幾個月，我相信我們都能擁有驕傲地，清晰代碼。

良構(gòu)

把標(biāo)記轉(zhuǎn)換為符合現(xiàn)代標(biāo)準(zhǔn)的首要任務(wù)是實現(xiàn)良構(gòu)。良構(gòu)保證了DOM可操作的文檔樹結(jié)構(gòu)的唯一性，因而成為可靠的跨瀏覽器的javascript代碼的基礎(chǔ)。對于一個亂構(gòu)的頁面來說，任何可靠的自動化處理或測試都是非常難以保證的，其次，瀏覽器頁面的展示效果更是不可預(yù)估。對于亂構(gòu)的頁面，不同的瀏覽器使用不同的方式補(bǔ)充確實的片段，并糾正其中的錯誤。因此，對于重構(gòu)HTML，最要緊的無疑是實現(xiàn)頁面良構(gòu)化。

要達(dá)到良構(gòu)，大部分的網(wǎng)站要至少或全部做到以下幾點：

?所有的其實標(biāo)簽都應(yīng)有一個匹配的結(jié)束標(biāo)簽

?空元素應(yīng)該使用空元素的標(biāo)簽語法

?所有的屬性都必須有一個值

?所有的屬性都需要用引號括起來

?所有的&好必須轉(zhuǎn)義為&；

?所有的小于號都要轉(zhuǎn)義為<；

?只有唯一的根元素

?所有未預(yù)定義的實體應(yīng)用必須在DTD中聲明

針對往日因為個人編程習(xí)慣和隨意性容易犯的錯誤，從良構(gòu)角度思考，整理一下日后構(gòu)建HTML時，有幾點需要特別注意。

更好實現(xiàn)良構(gòu)的幾個要點：

1.將名稱改成小寫。

改寫為

等，因為XHTML只使用小寫名稱，所有元素和屬性都要小寫，和

都不被接收

2.給屬性值加引號。改寫成等。一些空格的屬性有時候出現(xiàn)有做括號而沒有右括號，瀏覽器不宜定按照你的意愿解析，不同的瀏覽器有不同的解析效果，這就有可能造成跨瀏覽器問題。

3.補(bǔ)足遺漏的屬性。改成等。XHTML不支持只有屬性名稱而沒有值的語法。

4.將空標(biāo)簽替換為空元素標(biāo)簽。XML解析器要求所有的起始標(biāo)簽都有匹配的結(jié)束標(biāo)簽

要有對應(yīng)的

，
改寫為
等

5.消除重疊。xxxx改寫成xxxx等。不同的瀏覽器對包含重疊元素的文檔所構(gòu)建的DOM樹不一樣。在重疊元素面前，javascript，css以及其他需要讀取DOM的程序都變得難以創(chuàng)建，排錯和維護(hù)。

有效性

有效性比良構(gòu)稍微嚴(yán)格，即不僅要確保文檔的語法正確，還要保證語義正確。保證元素和屬性只能按自身語義出現(xiàn)在恰當(dāng)?shù)牡胤健?/p>

有效性是面向未來開發(fā)的基石。有效的網(wǎng)站與設(shè)備無關(guān)，有效的頁面為不同的讀者傳達(dá)相同的信息，就算讀者使用的是界面不相同的瀏覽器。

良構(gòu)和有效性檢查是基本的語法約束保證，接下來要保證語義是恰當(dāng)?shù)摹?/p>

具體實現(xiàn)方法：

1，加入過渡型DOCTYPE聲明

 
 
  
  
  
  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

過渡式DTD讓你不必要完全語義標(biāo)記就能讓文檔通過驗證，并且他允許包含i,b和center等這些不推薦使用的表現(xiàn)性元書，因此，在進(jìn)一步改善文檔的語義之前，你可以找出比修復(fù)更嚴(yán)重的結(jié)構(gòu)問題。

2，刪除所有不存在的標(biāo)簽

3，用CSS替代center，i，font等不被推薦或棄用的標(biāo)簽。

4，把行內(nèi)（inline）元素，放在塊（block）元素中

要做到有效，文檔中所有元素是有效的嚴(yán)格性XHTML元素還不夠，還必須保證它們之間的正確關(guān)系，瀏覽器和其他程序處理XHTML需要依賴元素間的正確位置。

 
 
  
  Do you like this pictrue?
  
  
  
  I think it's really neat
  
  
  
  
  
  
  
  Do you like this pictrue?
  
  
  
  I think it's really neat

布局

1，熟悉元素語義

每一個元素都應(yīng)各司其職：ul是無序列表，ol是有序列表，table是表格式數(shù)據(jù)，blockquote是應(yīng)用，h1~h6是標(biāo)題等。恰當(dāng)?shù)恼Z義元素有助于屏幕閱讀器呈現(xiàn)更容易理解的結(jié)構(gòu)，也能保證不同平臺間正確顯示。對于初學(xué)者，很多本來語義良好的元書，如ul,blockquote,table等，被濫用與實現(xiàn)某種特定布局效果。這些濫用的目的是給網(wǎng)頁生成特定的外觀，然而這些外觀難以跨瀏覽器，幾乎除了設(shè)計者自己的電腦，通常很多地方都不通用的。

失敗經(jīng)歷：

為了實現(xiàn)導(dǎo)航效果，一開始沒有考慮內(nèi)容語義，無意中將導(dǎo)航主項和相關(guān)聯(lián)的菜單分開，在利用css中的相對定位，設(shè)定top和left屬性，將相關(guān)菜單移動到相關(guān)的主項下。這樣會導(dǎo)致一個嚴(yán)重的問題。一旦將不同頁面放置在不同的分辨率的屏幕上，菜單就會錯位。就是說，針對不同分辨率的屏幕，還要設(shè)計不同的top和left屬性。

 
 
  
  
  
       菜單一菜單二菜單三
  
  
  
  
  
      子菜單一子菜單二子菜單三

優(yōu)化設(shè)計過的導(dǎo)航HTML結(jié)構(gòu)，組合主菜單和子菜單：

編寫HTML的目的不是為某種結(jié)構(gòu)或者頁面外觀，而是為了如何更好地呈現(xiàn)內(nèi)容，因此在編寫HTML之前，務(wù)必思考這種內(nèi)容應(yīng)該使用哪種語義的元素。

恰當(dāng)?shù)腍TML非常適合處理跨瀏覽器問題。拿到web設(shè)計圖后，在著手構(gòu)建web應(yīng)用之前，你必須要停止考慮頁面的外觀，而應(yīng)該開始思考頁面表達(dá)的是什么含義。

#p#

2，替換表格布局

基于CSS的頁面比基于表格的頁面更小更簡單。

a)編寫和編輯更容易，下載更快，

b)通過轉(zhuǎn)向CSS，可以節(jié)省帶寬。同時外聯(lián)的css文件可以緩存和重用，不必隨每次頁面的下載又重下一次。

取代濫用本用于呈現(xiàn)表格數(shù)據(jù)的table元素而使用表格布局，可以考慮頻繁使用的分欄式布局：

1）兩欄，左側(cè)固定寬度的側(cè)欄，右邊是彈性寬度的內(nèi)容欄

2）三欄，左右各固定寬度的側(cè)欄，中間是內(nèi)容。

根據(jù)以往項目開發(fā)經(jīng)驗：

欄目的高度是由它們所包含的內(nèi)容量決定。對于內(nèi)容比重大的網(wǎng)站來說，因為不能保證單個內(nèi)容欄跟其他欄等高，欄會固定高度，保證各欄高度相同；而對于內(nèi)容簡單短小頁面，不固定高度問題不大。另外，主體內(nèi)容的div應(yīng)該在側(cè)欄，頁頭或頁腳之前，這樣屏幕閱讀器可以從頁面最重要的內(nèi)容開始線性讀取頁面。搜索引擎機(jī)器人也可以對排在頁面前面的內(nèi)容予以更高的優(yōu)先級。

就兩欄布局而言，有三種可能的寬度：

（1）兩欄寬度固定。最普遍，固定寬度對于一部分用戶來所可能過大，過大的寬度用戶必須滾動水平內(nèi)容來查看內(nèi)容，降低文本的可讀性

（2）左欄固定，內(nèi)容欄是百分比寬度

（3）兩欄都是百分比

從更好的用戶體驗考慮，主體內(nèi)容應(yīng)該能調(diào)整大小，以便適應(yīng)不同窗口寬度。

3，內(nèi)容與樣式分離

當(dāng)然我們的頁面也需要漂亮的外觀，以幫助我們在競爭中脫穎而出。這可以通過在獨立的CSS樣式中放置有關(guān)表現(xiàn)的信息來實現(xiàn)。CSS用來描述網(wǎng)頁的外觀，而瀏覽器可以自由選擇不同的樣式表或是修改過的樣式表。實際上，你可以為不同的瀏覽器隨意發(fā)送不同的樣式表，也可以為它們獨特的能力量身定制。這是響應(yīng)式設(shè)計的基本實現(xiàn)方法。

“響應(yīng)式網(wǎng)頁不僅僅是響應(yīng)不同類型的設(shè)備，而且需要響應(yīng)不同的用戶需求。響應(yīng)式的初衷是為了讓信息更好的傳遞交流，讓所有人無障礙的獲取信息，同時這也是 Web 的初衷。”

出于方便或者是自身的編碼習(xí)慣，在修改某種被更改的需求的樣式代碼時候，我們很容易在html代碼中直接鑲嵌樣式代碼。這樣的做法除了更快的完成你暫時的任務(wù)之外沒有任何好處。

4，使用CSS定位替代框架

網(wǎng)站使用框架的理由實際上就兩種：

（1）為所有頁面引入相同的靜態(tài)內(nèi)容，而不用單獨編輯每個頁面。例如導(dǎo)航，網(wǎng)頁頭部尾部。也就是說，單獨的非框架頁面可能比相應(yīng)的框架頁面更耗帶寬，因為框架內(nèi)容每次都要給客戶端重新發(fā)送內(nèi)容。

（2）顯示多欄外觀。例如Java API，包含包和類的列表，主體內(nèi)容

然而，過多使用框架將降低可用性：

（1）難以標(biāo)記數(shù)千或返回指定頁面

（2）難以保存和打印頁面

（3）過多的滾動條占據(jù)屏幕的寶貴空間

在每一個頁面上都有導(dǎo)航和其他相同或幾乎相同的內(nèi)容，對網(wǎng)站來說是非常普遍的，使用CSS取代框架，關(guān)鍵在于設(shè)立對應(yīng)每個框架的div，每個div內(nèi)容是對應(yīng)框架里的文檔內(nèi)容。然而，這樣做的問題在于，它違反了DRY原則（Don't Repeat Youself,別重復(fù)你自己），對于相同的內(nèi)同，雖然有時候只是很小的變化，但還是需要不斷在這一頁那一頁重復(fù)出現(xiàn)。重復(fù)內(nèi)容通常也是代碼的壞味道?？蚣茉陟o態(tài)頁面上避免惡劣不必要的重復(fù)，我提倡清晰，可維護(hù)的代碼，在不損害用戶界面的前提下，我更遠(yuǎn)一選擇難看的代碼而不是難看的用戶界面。日常中原始的HTML是重復(fù)的，但不是我們必須編輯的，很多時候我們可以通過后臺自動生成重復(fù)內(nèi)容。

Apache服務(wù)器端包含：

通常，擁有服務(wù)器端包含的以.shtml結(jié)尾的文件會在發(fā)送到客戶端之前，告訴服務(wù)器需要解析自身以及包含的內(nèi)容

幾乎所有的Web服務(wù)器都支持某些形式的服務(wù)器端包含功能，使用服務(wù)器端包含各種非靜態(tài)文件，性能有所降低，但影響不大。

盡管Apache默認(rèn)的編譯會包含mod_include，但可能不會在所有目錄上啟用，你需要子啊Apache主配置文件或是.htacess文件中添加一下三行配置，以指向每一個使用服務(wù)器包含的目錄：

 
 
  
  AddType text/html .shtml 
  
  AddOutputFilter INCLUDES .shtml 
  
  Options +Includes

PHP包含：

PHP的include函數(shù)有類似的功能

 
 
  
  
  
  
  
      
  
  
  
      
  
     
  
  
       include("footer.html"); 
  
         include("sidebar.html");     
  
      ?>

#p#

5，正確標(biāo)記列表

正確標(biāo)記列表能夠提升可訪問性，通常我們子啊列表中實現(xiàn)跳轉(zhuǎn)和導(dǎo)航。

大部分瀏覽器給列表以及列表中的項目都制定特定的外觀，通常表現(xiàn)為縮進(jìn)和項目符號，可能不是你所需要的外觀，因此很容易在搭建html的時候忽略它們的存在，放棄使用正確列表標(biāo)記，而使用語義較差的標(biāo)簽，實現(xiàn)同樣的效果。根據(jù)需求，你能夠通過CSS可以容易地修復(fù)這些特定的外觀。下面整理了開發(fā)中常用的CSS樣式修改規(guī)則：

 
 
  
  /*刪除項目符號*/
  
  ul{ 
  
     list-style-type:none;        
  
  } 
  
  
  
  /*載入外部圖片自定義項目符號*/
  
  ul li { 
  
       list-style-image : url(images/str.gif); 
  
  } 
  
  
  
  /*去掉縮進(jìn)的規(guī)則*/
  
  ul{ 
  
     margin-left : 0px; 
  
      padding-left :0px; 
  
  } 
  
  
  
  /*把項目排成一行*/
  
  ul,li{ 
  
     display: inline; 
  
      margin:0px; 
  
    padding: 0px; 
  
  } 
  
  
  
  /*在列表項之間插入逗號*/
  
  ul li:after{ 
  
    content : ","; 
  
  } 
  
  
  
  /*制定項目的寬度，超出時顯示省略號*/
  
  div.titleholder { 
  
      font-size: 8pt; 
  
      width: 100px; 
  
     text-overflow: ellipsis; 
  
     overflow: hidden; 
  
     white-space: nowrap; 
  
  }