This article summed up 30 HTML code writing guidelines, as long as in the process of writing HTML code to remember them, flexible use, you will certainly write a beautiful code, as soon as possible into the ranks of professional developers.
1. Be sure to close the HTML tag
In the previous page source code, often see such a statement:
Some text here. Some new text here. You get the idea. We may have tolerated such a closed HTML tag in the past, but in today's standards it is highly undesirable and must be avoided. Be sure to close your HTML tags, or you will not be able to pass the validation, and there are some difficult to foresee problems.
It is best to use this form:
- Some text here.
- Some new text here.
- You get the idea.
2. Declare the correct document type (DocType)
The author had previously joined many CSS forums, where, if a user encountered a problem, we would suggest that he do two things first:
DOCTYPE defines that before an HTML tag appears, it tells the browser whether the page contains a html,xhtml or a mixture of both, so the browser can parse the tag correctly.
There are usually four types of documents to choose from:
1.
2.
3.
4.
There is always a different story about what type of document you should use to declare. The most restrictive statements are generally considered the best choice, but studies have shown that most browsers use a common way of parsing such claims, so many people choose to use the HTML4.01 standard. The bottom line of the selection statement is whether it is really right for you, so you have to take a comprehensive look at the statement that fits your project.
3. Do not use embedded CSS style
When you're writing code, you may be able to add a bit of embedded CSS code, just like this:
网页教学网
This may seem convenient and no problem, but it will create problems in your code.
When you start writing code, it's best to start adding the style code after the content structure finishes.
This kind of coding is like guerrilla, is a very cottage practice. --chris Coyier
A better approach is to define this p style in the stylesheet file:
someElement > p {
color: red;
}
4. Introduce all the style sheet files in the page head tag
Theoretically, you can introduce CSS stylesheets anywhere, but the HTML specification is recommended to be introduced into the head tag of a Web page, which speeds up the rendering of the page.
In the course of Yahoo's development, we found that the introduction of style sheet in the head tag will speed up the loading speed of the Web page.
Because this allows the page to be rendered progressively. --yslow Team
My Favorites Kinds of Corn
5. Introduce JavaScript files at the bottom of the page
One principle to remember is to make the page appear in front of the user at the fastest speed. When a script is loaded, the page suspends loading until the script is fully loaded. So it would be a waste of the user's time.
If your JS file is only to implement certain functions, (such as click on button events), it is safe to introduce it at the bottom of the body, this is absolutely the best way.
For example :
And now you know my favorite kinds of corn.
6. Do not use embedded JavaScript, this is 21st century!
Many years ago, there was a way to add JS code directly to the HTML tag. This is especially true in simple photo albums. Essentially, an "onclick" event is attached to the label, and its effect is equivalent to some JS code. No need to discuss too much, should not use such a way, should transfer the code to an external JS file, and then use "addeventlistener/attachevent" to add time listeners. or using frameworks such as jquery, it needs to use its "clock" approach.
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});
7. At any time in the development of standard validation
Many people do not really understand the meaning and value of standard verification, the author in a blog detailed analysis of this problem. In a word, standard verification serves you, not trouble you.
If you've just started making Web pages, it's highly recommended that you download the Web Development toolbar and use the HTML standard validation and CSS standard validation in the coding process. If you think that CSS is a very studious language, then it will put you in the whole. Your imprecise code will make your pages porous and problematic, and a good way to do that is to verify, verify, and verify.
8. Download Firebug
Firebug is a well-deserved web development best plug-in, it can not only debug JavaScript, but also intuitive to let you know the page tag properties and location. Needless to say, download it!
9. Use of firebug!
According to the author observation, most users only use the function of Firebug 20%, it is too wasteful, you might as well spend a few hours to learn this tool system, I believe it will make you more effort.
Firebug Tutorial :
10. Use lowercase tags
In theory, you can write a marker like this:
Here's an interesting fact about corn.
It's best not to write it, it's no use trying to type big letters, and it makes the code look bad:
Here's an interesting fact about corn.
11. Use the H1–h6 label
I suggest you use all six kinds of tags in the Web page, although most people will only use the first four, but the most use of H will have a lot of benefits, such as equipment friendly, search engine friendly and so on, you can replace the P tag for H6.
12. If it's a blog, leave the H1 to the title of the article
Today, I started a discussion on Twitter : Is it time to define the H1 to the logo or to the title of the article, 80% of the people chose the latter.
Of course the specific how to use depends on your needs, but I suggest you build a blog, the article title as H1, which for search engine optimization (SEO) is very good.
13. Download YSlow
In 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 < Web page and returns a "transcript" that details all aspects of the page and suggests areas for improvement, although it's a bit harsh, but it's definitely helpful, highly recommended Yslow!
14. Use the UL List layout navigation menu
Usually the Web site will have a navigation menu that you can define in this way:
If you want to write beautiful code, it's best not to use this way,
Why to use the UL layout navigation menu?
--because UL was born to define a list.
It's best to define this:
15. Learn how to deal with IE
IE has always been a front-end developer's nightmare!
If your CSS style sheet is basically stereotyped, then you can create a stylesheet for IE, which is only valid for IE:
The code means: if the user's browser is IE6 and below, then this code will not take effect. If you want to include IE7, then change "[If LT ie 7]" to "[if LTE IE 7]".
16. Use a good Code editor
Whether you are a Windows or a Mac user, there are a number of excellent editors available for you to choose from:
MAC Users
PC Users
17. Compress Front End code!
Javascript Compression Services
CSS Compression Services
18. Reduce, shrink, shrink
Looking back at the first page that most of us have written, we will definitely find a serious "div fetish" (divitis), usually a beginner's instinct is to wrap a paragraph in div and then put more div in place to control the location. This is actually a inefficient and harmful approach.
After the page is finished, be sure to check back several times to minimize the number of elements.
Can use the list of UL layout do not use a div to layout.
Just as the key to writing an article is "shrinking, shrinking, shrinking," the same criteria should be followed for writing pages.
19. Add alt attribute to all pictures
The benefits of adding Alt attributes to a picture are self-evident--this allows users who disable pictures or use special devices to have access to your Rajah information and to search engine friendly images.
Firefox does not support displaying the image alt attribute, you can add the title attribute:
I often unconsciously learn to work until the wee hours, I think this is a very good situation.
my "Ah ~ ha! "Time" ("ah-ha" moments, meaning the moment of change or insight) usually happens late at night, such as I thoroughly understand JavaScript's "closure" concept, in such a case. If you haven't felt this wonderful moment yet, try it now!
21. View Source Code
Nothing can make you learn HTML faster than imitating your idol. At first, we all want to do the copier, and then slowly have to develop their own style. Study your favorite Web page code to see how they are implemented. This is the only way to master, you must try. Note: Just learn and imitate their coding style, instead of copying and copying!
Watch out for all the cool JavaScript effects on the web, and if it looks like you're using a plugin, you can find the plugin name based on the file name in the head tag in the source code, and then you can learn it for your own use.
22. Define styles for all elements
This one is especially necessary when you are making other corporate websites. You don't use blockquote tags yourself? That user may use, you do not use OL? Users may also be. Take time to do a page, showing the UL, OL, P, H1-h6, blockquotes, and so on the elements of the style, check whether there are omissions.
23. Use of third party services
The original English title is "using Twitter"
There are many APIs on the Internet that are free to add to Web pages, and these tools are powerful. It can help you achieve a lot of clever features, and more importantly, can help you promote the site.
24. Learn Photoshop
Photoshop is an important tool for front-end engineers, if you have mastered HTML and CSS, you might as well learn more about Photshop.
25. Learn each HTML tag
Although some HTML tags are rarely used, you should still know them. such as "abbr", "cite" and so on, you must learn them for a rainy.
26. Participation in community discussions
There are a lot of good resources on the Internet, and there are many masters in the community, where you can learn from yourself and ask experienced developers.
27. Use CSS Reset
CSS reset also reset CSS, is to reset some HTML tag style, or the default style.
About whether you should use CSS Reset, there is a heated debate on the internet, the author is recommended to use. You can first choose some mature CSS Reset, and then slowly evolve into the appropriate.
28. Align elements
In short, you should try to align your page elements as much as possible. You can look at your favorite sites, their logo, title, chart, paragraph must be very neat. Otherwise it would appear confusing and unprofessional.
29. About PSD Slices
Now that you have the knowledge of HTML, CSS, and Photoshop, you'll also need to learn how to convert PSD to pictures and backgrounds on the web, and here are two good tutorials:
30. Do not use the framework freely
JavaScript and CSS have many good frameworks, but if you're a beginner, don't rush to use them. If you haven't mastered the CSS, using the framework will confuse your knowledge system.
CSS frameworks are designed for skilled developers, which can save them a lot of time.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
