重構HTML改善Web應用設計

時間 2019-11-08

標籤 html 改善 web 應用設計欄目 HTML 简体版

原文原文鏈接

　　本文從良構，有效性，佈局三個角度，結合往日項目開發經歷，整理總結重構HTML改善Web應用設計的幾點規則和作法。部分參考自《重構HTML改善Web應用設計》。javascript

重構。什麼是重構？爲何要重構。php

　　重構是在不改變程序行爲的基礎上進行小的改動，是代碼逐漸改善的過程。移除長期累積下來的爛碼，以獲得更清晰和更容易維護，除錯以及添加新功能的代碼，這作法不能單純只出如今編碼的後期，甚至是你意識到你的代碼已經無從再下手非重寫不可的時候，而是從開始開發起，逐漸積累，逐漸修改。之前由於平常編碼的隨意性，致使問題日益積累，逐步擴散，最後只能推倒重來。若是時間經受不起推倒重來，你別無選擇，惟一實現的選擇就是重構。css

　　不管作什麼，都不要由於追求完美而忽略曉得改進，若是眼下時間足夠作一點重構，那就作一點兒。往後有時間還能夠作更多。總體的重構設計雖然惹人注目使人難忘，但沒有平日的積累，何以收穫龐大的成就？你的目標應該是讓代碼天天都有新變化。堅持幾個月，我相信咱們都能擁有驕傲地，清晰代碼。html

良構java

　　把標記轉換爲符合現代標準的首要任務是實現良構。良構保證了DOM可操做的文檔樹結構的惟一性，於是成爲可靠的跨瀏覽器的javascript代碼的基礎。對於一個亂構的頁面來講，任何可靠的自動化處理或測試都是很是難以保證的，其次，瀏覽器頁面的展現效果更是不可預估。對於亂構的頁面，不一樣的瀏覽器使用不一樣的方式補充確實的片斷，並糾正其中的錯誤。所以，對於重構HTML，最要緊的無疑是實現頁面良構化。web

　　要達到良構，大部分的網站要至少或所有作到如下幾點：編程

全部的其實標籤都應有一個匹配的結束標籤
空元素應該使用空元素的標籤語法
全部的屬性都必須有一個值
全部的屬性都須要用引號括起來
全部的&好必須轉義爲&amp；
全部的小於號都要轉義爲&lt；
只有惟一的根元素
全部未預約義的實體應用必須在DTD中聲明

　　針對往日由於我的編程習慣和隨意性容易犯的錯誤，從良構角度思考，整理一下往後構建HTML時，有幾點須要特別注意。瀏覽器

　　更好實現良構的幾個要點：緩存

將名稱改爲小寫。 改寫爲 等，由於XHTML只使用小寫名稱，全部元素和屬性都要小寫，<TABLE>和<Table>都不被接收
給屬性值加引號。改寫成等。一些空格的屬性有時候出現有作括號而沒有右括號，瀏覽器不宜定按照你的意願解析，不一樣的瀏覽器有不一樣的解析效果，這就有可能形成跨瀏覽器問題。
補足遺漏的屬性。<input type = "radio" checked>改爲<input type = "radio" checked = 'checked'>等。XHTML不支持只有屬性名稱而沒有值的語法。
將空標籤替換爲空元素標籤。XML解析器要求全部的起始標籤都有匹配的結束標籤要有對應的， 改寫爲等
消除重疊。xxxx改寫成xxxx等。不一樣的瀏覽器對包含重疊元素的文檔所構建的DOM樹不同。在重疊元素面前，javascript，css以及其餘須要讀取DOM的程序都變得難以建立，排錯和維護。

有效性服務器

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

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

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

　　具體實現方法：

　　1，加入過渡型DOCTYPE聲明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

　　過渡式DTD讓你沒必要要徹底語義標記就能讓文檔經過驗證，而且他容許包含i,b和center等這些不推薦使用的表現性元書，所以，在進一步改善文檔的語義以前，你能夠找出比修復更嚴重的結構問題。

　　2，刪除全部不存在的標籤

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

　　4，把行內（inline）元素，放在塊（block）元素中

　　要作到有效，文檔中全部元素是有效的嚴格性XHTML元素還不夠，還必須保證它們之間的正確關係，瀏覽器和其餘程序處理XHTML須要依賴元素間的正確位置。

Do you like this pictrue?<br />
<img src = "file.gif" />
I think it's really <em>neat</em>


<!--改寫爲-->
<p>Do you like this pictrue?<br /></p>
<div><img src = "file.gif" /></div>
<p>I think it's really <em>neat</em></p>

佈局

　　1，熟悉元素語義

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

失敗經歷：

　　爲了實現導航效果，一開始沒有考慮內容語義，無心中將導航主項和相關聯的菜單分開，在利用css中的相對定位，設定top和left屬性，將相關菜單移動到相關的主項下。這樣會致使一個嚴重的問題。一旦將不一樣頁面放置在不一樣的分辨率的屏幕上，菜單就會錯位。就是說，針對不一樣分辨率的屏幕，還要設計不一樣的top和left屬性。

<div class = "nav">
     <div class="nav01">菜單一</div><div class="nav02">菜單二</div><div class="nav03">菜單三</div>
</div>
<div class = "menu">
    <div class="menu01">子菜單一</div><div class="menu02">子菜單二</div><div class="menu03">子菜單三</div>
</div>

　　優化設計過的導航HTML結構，組合主菜單和子菜單：

