【编写高质量代码】
1、注释的必要性：增加代码的可读性。
2、web标准：由一系列的标准组合而成，其核心理念是将网页的结构、样式、行为分离，所以他可分为：结构标准、样式标准和行为标准。
3、一个符合标准的网页，标签中的标签名应该全部都是小写，属性要加上括号，样式和行为不要夹杂在标签中，而应该分别单独存放在样式文件和脚本文件中。理想状态下，网页源代码有三部分组成：.html文件、.css文件、.js文件。
4、所谓高质量的代码，在web标准的指导下，在实现结构、样式和行为分离的基础上，还要做到三点：精简、重用、有序。
5、闲聊原生javascript、javascript类库和Ajax:
原生的javascript是浏览器默认支持的脚本语言，ajax是一种利用javascript和XMLHttpRequest对象在客户端和服务器端传递数据的技术，因为XMLHttpRequest对象也是用javascript来创建的对象，从某种意义上来说，ajax是javascript的一个子集。

【高质量的html】
标签的语义化：原因是搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义。
table布局的网页有如下特点：
代码量大，结构混乱；
标签语义不明确，对搜索引擎不友好。

正确的做法是：先确定html，确定语义的标签，再来选用合适的css。
当页面内标签无法满足设计需求是，才会添加div和span来辅助实现

语义化标签应注意的一些问题：
尽量少的使用无语义化标签div和span；
在语义不明显，即可用p也可以用div的地方，尽量用p。因为p默认情况下有上下间距，去样式后可读性更好，对兼容特殊终端有利。
不要使用纯样式标签，例如:b、font、u等。该用css样式。

【高质量的css】
怪异模型和DTD：有时候不遵从标准模型的的模式；DTD指的是document type definition，及文档类型定义，它是一种保证html文档格式正确的有效方法，一个DTD文档包含元素的定义规则、元素的关系的定义规则、元素课使用的属性，可使用的实体或符号规则。

如何 组织css:
人们比较推荐的组织方法：base、common、page，三个层次分别表示：base是最低层，会被所有页面引用，这一层与ui设计无关，无论任何风格的设计都可以引用他；common层，是组建级的css可以重用的csspage层，是最高层，每个页面的都不一样。

什么是css  reset?
html标签在浏览器里面有自己的默认样式，通过重新定义标签的样式，“覆盖”掉浏览器的默认样式，就叫做css reset。例如：*{margin：0；padding：0；}就是最早的css reset ，有些人喜欢在通配符“*”中写很多样式，但这是非常不好的，因为css的很多样式是具有继承性的，但是继承的权重是非常低的，比标签选择符的权重更低，这样的写法会破化css的继承性，设置样式时会增加很多额外的代码。

css命名——命名空间的概念
首先，css命名推荐使用英语，不要使用汉语拼音 ，我们可以根据内容来选用合适的英文单词来命名css，我们可以通过骆驼命名法和划线命名法来命名，骆驼命名法用于区别不同的单词，划线用于区别不同的从属关系。在css中还引入了面向对象编程的思想对css进行命名，及根据不同的盒子的从属关系来进行命名。

在给几个相同的盒子定义样式的时候：多用组合，少用继承。

margin的上下处理：如果对相邻的模块同时使用margin-top和margin-bottom，边距会重合带来不必要的麻烦，所以最好统一使用不同的margin-top或margin-bottom，不要混合使用。（总结：如果不确定模块上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用边距的原子类，模块最好不要混用，统一使用。）

低权重原则——避免滥用子选择器
当不同选择符的设置有冲突时，会采用权重高的选择符设置的样式。权重的规则是这样的：html 标签的权重为1，class的权重为10，id的权重是100，p的权重是1等。如果css选择符的权重相同，那么样式会遵循就近原则，那个选择符最后定义，就采用那个选择符定义的样式。
使用子选择器，会增加css选择符的权重，css的权重越高。样式越不容易被覆盖，越容易对其他选择符产生影响，为了保证样式容易被覆盖，提高可维护性，css选择符需要保证权重尽可能低。相比之下，新添class更利于维护。

css sprite
css sprite即将网站的背景图片合并在一张大纸上，图片的加载是会发出http请求的，一张图需要一个http请求，多张就要多条http请求，http请求越多，访问服务器的次数就越多，服务器的压力就越大，这样讲多张图合并在一张上，会大大减少网页的http请求，减少服务器的压力。但是他也会“降低开发效率”，“增大维护难度”。所以，是否使用css sprite 主要取决于网站的流量。

display：inline-block：它是行内的块级元素，他拥有块级元素的特点，可以设置宽度、长度，但是他却不可以独占一行他的宽度并不占满父元素，而是和行内元素一样，可以和其他行内元素排在同一行里。

文档流： 网页虽然看上去是二维结构，但实际上他是有z轴的，z轴的大小由z-index控制，默认情况下，所有元素都在z-index：0 ；这层，元素根据自己的display类型、长度 等属性排列在z-index：0 这层，这就是文档流。

position：relative和position：absolute都可以改变元素在文档流中的位置，设置position：relative和position：absolute就会激活left、top、right、bottom和z-index属性，（默情况下，这些属性未经激活，是没有效果的）。当网页设置了position：relative和position：absolute是，网页的z轴被激活，这时设置的position：relative和position：absolute都会高于z-index：0；层；相比之下，position：relative会保留在z-index：0；层原有的位置（空间），只是相对于z-index：0；层高了一层；而position：absolute会完全脱离文档流，不再z-index：0；层保留占位符。对其做的定位都是相对于他自己最近的一个设置了position：relative和position：absolute的祖先元素或body元素。根据元素的不同定位概念，我们就可以对其进行一些相关的样式。

编写高质量代码——html、css