HTML 4.01、XHTML 1.0 Strict和Transitional 的区别

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


顺便分享个不错的代码
这个代码有待改进。

ContractedBlock.gif ExpandedBlockStart.gif Code
<!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>
ExpandedBlockStart.gifContractedBlock.gif
<style type="text/css">
<!--
ExpandedSubBlockStart.gifContractedSubBlock.gifhtml,body 
{}{
    height
:100%;
}

ExpandedSubBlockStart.gifContractedSubBlock.gifbody 
{}{
    margin-left
: 0px;
    margin-top
: 0px;
    margin-right
: 0px;
    margin-bottom
: 0px;
    background-image
: url(images/ltbg02.jpg);
    background-repeat
: repeat-x;
}


ExpandedSubBlockStart.gifContractedSubBlock.gif#header
{}{
    height
: 120px;
}

ExpandedSubBlockStart.gifContractedSubBlock.gif
/**//*编辑区域,相对位置,要设置Z顺序,否则可以被“大楼覆盖”*/
#editBody
ExpandedSubBlockStart.gifContractedSubBlock.gif
{}{
    position
: relative;
    z-index
:9;
}

#middleLeft
ExpandedSubBlockStart.gifContractedSubBlock.gif
{}{
    width
: 365px;
}

ExpandedSubBlockStart.gifContractedSubBlock.gif
/**//*草地背景*/
#footerBg
ExpandedSubBlockStart.gifContractedSubBlock.gif
{}{
    background-image
: url(images/BlgDownBg.jpg);
    background-repeat
: repeat-x;
    background-position
: bottom;
    height
: 150px;
}


ExpandedSubBlockStart.gifContractedSubBlock.gif
/**//*
草地背景,中第一个Div用,
设置为相对位置,它里面的绝对定位样式就是以它的0,0点开始的了
高度一定要给,要不在 FireFox 显示不正常
*/


ExpandedSubBlockStart.gifContractedSubBlock.gif#footer
{}{
    position
: relative;
    height
: 149px;
}


ExpandedSubBlockStart.gifContractedSubBlock.gif
/**//*大楼,样式*/

#lefImg
ExpandedSubBlockStart.gifContractedSubBlock.gif
{}{
    position
: absolute;
    left
: -2px;
    bottom
: 30px;
}


ExpandedSubBlockStart.gifContractedSubBlock.gif
/**//*小楼楼,样式*/
#rimg
ExpandedSubBlockStart.gifContractedSubBlock.gif
{}{
    position
: absolute;
    right
:  20px;
    bottom
: 150px;
}


ExpandedSubBlockStart.gifContractedSubBlock.gif#copyright
{}{
    position
: absolute;
    right
: 30px;
    bottom
: 50px;
    color
: #FFFFFF;
}

ExpandedSubBlockStart.gifContractedSubBlock.gif.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><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>


这个是改进后的代码

 

ContractedBlock.gif ExpandedBlockStart.gif Code
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> 

 

ContractedBlock.gif ExpandedBlockStart.gif Code
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; 
} 

 

转载于:https://www.cnblogs.com/kingwangone/archive/2009/09/05/1561096.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值