What is DOCTYPE
DOCTYPE is a shorthand for document type, which is used to indicate what version of XHTML or HTML you are using. The DTD (for example, the XHTML1-TRANSITIONAL.DTD in the example above) is called the document type definition, which contains the rules of the document, and the browser interprets the identity of your page based on the DTD you define and displays it.
To create a standard Web page, the DOCTYPE declaration is an essential part of the key; unless your XHTML determines a correct DOCTYPE, your logo and CSS will not work.
XHTML 1.0 offers three types of DTD declarations to choose from:
Transition (Transitional): A very loose DTD that allows you to continue using HTML4.01 's identity (but to conform to the XHTML notation). The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Strict (Strict): Requires a strict DTD, you can not use any performance layer of identification and attributes, such as <br>. The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
Framework (Frameset): A DTD specifically designed for frames page design, if your page contains frames, you need to use this DTD. The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >
What kind of doctype do we choose?
Ideally, of course, a strict DTD, but for most of us who have just come in contact with Web standards, the transition DTD (XHTML 1.0 Transitional) is the ideal choice (including this site and the transition DTD). Because the DTD also allows us to use the identity, elements, and attributes of the presentation layer, it is also easier to pass the code checksum of the consortium.
Note: The above "performance layer identification, attributes" refers to those who are purely used to control the performance of the tag, such as the table used for typesetting, background color identification. The identity in XHTML is used to represent structs, not to implement representations, and the purpose of our transition is to ultimately achieve separation of data and performance.
For example, a mannequin changes clothes. Models are like data, clothes are representations, models and clothes are separate, so you can change clothes at will. The original HTML4, the data and performance is mixed together, it is very difficult to change the form of a one-time. Oh, a little abstract, this concept requires us to gradually understand in the application process
The influence of DOCTYPE on CSS and JS
Perhaps you have found that the impact of choosing or not doctype your page is very large, even for different browser results are not the same. The following is a description of the effect on a piece of javascript:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>divTest</title>
<script>
function Changeheight ()
{
document.getElementById ("Content"). style.height= "360";
Alert (document.getElementById ("content"). Style.height);
Alert (document.getElementById ("content"). offsetheight);
}
</script>
<body>
<div id= "Content" style= "height:60px; border:1px solid #FF0000; " ><a href= "Javascript:changeheight ()" >aa</a></div>
</body>
The above page is to display the JavaScript control div's height by a AA hyperlink, and the reader can try
1. IE browse (I use IE 6), the content of the height will be larger, at the same time alert out height:360,offsetheight:362
2. The height of the firefox,content will not change at the same time alert out height:60,offsetheight:62
3. Remove the top sentence <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Under Firefox will get the content of the height will be larger, and alert out height:360,offsetheight:362
I've seen a lot of people run here and get a conclusion. To his doctype, used it a lot of things are wrong. I don't think so, doctype defined a set of specifications to check the correctness of your code, remove the DOCTYPE may only be on your current machine browser correctly run, that is, your program can not be universal, is this what you pursue it? At this time you will say that the above problem how to do, is not in Firefox can not do that? The answer is sure, take a closer look at the above code is actually problematic in the <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> Standards in the height of the object, size must specify units such as PX,PT, if not specified it depends on the application browser default or support situation, so modify the code as follows:
<script>
function Changeheight ()
{
document.getElementById ("Content"). style.height= "360px";
Alert (document.getElementById ("content"). Style.height);
Alert (document.getElementById ("content"). offsetheight);
}
</script>
Run it and see if it's right. It is a good habit to define DOCTYPE, and I hope that you can write the code of the standard specification.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
