HTML 4.01、XHTML 1.0 Strict和Transitional 的区别

最新推荐文章于 2021-06-22 00:58:40 发布

香水梨

最新推荐文章于 2021-06-22 00:58:40 发布

阅读量802

点赞数

分类专栏：前端文章标签： xhtml

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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。另外不管是转换一个已经存在的站点还是建立新的代码，都可以使用工具来获得帮助

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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"  >&nbsp;</td>    
  </tr>
  <tr>
    <td id="middleLeft" class="Test0" >&nbsp;</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: 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; 
}