How to standardize the HTML code for a large web site __html

Write a Web page just like we build a house, the foundation is strong and the house won't fall. Similarly, we make Web pages as well, a good HTML structure is the beginning of a Web site, good CSS only exist in the same good HTML, so a clean, semantic HTML has a lot of advantages, then in peacetime, how do we standardize the HTML code of large Web sites?

1, DOCTYPE's statement

If we want to do a good job, we should first know what rights we have to do, as the "DOCTYPE" statement on the Web page, We don't have to talk about whether we're using HTML4.01 or XHTML1.0, or the current HTML5 offers a rigorous version or a transitional version, which supports the code we write:

Since our present layout does not require a table layout to make a good layout, then we can consider using a rigid "DOCTYPE" without the transition type, and for backwards compatibility, Ma Haixiang recommends using the HTML5 declaration pattern:

<! DOCTYPE html>

2, character set and encoded characters

At the beginning of each page, we set the character set in

<meta charset= "UTF-8"/>

And we usually write in the page, often encounter the "&" such symbols, Ma Haixiang that we should not directly on the page to write "&", as shown in the following figure:

We should use character encoding in our code, for example, "&" We should use "&amp;" in our code. To replace it.

3, the correct code indentation

In the page edit, the code indentation is not correct, he will not affect your site any function, but if you do not have a standard indent principle, so that people read your code is very angry, so the correct code indentation can enhance your code readability.

The indentation of a standard program should be a tab character (or several spaces), and we'll take a look at the diagram shown below, and you'll know how to write your own code later:

Needless to say, everyone likes the code below. It's just a matter of habit, but Ma Haixiang's advice is to do it right from the start, for the benefit of the people.

4, CSS styles and JavaScript scripts

There are a number of ways to write CSS styles in a page, and some will put styles directly into the "

So, we need to put the CSS separately, save in the external, so that the following pages can also link to these styles, if you need to modify the page, we will only need to modify the style file. As the following illustration shows:

What we're talking about here is style, but JavaScript scripts are the same as CSS styles.

So, Ma Haixiang suggests that in making a Web page, try to put your CSS style and JavaScript scripts in a single file, and then refer to these files by linking, the best thing to do is to facilitate the management and modification of your style and scripts.

5, the right label nesting

When we write HTML, we always need the level nesting of tags to help us complete the HTML writing. But these HTML nesting has certain rules, if we want to elaborate, we may have several chapters to describe, so what I want to say here today is that we should not make the following super error in writing HTML:

The structure of the above figure we are common, such as the title of the first page, then we should pay attention to, we should not put "

Of course, the above is just an example, just hope that everyone in peacetime production should not make such a super mistake.

6, delete unnecessary labels

First, let's look at a screenshot of an instance:

The above figure is obviously a navigation menu production, in the example above: there is a "div#topnav" wrapped in the list "Ul#bigbarnavigation", and "div" and "ul" List are block elements, plus "div" here to pack "UL" It doesn't have any effect at all.

Although the "div" of the emergence of the production of our web page has brought great benefits, but we do not need to go around such a disorderly use, do not know whether we usually pay attention to such details. I was making such a mistake, if you have had this experience, then from today, from now on, we work together to correct such mistakes, of course, you can also do a good job of building a site guide (specifically to see the Ma Haixiang blog, "How to create a Web site or application of the style guide and standards," the relevant introduction).

7, use a better name

The name described here is to give the relevant elements in your page to define the class name or the ID name, many students have this kind of habits, such as an element of the font is red, to add "red", and even the layout is written "Left-sidebar", but you have not thought, if this element defines " Red "After a few days the customer asked to use the" blue "it. Or, then, the "Left-sidebar" sidebar doesn't want to be on the left at the moment, but wants to put it on the right, so that the name we have in front of it is meaningless, as shown in the following illustration:

Then it's very important to define a good name, not only can you understand your code, but also others can easily read your code, such as a good class name and ID name "Mainnav", "Subnav", "footer" and so on, he can describe the things involved. It's not good, like what you said earlier.

8, leaving the version of the CSS

When we are designing a menu, we sometimes require all the text in all menu options to be capitalized, and they are usually set to uppercase in HTML tags.

If so, I feel bad, if in order to have better extensibility in the future, we should not set them to all uppercase in HTML, the better solution is through CSS to implement, as shown in the following figure:

9, the definition of <body> class name or ID name

We usually make a Web page do not know whether there is a problem, is the whole station down, using the same layout and structure, in other words, you use the same structure in the layout of the page, the same class name, but suddenly your supervisor said that in response to customer demand, The layout of a page requires a swap of sidebar and main content.

At this point you do not want to change the layout of the entire page to modify the structure, at this time there is a good solution to the page in your "<body>" in the definition of a special class name or ID name, so you can easily achieve the needs you want. This use, do not know that you have used no:

Defining a unique class and ID name for "<body>" is very powerful, not just to help you change the layout like the above, but the main thing is sometimes he can help you achieve a certain part of the page to achieve special effects without affecting the other pages of the effect.

Why there is such a function, I do not want to say I think we all know, because the content of each page is "<body>" descendant elements.

10. Verify Your code

People make mistakes, and we write code the same way, you sometimes write lowercase or more, for example, forget to close your element tag, do not remember to write the elements must be the attributes, although there are some mistakes will not give you some disastrous consequences, but it will inevitably bring you can not estimate the error. So it is recommended that you write the code to verify your code, so as to avoid the following error:

For an effective validation of your code, we can use the relevant tools or browser Plug-ins to help us complete. If your code doesn't have any errors, the Web Verification tool will present you with green text in front of you, which makes you incredibly exciting, because it proves once again that the code you write can stand up to the standards of the consortium (in this case, it is recommended that you look at the Ma Haixiang Blog's "20 Functional codes commonly used in page production").

11. Logical Order

This is a very rare error situation, because I think that you will not be able to write the pages of the logical order, in other words, if possible, let your site have a logical order is the best, such as first write the page, in the page body, the last to write a footer.

Of course, sometimes also encounter special circumstances, how the footer part of our code in the sidebar above, this may be because it is the most suitable for your website design requirements, it may be understandable, but if you have other ways to achieve, we should put the footer is at the end of a page, Then make it to your design needs through a specific technique:

12, adhere to good HTML code rules

I've summed up a lot more concise principles for writing HTML code here, it's going to be a good start, but there's more. When you try to fix your current code, you may find it difficult, and it can be much easier if you are completely learning from scratch. Anyway, it's important that you learn how to write good html and stick to it.

The next time you write an HTML code project, remember these concise principles, Just do what you can,you ' ll do better.

It might be easy to get you started with a project, but it would be a lot harder if you needed to fix an existing code. So we're going to learn how to write a good, neat HTML code, and stick to that writing all the time.

Excerpt from: http://www.mahaixiang.cn/html/648.html