您的位置：首页 > 技术分享 > 网络编程

10条HTML代码编写技巧

ihze2008-06-27 06:24:02次浏览

1、不要使用嵌入式CSS样式

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

这样看起来即方便又没有问题，但是它会在你得代码中产生问题。在你开始写代码时，最好是在内容结构完成之后再开始加入样式代码。这样的编码方式就像打游击，是一种很山寨的做法。更好的做法是，把这个P的样式定义在样式表文件里：

p { color: red;}

2、在页面底部引入JavaScript文件

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

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

举例：

3、使用H1 - H6标签

建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。

4、如果是博客，那把H1留给文章标题

当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。

5、学会怎样对付IE

IE一直以来都是前端开发人员的噩梦！如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：

这些代码的意思是：如果用户浏览器是IE9及以下，那这段代码才会生效。

6、缩减，缩减，缩减

回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。

网页写完后，一定要多次回头检查，尽量的减少元素的数量。能用UL布局的列表就不要用一个个的DIV去布局。

7、为所有的图片加上Alt属性

为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的网页信息，并且对图像搜索引擎友好。Firefox不支持显示图像Alt属性，可以加入title属性

8、查看源代码

没有什么比模仿你的偶像能让你更快的学习HTML。起初，我们都要甘做复印机，然后慢慢得发展自己的风格。研究你喜欢的网站页面代码，看看他们是怎么实现的。这是高手的必经之路，你一定要试一下。注意：只是学习和模仿他们的编码风格，而不是抄袭和照搬！留意网络上各种炫酷的JavaScript效果，如果看上去是使用了插件，那根据它源码中head标签内的文件名，就可以找到这个插件名称，然后就可以学习它据为己用。

9、为所有的元素定义样式

这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记？那用户可能会用，你自己不使用OL？用户也可能会。花时间做一个页面，显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式，检查一下是否有遗漏。

10、使用CSS Reset

Css Reset也就Reset Css ,就是重置一些HTML标签样式，或者说默认的样式。关于是否应该使用CSS Reset，网上也有激烈的争论，笔者是建议使用的。你可以先选用一些成熟的CSS Reset，然后慢慢演变成适合自己的。

Tags：网易博客

打赏