重構HTML改善Web應用設計

                      2020/11/26 17:28:56   閱讀:1630    發布者:1630

                       重構。什么是重構?為什么要重構。

                      重構是在不改變程序行為的基礎上進行小的改動,是代碼逐漸改善的過程。移除長期累積下來的爛碼,以得到更清晰和更容易維護,除錯以及添加新功能的代碼,這做法不能單純只出現在編碼的后期,甚至是你意識到你的代碼已經無從再下手非重寫不可的時候,而是從開始開發起,逐漸積累,逐漸修改。以前因為日常編碼的隨意性,導致問題日益積累,逐步擴散,最后只能推倒重來。如果時間經受不起推倒重來,你別無選擇,唯一實現的選擇就是重構。
                      要達到良構,大部分的網站要至少或全部做到以下幾點:

                      所有的其實標簽都應有一個匹配的結束標簽
                      空元素應該使用空元素的標簽語法
                      所有的屬性都必須有一個值
                      所有的屬性都需要用引號括起來
                      所有的&好必須轉義為&
                      所有的小于號都要轉義為<
                      只有唯一的根元素
                      所有未預定義的實體應用必須在DTD中聲明
                      針對往日因為個人編程習慣和隨意性容易犯的錯誤,從良構角度思考,整理一下日后構建HTML時,有幾點需要特別注意。

                      更好實現良構的幾個要點:


                      將名稱改成小寫。<P></P> 改寫為 <p></p>等,因為XHTML只使用小寫名稱,所有元素和屬性都要小寫,<TABLE>和<Table>都不被接收
                      給屬性值加引號。<span class = speack></span>改寫成<span class =“ speack”></span>等。一些空格的屬性有時候出現有做括號而沒有右括號,瀏覽器不宜定按照你的意愿解析,不同的瀏覽器有不同的解析效果,這就有可能造成跨瀏覽器問題。
                      補足遺漏的屬性。<input type = "radio" checked>改成<input type = "radio" checked = 'checked'>等。XHTML不支持只有屬性名稱而沒有值的語法。
                      將空標簽替換為空元素標簽。XML解析器要求所有的起始標簽都有匹配的結束標簽<p>要有對應的</p>,<br>改寫為</br>等
                      消除重疊。<strong><em>xxxx</strong></em>改寫成<strong><em>xxxx</em></strong>等。不同的瀏覽器對包含重疊元素的文檔所構建的DOM樹不一樣。在重疊元素面前,javascript,css以及其他需要讀取DOM的程序都變得難以創建,排錯和維護。
                       有效性

                      有效性比良構稍微嚴格,即不僅要確保文檔的語法正確,還要保證語義正確。保證元素和屬性只能按自身語義出現在恰當的地方。

                      有效性是面向未來開發的基石。有效的網站與設備無關,有效的頁面為不同的讀者傳達相同的信息,就算讀者使用的是界面不相同的瀏覽器。

                      良構和有效性檢查是基本的語法約束保證,接下來要保證語義是恰當的。

                      具體實現方法:

                      1,加入過渡型DOCTYPE聲明

                      過渡式DTD讓你不必要完全語義標記就能讓文檔通過驗證,并且他允許包含i,b和center等這些不推薦使用的表現性元書,因此,在進一步改善文檔的語義之前,你可以找出比修復更嚴重的結構問題。

                      2,刪除所有不存在的標簽

                      3,用CSS替代center,i,font等不被推薦或棄用的標簽。

                      4,把行內(inline)元素,放在塊(block)元素中

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

                      布局

                      1,熟悉元素語義

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

                      2,替換表格布局

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

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

                      b)通過轉向CSS,可以節省帶寬。同時外聯的css文件可以緩存和重用,不必隨每次頁面的下載又重下一次。

                       

                      取代濫用本用于呈現表格數據的table元素而使用表格布局,可以考慮頻繁使用的分欄式布局:

                      1)兩欄,左側固定寬度的側欄,右邊是彈性寬度的內容欄

                      2)三欄,左右各固定寬度的側欄,中間是內容。



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

                      “響應式網頁不僅僅是響應不同類型的設備,而且需要響應不同的用戶需求。響應式的初衷是為了讓信息更好的傳遞交流,讓所有人無障礙的獲取信息,同時這也是 Web 的初衷?!?/span>

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

                       

                      4,使用CSS定位替代框架

                       

                      網站使用框架的理由實際上就兩種:

                         (1)為所有頁面引入相同的靜態內容,而不用單獨編輯每個頁面。例如導航,網頁頭部尾部。也就是說,單獨的非框架頁面可能比相應的框架頁面更耗帶寬,因為框架內容每次都要給客戶端重新發送內容。

                      (2)顯示多欄外觀。例如Java API,包含包和類的列表,主體內容

                      然而,過多使用框架將降低可用性:

                      (1)難以標記數千或返回指定頁面

                      (2)難以保存和打印頁面

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

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


                      5,正確標記列表

                      正確標記列表能夠提升可訪問性,通常我們在列表中實現跳轉和導航。


                      6,為圖片添加width和height屬性

                      width和height屬性能讓瀏覽器更快地樣式化頁面并展現給用戶。但注意,這樣做,對頁面的顯示速度有提升,但對下載速度并沒有幫助。

                      出于一般項目開發觸覺,改變圖片的尺寸意味著要修改HTML,否則圖片會奇怪地變大變小。如果需要經常改變圖片,比如設計頁面是,最好是在最后的階段插入確定的寬度和高度。
                      AV未满十八禁免费网站