XHTML and CSS Overview

Source: Internet
Author: User

XHTML and CSS Overview

1. HTML Transition to XHTML

HTML and XHTML are not two languages, they are different stages of a language, somewhat similar to the relationship between classical Chinese and vernacular Chinese.
Because of the rapid development of network technology, the continuous improvement of HTML, so that XHTML is the "rigorous version of HTML."

Learn more about HTML: http://baike.baidu.com/link?url= Xzg9djt-snnwaicod0skpbxvhm7bqftrneue2as9e201ol8x7mgblp7hisxgv5m6hkcb7gbqwy2ntf-d3dy6za

(1)<! The meaning and choice of doctype>
Because of the different specifications and versions at the same time, in order for the viewer to be compatible with a variety of specifications, it is stipulated in the specification that the DOCTYPE directive can be used to declare which specification is used to interpret the document.
As an example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

xmlns= "http://www.w3.org/1999/xhtml">

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>

<title> Untitled Document </title>

<body>

Subject
</body>

* * There are two lines of red font on DOCTYPE (text type), which tells the browser to interpret the code in this document using the Transition specification of XHTML 1.0.
* * in the third row, the,* * Note Where this statement is located.

(2) In fact, XHTML is not much different from the HTML 4.01 standard.

They are the most important differences:

* "Label name", "attribute name" must be in lowercase letters.

Error: <p>this is example.<p>

Correct: <p>this is example.</p>

The *xhtml element must be nested correctly.

Error: <p><span>this is example.</p></span>

Correct: <p><span>this is example.</span></p>

The *xhtml element must be closed.

Error: <p>this is example.

Correct: <p>this is example.</p>

* Empty tags must also be closed.

Fatal error:<br>

Correct:<br/>

The *xhtml document must have a root element.

All XHTML elements must be nested within the

Attribute values in *xhtml must be enclosed in double quotation marks.
Error: <p class= "heading" >
Correct: <p class= "heading" >

2. CSS Overview

* * CSS (Chinese name): Cascading style sheet (cascading style Sheets)

* * The introduction of CSS is to make the HTML language better adapted to the page's art design
(1)
* * The traditional HTML language to achieve the design of the page art is very troublesome

Example:

Html:

<!doctype html>

<meta charset= "UTF-8" >

<meta name= "Generator" content= "editplus®" >

<meta name= "Author" content= "" >

<meta name= "Keywords" content= "" >

<meta name= "Description" content= "" >
<title>Disadvantages of HTML </title>

<body>

<font color= "Red" size= "5" >css Introduction </font>
<p>
<font color= "Red" size= "3" >
HTML tags were originally designed to define document content. By using tags such as </font>
</p>
<p>
<font color= "Red" size= "3" >
Because the two main browsers (Netscape and Internet Explorer) constantly add new HTML tags and attributes (such as font labels and color attributes) to the HTML specification, it becomes increasingly difficult to create a site that is clearly independent of the document's presentation layer. To solve this problem, the World Wide Web Consortium, a non-profit standardization consortium, is tasked with the standardization of HTML and creating styles outside of HTML 4.0.
</font>
<p>

</body>

Advantages of CSS:

<!doctype html>

<meta charset= "UTF-8" >

<meta name= "Generator" content= "editplus®" >

<meta name= "Author" content= "" >

<meta name= "Keywords" content= "" >

<meta name= "Description" content= "" >
Advantages of <title>css </title>

<style type= "Text/css" >

h1{

color:red;

font-size:5px;

}

p{

color:red;

font-size:3px;

}

p{

color:red;

font-size:3px;

}

</style>

<body>


<H1>CSS Introduction

<p>
HTML tags were originally designed to define document content. By using tags such as H1, p, and table, HTML is intended to convey information such as "This is the title", "This is the paragraph", and "this is the form." The document layout is also done by the browser, without using any formatting tags.
</p>

<p>
Because the two main browsers (Netscape and Internet Explorer) constantly add new HTML tags and attributes (such as font labels and color attributes) to the HTML specification, it becomes increasingly difficult to create a site that is clearly independent of the document's presentation layer. To solve this problem, the World Wide Web Consortium, a non-profit standardization consortium, is tasked with the standardization of HTML and creating styles outside of HTML 4.0.
</p>

</body>

from the simple example above, it can be seen that CSS has made a breakthrough in the overall control of the HTML language, and it is very convenient to revise and maintain it later. (The tag selector is used above)

XHTML and CSS Overview

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.