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

This article mainly explains the "Web front-end coding principles introduction", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "Web front-end coding principles introduction"!

1. Make good use of DIV for layout

When developing a Web page, the first thing to consider is to distinguish the focus of the page. Enclose this content in DIV tags, and the page's code will be neat and well indented.

2. Separate HTML tags from CSS stylesheets

A good page should separate HTML tags from CSS stylesheets. This is a principle that every Web developer should know when he first comes into contact with Web development. However, to this day, there are still many developers who do not strictly follow this principle.

Do not embed stylesheet code in HTML tags. Developers should get into the habit of creating separate files to store CSS stylesheets. This will also make it easier for other developers to get the job done quickly when they modify your code.

3. Optimize the CSS code

Nowadays, it is common to add multiple CSS files to a website. However, when the site contains too many CSS files, it will slow down the response time of the site. The solution is to streamline the code and optimize multiple CSS files to merge them into one file. This method can significantly improve the loading speed of the website. In addition, there are many tools that can be used to optimize CSS files, such as CSS Optimizer, Clean CSS, and so on.

4. Optimize the JavaScript file and put it at the bottom of the page

Like CSS, it is common to add multiple Javascript files to a page. But this will also slow down the response speed of the site. To this end, developers should streamline and optimize these Javascript files.

However, unlike CSS, browsers generally do not support parallel loading. That is, when the browser loads the Javascript file, nothing else is loaded at the same time. As a result, the loading speed of the web page seems to be slower.

A good solution is to put the load order of the Javascript file last. To achieve this, developers can place Javascript code at the bottom of the HTML document, and the best place is close to the tag.

5. Make good use of the title element

The elements H2 to H7 are used to highlight the key content of the page. This helps users pay more attention to the key parts of the page. For blogs, I (the author of this article) recommend using H2 tags to highlight blog titles. Because the blog title is almost the most important part of the page.

6. Use the right HTML tag in the right place

HTML tags are the key to constructing a canonical content structure. For example, em tags are used to highlight key points. The p tag is suitable for highlighting paragraphs of articles. If you want to add blank lines between paragraphs, do not use the br tag.

For a set of related elements, it is recommended to use ul, ol, or dl tags. However, do not mistakenly use the blockquote tag, as it is originally used to define block applications.

7. Avoid abusing div tags

Not all block elements should be created with div tags. For example, you can add display:block to the attributes of an inline element and display it as a block element.

8. Use lists to create navigation

Using the ul list tag, coupled with the corresponding CSS style, you can create a beautiful navigation menu.

9. Don't forget to close the label

Now, whenever I recall the first lesson I learned about Web development in college, the importance of the HTML structure mentioned by the professor always comes to my mind. According to the W3C standard, labels should be closed. That's because, in some browsers, if the label is not closed according to the standard, there will be a problem of abnormal display. This is particularly true in IE6, 7 and 8.

10. Label lowercase syntax

It is an industry standard for labels to use lowercase syntax. Although uppercase syntax does not affect the display of the page, the readability of the code is poor. The following code is very unreadable:

11. Add an alt attribute to the picture tag

In img tags, the alt attribute is usually very useful. Because search engines are usually unable to grab image files directly. However, if the developer adds the description of the image to the alt attribute, it will be convenient for the search engine to crawl.

12. Use label and fieldset in the table

To improve the quality of the code and make it easy for users to understand the contents of the table, we should create table elements with label and fieldset tags.

13. Mark the browser compatibility code with information and separate it from each other

For a Web developer, cross-browser compatibility is a major concern. Usually, developers will code for different browsers, that is, CSS hack. However, if the developer can indicate which version of the browser the code is written by, it will bring great convenience for future maintenance work. Here is a good example:

14. Avoid excessive comments

As a developer, adding comments to your code is a good habit, which is easy to understand and easy to maintain. This is common in other programming languages such as PHP, JAVA, and C #. However, HTML/XHTML is a text markup language and is very easy to understand. Therefore, there is no need to add comments to each line of code.

15. Test code

It is recommended that developers use the W3C text tag verification service to test the code. It is an efficient testing tool that can help you find errors in the page. Moreover, it can also help you locate the corresponding code from the page error. This is usually difficult to do after coding is complete. However, developers should pay attention to that the verified code is not the code with excellent performance.

Thank you for your reading, the above is the content of "introduction of coding principles of Web front end". After the study of this article, I believe you have a deeper understanding of the introduction of coding principles of Web front end, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.