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