Five mistakes HTML often make in web design

Source: Internet
Author: User
Tags key php and window
Error | design | Web page design 1. Setting of background color of web page

The odds of making a mistake: big
Universality: Broader
The possibility of making mistakes: lazy/Don't know

About 2 years ago I found out that there was no background color on the 21CN, and I informed them by email, and since then I have never committed this problem.

Most people have a white window background color, but if someone like me changes the background color of the Windows window to gray or other colors, then if you don't set the background color of the page, you think the normal Web page will look like a mess on my computer.

2.Align Center (Auto Center) abuse

The odds of making a mistake: very big.
Universality: Very wide
The possibility of making mistakes: being convenient/thought to be useful

Work, modify, maintain other people's web page is commonplace, found that many people have a bad habit:
In the form of text or pictures, do you make it centered, left or right?

<div align= "center" > Hello!! </div>
<div align= "center" ></div>

When there are many forms, a lot of text, content is very fine, love with this method (it in the DW of the shortcut key is CTRL+ALT+C,FP do not know what) people tend to be crazy, miserable, I encountered such a Web page on the headache, why to use so much <div> to center it? Tell me Why? Does the table not have a center attribute? Why do you want to add this junk code? Special modification of the time also can not delete text or pictures can automatically clear

Recommended to use &LT;TD align= "center" > To center, when the need for multiple positioning, only to consider the <div align= "center", because this code is not good to deal with, so you can replace the table with a table.

3. Reuse code that implements the same function, or assorted code

The odds of making a mistake: very common
Universality: Very common
The possibility of making mistakes: complex and diverse

Let's take a look at the following code:
<center><p><font class= "css_id" ><font class= "font11" ><font color= "#CCCCCC" ><font Color= "#FFA76C" style= "font-size:14px;font-family: Official Script" > title </font></font></font>
</center> How do you think the code looks like? </font></p>

I don't know how the reader feels, and the first thing I see in this code is that I'm numb for 10 seconds, and this 10-second goal is to find a word that can express my thoughts and feelings. You want to ask me? sorry~~, I generally do not, because I do a Web page at least half the time in the browsing code, the code more than the wrong things I can see at a glance. )。

Look at the code above, use 2 class,4 font to define 2 text, in fact, such problems are often generated in the continuous changes, the code is not familiar, or lazy to see the code, or do not like to see the code of people who are particularly serious problems, of course, when the fact that others browse this page, There is no problem, but the maintenance of the people on the ...
These extra garbage code can be omitted completely, in fact, the above example is not serious enough, I have seen more terrible.

Another problem to be mentioned is <p>...</p> and <center>...</center> Why use them? Tell me why~~, some of them are like this:

<td><div align= "center" class= "css_id" >
<center>
<p align= "center" ></p>
<p align= "center" ><font class= "css_id" ><font class= "font11" ><font color= "#CCCCCC" ><font Color= "#FFA76C" style= "font-size:14px;font-family: Official Script" > title </font></font></font>
</center></td> How do you think the code looks like? </font></p></center></div></td>

See such a code I will be very helpless (more helpless is I often see, and must see), I would like to simplify:
&LT;TD align= "center" class= "css_id" >
<font color= "#FFA76C" style= "font-size:14px;font-family: Official Script" > title </font>
What do you think this code looks like? </td>

Does it seem that the world is quiet a lot? "title" After the completion of the text can be defined in the <td> class, even if not CSS, and then use more than one <.font> is no problem, as very refreshing.

4. Improper nesting of tables

The odds of making a mistake: general
Universality: Universal
The possibility of making mistakes: not knowing this

In fact, this is a street know how to smell the problem, but still someone committed, incorrect nested forms, may make you be the boss called to the office scolding a meal, will make you think the normal Web page with ADSL open 2, 3 minutes can not open.

The first question is to keep nesting tables in a large table, this will make it slow to open the page (although the current IE improve the problem, but it is not recommended), on the other hand, maintenance, modification is extremely inconvenient, in general, simple to apply is no problem, or even 3, 4 layers, But don't put everything in one form.

The second problem is to put all the content in a large table, which includes a free counter code, hehe, guess what might happen? In fact, it is not a big deal, the most serious is your IE like the crash, nothing shows. The solution is to put the counter in a single table, not with the other content in the same table.

5. When writing code indentation, instead of using the TAB key, use a space

The odds of making a mistake: general
Universality: Less
The possibility of making mistakes: I don't know the tab is better

This problem for JS, vbs, ASP, PHP and so on, HTML can not use the tab will write a little program to know what is called indentation, how to indent? Someone uses a space, someone uses the tab, if you are using a space, then from now on, switch to the tab bar.

The use of space has two great disadvantages: 1, the indentation speed is slow, the modification speed is slow. 2, increase the volume of the page, will affect the speed.

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.