XHTML——這個被認為是HTML 4的繼任者，是HTML和XML的結合體。通過結合 XML和HTML的功能，XHTML使得Web內容更易于被電話、手持設備以及電視等訪問。W3C將XHTML 1.0分為三種規范：Strict（嚴格）、Transitional（過渡）和Frameset（框架）。
XHTML 1.0 Strict（嚴格）
XHTML 1.0 Strict是需求最苛刻的XHTML規范，但是它提供了最干凈的結構化標記。Strict編碼獨立于任何定義外觀的標記語言。它使用層疊樣式表（CSS）來控制表示外觀。這種與表示相獨立的結構使得XHTML Strict能夠相當靈活地在不同的設備上顯示。而其控制和表示對于CSS的依賴對于程序員來說又是一個麻煩，因為如果想要在那些不能識別樣式表的設備或瀏覽器中顯示Web內容，它并不是一個好的選擇。
XHTML 1.0（過渡）
XHTML 1.0 Transitional是更加寬容的規范。Strict完全將結構與表示分離，而Transitional允許使用標簽來控制外觀。它的目的是要在允許用標記來控制表示的HTML頁面和二者完全分離的XHTML Strict之間架起橋梁。它最大的好處是克服了Strict對于CSS的依賴。Transitional頁面對于使用舊式瀏覽器或不能識別樣式表的用戶來說也是可以訪問的。
如何選擇？
在Strict和Transitional之間進行選擇的時候，要參考幾個因素：
用戶。如果你的大多數用戶都使用不能是別樣式表的舊式瀏覽器，那就不能使用Strict——盡管我會舉出支持標準比向后兼容更重要的例子。如果你的大多數用戶使用的是最新版本的Internet Explorer、Netscape、Opera或者Safari，Strict就是最佳的長期選擇。
當前代碼。如果已經使用了CSS而且HTML中并不包含很多控制外觀的標記，那么也可以上一個層次使用Strict。
開始
XHTML 1.0是基于HTML的，因此它能夠被現存的瀏覽器所解釋。那意味著可以立即開始使用XHTML。另外不管是轉換一個已經存在的站點還是建立新的代碼，都可以使用工具來獲得幫助。
順便分享個不錯的代碼
這個代碼有待改進。
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>網</title>
<style type="text/css">
<!--
html,body {}{
height:100%;
}
body {}{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/ltbg02.jpg);
background-repeat: repeat-x;
}
#header{}{
height: 120px;
}
/**//*編輯區域，相對位置，要設置Z順序,否則可以被“大樓覆蓋”*/
#editBody
{}{
position: relative;
z-index:9;
}
#middleLeft
{}{
width: 365px;
}
/**//*草地背景*/
#footerBg
{}{
background-image: url(images/BlgDownBg.jpg);
background-repeat: repeat-x;
background-position: bottom;
height: 150px;
}
/**//*
草地背景，中第一個Div用，
設置為相對位置，它里面的絕對定位樣式就是以它的0，0點開始的了
高度一定要給，要不在 FireFox 顯示不正常
*/
#footer{}{
position: relative;
height: 149px;
}
/**//*大樓，樣式*/
#lefImg
{}{
position: absolute;
left: -2px;
bottom: 30px;
}
/**//*小樓樓，樣式*/
#rimg
{}{
position: absolute;
right: 20px;
bottom: 150px;
}
#copyright{}{
position: absolute;
right: 30px;
bottom: 50px;
color: #FFFFFF;
}
.Test0 {}{
border: 1px solid #FFFF00;
}
-->
</style>
<!-- 如果小于等于ie6 -->
<!--[if lte IE 6]>
<style type="text/css">
.pngAlpha {
height: 1px;
width: 1px;
filter:expression(
this.style.filter = this.style.filter.indexOf("AlphaImageLoader")== -1 ? this.style.filter + "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingmethod=image )" : this.style.filter
);
}
</style>
<![endif]-->
</head>
<body >
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" valign="middle" id="header" class="Test0" > </td>
</tr>
<tr>
<td id="middleLeft" class="Test0" > </td>
<td valign="top" id="middleRight" >
<div id="editBody" >
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p><a href="#">測試</a></p>
</div>
</td>
</tr>
<tr >
<td id="footerBg" colspan="2" valign="bottom" class="Test0" >
<!--注意，footer 樣式應用在 td 是有問題的，當中間的文字多的時候，圖片不會跟著走-->
<div id="footer" >
<img id="lefImg" src="images/home_t_01.png" class="pngAlpha Test0">
<img id="rimg" src="images/home_t_02.gif" class="Test0">
<div id="copyright" class="Test0" >版權：曲濱 2006 ，Emai:XXXXXX</div>
</div>
</td>
</tr>
</table>
</body>
</html>
這個是改進后的代碼
html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>網</title>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div id="content">
<p>測試</p>
<p>測試</p>
</div>
<div id="footer">
<div id="decoration_left"></div>
<div id="decoration_right"></div>
<div id="copyright">版權：Yok 2006 ，Emai:XXXXXX</div>
</div>
</body>
</html>
CSS代碼：
css: body
{
background-image:url(images/ltbg02.jpg);
background-repeat:no-repeat;
margin:0px;
padding:0px;
height:100%;
}
#content
{
margin-top:118px;
margin-left:366px;
}
#footer
{
background-image:url(images/BlgDownBg.jpg);
height:150px;
position:absolute;
bottom:0px;
width:100%;
}
#decoration_left
{
background-image:url(images/home_t_01.png);
background-repeat:no-repeat;
height:445px;
width:722px;
top:-330px;
position:absolute;
}
#decoration_right
{
background-image:url(images/home_t_02.gif);
background-repeat:no-repeat;
height:55px;
width:118px;
position:absolute;
top:-50px;
right:10px;
}
#copyright
{
position:absolute;
top:50px;
right:10px;
color:White;
width:270px;
}
下一篇 網頁文字應用CSS的一些技巧
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
