30 guidelines for compiling HTML code

ArticleDirectory

• 1. Be sure to close the HTML Tag
• 2. Declare the correct document type (doctype)
• 3. Do not use embedded CSS styles
• 4. Introduce all style sheet files in the head tab of the page.
• 5. Introduce JavaScript files at the bottom of the page
• 6. Don't use embedded Javascript. It's 21 centuries!
• 7. Perform standard verification at any time during development
• 8. Download firebug
• 9. Use firebug!
• 10. use lower-case tags
• 11. Use the H1-H6 label
• 12. For a blog, leave H1 to the title of the article.
• 13. Download yslow
• 14. Use ul list to layout navigation menus
• 15. Learn how to deal with IE
• 16. Use a good code editor
• 17. compress the front-end code!
• 18. reduction, reduction, and reduction
• 19. Add the alt attribute to all images
• 21. View Source Code
• 22. Define styles for all elements
• 23. Use third-party services
• 25. Learn Every HTML Tag
• 26. participate in community discussions
• 27. Use CSS Reset
• 28. Alignment Element
• 29. About PSD Slicing
• 30. Do not use the framework at will

This article summarizes 30 htmlCodeAs long as you keep them in mind and use them flexibly in the process of compiling HTML code, you will write beautiful code and enter the ranks of professional developers as soon as possible.

1. Be sure to close the HTML Tag

Previous pagesSource codeThe following statements are often seen:

 
<Li> some text here. <li> some new text here. <li> you get the idea.
 

We may have tolerated such non-closed HTML tags in the past, but in today's standards, this is very undesirable and must be completely avoided. Be sure to close your HTML Tag. Otherwise, the verification will fail and some unpredictable problems may occur.

It is best to use this form:

 
<Ul> <li> some text here. </LI> <li> some new text here. </LI> <li> you get the idea. </LI> </ul>
 

2. Declare the correct document type (doctype)

I have previously joined many CSS forums. If a user encounters problems, we recommend that you do two things first:

• 1. Verify the CSS file to solve all visible errors.
• 2. Add the doctype.

The doctype Definition tells the browser whether the page contains HTML, XHTML, or both before the HTML Tag appears, so that the browser can correctly parse the tag.

There are usually four types of documents to choose from:

1. <! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd"> 2. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> 3. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 

There are always different statements about the document type declaration to be used. It is generally considered that the strictest statement is the best choice, but research shows that most browsers use a common method to parse such statements, so many people choose to use the html4.01 standard. The bottom line for selecting a declaration is whether it is really suitable for you. Therefore, you need to consider the declaration that suits your project.

3. Do not use embedded CSS styles

When you write code in your head, you may often add some embedded CSS code, just like this:

 
<P style = "color: red;"> Palan image </P>
 

It seems convenient and no problem, but it will cause problems in your code.

When writing code, it is best to add the style code after the content structure is complete.

This encoding method is like guerrilla warfare. It is a very shanty practice. -- Chris coyier

A better way is to define the P style in the style sheet file:

 
Someelement> P {color: red ;}
 

4. Introduce all style sheet files in the head tab of the page.

Theoretically, you can introduce CSS style sheets at any position. However, we recommend that you add HTML standards to the head mark of a webpage to speed up page rendering.

During Yahoo's development, we found that introducing a style sheet to the head label will speed up webpage loading, because this will gradually render the page. -- Yslow team

 
<Head> <title> my favorites kinds of corn </title> <LINK rel = "stylesheet" type = "text/CSS" Media = "screen" href = "path/ /file.css "/> <LINK rel =" stylesheet "type =" text/CSS "Media =" screen "href =" path/to/anotherfile.css "/> 
 

5. Introduce JavaScript files at the bottom of the page

Remember that the principle is to make the page appear in front of the user as quickly as possible. When a script is loaded, the page stops loading until the script is fully loaded. Therefore, it will waste more time for users.

If your JS file only needs to implement some functions (such as clicking a button event), you can safely introduce it at the bottom of the body. This is definitely the best method.

Example:

