What's the difference between "//W3C//DTD HTML 4.01" and "//W3C//DTD XHTML 1.0"?

Hi all:

I want to get the autual height of the web browser,but I got some confusions about the W3C DTD HTML 4.01 and //W3C//DTC XHTML 1.0,below is my issue detail:

If I am using W3C DTD HTML 4.01 at the top of the page header and use document.body.clientHeight,then I can not get the full height of the browser:

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

But if I change to //W3C//DTD HTML 4.01 or use document.documentElement.clientHeight,then I could get the actual height of the browser:
1. Using //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>

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

So,my question is What's the difference between "//W3C//DTD HTML 4.01" and "//W3C//DTD XHTML 1.0"?
Any help will be grateful!

Solution

The difference between “//W3C//DTD HTML 4.01” and “//W3C//DTD XHTML 1.0” is that the former has “HTML 4.01” as opposite to “XHTML 1.0” in the latter.

What you have actually observed is the difference between the two document type declarations

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

and

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

The former puts browsers to “standards mode”, whereas the latter puts them to “quirks mode”. In quirks mode, strange things may and will happen. This may include nonstandard calculation of widths and heights.

Unless this is about a legacy page that relies on quirks mode, you should use “standards mode” and use CSS and DOM by the specifications.