HTML初学者30条必掌握内容(1)

一直以来,我都不太愿意写这样的话题。总觉得这样的文章有点不实际。今天看到NetPlus+写的这篇Blog觉得很以为然,所以还是翻译一下吧。当然,这个所谓翻译,不是原封不动的,原文可以猛击这个链接去参观。

1. 记得闭合你的html标签

在早些时候,常可以看到这样的代码:

[code lang=”html”]<li>这是一行文字

<li>这还是一行文字

<li>好吧,这难道不是一行文字吗?[/code]

不瞒您说,当时我也是这么写的,总觉得这样的代码写出来不影响实际显示效果,而且可以少些几个字…

现在html代码的检验越来越严格了,如果你不想遇到检验或者其他的小问题的话,还是采用标准的写法吧。标准的写法,当然要包括UL和LI并且闭合才行:

[html]

<ul>

<li>这是一行文字</li>

<li>这还是一行文字</li>

<li>好吧,这难道不是一行文字吗?</li>

</ul>

[/html]

2.正确地声明你的文件种类(DocType)

一般来说。Doctype出现在html标签开始之前,也就是一个页面的最顶端。浏览器最开始读到这段代码,正确的doctype可以告诉浏览器这个页面中到底包含了什么样子格式的代码。

[html]

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

[/html]

上面标出的是最常见的4种声明。一直有争论说到底用哪种声明比较好,有一种观点说用xhtml-strict的,可是我发现大多数人用的或许还是html 4.01 strict, 也就是上面第一条。不管怎么样,最重要的是要记得声明 :-)

3.不要使用内联样式

[html]<p style="color: red;">这是红色的字</p>[/html]

我也不清楚为什么,这点看上去似乎没什么问题。不过,大牛们说,人应该在同一个时候专心地处理一个问题,不要在编写页面代码的同时去考虑页面样式的问题。一切样式的问题等到页面代码结束了之后再说吧。

看来,这是代码习惯的问题?

建议是把这些东西放到专门的css文件中去

[css]

#element > p{

color: red;

}

[/css]

4.将所有的外部css文件放在head标签以内

虽然CSS文件可以放在页面的任何地方,这条建议的出发点是为了可以让页面载入速度变快些。

[html]

<head>
<title>页面标题</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>

[/html]

5.把Javascript脚本放在页面的底部

这个还是出于加快页面载入速度的考虑。当浏览器读到脚本的时候,它没法再继续加载页面,所以把脚本放在底部可以保证整个页面的主要内容首先被显示出来。

[html] <p>页面内容在这里. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html> [/html]

6.不要用内联的Javascript脚本,现在不是1996年了!

想当年(用上这个词的感觉真好)似乎大家尤其喜欢用内联的Javascript脚本。不过现在我们不这么做了,我们把Javascript脚本放在单独的文件里,然后用addEventListener/attachEvent来监听事件。

或者,还可以用jQuery这样的框架来实现

[js]

$(‘a#moreCornInfoLink’).click(function() {

alert(‘Want to learn more about corn?’);

});

[/js]

7.经常性地检验

如果你用的是Firefox,那么建议你使用Web Developer Toolbar这个插件。它可以帮你做检验HTML的工作,当然还有CSS和Javascript.

8.下载Firebug

用Firefox的很多html开发者都是冲着这个插件的吧。如果你还没有用过这个插件,那么建议你赶快下载一个吧

9.使用Firebug!

这条有点凑数哦!不过,作者说很多人只发挥了Firebug 20%的优势。哈,那么还等什么,赶快用一下吧,20%就这么厉害了。

资料:

10.记得小些你的html tag

这一点,我有时没法很好的遵守,原因竟然还是懒。。。

因为在中文和英文切换时,有时按一下大写键比较顺手 :-)

于是就有这么难看的代码了

[html]

<DIV>

<P>这是内容</P>

</DIV>

[/html]
这其实也是一种变成习惯问题 :-) 英语人士在阅读这些代码的时候估计会很累? 所以一下的代码是值得推荐的

[html]

<div>

<p>这是内容</p>

</div>

[/html]

待续…

4 thoughts on HTML初学者30条必掌握内容(1)

  1. =.= 错别字啊…不过firebug 我也没怎么用好它
    对我来说 可惜这款插件了.

  2. Pingback: 2wordpresscom 05/26/2009 « huaxlee’s daily post

发表评论

电子邮件地址不会被公开。 必填项已用*标注