|
|
上文書我們說到《HTML重構：戰略篇》，書接前言下面是戰術篇，我們通過路線圖來先有一個大體印象：
1、HTML規范化(Well-Formedness)：語法正確
2、HTML Validity ：語義正確
3、不僅僅是語義正確：HTML元素的用法回歸正途
4、正確還不夠：關注你的內容
5、哪有個完啊：關注網站可用性(Accessibility)
HTML規范化(Well-Formedness)：語法正確
規范化(Well-Formedness)是XML中的概念，它指文檔嚴格遵守約束。規范化的HTML文檔結構是一個獨一無二的樹。HTML規范化是發揮XML工具強大功能的先決條件，可靠地DOM操作也為跨瀏覽器腳本的提供了一個很好的基礎。不規范的頁面在瀏覽器中可能表現千差萬別，因為瀏覽器對錯誤的理解和處理是不一樣的，而規范化的HTML讓瀏覽器行為可預測。好處當然還有很多，比如SEO，快速加載… ...
下面會有一些規范化的實踐指南，作者給出了做這些重構的動機和利弊，大家可以根據自己的情況來選擇。下面簡單列一下：
文檔轉為小寫Change Name to Lowercase
屬性賦值添加引號Quote Attribute Value
省略值不全Fill In Omitted Attribute Value
例如：<input type="radio" value="debit" checked></input>
空標簽添加空屬性Replace Empty Tag with Empty-Element Tag
例如：<hr>變成<hr class='empty' />
添加結束標簽Add End-tag
刪除重疊Remove Overlap
例如：<strong><em>very important</strong></em>!
文檔編碼轉成UTF-8Convert Text to UTF-8<轉義為 < ;Escape Less-Than Sign& to &Escape AmpersandEscape Quotation Marks in Attribute Values
屬性值內字符轉義：" to " ' to '
添加DOCTYPE聲明Introduce an XHTML DOCTYPE Declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
實體添加結束符Terminate Each Entity Reference&之類的實體要不全; 即：&
使用標準實體名Replace Imaginary Entity References添加根元素Introduce a Root Element添加XHTML的名稱空間Introduce the XHTML Namespace
HTML Validity ：語義正確
背景介紹：HTML驗證是通過與標準HTML規則進行比較的方式，分析HTML文檔、標記出錯誤和非標準代碼的處理過程。Web頁面使用HTML進行渲染，而HTML本身采用了HTML規范作為其規則和標準。通過驗證HTML代碼穿越多重瀏覽器標準！
通過驗證的文檔，能夠幫助瀏覽器反映創作者的意圖。通過驗證的站點會獲得下列優勢：頁面行為可預測，瀏覽器兼容問題，未來的瀏覽器上也可以運行，更容易維護，等等…
W3C在線驗證地址：http://jigsaw.w3.org/css-validator/
通過驗證并不是強制要求的，一個規范化但是沒有通過驗證的文檔照樣可以使用XML工具。如果你有特殊的應用比如MathXML，也可以忽略掉通過HTML驗證。下面簡單列出一些要通過驗證要做的工作：
清除非法標簽Remove All Nonexistent Tags
添加圖像說明Add an alt Attribute
嵌入標簽換成對象標簽Replace embed with object
添加嚴格的文檔類型聲明Introduce a Strict DOCTYPE Declaration
Replace center with CSS
Replace font with CSS
Replace i with em or CSS
Replace b with strong or CSS
Replace the color Attribute with CSS
Convert img Attributes to CSS
Replace applet with object
Replace Presentational Elements with CSS
Nest Inline Elements inside Block Elements
不僅僅是語義正確：HTML元素的用法回歸正途
一個Web開發者可能會有這樣的懺悔：我錯了，我一直都在用表格做布局，我的頁面和樣式雜糅在一起… …我們可能把原因歸結為歷史，以前的開發就沒有這種理念，歷史是這樣的么？傳統的HTML是基于SGML標準，這個標準誕生于Web之前，我們回顧一下：
SGML是1986年出版發布的一個信息管理方面的國際標準(ISO 8879)。該標準定義獨立于平臺和應用的文本文檔的格式、索引和鏈接信息，為用戶提供一種類似于語法的機制，用來定義文檔的結構和指示文檔結構的標簽。其中Markup的含義是指插入到文檔中的標記。標記分為兩種：一種稱為procedard markup，用來描述文檔顯示的樣式；另一種稱為descriptive markup，用來描述文檔中的文字的用途。制定SGML的基本思想是把文檔的內容與樣式分開。
回顧歷史我們應該像佟掌柜一樣感慨了：“我錯了，我真的錯了”
如何將文檔的內容和樣式分開？作者同樣給出了一些建議：
Replace Table Layouts
Replace Frames with CSS Positions
Move Content to the Front
Mark Up Lists as Lists
Replace blockquote/ul Indentation with CSS
Replace Spacer GIFs
Add an ID Attribute
Add Width and Height to an Image
正確還不夠：關注你的內容
一個網站無論如何專業，而用戶關注的是網站提供的內容，內容重于形式。糾正拼寫錯誤Correct Spelling修復死鏈Repair Broken Links 糾正拼寫錯誤，中文網站中也是存在這個問題的，
比如錯別字
穩定你的鏈接Move a Page
去掉歡迎頁面Remove the Entry Page
隱藏Email地址防止Email爬蟲Hide E-mail Addresses
<a href="elharo@metalab.unc.edu">E-mail Elliotte Harold<a/>
elharo@macfaq.com 轉換成：<a href="mailto: elharo%40metalab%2Eunc%2Eedu">E-mail Elliotte Harold</a> elharo@macfaq.Com
哪有個完啊：關注網站可用性(Accessibility)
電影《追捕》最后真由美問杜秋：“完了吧”，杜秋黯然：“哪有個完啊”
HTML重構也要精益求精，規范的文檔豐富的內容還不夠，下面的話題就是網站可用性。網站可用性可以爭論的東西很多，網站可用性方面的專著很多，這里只是冰山上的一點冰屑而已：
圖片上包含文字信息就使用文本Convert Images to Text
添加字段說明Add Labels to Form Input
字段命名標準化而不是Input1 Introduce Standard Field Names
打開文本框的自動完成Turn on Autocomplete
添加Tab順序 Add Tab Indexes to Forms
添加同一頁面的跳轉鏈接Introduce Skip Navigation
使用H標簽做頭信息Add Internal Headings
獨一無二的內容盡量提前Move Unique Content to the Front of Links and Headlines
輸入框大一點Make the Input Field Bigger
添加表格說明Introduce Table Descriptions
添加縮略詞說明Introduce Acronym Elements
添加語言屬性Introduce lang Attributes
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
NET技術：HTML重構：戰術篇，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
