1. The first step to improve
Add the correct DOCTYPE to the page
DOCTYPE is the abbreviation of document type. Mainly used to indicate what version of XHTML or HTML is used. The browser interprets the page code according to the DTD (Document Type Definition) defined by DOCTYPE.
(1) Transitional (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)Frame type (Frameset)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Set a namespace (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 pointer. Just enter the code as usual.
Declare your coding language
In order to be correctly interpreted by browsers and pass markup validation, all XHTML documents must declare the encoding language they use. The code is as follows:
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
The coding language declared here is Simplified Chinese GB2312. If you need to produce Traditional Chinese content, you can define it as BIG5.
Write all labels in lowercase letters
XML is case-sensitive, so XHTML is also case-sensitive. All XHTML element and attribute names must be lowercase. Otherwise your document will be considered invalid by W3C validation. For example the following code is incorrect:
<TITLE>Company Profile</TITLE>
The correct way to write it is:
<title>Company Profile</title> Similarly, change <P> to <p>, <B> to <b>, etc. This conversion step is simple.
Add alt attribute to image
Add alt attribute to all images. The alt attribute specifies that replacement text is displayed when the image cannot be displayed. This is dispensable for normal users, but it is crucial for text-only browsers and users using screen readers. Only when the alt attribute is added will the code pass the W3C correctness check. Note that we need to add meaningful alt attributes, writing like the following is meaningless:
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
Correct way to write:
<img src="logo_unc_120x30.gif" alt="UNC company logo, click to return to the home page">
Quote all attribute values
In HTML, you don't need to quote attribute values, but in XHTML, they must be quoted.
Example: height="100", not height=100.
Close all tabs
In XHTML, every open tag must be closed. Like this:
<p>Every open tab must be closed. </p> <b>HTML can accept unclosed tags, but XHTML cannot. </b>
This rule can avoid HTML confusion and trouble. For example: If you don't close the image tag, you may have CSS display issues in some browsers. Use this method to ensure that the page appears as you designed it. It should be noted that empty tags must also be closed. Use a forward slash "/" at the end of the tag to close themselves. For example:
<br /> <img src="webstandards.gif" />
After being processed by the above seven rules, the page basically meets the requirements of XHTML1.0. But we still need to verify whether it really meets the standards. We can use W3C to provide free validation services (http://validator.w3.org/). Fix the errors one by one after discovering them.
2. The second step of improvement
Our next improvement is mainly in the separation of structure and performance. This step is not as easy to achieve as the first step. We need a change in concept, as well as the learning and application of CSS2 technology. But learning anything new takes time, right? The trick is to learn by doing. If you have always used table layout and have never used CSS at all, there is no need to rush to say goodbye to table layout. You can first replace the font tag with a style sheet. As you learn more, you can do more. Okay, let’s take a look at what we need to do:
Define the appearance of elements with CSS
We have developed a habit when writing logos. When we want the font to be larger, we use <h1>, and when we want to add a dot symbol in front, we use <li>. We always think of <h1> as big, <li> as dots, and <b> as "bold text." In fact, <h1> can become anything you want. Through CSS, <h1> can become a small font, <p> text can become huge and bold, and <li> can become A picture and so on. We can't force structural elements to achieve presentation, we should use CSS to determine the appearance of those elements. For example, we can make the original default level 6 headings look the same size:
h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }
Replace meaningless junk with structured elements
Many people may have never known that HTML and XHTML elements were designed to express structure. Many of us have grown accustomed to using elements to control presentation, rather than structure. For example, a list might be marked like this:
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 might say, "But <li> displays a dot, and I don't want to use a dot." In fact, CSS does not specify how an element looks. You can turn off dots using CSS.
Add id to each table and form
Give a table or form a unique, structural markup, e.g.
<table id="menu">
Next, when writing the style sheet, you can create a "menu" selector and associate it with a CSS rule that tells table cells, text labels, and all other elements how to display. In this way, there is no need to attach some redundant, bandwidth-consuming presentation layer attributes such as height, width, alignment, and background color to each <td> tag. With just an attached tag (the id tag tagging "menu"), you can perform ad-hoc presentation processing for clean, compact code markup within a separate stylesheet.
For intermediate improvements, we will list the main three points here first, but it contains a lot of content and knowledge points, which we need to learn and master step by step until we finally achieve the layout using CSS completely without using any tables.