WEB前端代码编写技巧

1、除非必须不然不要使用嵌入式CSS样式 

除非测试代码,或者必要的时候不能使用内联式css代码：

汐玬纱个人网站

虽然这样写短期内看不出什么问题,一但出现错误,我们会发现修改时非常费力.一般我们的做法是把这个P标签的样式定义在样式表文件里：

p {color: red;}

2、使用js外链式文件,实现结构样式行为三分离,或者尽量把javascript代码写在HTML代码的底端.或者使用window.onload事件

如果刚打开网页就加载一个js的脚本语言会占用整个网页加载的的时间,造成,网页加载变慢,用户体验效果变差.

但是js只是实现简单单一的事件，（比如简单的点击按钮事件).那么就在body标签里面直接引用.

举例：

3、学会并且善用H1-H6标签,这样你的网站易于被收录.

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

4、如果时个人博客网站,我们学会把H1标签留给文章题目

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

5、学会怎样对付IE

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

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

6、缩减自己的DIV

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

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

7、为图片添加Alt属性需要兼容火狐浏览器的话可以添加title属性

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

8、学会查看优秀网站的源代码,并且下载保存下来.善于学习

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

9、很显然,所有的标签都有自己独有的默认样式,学会在写网页前为所有标签的样式定义

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

与

之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

 10、使用CSS Reset

每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset

作者提供一段常用样式：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{background:#e8f0ff;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0 none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:800;}
ol,ul,li{list-style:none outside none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}