“//W3C//DTD HTML 4.01”和“//W3C//DTD XHTML 1.0”有什么区别？答案

【问题标题】：What's the difference between "//W3C//DTD HTML 4.01" and "//W3C//DTD XHTML 1.0"?“//W3C//DTD HTML 4.01”和“//W3C//DTD XHTML 1.0”有什么区别？
【发布时间】：2018-04-18 11:20:15
【问题描述】：

大家好：

我想获得网络浏览器的实际高度，但我对 W3C DTD HTML 4.01 和 //W3C 有一些困惑//DTC XHTML 1.0，下面是我的问题详情：

如果我在页眉顶部使用 W3C DTD HTML 4.01 并使用 document.body.clientHeight，那么我无法获取浏览器的全高：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test jQuery Height</title>

       <script type="text/javascript" src="../lib/jquery-1.8.3.min.js"></script>

       <script type="text/javascript">
         $(function(){
            var height=document.body.clientHeight;
        alert(height);
     })
   </script>
</head>
<body>
  <div style="margin-left:30px;">
       <button>Start Select</button>
       <button>Stop Select7lt;/button>
  </div>
 </body>
</html>

但如果我改为 //W3C//DTD HTML 4.01 或使用 document.documentElement.clientHeight，然后我可以得到浏览器的实际高度：
1. 使用 //W3C//DTD HTML 4.01

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test jQuery Height</title>

           <script type="text/javascript" src="../lib/jquery-1.8.3.min.js"></script>

           <script type="text/javascript">
             $(function(){
                var height=document.body.clientHeight;
            alert(height);
         })
       </script>
    </head>
    <body>
      <div style="margin-left:30px;">
           <button>Start Select</button>
           <button>Stop Select7lt;/button>
      </div>
     </body>
    </html>

使用 document.documentElement.clientHeight

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test jQuery Height</title>

       <script type="text/javascript" src="../lib/jquery-1.8.3.min.js"> 
       </script>

       <script type="text/javascript">
         $(function(){
            var height=document.documentElement.clientHeight;
            alert(height);
         })
       </script>
    </head>
    <body>
      <div style="margin-left:30px;">
           <button>Start Select</button>
           <button>Stop Select7lt;/button>
      </div>
     </body>
</html>

那么，我的问题是“//W3C//DTD HTML 4.01”和“//W3C//DTD XHTML 1.0”有什么区别？
任何帮助将不胜感激！

【问题讨论】：

如果可以的话，采用 HTML5 是个好主意——<!DOCTYPE html>。
检索你的 clientHeight 和 clientWidth 的问题，似乎更多的是浏览器问题。你用的是哪个浏览器？
嗯，我们的团队希望它能在 Chrome、Firefox、IE9+ 上运行良好，我认为应该有一个通用的解决方案。

标签： html w3c dtd

【解决方案1】：

“//W3C//DTD HTML 4.01”和“//W3C//DTD XHTML 1.0”的区别在于前者的“HTML 4.01”与后者的“XHTML 1.0”相反。

你实际观察到的是两种文档类型声明的区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

和

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

前者将浏览器置于“标准模式”，而后者将它们置于“怪癖模式”。在quirks mode，奇怪的事情可能而且将会发生。这可能包括宽度和高度的非标准计算。

除非这是关于依赖 quirks 模式的遗留页面，否则您应该使用“标准模式”并按照规范使用 CSS 和 DOM。

【讨论】：

【解决方案2】：

HTML 4.01 严格的文档类型，即 "-//W3C//DTD HTML 4.01//" ，根据 HTML 4.01 规范进行验证，尽管它不允许任何表示标记或不推荐使用的元素（例如字体元素）或要使用的框架集。它验证松散的 HTML 样式标记，例如最小化的属性和不带引号的属性（例如 required，而不是 required="required"）

HTML 4.01 过渡文档类型，即“-//W3C//DTD HTML 4.01 Transitional//EN”根据 HTML 4.01 规范进行验证。它允许一些表示标记和不推荐使用的元素（例如字体元素），但不允许框架集。同样，它验证了松散的 HTML 样式标记

这些是 HTML 4.01 文档类型的确切 XHTML 1.0 等效项，即我们上面讨论的“-//W3C//DTD XHTML 1.0 Transitional//EN”或“-//W3C//DTD XHTML 1.0 Strict//EN” ，所以在功能上它们是相同的，只是它们不会验证松散的 HTML 样式标记：它们都需要是格式良好的 XML。

【讨论】：

【解决方案3】：

以下是这两个文档标准的一个很好的比较：http://www.w3.org/TR/xhtml1/diffs.html

简而言之：对于 XHTML，您必须遵循 XML 结构，就像任何其他 XML 文档一样。 HTML4 过渡更灵活，允许例如在标签中使用附加属性或跳过某些属性。

编辑：

document.documentElement 似乎在 IE 标准模式下工作
在 IE 怪癖模式和我通常使用的所有其他浏览器中的 document.body。

document.body 比另一个更标准。但它与 (X)HTML 标准无关。

【讨论】：