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

This article mainly shows you the "HTML coding skills", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the HTML coding skills" this article.

1. Be sure to close the HTML tag

In previous page source code, you often see statements like this:

Some text here.

Some new text here.

You get the idea.

Maybe we could tolerate such unclosed HTML tags in the past, but by today's standards, it is very undesirable and must be 100% avoided. Be sure to close your HTML tags, otherwise you will fail the verification and are prone to unforeseen problems.

It is best to use this form:

Some text here.

Some new text here.

You get the idea.

two。 Declare the correct document type (DocType)

The author has joined many CSS forums earlier, where if a user has a problem, we will advise him to do two things first:

1. Verify the CSS file and resolve all visible errors

two。 Plus document type Doctype

DOCTYPE is defined before the HTML tag, which tells the browser whether the page contains HTML,XHTML or a mixture of both, so that the browser can parse the tag correctly.

There are usually four document types to choose from:

1.

two。

3.

4.

There have always been different opinions about what kind of document type declaration should be used. It is generally believed that using the strictest declaration is the best choice, but studies have shown that most browsers parse such claims in a normal way, so many people choose to use the HTML4.01 standard. The bottom line of choosing a declaration is whether it is really right for you, so you have to take it into consideration to choose a statement that suits your project.

3. Do not use embedded CSS style

When you are immersed in writing code, you may often add a little embedded css code easily or lazily, like this:

Home of the stationmaster

This looks convenient and no problem, but it can cause problems in your code.

When you start writing code, it's best to start adding style code after the content structure is complete.

This kind of coding is like fighting guerrillas, which is a very fake practice. -- Chris Coyier

Even better, define the style of this P in the stylesheet file:

SomeElement > p {

Color: red

}

4. Introduce all stylesheet files into the head tag of the page

In theory, you can introduce CSS stylesheets anywhere, but the HTML specification suggests introducing them into head tags on web pages to speed up the rendering of the page.

In the course of Yahoo's development, we found that introducing stylesheets into the head tag speeds up the loading of the page because it allows the page to render gradually. -- ySlow team

My Favorites Kinds of Corn

5. Introduce the javascript file at the bottom of the page

Keep in mind that the principle is to make the page appear to the user as quickly as possible. When a script is loaded, the page pauses loading until the script is fully loaded. So it will waste users more time.

If your JS file is only intended to perform certain functions (such as a button click event), it is definitely the best way to introduce it at the bottom of the body.

For example:

And now you know my favorite kinds of corn.

6. Do not use embedded JavaScript, this is the 21st century!

Many years ago, there was a way to add JS code directly to the HTML tag. It is especially common in simple photo albums. In essence, a "onclick" event is attached to a tag and has the same effect as some JS code. You don't need to discuss much, and you should not use this approach very much. You should transfer the code to an external JS file, and then use "addEventListener / attachEvent" to add a time listener. Or use a framework such as jquery, which requires its "clock" method.

$('aximoreCornInfoLink'). Click (function () {

Alert ('Want to learn more about corn?')

});

7. Standard verification is carried out at any time in development.

Many people do not really understand the significance and value of standard verification, and the author analyzed this issue in detail in a blog post. In a word, standard verification is for you, not for you.

If you are new to web design, it is strongly recommended that you download this web development toolbar and use "HTML Standards validation" and "CSS Standards Verification" at any time in the coding process. If you think CSS is a very easy language to learn, it will kill you. Your loose code will make your page full of loopholes and problems, and a good way is to verify it.

8. Download Firebug

Firebug is a well-deserved best plug-in for web development. It can not only debug JavaScript, but also intuitively let you know the properties and location of page tags. Needless to say, download it!

9. Use Firebug!

According to the author's observation, most users only use Firebug 20%, which is such a waste. You might as well spend a few hours systematically learning this tool, which will make you get twice the result with half the effort.

Firebug tutorial:

Overview of Firebug

Debug Javascript With Firebug-video tutorial

10. Use lowercase markup

In theory, you can write markers casually like this:

Here's an interesting fact about corn.

It's best not to write like this, it's no use trying to type in larger letters, and it makes the code ugly, so it's good:

Here's an interesting fact about corn.

11. Use the H1-H6 label

The author suggests that you use all six of these tags in the web page, although most people will only use the first four, but using the most H will have a lot of benefits, such as device-friendly, search engine-friendly, etc., might as well replace your P tags with H6.

twelve。 If it's a blog, leave H1 to the title of the article.

Today, the author launched a discussion on Twitter: whether to define H1 on LOGO or on the title of the article, 80% of people chose the latter.

Of course, how to use it depends on your needs, but I suggest you set the title of the article as H1 when you set up your 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 front-end development. Not long ago, they released a Firebug extension called ySlow, which will analyze your

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.