Preface: (Nonsense)
Now all pay attention to the standard station, and the standard station uses the technology mainly is xhtml+css, but now we commonly use is the HTML code, then how should I transform? And what is the difference between HTML and XHTML? In this tutorial, you'll learn the difference between HTML and XHTML, and how to convert HTML to XHTML. After all, XHTML is the direction of development, so I think the tutorial is necessary to publish on this site. I feel that if you want to use the standard or the best to learn HTML first, because it is simpler, and then look at the tutorial.
xhtml Introduction:
XHTML is the abbreviation for Extensible Hypertext Markup Language (Extensible Hypertext Markup Language), while HTML is hypertext Markup Language (Hypertext Markup Language), which is the difference between names. In fact, we say that the standard should be XML, then why learn XHTML? Because the current HTML code cumbersome, dangerous, but the XML use environment is not mature, so the introduction of an excessive product is XHTML, it plays a role to play. Others think XHTML is an upgraded version of HTML, but it's also true, and my understanding is that XHTML makes HTML a more canonical markup language, making HTML powerful and reducing the cumbersome code, especially the tables.
XHTML was set as a standard on January 26, 2000 by the International Standards Organization (World Wide Web Consortium), which is considered to be the latest version of HTML and will gradually replace HTML. All browsers now support xhtml,xhtml compatible HTML 4.0. Others think that XHTML is HTML4.01. If you have written a standard station for yourself in the course of your study, you can pass the verification of the XHTML1.0 and you will get a logo, usually a certificate of authentication and CSS validation. I'm not sure how many websites in the country have passed these two validations at the same time. You can go to http://www.w3.org/this site to verify your station, if the two rules will be given to us two pieces of code added to your page to show others that you use the standard build station AH, cow Ah!
Why we use XHTML
XHTML is an overused product of HTML upgrades to XML and is defined as a standard, XHTML is fully compatible with HTML4.01, and has XML syntax. Here's a look at an HTML with an error code, as follows:
<title>this is bad html</title>
<body>
</body>
Although it contains the error code, it can be displayed normally when browsing in the browser. XML is a markup language, but it requires that any element that appears in a Web page should be marked, XML is used to describe the data in the Web page, and HTML is used to display the elements in the Web page. At present, we use a variety of Internet browser technology, including laptops, mobile internet browsing, and so on, all required to browse some of the content to be properly labeled, if there is a wrong mark may make the display particularly confusing, or even normal display.
So federated HTML and XML, and other technologies, we've got a language that's useful now and will be useful in the future-XHTML.
We'll need to start learning XHTML Now that we're going to use XHTML in the right format in the future, so that all browsers can execute correctly.
the difference between XHTML and HTML:
XHTML is a new technology that we should be familiar with before browsers and other software support it. We should familiarize ourselves with HTML4.0 before we can learn more about XHTML, and we could download a reference manual to familiarize ourselves with it. To make it easier for us to learn XHTML, in other words, we should try to write less error code when we use HTML to write code, such as: write HTML with lowercase characters, and then tag the end of each tag like:<p> Web Teaching Network welcome you to visit </p > End must have, we want to keep this rule.
the biggest difference between them is:
The 1.XHTML element must be used correctly in nesting.
Some elements in HTML can be incorrectly nested and can be displayed correctly, such as:
<b><i>this text is bold and italic</b></i>
The XHTML must be properly nested before it can be used properly, such as:
<b><i>this text is bold and italic</i></b>
Note: This error usually occurs when nested layers of tags are inside. Such as:
<ul>
<li>Coffee</li>
<li>tea
<ul>
<li>black tea</li>
<li>green tea</li>
</ul>
<li>Milk</li>
</ul>
The correct one should be:
<ul>
<li>Coffee</li>
<li>tea
<ul>
<li>black tea</li>
<li>green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Looking at the above two pieces of code we can see the correct inside we insert </li> tags after </ul>.
XHTML files must have the correct organizational format.
All XHTML should be properly nested within an element that starts with a
<body> ... </body>
Label names must be in lowercase letters.
Because XHTML documents are XML applications, XML is sensitive to capitalization. Like <br> and <BR> are two different marks. such as error code:
<BODY>
<p>this is a paragraph</p>
</BODY>
The correct format is:
<body>
<p>this is a paragraph</p>
</body>
All XHTML elements must be closed
There is no empty element that has not been closed in our code, in fact, for this we are relatively good end, there should be the beginning of the end? For example, error code:
<p>this is a paragraph
<p>this is another paragraph
Correct for:
<p>this is a paragraph</p>
<p>this is another paragraph</p>
Independent of a label we also want to end with/>.
For example: Error code
This is a break<br>
Here comes a horizontal rule:Here ' s an image
Correct code:
This is a break<br/>
Here comes a horizontal rule:Here ' s an image
With a few examples of the above, we can basically see the difference between HTML and XHTML, so we should try to change our current HTML from now on, such as using lowercase tags, and/> with the closing tag after the tag.
The syntax of XHTML
It's easy to say that writing XHTML uses clean HTML syntax.
Some other syntax requirements for XHTML:
Attribute names must be lowercase. Such as:
Error code:
<table width= "100%" >
The correct code:
<table width= "100%" >
Property value must be referenced. Such as:
Wrong code:
<table width=100%>
The correct code:
<table width= "100%" >
The abbreviation for the attribute is prohibited. Such as:
Wrong code:
<DL compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
The correct code:
<DL compact= "compact" >
<input checked= "Checked"/>
<input readonly= "ReadOnly"/>
<input disabled= "Disabled"/>
<option selected= "Selected"/>
<frame noresize= "Noresize"/>
List A table to let you know:
HTML XHTML
Compact compact= "compact"
Checked checked= "Checked"
DECLARE declare= "DECLARE"
ReadOnly readonly= "ReadOnly"
Disabled disabled= "Disabled"
Selected Selected= "Selected"
Defer defer= "defer"
Ismap ismap= "Ismap"
Nohref nohref= "Nohref"
NoShade noshade= "NoShade"
nowrap nowrap= "NoWrap"
Multiple multiple= "multiple"
Noresize noresize= "Noresize"
Replace the Name property with the id attribute. Such as:
The name attribute is defined in HTML 4.01 for A,applet, frame, iframe, IMG, and map. In XHTML the Name property cannot be used and should be replaced with an ID. Such as:
Error code:
The correct code:
Note: We can also use both the ID and the name attribute in the label in order for the old browser to perform the content properly. Such as:
In order to adapt to the new browser browsing we ended up in the above code by adding/ending tags.
The XHTML DTD defines the type of document.
In XHTML we have to declare the type of document so that the browser knows what type of document you are in, and the declaration part is added to the head of the document. Such as:
<! DOCTYPE DOCTYPE goes here>
<title>title goes here</title>
Body text goes
</body>Note: The DOCTYPE declaration is not part of the XHTML document and it is not an element of the document, so we do not need to add an end tag.
Note: XHTML attributes are in the
The basic institutions we use when DOCTYPE:
<! DOCTYPE ...>
<title> </title>
<body> ... </body>
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, XHTML1-TRANSITIONAL.DTD) 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 identity and attributes, complete code 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" >
How to convert an existing structure to XHTML
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.
we've taken the following points from the current HTML conversion to XHTML:
A description of the document type is added to the header of each page. Such as:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
of course, you can choose another type.
Both tags and name should be lowercase.
We can write a replacement program ourselves, change all the tags in your HTML document to lowercase letters, and the Name property to lowercase.
All attribute values are enclosed in quotation marks.
Four, separate tags, such as:
V. We open the official website of the Http://validator.w3.org/check/referer: the general error of validation may appear in your tag nesting. You can also use the conversion tools provided by the official website Tidy to implement the conversion: http://www.w3.org/People/Raggett/tidy/, I do not recommend that you use the tool directly to verify, because after all we are a newly-learned XHTML, we still transform ourselves, So we can familiarize ourselves with XHTML, and then we have to learn the use of tidy tools, which is also more troublesome.
Six, we directly open the following page can directly enter the URL to verify our program: http://webjx.com/js/standard.htm
the modularization of XHTML
Why do you want to modularize the design of XHTML? XHTML is simple, but it's a lot of content, including the vast majority of features a network designer needs. XHTML is a complex subject, but from another perspective it is very simple. To split XHTML into smaller modules, the consortium has built a small, well-defined set of XHTML elements that can be used independently of simple devices that combine large, more complex programs with other XML standards.
Through the XHTML model, programmers can do the following things:
1. Select the elements that are supported by devices that can be used to build block standards for XHTML.
2. Using XML while adhering to the XHTML standard can be extended to XHTML.
3. Simplified XHTML can be applied to devices such as handheld computers, mobile phones, televisions and home appliances.
4. Add XHTML to the design of complex programs by adding the heart's XML functionality (like sound, multimedia).
5. The outline of XHTML is defined as the XHTML base (XHTML for a subset of mobile devices).
Module Name Description
Applet Module * Applet element.
Base Module defines the base element.
Basic forms Module defines fundamental form elements
Basic tables Module to define a base table element
The bi-directional Text Module defines the BDO element.
The Client image map Module defines the Image map element of the browser.
Edit Module defines the editing elements del and ins.
Forms Module defines all elements used in forms.
Frames Module defines a FRAMESET element
Hypertext Module defines a element.
The IFRAME Module defines an IFRAME element.
The Image Module defines an IMG element.
Intrinsic events Module Define event Change attribute element
Legacy Module defines deprecated* elements and attributes.
Link Module defines a LINK element.
List Module defines the list element ol, LI, UL, DD, DT, DL.
Metainformation Module defines a META element.
The name Identification Module defines the deprecated* name attribute.
Object Module defines object and Param elements.
Presentation Module defines performance elements such as B and I.
The Scripting Module defines the script and noscript elements.
The server image map Module defines the server side image map element.
Structure Module defines the structure HTML, head, title and body.
Style attribute Module defines the style property.
Style Sheet Module defines a STYLE element.
Tables Module defines the elements that are applied within a table.
Target Module defines the target attribute.
The text Module defines the text container element, such as P and H1.
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
