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