回到以往的好日子,那時的HTML標準還是一個移動中的目標,無論您正確地結束了<p>標籤或讓您的格式規則與樣式代碼相分離都不會造成麻煩。不匹配的標籤、丟失的屬性、糟糕的嵌套元素——缺乏廣泛採用的標準造成了這些和其他的錯誤,但因為大部分瀏覽器都內建了智能功能來避免這些錯誤,所以大部分開發者也根本不會覺察它們的存在。
儘管瀏覽器本身在盡量修正這些錯誤,但是,這並不是您可以忽略這些問題的理由。為了讓您的網頁在所有的瀏覽器中表現一致,您的HTML必需與W3C 標準中界定的規則和語法完全一致,有很多工具可以實現這一需求,有在線的也有離線的,這篇文章將討論它們中的一個:非常酷的HTML Tidy。
HTML Tidy是一個免費的HTML檢查工具,它是設計用來檢查您的HTML程式碼,並且可以指出其中沒有完全符合W3C發布標準的地方,它可以用來分析一個HTML檔案或一個包含HTML語句的字串,也可以自動進行必需的修改以使程式碼符合相關標準的要求。
安裝
HTML Tidy是免費的,它可以運行在Windows,Macintosh和*NIX平台上,有二進位版本可供直接使用,如果您運行的是*NIX平台,那麼您可能更希望親自從原始程式碼進行編譯和安裝,可以這樣操作:將原始檔案抽取到您的臨時資料夾並執行基本的編譯-安裝過程,如下所示:
shell> cd /tmp/tidy/build/gmake
shell> make
shell> make install
當這個過程結束的時候,您應該可以在/tmp/tidy/bin/tidy資料夾中找到一個編譯好了的Tidy的二進製版本,將這個檔案拷貝到您的系統資料夾/usr/local/bin /中,這樣就更易於訪問了。現在您已經準備好使用這個工具了。
基本用法
一旦安裝了二進位版本,您馬上就可以開始使用它來檢驗HTML程式碼,清單A展示了一個簡單的範例:
列表A:
shell> tidy -e -q index.html
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 2 column 1 - Warning: inserting missing 'title' element
line 4 column 1 - Warning: <body> proprietary attribute leftmargin
line 6 column 1 - Warning: <table> proprietary attribute height
line 6 column 1 - Warning: <table> lacks summary attribute
line 11 column 37 - Warning: <img> lacks alt attribute
line 15 column 1 - Warning: <table> lacks summary attribute
line 17 column 50 - Warning: <img> lacks alt attribute
在這個例子中,Tidy發現了文件中八個潛在的錯誤,並為每個錯誤列印了一個警告,注意,這些錯誤並不是嚴重錯誤,只是警告程式碼中的某些部分並不是非常正確。
您可以透過在命令列中新增-m(修飾符)這個選項來實現自動修正原始檔案:
shell> tidy -m -q index.html
如果您需要測試一個很大的網站,可以使用命令列中的通配符來測試一個資料夾中的所有檔案(而不是僅僅一個):
shell> tidy -m -q *.html
如果您希望那個Tidy幫助寫出修正過的網頁到一個新的文件(而不是覆蓋原有的),那就在使用-output選項和新的文件名,如下例所示:
shell> tidy -output index.html.new -q index.html
您可以透過-e(“錯誤”)選項將所有的錯誤輸出到一個單獨的日誌檔案以供以後查看:
shell> tidy -f error.log index.html
另外要注意,如果您的HTML程式碼中含有內嵌的PHP,ASP或JSP程式碼,Tidy會簡單地忽略它們並將它們留在適當的位置,這意味著您甚至可以在伺服器端腳本上執行Tidy工具,來檢驗其中的HTML程式碼部分,這是一個例子:
shell> tidy -e -q processor.php
您也可以以互動方式運行Tidy工具,只呼叫程式文件,而不附加任何參數,在這個例子中,Tidy等待控制台的輸入並檢查其錯誤,列表B展示了這樣一個例子:
列表B
shell> tidy
<html>
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
<head>
<title>This is a test
</head>
line 3 column 1 - Warning: missing </title> before </head>
<body leftmargin=0>
<p>
This is a badly terminated paragraph
</body>
</html>
line 5 column 1 - Warning: <body> proprietary attribute leftmargin
Info: Document content looks like HTML Proprietary
3 warnings, 0 errors were found!
注意,除了給您即時的錯誤警告之外,Tidy還可以在輸入結束的時候列印正確版本的程式碼:
<html>
<head>
<meta name=generator content=
HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org>
<title>This is a test</title>
</head>
<body leftmargin=0>
<p>This is a badly terminated paragraph</p>
</body>
</html>
進階應用
您還可以控制Tidy對一個檔案修改的方式,這可以透過在命令列傳遞特定的參數來實現,例如,讓Tidy來重新對程式碼進行正確的縮進,可以添加-i(「縮排」)選項:
shell> tidy -output new.html -i index.html
替換<font>和其他與CSS樣式規則相關的格式元素,可以使用-c(「清除」)選項:
shell> tidy -output new.html -c index.html
在預設情況下,Tidy對HTML檔案中所有的標籤和屬性都使用小寫字母,如果您希望使用大寫字母,可以新增-u(「大寫字母」)選項,如下例所示:
shell> tidy -output new.html -c -u index.html
使文字在特定的行寬進行換行,可以新增-w(「換行」)選項與指定的行寬,如下例所示:
shell> tidy -output new.html -w 40 index.html
您可以透過新增-asxhtml選項將一個HTML文件轉換為格式良好的(well-formed)XHTML文件:
shell> tidy -output new.html -asxhtml index.html
透過-ashtml選項可以進行反向操作:
shell> tidy -output new.html -ashtml index.html
如果您需要對Tidy的預設選項進行大量調整,那麼最好將這些選項放在一個單獨的設定檔中,您可以在每次呼叫程式的時候進行參考,清單C展示了一個設定檔的範例:
列表C:
bare: yes # remove proprietary HTML
doctype: auto # set the doctype
drop-empty-paras: yes # automatically delete empty <p> tags
fix-backslash: yes # replace by / in URLs
literal-attributes: yes # retain whitespace in attribute values
lower-literals: yes # convert attribute values to lower case
output-xhtml: yes # produce valid XHTML output
quote-ampersand: yes # replace & with &
quote-marks: yes # replace with
repeated-attributes: keep-last # use the last of duplicated attributes
indent: yes # automatically indent code
indent-spaces: 2 # number of spaces to indent by
wrap-php: no # wrap text contained in PHP tags
char-encoding: ascii # character encoding to use
tidy-mark: no # omit Tidy meta information in corrected code
當整理一個檔案的時候,可以透過在命令列中加入-config選項來告訴Tidy使用這些設定:
shell> tidy -output a.html -configconfig.tidy index.html
您可以透過-help-config選項來取得一個配置選項的清單:
shell> tidy -help-config...quote-ampersand Boolean y/n,
yes/no, t/f, true/false, 1/0quote-marks Boolean y/n,
yes/no, t/f, true/false, 1/0quote-nbsp Boolean y/n,
yes/no, t/f, true/false, 1/0repeated-attributesenum keep-first,
keep-lastreplace-color Boolean y/n, yes/no,
t/f, true/false, 1/0show-body-only Boolean y/n,
yes/no, t/f, true/false, 1/0...
或使用-show-config選項來查看目前設定設定的快照(snapshot):
shell> tidy -show-config...show-body-only
Boolean noshow-errors Integer
6show-warnings Boolean yesslide-style
Stringsplit Boolean no...
最後,您可以使用-h選項來獲得命令列的幫助:
shell> tidy -h
目前,這就是所有的功能了,希望您會發現Tidy在輔助您的網站達到完全符合W3C發布標準方面是一個非常有價值的工具,這篇指南所介紹的要點可以讓您了解如何控制HTML Tidy工具來操作您的程式碼,同時也會幫助您更有效率地使用這個工具。