Doctype is short for document type. It is used to describe the XHTML or html version you are using. The DTD (such as the xhtml1-transitional.dtd in the above example) is called the document type definition, which contains the document rules, the browser according to your definition of the DTD to explain your page identity and display.
To create a standard web page, the doctype Declaration is an essential part. Your logo and CSS will not take effect unless your XHTML determines a correct doctype.
XHTML 1.0 provides three types of DTD declarations:
<! 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 xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
What doctype should we choose?
The ideal situation is of course a strict DTD, but for most of our designers who are new to web standards, the transitional DTD (XHTML 1.0 transitional) is currently an ideal choice (including this site, is also a transitional DTD ). Because this DTD also allows us to use the identifier, element, and attribute of the presentation layer, it is easier to pass W3C code verification.
Note: The "presentation layer identifier and attribute" mentioned above refers to the tags purely used to control the presentation, such as the table used for typographical layout and background color identifier. In XHTML, identifiers are used to represent structures rather than representations. Our purpose of transition is to ultimately separate data from representations.
For example, a human model changes clothes. Models are like data. clothes are the form of representation. Models and clothes are separated so that you can change clothes at will. In html4, data and performance are mixed, and it is very difficult to change the form at one time. A little abstract. This concept needs to be gradually understood during the application process.
Influence of doctype on CSS and JS
You may have discovered that the selection or use of doctype has a very huge impact on your page, and may even have different results for different browsers. The following describes the impact 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">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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>
</Head>
<Body>
<Div id = "content" style = "height: 60px; Border: 1px solid # ff0000;"> <a href = "javascript: changeheight () "> AA </a> </div>
</Body>
The above page displays the height of the DIV controlled by JavaScript by pressing the AA hyperlink. You can try it on your own.
1. ie browsing (I use IE 6), the content height will increase, and alert will output height: 360, offsetheight: 362
2. The height of Firefox and content will not change, while alert outputs 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">
In Firefox, the content height increases, and alert outputs Height: 360, offsetheight: 362
I have seen many people come to the conclusion that their doctype is incorrect when it is run. I don't think so. doctype defines a canonicalized set to verify the correctness and normalization of your code. If doctype is removed, it may only run correctly in your browser on your current machine, that is, yourProgramIt cannot be universal. Is that what you are pursuing? At this time, you will say what to do with the above problem. Isn't it possible to do that in Firefox? The answer is yes, of course. Take a closer look at the above Code. In the <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> in the standard, the object height and size must specify units such as PX, PT, etc, if this parameter is not specified, it depends on the default or support of the application browser. Therefore, 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 the command to see if it is correct? Defining doctype is a good habit and we hope you can write standard code.
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