<P> and now you know my favorite kinds of corn. </P> <SCRIPT type = "text/JavaScript" src = "path/to/file. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "src =" path/to/anotherfile. JS "> </SCRIPT> </body> 
 

6. Don't use embedded Javascript. It's 21 centuries!

Many years ago, there was another way to add JS Code directly to HTML tags. This is especially common in simple image albums. Essentially, an "onclick" event is appended to a tag, and its effect is equivalent to some JS Code. There is no need to discuss too much. We should not use this method. We should transfer the code to an external JS file, and then use "addeventlistener/attachevent" to add the time listener. Or use the "Clock" method of jquery and other frameworks.

 
$ ('A # morecorninfolink '). Click (function () {alert ('want to learn more about corn? ');});
 

7. Perform standard verification at any time during development

Many people do not really understand the significance and value of standard verification. I have analyzed this issue in detail in a blog. In a word, standard verification serves you, not for your troubles.

If you are creating a webpage, we strongly recommend that you download this webpage development toolbar and use "HTML standard verification" and "CSS standard verification" at any time during the coding process ". If you think that CSS is a very studious language, it will save your life. Your less rigorous code will expose your pages and cause continuous problems. A good method is verification, verification, and verification.

8. Download firebug

Firebug is a well-deserved plug-in for web development. It not only debugs JavaScript, but also intuitively shows you the attributes and locations of page tags.

9. Use firebug!

According to my observation, most users only use the firebug 20% function, which is a waste of time. You may wish to spend a few hours to systematically study this tool. I believe it will help you get twice the result with half the effort.

Firebug tutorial:

• Overview of firebug
• Debug JavaScript with firebug-video tutorial

10. use lower-case tags

Theoretically, you can write a tag as casually as follows:

 
<Div> <p> Here's an interesting fact about corn. </P> </div>
 

It is best not to write like this. It is useless to input more letters, and it will make the code very ugly, so it is very good:

 
<Div> <p> Here's an interesting fact about corn. </P> </div>
 

11. Use the H1-H6 label

I suggest you use all six types of tags on the webpage. Although most people only use the first four tags, the most frequently used h has many advantages, such as device-friendly and search engine-friendly, replace all your P tags with H6.

12. For a blog, leave H1 to the title of the article.

Today, I initiated a discussion on Twitter: whether to define H1 on the logo or on the title of the article. 80% of the people selected the latter.

