30 best practices and 30 best practices for beginners of HTML
1. Keep tags closed
In the past, we often saw code similar to the following ......) :
<li>Some text here. <li>Some new text here. <li>You get the idea.
Note that the UL/OL label of the outer package is missing (who knows whether it is intentional or unintentional), and the LI label is also forgotten. According to today's standards, this is an obvious bad practice and should be avoided by 100%. In short, keep the closed tag. Otherwise, you may encounter problems when verifying html tags.
Better Way
<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
I have previously joined many CSS forums. Whenever a user encounters problems, we recommend that you do the following:
1. Verify the CSS file to ensure there are no errors.
2. confirm that the correct doctype is added.
DOCTYPE appears before the HTML Tag. It tells the browser whether the page contains HTML, XHTML, or both, so that the browser can correctly parse it.
There are usually four types of documents to choose from:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!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. Never use inline stylesWhen you write code in your head, you may often add a little bit of css code in the line, just like this:
<p>#someElement > p { color: red; }4. Put all external css files in the head tag
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 style sheets in the head label will speed up webpage loading, because this will gradually render the page. -- YSlow team
5. Place the javascript file at the bottomRemember 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 and executed. 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.
Suggestions
<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. Never use inline javascript. It's not 1996 now!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 event listener. Or use jquery and other frameworks, you only need to use the "click" method.
$('a#moreCornInfoLink').click(function() { alert('Want to learn more about corn?'); });7. Development and VerificationMany 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, verification is for your service, not for your troubles.
If you are just starting to create Web pages, we strongly recommend that you download the Web Developer Toolbar (chrome users should search in the app store by themselves, and ie users may have a cup of cake ), "HTML standard verification" and "CSS standard verification" are used at any time during the encoding 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 firebugFirebug 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. Needless to say, download it!
9. Use firebugAccording 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.
Resources
Theoretically, html is case-insensitive and can be written at will, for example:
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
But it is better not to write it like this. It is useless to input large letters, and it will make the code very ugly.
Suggestions
<div> <p>Here's an interesting fact about corn. </p> </div>11. Use H1-H6 labels
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. When writing 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. It will analyze your webpage and return 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 unordered list (UL) to package the navigation menu
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 IEIE 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. Select the appropriate IDE
Whether you are a Windows or Mac user, there are many excellent editors for you to choose from:
Mac user
By compressing your CSS and Javascript files, you can reduce the total size by about 25%, but do not need to be compressed during development. However, once the website is complete, use some network compression programs to save more or less bandwidth. Some tools are listed below.
Javascript compression Service
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 imagesThe 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.
Bad practices
Better Practices
20. All night long
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 elementsThis 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
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. Master Photoshop
Photoshop is an important tool for front-end engineers. If you are familiar with HTML and CSS, learn more about Photshop.
25. Learn Every HTML TagAlthough some HTML tags are rarely used, you should still understand them. For example, "abbr" and "cite", you must learn them for emergency purposes.
By the way, if you are not familiar with the above two labels, you can refer to the following explanation:
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 reset.cssCss 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.
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baselinebaseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
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 slices
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:
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. Although you may say javascript and jQuery can be learned by colleagues, they are not suitable for css. I personally advocate the 960 CSS mesh framework, and I often use it. If you are a beginner of css, learning the framework will only make you more confused.
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
