默認(rèn)情況下，<pre /> 標(biāo)簽中的內(nèi)容若超出范圍不會自動換行，這樣無論在顯示或打印都會出現(xiàn)麻煩。
下面提供符合 W3C 標(biāo)準(zhǔn)并支持多瀏覽器的 CSS 樣式代碼：
pre{
white-space:pre-wrap; /* css-3 */
white-space:-moz-pre-wrap; /* Mozilla, since 1999 */
white-space:-pre-wrap; /* Opera 4-6 */
white-space:-o-pre-wrap; /* Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
}
white-space:pre-wrap; /* css-3 */
white-space:-moz-pre-wrap; /* Mozilla, since 1999 */
white-space:-pre-wrap; /* Opera 4-6 */
white-space:-o-pre-wrap; /* Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
}
更多內(nèi)容請參見：http://www.w3.org/TR/css3-text/#white-space。
]]>
通常情況下，我們要打開一個外部鏈接（新開窗口），往往使用如下代碼：
<a href="" target="_blank"></a>
然而把它放在 W3C XHTML 1.0 Strict 標(biāo)準(zhǔn)下卻發(fā)現(xiàn)無法通過驗證。
原來，在嚴(yán)格的 W3C DTD 下，<a /> 標(biāo)簽的 target 屬性是不被官方所推薦的，使用 Strict 模式將視 target 屬性無效，我們只有利用 JavaScript 來變通實現(xiàn)。
真不知道 W3C 專家們是怎么想的，或許“易用性、友好性”成為他們主張的關(guān)鍵，因為老外覺得不經(jīng)過用戶同意，沒有明確提示就打開一個新窗口是不禮貌的。
我們姑且不管這樣的概念是否真正合理，先看看解決辦法：
rel 屬性：規(guī)定當(dāng)前文檔與目標(biāo) URL 之間的關(guān)系，即用來說明鏈接和包含此鏈接頁面的關(guān)系，以及鏈接打開的目標(biāo)。
我們將使用 rel="external" 作為 <a /> 標(biāo)簽的特性，那么可以得到如下代碼：
<a href="" rel="external"></a>
這是符合 W3C XHTML 1.0 Strict 標(biāo)準(zhǔn)的方法，當(dāng)然還需要以個 JavaScript 方法作配合：
function external(){
var anchors=document.getElementsByTagName("a");
for(var i=0;i<anchors.length;i++){
if(anchors[i].getAttribute("rel")=="external"){anchors[i].target="_blank";}
}
}
var anchors=document.getElementsByTagName("a");
for(var i=0;i<anchors.length;i++){
if(anchors[i].getAttribute("rel")=="external"){anchors[i].target="_blank";}
}
}
在頁面下載完成時自動加載：
window.onload=function(){
external();
};
external();
};
可以把以上兩段 JavaScript 代碼存儲在 external.js 文件里，然后通過外部鏈接方法調(diào)用：
<script type="text/javascript" src="external.js"></script>
]]>
對含有表單的網(wǎng)頁進(jìn)行 XHTML 1.0 校驗時，發(fā)現(xiàn)無論如何也無法通過驗證，網(wǎng)上檢索了一下相關(guān)資料，發(fā)現(xiàn)有如下規(guī)則：
XHTML 1.0 Strict 中表單元素要放在<div></div>、<p></p>… 里面。
看下面的代碼：
<form method="post" action="">
<p>
<label>帳號 <input name="account" type="text" /></label>
<label>密碼 <input name="password" type="password" /></label>
<input type="submit" value="登錄" />
</p>
</form>
<p>
<label>帳號 <input name="account" type="text" /></label>
<label>密碼 <input name="password" type="password" /></label>
<input type="submit" value="登錄" />
</p>
</form>
另外，如果 form 中包含 fieldset 元素，它可不必包含在 div、p 等元素中，但未包含在 fieldset 元素中的表單元素，必須包含在 div、p 中。
<form method="post" action="">
<fieldset>
<legend>帳戶</legend>
<label>帳號 <input name="account" type="text" /></label>
<label>密碼 <input name="password" type="password" /></label>
</fieldset>
<p><input type="submit" value="登錄" /></p>
</form>
<fieldset>
<legend>帳戶</legend>
<label>帳號 <input name="account" type="text" /></label>
<label>密碼 <input name="password" type="password" /></label>
</fieldset>
<p><input type="submit" value="登錄" /></p>
</form>
]]>
隨著 W3C 標(biāo)準(zhǔn)的流行，表格標(biāo)簽對于我們來說已經(jīng)不太常用，但 W3C 標(biāo)準(zhǔn)并沒有拋棄它，這必然有它存在的合理性。
依我看來，表格最大的用途就在于數(shù)據(jù)內(nèi)容的表現(xiàn)，確實省去了不少麻煩。
下面是表格標(biāo)記的 XHTML 代碼：
<table width="236">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
常用的修飾上述表格為細(xì)線表格的 CSS2 樣式代碼如下：
table{border:1px solid #000;border-width:1px 0 0 1px;margin:2px 0 2px 0;text-align:center;border-collapse:collapse}
td,th{border:1px solid #000;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left}
th{text-align:center;font-weight:600;font-size:12px;background-color:#F4F4F4}
td,th{border:1px solid #000;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left}
th{text-align:center;font-weight:600;font-size:12px;background-color:#F4F4F4}
后來發(fā)現(xiàn)有更簡單的：
table,td,th{border:1px #000 solid;border-collapse:collapse}
注意：以上代碼均通過了 W3C 驗證（strict），符合標(biāo)準(zhǔn)。
]]>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
body{margin:0;padding:0}
div{margin:-200px auto auto -275px;position:absolute;top:50%;left:50%;width:550px;height:400px;background:#ff6600;text-align:center;line-height:400px}
</style>
</head><body>
<div>盒模型 div 布局的垂直居中（W3C 推薦方法）</div>
</body></html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
body{margin:0;padding:0}
div{margin:-200px auto auto -275px;position:absolute;top:50%;left:50%;width:550px;height:400px;background:#ff6600;text-align:center;line-height:400px}
</style>
</head><body>
<div>盒模型 div 布局的垂直居中（W3C 推薦方法）</div>
</body></html>
]]>