15 Best Practices for HTML Beginners-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

15 Best Practices for HTML Beginners

高洛峰

Feb 24, 2017 am 10:27 AM

html

The following are thirty best practices for HTML beginners, shared with everyone for your reference, the specific content is as follows

1. Keep tags closed

In the past, I often saw similar The following code (Annotation: How long ago was this...):

<li>Some text here.     
<li>Some new text here.     
<li>You get the idea.

Copy after login

Note that the UL/OL label of the outer package is omitted (who knows whether it is intentional or unintentional), and also forgets to close the LI label . By today's standards this is clearly bad practice and should 100% be avoided. Anyway, keep the tag closed. Otherwise, you may encounter problems when validating html tags.

Better way

<ul>     
  <li>Some text here. </li>     
  <li>Some new text here. </li>     
  <li>You get the idea. </li>     
</ul>

Copy after login

2. Declare the correct document type

The author has joined many CSS forums earlier, and whenever users encounter problems, we will advise them Do two things first:

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 a mixture of the two, so that the browser can correctly parse.

There are usually four document types 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”>

Copy after login

There have been different opinions on what document type declaration to use. It is generally considered that using the strictest declaration is the best choice, but research shows that most browsers will use the ordinary way to parse this declaration, so many people choose to use the HTML4.01 standard. The bottom line when choosing a statement is whether it is really suitable for you, so you have to consider it comprehensively to choose a statement that is suitable for your project.

3. Never use inline styles

When you are immersed in writing code, you may often add a little inline css code casually or lazily, like this

<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>

Copy after login

This seems convenient and no problem. However, this is a mistake in your coding practice.

When you write code, it is best not to add style code until the content structure is complete.

This coding method is like guerrilla warfare, a very copycat approach. ——Chris Coyier

A better approach is to define the P style in an external style sheet file after completing the tag part.

Recommendation

#someElement > p {     
  color: red;     
}

Copy after login

4. Put all external css files into the head tag

Theoretically, you can introduce CSS style sheets anywhere, but the HTML specification recommends Introduced in the head tag of the web page, this can speed up the rendering of the page.

During the development process of Yahoo, we found that introducing a style sheet in the head tag will speed up the loading of web pages, because this allows the page to be rendered gradually. —— ySlow Team

<head>     
<title>My Favorites Kinds of Corn</title>     
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />     
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />     
</head>

Copy after login

5. Put the javascript file at the bottom

One principle to remember is to make the page appear in front of the user as quickly as possible. When a script is loaded, the page will pause loading until the script is fully loaded and executed. Therefore, more time of the user will be wasted.

If your JS file only needs to implement certain functions (such as button click events), then feel free to introduce it at the bottom of the body. This is definitely the best way.

Recommendation

<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>     
</html>

Copy after login

6. Never use inline javascript. This is not 1996 anymore!

Many years ago, there was still a way to add JS code directly to HTML tags. This is especially common in simple picture albums. Essentially, an "onclick" event is attached to the tag, and its effect is equivalent to some JS code. There is no need to discuss too much. You should not use this method. You should transfer the code to an external JS file and then use "addEventListener / attachEvent" to add the event listener. Or using a framework such as jquery, just use the "click" method.

$('a#moreCornInfoLink').click(function() {     
  alert('Want to learn more about corn?');     
});

Copy after login

7. Develop while verifying

If you have just started to engage in web page production, it is strongly recommended that you download the Web Developer Toolbar (chrome users please search in the app store by yourself, ie users may Error), and use "HTML Standards Validation" and "CSS Standards Validation" at any time during the coding process. If you think CSS is a very easy language to learn, it will kill you. Your lax code will make your page full of loopholes and constant problems. A good way is to verify, verify, and verify again.

8. Download firebug

Firebug is undoubtedly the best plug-in for web development. It can not only debug JavaScript, but also intuitively let you understand the attributes and positions of page tags. Without further ado, download it!

9. Use firebug

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

10. Keep tag names in lowercase

Theoretically speaking, html is not case-sensitive, you can write it as you like, for example:

<DIV>     
<P>Here's an interesting fact about corn. </P>     
</DIV>

Copy after login

But it is best not to write it like this, it will cost you There is no use in entering larger letters, and it will make the code ugly.

Recommendation

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

Copy after login

11. Use H1-H6 tags

It is recommended that you use them in the web page Of all six tags, although most people will only use the first four, the most used H will have many benefits, such as device friendliness, search engine friendliness, etc. You might as well replace all your P tags with H6.

<h1>This is a really important corn fact! </h1>     
<h6>Small, but still significant corn fact goes here. </h6>

Copy after login

12. Use an unordered list (UL) to wrap the navigation menu

Usually the website will have a navigation menu, you can define it in this way:

<div id="nav">     
 <a href="#">Home </a>     
  <a href="#">About </a>     
  <a href="#">Contact </a>     
</div>

Copy after login

如果你想书写优美的代码，那最好不要用这种方式。

为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的

最好这样定义：

<ul id="nav">     
  <li><a href="#">Home</a></li>     
  <li><a href="#">About</a></li>     
  <li><a href="#">Contact</a></li>     
</ul>

Copy after login

15.学习如何应对IE

IE一直以来都是前端开发人员的噩梦！

如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：

<!--[if lt IE 7]>     
   <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />     
<![endif]-->

Copy after login

这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。

以上就是本文的全部内容，希望对大家学习有所帮助。

更多HTML初学者适用的十五条最佳实践相关文章请关注PHP中文网！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn