XHTML-this is considered the successor of HTML 4 and a combination of HTML and XML. By combining XML and HTML functions, XHTML makes Web content more accessible to phones, handheld devices, televisions, and other devices. W3C classifies XHTML 1.0 into three specifications: Strict, Transitional, and Frameset ).
XHTML 1.0 Strict)
XHTML 1.0 Strict is the most demanding XHTML specification, but it provides the cleanest structured markup. Strict encoding is independent of any markup language that defines the appearance. It uses Cascading Style Sheets (CSS) to control the representation. The structure independent from the representation enables XHTML Strict to be displayed flexibly on different devices. However, its control and representation of CSS dependencies are troublesome for programmers, because if they want to display Web content in devices or browsers that cannot recognize style sheets, it is not a good choice.
XHTML 1.0 (Transition)
XHTML 1.0 Transitional is a more tolerant specification. Strict completely separates the structure from the representation, while Transitional allows the use of labels to control the appearance. The purpose is to build a bridge between HTML pages that allow tags to control the representation and XHTML Strict, which are completely separated from each other. Its biggest advantage is that it overcomes the Strict dependency on CSS. The Transitional page is accessible to users who use legacy browsers or cannot recognize style sheets.
How to choose?
When selecting between Strict and Transitional, consider the following factors:
User. If most of your users use legacy browsers that do not support style sheets, they cannot use Strict-although I will give examples that support standards more than backward compatibility. If most of your users use the latest version of Internet Explorer, Netscape, Opera, or Safari, Strict is the best long-term choice.
Current code. If CSS is used and HTML does not contain many labels that control the appearance, you can use Strict at the previous level.
Start
XHTML 1.0 is based on HTML, so it can be interpreted by existing browsers. That means you can start using XHTML immediately. In addition, you can use tools to get help, whether to convert an existing site or create new code.
By the way, I would like to share a good piece of code.
This code needs to be improved.
Code
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
<Title> helping customers </title>
<Style type = "text/css">
<! --
Html, body {}{
Height: 100%;
}
Body {}{
Margin-left: 0px;
Margin-top: 0px;
Margin-right: 0px;
Margin-bottom: 0px;
Background-image: url (images/ltb1_2.jpg );
Background-repeat: repeat-x;
}
# Header {}{
Height: 120px;
}
/** // * Edit the area. Set the Z sequence for the relative position. Otherwise, the area can be overwritten "*/
# EditBody
{}{
Position: relative;
Z-index: 9;
}
# MiddleLeft
{}{
Width: 365px;
}
/** // * Lawn background */
# FooterBg
{}{
Background-image: url (images/BlgDownBg.jpg );
Background-repeat: repeat-x;
Background-position: bottom;
Height: 150px;
}
/**//*
Grass background, used in the first Div,
It is set to relative position, and the absolute positioning style in it starts.
The height must be given, or the display on FireFox is abnormal.
*/
# Footer {}{
Position: relative;
Height: 149px;
}
/** // * Building, style */
# LefImg
{}{
Position: absolute;
Left:-2px;
Bottom: 30px;
}
/** // * Small building, style */
# Rimg
{}{
Position: absolute;
Right: 20px;
Bottom: 150px;
}
# Copyright {}{
Position: absolute;
Right: 30px;
Bottom: 50px;
Color: # FFFFFF;
}
. Test0 {}{
Border: 1px solid # FFFF00;
}
-->
</Style>
<! -- If the value is less than or equal to ie6 -->
<! -- [If lte IE 6]>
<Style type = "text/css">
. PngAlpha {
Height: 1px;
Width: 1px;
Filter: expression (
This. style. filter = this. style. filter. indexOf ("AlphaImageLoader") =-1? This. style. filter + "progid: DXImageTransform. Microsoft. AlphaImageLoader (src = '" + this. src + "', sizingmethod = image)": this. style. filter
);
}
</Style>
<! [Endif] -->
</Head>
<Body>
<Table width = "100%" height = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td colspan = "2" valign = "middle" id = "header" class = "Test0"> & nbsp; </td>
</Tr>
<Tr>
<Td id = "middleLeft" class = "Test0"> & nbsp; </td>
<Td valign = "top" id = "middleRight">
<Div id = "editBody">
<P> test </p>
<P> test </p>
<P> test </p>
<P> <a href = "#"> test </a> </p>
</Div>
</Td>
</Tr>
<Tr>
<Td id = "footerBg" colspan = "2" valign = "bottom" class = "Test0">
<! -- Note that there is a problem with the footer style application in td. When there are many texts in the middle, the image will not follow. -->
<Div id = "footer">
<Div id = "copyright" class = "Test0"> copyright: Qu bin2006, Emai: XXXXXX </div>
</Div>
</Td>
</Tr>
</Table>
</Body>
</Html>
This is the improved code.
Html: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> helping customers </title>
<Link rel = "stylesheet" href = "css.css"/>
</Head>
<Body>
<Div id = "content">
<P> test </p>
<P> test </p>
</Div>
<Div id = "footer">
<Div id = "decoration_left"> </div>
<Div id = "decoration_right"> </div>
<Div id = "copyright"> copyright: Yok 2006, Emai: XXXXXX </div>
</Div>
</Body>
</Html>
CSS code:
Css: body
{
Background-image: url (images/ltb1_2.jpg );
Background-repeat: no-repeat;
Margin: 0px;
Padding: 0px;
Height: 100%;
}
# Content
{
Margin-top: 118px;
Margin-left: pixel PX;
}
# Footer
{
Background-image: url (images/BlgDownBg.jpg );
Height: 150px;
Position: absolute;
Bottom: 0px;
Width: 100%;
}
# Decoration_left
{
Background-image: url (images/home_t_01.png );
Background-repeat: no-repeat;
Height: 445px;
Width: 722px;
Top:-330px;
Position: absolute;
}
# Decoration_right
{
Background-image: url (images/home_t_02.gif );
Background-repeat: no-repeat;
Height: 55px;
Width: 118px;
Position: absolute;
Top:-50px;
Right: 10px;
}
# Copyright
{
Position: absolute;
Top: 50px;
Right: 10px;
Color: White;
Width: 270px;
}
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
