(1) Transition type (Transitional)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Strict)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Framework (frameset)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
For our initial improvement, we only need to choose a transitional declaration. It is still compatible with your table layout and presentation logo, so that you do not feel that the changes are too great and difficult to grasp.
Tip: If you are too lazy to enter the above transitional code, you can visit the first page of http://www.macromedia.com/website and view it later.Source code, Copy and paste the same code in the head area.
Set a namespace)
Add the following code directly after the doctype declaration:
<HTML xmlns = "http://www.w3.org/1999/xhtml">
A namespace is a detailed DTD that collects Element Types and attribute names. The namespace Declaration allows you to identify your namespace through an online address. Just enter the code.
Declare your encoding Language
All XHTML documents must declare the encoding languages they use in order to be correctly interpreted and validated by the browser. The Code is as follows:
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
The encoding language declared here is simplified Chinese gb2312. If you need to make traditional Chinese content, you can define it as big5.
Write All tags in lowercase letters
XML is case sensitive. Therefore, XHTML is also case sensitive. The names of all XHTML elements and attributes must be in lower case. Otherwise, your document will be considered invalid by W3C validation. For example, the following code is incorrect:
<Title> Company Profile </title>
The correct statement is as follows:
<Title> Company Profile </title>: <p> change to <p>, <B> change to <B>, and so on. This step is simple.
Add the alt attribute to the image
Add the alt attribute to all images. The ALT attribute specifies that the text will be displayed for replacement when the image cannot be displayed. This is dispensable for normal users. However, it is vital for users of a text browser and a screen reader. Only when the alt attribute is added will the code pass the W3C correctness verification. Note that we need to add a meaningful alt attribute. it is meaningless to write a statement like the following:
Correct syntax:
Quote all attribute values
In HTML, you do not need to enclose attribute values in quotation marks, but in XHTML, they must be enclosed in quotation marks.
For example, Height = "100", but not Height = 100.
Close all labels
In XHTML, each opened tag must be closed. Like this:
<P> each opened tag must be disabled. </P> <B> HTML can accept non-closed tags, but XHTML cannot. </B>
This rule can avoid HTML confusion and trouble. For example, if you do not disable image labels, CSS display may occur in some browsers. This method ensures that the page is displayed as you designed. It should be noted that empty tags should also be closed, and a forward slash "/" should be used at the end of the tag to close themselves. For example:
<Br/>
After the above seven rules are processed, the page basically meets the requirements of xhtml1.0. However, we also need to check whether the standards are met. We can use W3C to provide free Verification Service (http://validator.w3.org /). If an error is found, modify it one by one. In the subsequent resource list, we also provide other verification services and URL for guidance on verification, which can be used as a supplement to W3C verification. When you finally pass the XHTML verification, congratulations, you have taken a big step towards the website standard. It's not as hard as you think!
2. Intermediate Improvement
Next, we will improve the separation of structure and performance. This step is not as easy to implement as the first step. We need a conceptual change and learning and application of css2 technology. But it takes some time to learn any new knowledge, isn't it? The trick is to learn while learning. If you have been using the table layout all the time, you have never used CSS, and you do not have to rush to say goodbye to the table layout. You can replace the font label with a style sheet. The more you learn, the more you can do. Okay. Let's take a look at what we need to do:
Use CSS to define the element appearance
We have developed a habit when writing the logo. When we want the font to be bigger, we use
H1, H2, H3, H4, H5, H6 {font-family:, Serif; font-size: 12px ;}
Replace meaningless garbage with structured elements
Many may never know that HTML and XHTML elements are designed to express structures. Many of us are used to controlling performance with elements instead of structures. For example, a list may use the following identifier:
Sentence 1 <br/> sentence 2 <br/> sentence 3 <br/>
It would be better if we use an unordered list instead:
<Ul> <li> sentence 1 </LI> <li> sentence 2 </LI> <li> sentence 3 </LI> </ul>
You may say, "but <li> shows a dot. I don't want to use it ". In fact, CSS does not set what the elements look like. You can use CSS to turn off the dots.
Add ID to each table and form
Assign a unique, structured tag to a table or form, for example
<Table id = "menu">
Next, when writing a style sheet, you can create a menu selector and associate it with a CSS rule, it is used to show table cells, text labels, and all other elements. In this way, you do not need to attach unnecessary attributes such as the height, width, alignment, and background color to each <TD> label. Only one attached tag (ID tag marked with "menu") is required ), you can perform special presentation layer processing for clean and compact code tags in a separated style sheet.
We have three main points to improve the intermediate level. However, there are many content and knowledge points, which need to be learned and mastered step by step, the layout will not be implemented using any table until the final implementation fully adopts CSS.
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
