WEB前端开发知识和注意事项

在工作中最大的考验和最不可回避的问题就是“变化”。我们在制作网页的时候，不仅要实现需求，更重要的是要考虑实现代码可维护性，为未来可能出现的“变化”提前做好准备。
一个符合标准的网页，标签中的标签应该全部都是小写，属性要加上引号，样式和行为不再夹杂在标签中，页应该分别单独存放在样式文件和脚本文件中，理想状态下，网页源代码由三部分组成：.html文件、.css文件、.js文件。

精简的代码可以让文件变小，有得于客户端快速下载；
重用可以让代码更易于精简，同理有助于提升开发速度；
有序可以让我们更清晰地组织代码，使代码易于维护，有效应对变化；

当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现

<fieldset>
<legend>登录表单</legend>
<label for="name">帐号：</label><input type="text" id="name"/>
</fieldset>
表单域要用fieldset标签包起来，并用legend标签来说明表单的用途，因为fieldset默认是边框，而legend也有默认的样式，为了满足设计需要，我们可以将fieldset的border设为none,把legend的display设为none，以此来兼顾语义和设计二方面的要求.
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置"for = someld"来让说明文本和相应的input关联起来.

语义化标签应注意的一些其他问题：
尽可能少地使用无语义标签div和span；
在语义不明显，即可以用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后可读性更好，对兼容特殊终端有利；
要不使用纯样式标签，例如：b font 和u等，改用CSS样式设置。语义上需要强调的文本也可以在strong或em标签里，strong和em有“强调”的语义，其中strong的默认样式 是加粗，而em的默认样式是斜体。

组织CSS的方法：base.css+common.css+page.css
这三者不是并列结构，而是层叠结构
base.css层具有高度可移植性，
common.css是提供组件级的CSS类，我们从页面里尽可能多地将组件提取出来，放在common层里，common层就相当于MVC模式里的M（Model，模型）。为了保证重用性和灵活性，M需要尽可能将内部实现封装，对可能会经常变化 的部分提供灵活的接口，common层是网站级的。不同的网站有不同的commmon层，同一个网站有一个common层。common层是放在一个common.css文件里，还是按照功能划分放在诸如common_form.css、common_imagelist.css的多个文件里，需要根据网站规模来决定。
page层是位于最高层，提供页面级的样式。每个页面都可能有自己的page层CSS。page层的文件可以用<style type="text/css">标签内置于页面中，但这么做没有将样式 彻底从HTML文件中分离出来。也可以根据页面写在诸如：page1.css、page2.css、page3.css的文件里，但是会产生大量的CSS文件，有些CSS文件可能非常小，来来维护上的麻烦，建议将page层的代码放到一个page.css文件里，根据页面配上注释，分块书写，全球维护。

推荐Base.css
base层是高度重用的基础层，它提供的通用类是否够用直接关系到网站开发效率和CSS文件的总大小，对于一个网站来说，base层设计是否良好非常重要，因为它具有无视美工设计，适用于任何网站的特点。

什么是CSS reset呢？
HTML标签在浏览器里有默认的样式，例如：p标签有上下边距，strong标签有字体加粗样式,em标签有字体倾斜样式。不同的浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而在FIrefox下，它的缩进却是由padding实现的。在切换页面的时候，浏览器默认样式 往往会给我们带麻烦，影响开发效率，现在很流行的解决办法是一开始就将浏览器的默认样式 会部去掉，更确切地说，应该通过重新定义标签的样式，“覆盖”掉浏览器提供的默认样式，这就是CSS reset.

