HTML 4.01、XHTML 1.0 Strict和Transitional 的区别

最新推荐文章于 2024-05-11 16:04:21 发布

转载最新推荐文章于 2024-05-11 16:04:21 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kingwangone/archive/2009/09/05/1561096.html

文章标签：

#xhtml

本文探讨了XHTML的不同规范，特别是Strict与Transitional的区别，并通过实例代码展示了如何使用CSS进行网页布局，包括针对不同浏览器的兼容性处理。

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>

<title>无标题文档</title>

<!--

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>

<!--[if lte IE 6]>

.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 >

<tr>

</tr>

<tr>

</div>

</td>

</tr>

<tr >

</div>

</td>

</tr>

</table>

</body>

</html>

这个是改进后的代码

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>

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