Fifteen Best Practices for HTML Beginners_HTML/Xhtml_Web Page Production

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

1. Keep the label closed

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

XML/HTML CodeCopy content to clipboard

1. li>Some text here.
2. li>Some new text here.
3. li>You get the idea. Note that the UL/OL label on the outer package is missing (who knows whether it is intentional or unintentional), and the LI label is also forgotten to be closed. 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.

A better way

XML/HTML Code

Copy content to clipboard

ul
1. > 
2. li>Some text here. li> 
3. li>Some new text here. li> 
4. li>You get the idea. li> 
5. ul> 
2. Declare the correct document type

The author has joined many CSS forums earlier. Whenever a user encounters a problem, we will advise him to 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 both, so that the browser can parse it correctly.

There are generally four document types to choose from:

XML/HTML Code

Copy content to clipboard

1. HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>  
2.   
3.   
4. HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>  
5.   
6.   
7. html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
8.   
9.   
10. html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>  
11.   

关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。

3.永远不要使用内联样式

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点行内css代码，就像这样：

XML/HTML Code复制内容到剪贴板

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

这样看起来即方便又没有问题。然而，这在你的编码实践中是个错误。

在你写代码时，在内容结构完成之前最好不要加入样式代码。

这样的编码方式就像打游击，是一种很山寨的做法。——Chris Coyier

更好的做法是，完成标签部分后，再把这个P的样式定义在外部样式表文件里。

建议

XML/HTML Code复制内容到剪贴板

1. #someElement > p {     
2.   color: red;     
3. }  

4.将所有外部css文件放入head标签内

理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。

雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。 —— ySlow团队

XML/HTML Code复制内容到剪贴板

1. head>     
2. title>My Favorites Kinds of Corntitle>     
3. link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />     
4. link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />     
5. head>    

5.javascript文件放在底部

要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入并执行完成。因此会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。

建议

JavaScript Code复制内容到剪贴板

1. And now you know my favorite kinds of corn. 

        
2. <script><span class="string">"text/javascript"</script> src="path/to/file.js">     
3. <script><span class="string">"text/javascript"</script> src="path/to/anotherFile.js">