Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the neat code at the front end of Web?" interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what neat code is there in the front end of Web?"

I. DOCTYPE's statement

If we want to do something well, we must first know what rights we have to do, such as the "DOCTYPE" statement, we do not need to discuss whether to use HTML4.01 or XHTML1.0 or the current HTML5 provides a strict version or transition version, which can well support the code we write:

Since our current layout does not require a table layout to make a good layout, we can consider using a strict "DOCTYPE" instead of a transitional one. For backward compatibility, I recommend using HTML5's declaration mode:

To learn more about this, you can click:

W3C: Recommended DTDs to use in your Web document

Fix Your Site With the Right DOCTYPE!

No more Transitional DOCTYPEs, please

Character set and coded characters

At the beginning of each page, we set the character set in, and we all use "UTF-8" here.

And when we write a page, we often encounter symbols like "&", so we shouldn't write "&" directly on the page:

We should use character encoding in our code, such as "&" we should use "&" instead of it in our code.

To learn more about this, you can click:

Wikipedia: UTF-8

A tutorial on character code issues

The Extended ASCII table

Third, correct code indentation

In page editing, whether the indentation of the code is correct or not, it will not affect any function of your website, but if you do not have a standard indentation principle, it will make the person who reads your code very angry. So correct code indentation can enhance your code readability. The indentation of the standard program should be a tab (or a few spaces). Let's take a look at the picture at the beginning of the article, or let's take a look at the picture shown below. You will know how to write your code in the future to make people feel good:

Needless to say, everyone likes the kind of code below. This is just a matter of one's habits, but it is suggested that it should be done well from the beginning to benefit others and themselves. For more information on this, you can also refer to: Clean up your Web pages with HTML TIDY

Fourth, link your CSS style and Javascript script

There are many ways to write CSS styles in the page, some of which directly put the style into the "" of the page, which will be a very bad habit, because this will not only mess up our tags, but also these styles are only suitable for this HTML page. So we need to propose the CSS separately and save it externally, so that the later pages can also be linked to these styles, and if your page needs to be modified, we only need to modify the style file. As shown in the following figure:

What we are talking about above is just the style, but in fact, the javascript script is the same as the CSS style. The picture and text also said that what I finally want to express is "in the production of web pages, try to put your CSS style and javascript script in a separate file, and then reference these files by link. The advantage of this is that it is convenient for your style and script to be managed and modified."

Fifth, correct nesting of labels

When we write HTML, we always need hierarchical nesting of tags to help us write HTML, but there are certain rules for the nesting of these HTML. If we want to talk about it in detail, we may have to describe it in several chapters, so what I want to say here today is that we should not make the following super mistakes when writing HTML:

The structure of the image above is common to us, such as the title of the home page, so we should note that we can't put "" in the "" tag, in other words, we can't put block elements in inline elements. The above is just an example. I just hope that everyone should not make such a super mistake in their usual production.

Delete unnecessary tags

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

The image above is obviously the production of a navigation menu. In the example above: a "div#topNav" wraps the list "ul#bigBarNavigation", while the "div" and "ul" lists are block elements, and adding "div" here to wrap "ul" does not help at all. Although the emergence of "div" has brought great benefits to us in making web pages, there is no need for us to misuse it everywhere. I wonder if you usually pay attention to such details. I made such a mistake, if you have had the same experience, then from today, from now on, we will work together to correct such a mistake.

For information about how to use the tag correctly, if you are interested, you can click: Divitis: what itis, and how to cure it.

7. Use better naming

The naming here is to define the class name or ID name for the relevant elements in your page, many students have this habit, for example, an element has a red font, add "red" to it, or even write "left-sidebar" in the layout, but have you ever thought that if this element defines "red", the customer will ask to use "blue" in a few days? Or, at that time, the "left-sidebar" sidebar does not want to be placed on the left, but on the right, so our previous naming can be said to have no meaning at all, as shown in the following figure:

Then it is very important to define a good name, not only can you read your code, but also others can easily read your code, such as a good class name and ID name "mainNav", "subNav", "footer", etc., he can describe what is included. What about the bad ones, such as what I said earlier.

To learn more about this, you can click:

Standardizing CSS class and id names

CSS Tip # 2: Structural Naming Convention in CSS

CSS coding: semantic approach in naming convention

CSS Naming Conventions and Coding Style

8. Leave the version of CSS

When we design menus, we sometimes require all menu options to be capitalized. Do you usually set them to uppercase directly in the HTML tag? If so, I don't think so. In order to have better scalability in the future, we should not set them to all uppercase in HTML. A better solution is to implement them through CSS:

9. The name of the defined class or ID

We usually do not know if you have encountered such a problem when making web pages, that is, you stand down and use the same layout and structure, in other words, you use the same structure and the same class name on the layout of the page, but suddenly your supervisor says that to meet the needs of customers, the layout of a page needs to be exchanged between the sidebar and the main content. At this time, you do not want to change the structure of the entire page in order to change the layout, there is a good solution is to define a special class name or ID name in the "" on your page, so that you can easily achieve what you want. I don't know if you have ever used this kind of use:

It is very powerful to give "" a unique class and ID name, not only to help you change the layout as above, but also to help you achieve special effects on one part of the page without affecting the effects of other pages. Why there is such a function, I do not need to say that I think everyone knows. Because the content of each page is a descendant element of "".

To learn more about this, you can click:

ID Your Body For Greater CSS Control and Specificity

Case study: Re-using styles with a body class

Verify your code

People inevitably make mistakes, and it's the same when we write code, sometimes you always write lowercase or more, for example, you forget to close your element tag and don't remember to write the necessary attributes of the element. although there are some mistakes will not bring you any catastrophic consequences, but will inevitably bring you mistakes you can not expect. So it is recommended that you verify your code when you finish writing it. Validated code is always better than unvalidated code:

In order to effectively verify your code, we can use the relevant tools or browser plug-ins to help us complete. If there is nothing wrong with your code, the W3C verification tool will display green text in front of you, which makes you extremely exciting because it proves once again that the code you write can stand up to W3C standards.

To learn more about this, you can click:

The W3C Markup Validation Service

XHTML-CSS Validator

Free Site Validator (checks entire site, not just one page)

Eleventh. Logical order

This is a rare error situation, because I don't think people will disturb the logical order when writing pages. In other words, if possible, let your site have a logical order that is *. For example, write the page header first, write the page body, and write the footer. Of course, sometimes there are special situations where the footer lies above the sidebar of our code, which may be because it best suits your website design needs, which may be understandable, but if you have other ways to achieve it, we should all put the footer on a page and then use specific technology to make it meet your design requirements:

At this point, I believe you have a deeper understanding of "what is the neat code at the front end of Web?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.