body,ul,li,div,p{margin:0;padding:0;}
body,ul,li,div,p{margin:0;padding:0;color:#000;font-size:12px;}
这二者的区别：
因为CSS的很多样式是具有继承性的，但继承性的权重非常低，比标签选择符的权重更低，这种写法会破坏CSS的继承性，设置样式时会额外增加很多的代码。

模块拆分：
1.模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应将它们提取出来，拆分成一个独立的模块。
2.模块应在保证数据尽可能少的原则下，做到尽可能简单，以提高重用性。

多用组合，少用继承

总结：如果不确定模块的上下margin特别稳定，最好不要将它们写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类(例如：mt10,mb20)。模块最好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom.

低权重原则-避免滥用子选择器

CSS的选择符是有权重的，当不同的选择符的样式 设置有冲突时，会采用权重高的选择符设置的样式。
HTML标签的权重是1，class的权重是10,id权重100
例如：p的权重是1，"div em" 的权重是1+1=2
"strong.demo"的权重是1+10=11,
"#test .red"的权重是100+10=110
如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。

使用子选择器，会增加CSS选择符的权重，CSS选择符的权重超高，样式越不易被覆盖，越容易对其他选择会产生影响，所以，除非确定HTML结构非常稳定，一定不会再修改了，否则尽量不要使用子选择器。为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。

CSS命名方面：骆驼命名法和从属命名法
骆驼命名法：如：#navList 从第二个单词首字母大写
从属命名法：如：#nav_list 或 #nav-list
建议用人性命名法，这个更能体现从属关系

CSS sprite技术
1.它能合并的只能是用于背景的图片
2.对于横向和纵向平平铺的图片，也不能使用CSS sprite，如果是横向平铺的，只能将所有横向平铺的图片并成一个大图，只能竖直排列，不能水平排列；如果是纵向平铺的，我们只能将所有纵向平铺的图合并成一张大图，只能水平排列，不能竖直排列.

优点：减少HTTP请求数，减轻服务器的压力，
缺点：降低开发效率和增大维护验难度。

对于流量 并不大的网站来主，CSS sprite带来的好处并不明显，而它创出的代码却很大，其实并不划算，所以，是否使用CSS sprite主要是取决于网站流量。

CSS的编码风格：多行式和一行式
多行式：编码风格可读性量多强，但缺点是容易使用CSS文件行数过多，编辑样式时，需要来回拖动文本编辑器的滚动条，影响开发速度，另外，过多空白，也会增大CSS文件的大小。
一行式：编码风格在可读性方面稍差点，但可以有效减少CSS文件的行数，有得于提高开发速度，同时也可以减小CSS谁的大小。

id和class区别
1.同一个网页，相同的id只能出现一次，它不可重复，而class可以任意出现多次
2.id的CSS选择符权重为100，而class的选择符权重为10
3.原生JS提供getElementById()方法，支持通过id对应到相关的HTMLIElement,但原生JS不支持通过class对应到相关的HTMLIElement.

一般情况下建议尽量使用class，少用id

CSS hack

IE条件注释法：
<!--[if IE]>

<![endif]-->

<!--[if gt IE 6]>

<![endif]-->

lte:小于等于
lt:小于
gte:大于等于
gt:大于
!:不等于

缺点：将同一CSS选择符下的样式分散到三个文件中去控制，增加了开发和维护成本。

选择符前缀法：
.test{} /*IE 6, IE 7,IE8*/
*html .test{} /*only for IE6*/
*+html .test{} /*only for IE7*/
可维护性强了很多，但不能保证以后IE9 IE10 不识别*html和*+html。在向后兼容性上存在一点风险。

样式属性前辍法：
样式属性前缀法的原理是在样式的属性名前加前缀，这此前缀只在特定浏览器下才生效。
"_" 只在IE6下生效
"*" 只在IE6和IE7下生效
选择符前缀法不能用于内联样式上；如<div class="test" style="width:80px;"></div>

样式属性前缀法比起选择符前缀聚合各度更高，代码更精简，可维护性强，但和选择符前缀法一样。它在向后兼容性上存在一点风险。
样式属性前缀法可以用于内联样式上；如<div class="test" style="width:80px;*width:70px;_width:60px;"></div>

解决超链接访问后hover样式不现的问题
正确顺序
a:visited{}
a:hover{}

hasLayout
很多时候，CSS在IE下解析十分奇怪，明明在FIrefox中显示得非常正确，但到了IE下却出现了问题，有时候这些问题甚至表现的非常诡异，例如：一个比较经典的Bug就是设置border的时候，有时候border会断开，刷新页面或者滚动滚动条的时候，断掉的部分又连接起来了

其原因可能与hasLayout没有被自动触发有关,我们通过一些技巧，手动触发hasLayout属性就可以解决Bug了。

zoom:1可以触发hasLayout。但zoom:1并不一定可以触发hasLayout的。在极少数特殊的情况下，例如非常复杂的CSS设置，特别是使用DHTML的时候，使用zoom:1有时也会无效，我们可能需要借助更为强大的“position:relative”来帮助触发hasLayout，总之，“zoom”是最常用 、最安全、成本最小的触发hasLayout的方式。

块级元素和行内元素的区别
块级元素：div p form ul ol li等
行内元素：span strong em等；

块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，相信的行内元素会排列在同一行里，直到排不下，才会换行，其宽度随元素的内容而变化 。

vertical-align;-10px;

png格式因为其优秀的压缩算法和对透明度的完美支持，成为web中最流行的图片格式之一

JavaScript

用匿名函数将脚本包起来，可以有效控制全局变量，避免冲突隐患