<nav>
    <ul class="clear">
        <li class="first"><a href="#">菜單一</a></li>
        <li>
            <span class="Darrow"></span> <a href="#">菜單二</a>
            <dl>
                <dt><span class="arrow"></span></dt>
                <dd><a href="#">子菜單一</a></dd><dd><a href="#">子菜單二</a></dd><dd><a href="#">子菜單三子菜單三</a></dd>
            </dl>
        </li>
        <li>
            <span class="Darrow"></span> <a href="#">菜單三</a>
            <dl>
                <dt><span class="arrow"></span></dt>
                <dd><a href="#">子菜單一</a></dd><dd><a href="#">子菜單二</a></dd><dd><a href="#">子菜單三子菜單三</a></dd>
            </dl>
        </li>
    </ul>
</nav>

　　編寫HTML的目的不是爲某種結構或者頁面外觀，而是爲了如何更好地呈現內容，所以在編寫HTML以前，務必思考這種內容應該使用哪一種語義的元素。

　　恰當的HTML很是適合處理跨瀏覽器問題。拿到web設計圖後，在着手構建web應用以前，你必需要中止考慮頁面的外觀，而應該開始思考頁面表達的是什麼含義。

　　2，替換表格佈局

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

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

　　　　b)經過轉向CSS，能夠節省帶寬。同時外聯的css文件能夠緩存和重用，沒必要隨每次頁面的下載又重下一次。

　　　　取代濫用本用於呈現表格數據的table元素而使用表格佈局，能夠考慮頻繁使用的分欄式佈局：

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

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

根據以往項目開發經驗：

　　欄目的高度是由它們所包含的內容量決定。對於內容比重大的網站來講，由於不能保證單個內容欄跟其餘欄等高，欄會固定高度，保證各欄高度相同；而對於內容簡單短小頁面，不固定高度問題不大。另外，主體內容的div應該在側欄，頁頭或頁腳以前，這樣屏幕閱讀器能夠從頁面最重要的內容開始線性讀取頁面。搜索引擎機器人也能夠對排在頁面前面的內容予以更高的優先級。

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

　　　　（1）兩欄寬度固定。最廣泛，固定寬度對於一部分用戶來所可能過大，過大的寬度用戶必須滾動水平內容來查看內容，下降文本的可讀性

　　　　（2）左欄固定，內容欄是百分比寬度

　　　　（3）兩欄都是百分比

　　從更好的用戶體驗考慮，主體內容應該能調整大小，以便適應不一樣窗口寬度。

　　3，內容與樣式分離

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

　　「響應式網頁不只僅是響應不一樣類型的設備，並且須要響應不一樣的用戶需求。響應式的初衷是爲了讓信息更好的傳遞交流，讓全部人無障礙的獲取信息，同時這也是 Web 的初衷。」

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

　　4，使用CSS定位替代框架

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

　　（1）爲全部頁面引入相同的靜態內容，而不用單獨編輯每一個頁面。例如導航，網頁頭部尾部。也就是說，單獨的非框架頁面可能比相應的框架頁面更耗帶寬，由於框架內容每次都要給客戶端從新發送內容。

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

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

　　　（1）難以標記數千或返回指定頁面

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

　　（3）過多的滾動條佔據屏幕的寶貴空間

　　在每個頁面上都有導航和其餘相同或幾乎相同的內容，對網站來講是很是廣泛的，使用CSS取代框架，關鍵在於設立對應每一個框架的div，每一個div內容是對應框架裏的文檔內容。然而，這樣作的問題在於，它違反了DRY原則（Don't Repeat Youself,別重複你本身），對於相同的內同，雖然有時候只是很小的變化，但仍是須要不斷在這一頁那一頁重複出現。重複內容一般也是代碼的壞味道。框架在靜態頁面上避免惡劣沒必要要的重複，我提倡清晰，可維護的代碼，在不損害用戶界面的前提下，我更願意選擇難看的代碼而不是難看的用戶界面。平常中原始的HTML是重複的，但不是咱們必須編輯的，不少時候咱們能夠經過後臺自動生成重複內容。

Apache服務器端包含：

　　一般，擁有服務器端包含的以.shtml結尾的文件會在發送到客戶端以前，告訴服務器須要解析自身以及包含的內容

　　　幾乎全部的Web服務器都支持某些形式的服務器端包含功能，使用服務器端包含各類非靜態文件，性能有所下降，但影響不大。

<!DOCTYPE html>
<html>
    <meta charset = "utf-8">
<body>
    
    <!--#include virtual = "/header.html" -->
    <!---這裏嵌套主內容-->

    <!--#include virtual = "/footer.html"-->
    <!--#include virtual = "/siderbar.html"-->
</body>
</html>

儘管Apache默認的編譯會包含mod_include，但可能不會在全部目錄上啓用，你須要子啊Apache主配置文件或是.htacess文件中添加一下三行配置，以指向每個使用服務器包含的目錄：

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

PHP包含：

PHP的include函數有相似的功能

<!DOCTYPE html>
<html>
    <meta charset = "utf-8">
<body>
    <!--主內容-->
   <?php include("footer.html"); include("sidebar.html"); ?>
</body>
</html>

　　5，正確標記列表

　　正確標記列表可以提高可訪問性，一般咱們在列表中實現跳轉和導航。

　　大部分瀏覽器給列表以及列表中的項目都制定特定的外觀，一般表現爲縮進和項目符號，可能不是你所須要的外觀，所以很容易在搭建html的時候忽略它們的存在，放棄使用正確列表標記，而使用語義較差的標籤，實現一樣的效果。根據需求，你可以經過CSS能夠容易地修復這些特定的外觀。下面整理了開發中經常使用的CSS樣式修改規則：

/*刪除項目符號*/ ul{ list-style-type:none;       
}

/*載入外部圖片自定義項目符號*/ ul li { list-style-image : url(images/str.gif);
}

/*去掉縮進的規則*/ 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;
}