Fifteen Best Practices for HTML Beginners_HTML/Xhtml_Web Page Production-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Fifteen Best Practices for HTML Beginners_HTML/Xhtml_Web Page Production

May 16, 2016 pm 04:36 PM

html beginner Best Practices

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

<li>Some text here.
<li>Some new text here. <
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

> <
li>Some text here. </li> <
li>Some new text here. </li> <
li>You get the idea. </li> </
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

<!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”>

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

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

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

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

<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复制内容到剪贴板

#someElement > p {
color: red;
}

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

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

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

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

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

5.javascript文件放在底部

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

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

建议

JavaScript Code复制内容到剪贴板

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

6.永远不要使用内联javascript。现在不是1996年了！

许多年以前，还存在一种这样的方式，就是直接将JS代码加入到HTML标签中。尤其是在简单的图片相册中非常常见。本质上讲，一个“onclick”事件是附加在标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“ addEventListener / attachEvent ”加入事件监听器。或者使用jquery等框架，只需要使用“click”方法。

JavaScript Code复制内容到剪贴板

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

7. Verify while developing

If you are just starting 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 not be able to use it), and use "HTML Standard Verification" at any time during the coding process and "CSS Standards Validation". 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 really a waste. You might as well spend a few hours to systematically learn this tool, I believe it will get you twice the result with half the effort.

10. Keep tag names in lowercase

Theoretically, html is not case-sensitive, you can write whatever you want, for example:

XML/HTML CodeCopy content to clipboard

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

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

Suggestion

XML/HTML CodeCopy content to clipboard

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

11. Use H1-H6 tags

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

XML/HTML CodeCopy content to clipboard

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

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

Usually websites will have navigation menus, you can define them in this way:

XML/HTML CodeCopy content to clipboard

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

If you want to write beautiful code, it's best not to use this method.

Why use UL layout navigation menu? ——Because UL was born for definition lists

It’s best to define it like this:

XML/HTML Code

Copy content to clipboard

<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 IE

IE has always been a nightmare for front-end developers!

If your CSS style sheet is basically finalized, you can create a separate style sheet for IE, and then this will only take effect on IE:

CSS CodeCopy content to clipboard

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

The meaning of these codes is: this code will only take effect if the user's browser is IE6 and below. If you want to include IE7, change "[if lt IE 7]" to "[if lte IE 7]".

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

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