第一章
1.Web标准由一系列标准组合而成，核心理念是将网页的结构，样式和行为分离，所以分为三大部分：结构标准，样式标准和行为标准。结构标准包括XML标准，XHTML标准，HTML标准；样式标准指CSS标准；行为标准主要包括DOM标准和ECMAScript标准。
第二章
1.注释增加代码的可读性；提高重用性--公共组件和私有组件的维护；冗余or精简；前期的构思；制定规范；团队合作
第三章
1.语义化标签
2.table布局的缺点：代码量大，结构混乱；标签语义不明确，对搜索引擎不友好。
3.CSS布局：div+css布局 or (X)HTML+css布局；代码量少；语义清晰。
4.判断标签语义是否良好：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。 CSS裸体日。 FireFox插件-Web Developer
5.表格标题要用caption，表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单元格要区分开，表头用th，一般单元格用td。
6.语义化标签应该注意：尽可能少地使用无语义标签div和span； 在语义不明显，既可以使用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利； 不要使用纯样式标签，例如b，font，和u等，改用css设置，语义上需要强调的文本可以包在strong或em标签里，strong和em有“强调”的语意，其中strong的默认样式是加粗，而em的默认样式是斜体。
第四章
1.怪异模式：为了确保向后兼容，模拟老式浏览器的行为以防止老站点无法工作；IE对盒模型的解析在怪异模式中，width本身就包括了padding和border的宽度，margin-left（right）：auto在怪异模式下也无法正常工作。
2.触发怪异模式：DTD文档类型定义
3.组织CSS的方法：base.css(被所有页面引用，与具体UI无关，力求精简和通用，具有高度可移植性，不同风格的网站可以使用同一个base，相对稳定，不需要维护)+common.css（提供组件级的css类，尽可能将内部实现封装，对尽可能会经常变化的部分提供灵活的接口，最好一人负责，统一管理）+page.css（高度重用的模块，每个页面都有自己的page）
4.推荐的base.css
/*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;} table{border-collapse: collapse;border-spacing: 0;} fieldset,img{border:0} address,caption,cite,code,dfn,em,strong,th,var{font-style: normal;font-weight: normal} ol,ul{list-style: none} caption,th{text-align: left} h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal} q:before,q:after{content: ''} abbr,acronym{border:0} /*文字排版*/ .f12{font-size: 12px} .f13{font-size: 13px} .f14{font-size: 14px} .f16{font-size: 16px} .f20{font-size: 20px} .fb{font-weight: bold} .fn{font-weight: normal} .t2{text-indent: 2em} .lh150{line-height: 150%} .lh180{line-height: 180%} .lh200{line-height: 200%} .unl{text-decoration: underline;} .no_unl{text-decoration: none;} /*定位*/ .tl{text-align: left} .tc{text-align: center} .tr{text-align: right} .bc{margin-left: auto;margin-right: auto;} .fl{float: left;display: inline} .fr{float: right;display: inline} .cb{clear: both} .cl{clear: left} .cr{clear: right} .clearfix:after {content: “.”;display:block;height:0;clear:both;visibility:hidden;} .clearfix {display: inline-block;}* html .clearfix {height: 1%;} .clearfix {display: block;} .vm{vertical-align: middle} .pr{position: relative} .pa{position: absolute} .abs-right{position: absolute;right: 0} .zoom{zoom:1} .hidden{visibility: hidden} .none{display: none} /*长度高度*/ .w10{width:10px} .w20{width:20px} .w30{width:30px} .w40{width:40px} .w50{width:50px} .w60{width:60px} .w70{width:70px} .w80{width:80px} .w90{width:90px} .w100{width:100px} .w200{width:200px} .w250{width:250px} .w300{width:300px} .w400{width:400px} .w500{width:500px} .w600{width:600px} .w700{width:700px} .w800{width:800px} .w{width: 100%} .h50{height: 50px} .h80{height: 80px} .h100{height: 100px} .h200{height: 200px} .h{height: 100%} /*边距*/ .m10{margin:10px} .m15{margin:15px} .m30{margin:30px} .mt5{margin-top:5px} .mt10{margin-top:10px} .mt15{margin-top:15px} .mt20{margin-top:20px} .mt30{margin-top:30px} .mt50{margin-top:50px} .mt100{margin-top:100px} .mb5{margin-bottom:5px} .mb10{margin-bottom:10px} .mb15{margin-bottom:15px} .mb20{margin-bottom:20px} .mb30{margin-bottom:30px} .mb50{margin-bottom:50px} .mb100{margin-bottom:100px} .ml5{margin-left:5px} .ml10{margin-left:10px} .ml15{margin-left:15px} .ml20{margin-left:20px} .ml30{margin-left:30px} .ml50{margin-left:50px} .ml100{margin-left:100px} .mr5{margin-right:5px} .mr10{margin-right:10px} .mr15{margin-right:15px} .mr20{margin-right:20px} .mr30{margin-right:30px} .mr50{margin-right:5px} .mr100{margin-right:100px} .p10{padding:10px;} .p15{padding:15px;} .p30{padding:30px;} .pt5{padding-top:5px} .pt10{padding-top:10px} .pt15{padding-top:15px} .pt20{padding-top:20px} .pt30{padding-top:30px} .pt50{padding-top:50px} .pb5{padding-bottom:5px} .pb10{padding-bottom:10px} .pb15{padding-bottom:15px} .pb20{padding-bottom:20px} .pb30{padding-bottom:30px} .pb50{padding-bottom:50px} .pb100{padding-bottom:100px} .pl5{padding-left:5px} .pl10{padding-left:10px} .pl15{padding-left:15px} .pl20{padding-left:20px} .pl30{padding-left:30px} .pl50{padding-left:50px} .pl100{padding-left:100px} .pr5{padding-right:5px} .pr10{padding-right:10px} .pr15{padding-right:15px} .pr20{padding-right:20px} .pr30{padding-right:30px} .pr50{padding-right:50px} .pr100{padding-right:100px}
5.拆分模块：模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块；模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。
6.CSS命名：骆驼命名法用于区别不同单词，划线用于表明从属关系。
7.多用组合，少用继承
8.id只能挂一个，class可以挂多个，用空格分隔
9.上下margin会重合，左右不会
10。如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（如mt10，mb20）.模块最好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom。
11.当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。
12.HTML标签权重是1，class的权重是10，id的权重是100。
13.如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。
14.为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。少用自选择器，多添加class。
15.CSS sprite：图片翻转技术将多张图片合并为一张，然后利用background-position属性来展示我们需要的部分。
16.CSS编码风格：推荐一行式的编码风格，可读性稍差，但有效减少CSS文件的行数，提高开发速度，减小CSS文件大小。
17.CSS hack-IE条件注释；选择符前缀法；样式属性前缀法。
18.解决超链接访问后hover样式不出现的问题：love hate原则，即l（link）ov（visited）e h（hover）a（active）te。
19.haslayout：IE浏览器专有的属性，用于CSS的解析引擎，在IE下一些复杂的CSS设置解析起来会出现bug，其原因可能与haslayout没有被自动触发有关；haslayout触发方法：设置width，height的值，设置position为relative，但是会有副作用；更好的解决方法：使用“zoom：1”.
20.块级元素和行内元素是布局最基本的两种元素，常见的块级元素有div,p,form,ul,ol,li等，常见的行内元素有span,strong,em等。
21.块级元素可以设置width,height属性。行内元素设置width，height属性无效。
22.块级元素可以设置margin和padding属性。行内元素水平方向会产生边距，但竖直方向不会。
23.块级元素对英语display：block，行内元素对应于display：inline。可以通过修改display属性来切换块级元素和行内元素。
24.display：inline-block 行内的块级元素，拥有块级元素的特点，可以设置长宽，可以设置margin和padding的值，却不独占一行，宽度并不沾满父元素。IE6和IE7不支持，可以通过触发行内元素的halayout实现。
25.行内元素的水平居中 text-align：center
26.确定宽度的块级元素的水平居中 {margin-left：auto；margin-right：auto}
27.不确定宽度的块级元素水平居中：将ul包含在table标签内，对table设置margin-left：auto和margin-right：auto；改变块级元素的display为inline类型，然后使用text-align：center；给父元素设置float，然后父元素设置position：relative 和left：50%，子元素设置position：relative和left：-50%。
28.父元素高度不确定的文本，图片，块级元素的竖直居中：通过给父容器设置相同上下边距实现。
29.父元素高度确定的单行文本的竖直居中：通过给父元素设置line-height来实现，line-height值和父元素的高度只相同。
30.父元素高度确定的多行文本，图片，块级元素的竖直居中：当父元素为td或th时，可以设置vertical-align属性；对支持display：table-cell的IE8H和Firefox用display：table-cell和vertical-align：middle来实现居中，不支持的IE6和IE7，使用特定格式的hack。
31.main的内容比起sidebar更重要，无论sidebar和main的样式上谁左谁右，在html标签上要保证main的标签在sidebar之前被加载。
第五章
1.团队合作中，用匿名函数将脚本包起来，可以有效控制全局变量，避免冲突隐患。
2.添加必要的注释，可以大大提高代码的可维护性，对于团队合作来说，很有必要。
3.网页中的JavaScrippt从功能上，分为两大部分-框架部分和应用部分。框架部分提供的是对JavaScript代码的组织应用，包括定义全局变量，定义命名空间方法等，它和具体应用无关，每个页面都需要包括相同的框架，所以框架部分的代码在每个页面都相同。应用部分提供的是页面的功能逻辑，不同页面会有不同的功能，不同页面应用部分的代码也不相同。
4.CSS放在页头，JS放在页尾。
5.为减小网页大小，缩短网页下载时间，在发布JavaScript之前，先进行压缩。压缩工具有Packer和YUI Compressor。
6.为了方便维护，源文件叫做head.js 压缩后的文件叫head.js。
7.JavaScript分层：base层（位于底端，封装不同浏览器下JavaScript的差异，提供统一的接口，可以靠它来完成跨浏览器兼容的工作；扩展JavaScript语言底层提供的接口，让它提供更多更为易用的接口。）common层（中间层，依赖base层提供的接口。common层提供可供复用的组件，和页面功能没有直接关系）page层（位于顶端，和页面里的具体功能需求直接相关，完成页面内的功能需求）
8.获得DOM节点的三种方法：getElementById，getElementsByTagName，getElementsByClassName。
9.同一个页面里id只能出现一次，所以如果你的程序需要被多处复用，就一定不能使用id作为JavaScript获得DOM节点的挂钩。
10.组件需要指定一个根节点，以保持每个组件之间的独立性。