Of course, the specific use depends on your needs, but I suggest you set the title of the article to H1 when creating a blog, which is very good for search engine optimization (SEO.

13. Download yslow

Over the past few years, Yahoo's team has done a lot of great work in the front-end development field. Not long ago, they released a firebug extension called yslow, which analyzes your <webpage and returns a "transcript", which carefully analyzes all aspects of the webpage, although it is a little harsh, it will definitely be helpful for you to propose the areas for improvement. We strongly recommend-yslow!

14. Use ul list to layout navigation menus

Generally, a website has a navigation menu, which can be defined as follows:

 
<Div id = "nav"> <a href = "#"> Home </a> <a href = "#"> about </a> <a href = "# "> contact </a> </div>
 

If you want to write beautiful code, you 'd better not use this method,

Why use ul to layout navigation menus?

-- Because Ul was born to prepare the definition list

It is best to define this as follows:

<Ul id = "nav"> <li> <a href = "#"> Home </a> </LI> <li> <a href = "#"> about </a> </LI> <li> <a href = "#"> contact </a> </LI> </ul>
 

15. Learn how to deal with IE

IE has always been a nightmare for front-end developers!

If your CSS style sheet has been finalized, you can create a style sheet for IE separately, and this will only take effect for IE:

 
<! -- [If lt IE 7]> <LINK rel = "stylesheet" type = "text/CSS" Media = "screen" href = "path/to/ie.css"/> <! [Endif] -->
 

This Code indicates that, if the user's browser is IE6 or earlier, the code will take effect. If you want to include IE7, change "[If lt IE 7]" to "[If lte ie 7]".

16. Use a good code editor

Whether you are a Windows or Mac user, there are many excellent editors for you to choose from:

Mac user

• CoDA
• Espresso
• Textmate
• Aptana
• Dreamweaver cs4

PC users

• Intype
• E-Text Editor
• Notepad ++
• Aptana
• Dreamweaver cs4

17. compress the front-end code! Javascript compression Service

• Javascript Compressor
• JS Compressor

CSS compression services

• CSS optimiser
• CSS Compressor
• Clean CSS

18. reduction, reduction, and reduction

Looking back at the first page most of us write, we will surely find a serious "divitis". Generally, the instinct of beginners is to wrap a paragraph with a div, add more Div to control positioning. -- In fact, this is an inefficient and harmful method.

After the web page is written, you must check the page multiple times to minimize the number of elements.

Do not deploy the list with UL layout by Div.

Just as the key to writing an article is "reduction, reduction, and reduction", writing pages must follow this standard.

19. Add the alt attribute to all images

The advantage of adding the alt attribute to the image is self-evident-This allows users who disable the image or use special devices to have access to your Wang Ye information and is friendly to image search engines.

Firefox does not support displaying the alt attribute of an image. You can add the title attribute:

20. Learn to stay up late

I often study and work in the early hours without knowing it. I think this is a good situation.

My "Ah ~ Ha !" Time ("ah-ha" moments refers to the time when it comes to the dark or open-minded scenes) usually occurs in the middle of the night. For example, I fully understand the concept of "closure" in Javascript, that is, in such a situation. If you have never felt such a wonderful moment, try it now!

21. View Source Code

Nothing can help you learn HTML faster than imitating your idol. At first, we had to work as photocopiers, and then gradually developed our own style. Study your favorite website page code to see how they are implemented. This is the only way to go. You must give it a try. Note: they only learn and imitate their encoding styles, rather than copying and copying them!

Pay attention to the various cool JavaScript effects on the network. If a plug-in appears to be used, you can find the plug-in name based on the file name in the head tag in its source code, then you can learn how to use it for your own purposes.

22. Define styles for all elements

This article is especially necessary when you create other corporate websites. Do you use BLOCKQUOTE flag yourself? So the user may use it. Do you use ol on your own? The user may also. Take the time to make a page, show the UL, ol, P, h1-h6, blockquotes, and so on element style, check whether there are omissions.

23. Use third-party services

Note: the original English text is titled "using Twitter"

Many APIs that can be added to webpages for free are popular on the Internet. These tools are very powerful. It can help you implement many clever functions, and more importantly, it can help you publicize the website.

24. learn Photoshop

Photoshop is an important tool for front-end engineers. If you are familiar with HTML and CSS, learn more about photshop.

1. Psdtuts + has many English ornaments. Tutorial: videos Section
2. There are also a large number of tutorials for lynda.com, but you have to pay $25.
3. "You suck at photoshop" series of tutorials
4. It takes several hours to learn the shortcut key operations of Photoshop.

25. Learn Every HTML Tag

Although some HTML tags are rarely used, you should still understand them. For example, "abbr" and "cite", you must learn them for emergency purposes.

26. Participate Community Discussion

There are many excellent resources on the Internet, and many experts are also hidden in the community. You can learn by yourself and consult experienced developers.

27. Use CSS Reset

CSS reset is also a reset CSS, which is to reset some HTML Tag styles, or the default styles.

There is also a heated debate on whether CSS reset should be used on the Internet. I suggest using it. You can first select some mature CSS reset, and then gradually evolve into a suitable one.

28. Alignment Element

Simply put, you should align your webpage elements as much as possible. You can observe your favorite websites. Their logos, titles, charts, and paragraphs must be very neat. Otherwise, it will appear chaotic and unprofessional.

29. About PSD Slicing

Now that you have mastered HTML, CSS, and Photoshop knowledge, you also need to learn how to convert PSD to images and backgrounds on webpages. Below are two good Tutorials:

• Slice and dice that PSD
• From PSD to HTML/CSS

30. Do not use the framework at will

JavaScript and CSS have many excellent frameworks, but if you are a beginner, do not rush to use them. If you haven't mastered CSS, using the framework will confuse your knowledge system.