读书笔记—编写高质量代码（第1-3章）

这本书其实是上周五就看完了，我没有很仔细地看，因为很多基础的东西我知道得七七八八，我把重点都作了记号，准备边写总结边复习一次，这样我看这本书的目的也已经答到，看这本书的第一天，就让我找到之前面试的三道题的答案，那三道题我MS都没听说过，所以答得很没谱。。果然，答的也是错的。所以真要好好学习学习了。不多废话了，开始吧。黄色背景是我曾在面试中遇到的笔试题

第一章：从网站重构说起

1、通过举例引出网站重构的基础是：Web标准--结构、样式、行为的分离（我的理解是：html,css,js三者的分离）

其实这个观点老早就有听说过，只是，貌似有人还是难有执行力。像我来现在这家公司接手的项目，也是能多乱就有多乱，页面上有HTML\CSS\JS\PHP，而且，CSS还分头部，行内，啥都有。乱成一堆就是了，确实改起来很杯具。当初碍于人手缘故，也没法推翻重做，只能杯具地修改着别人的代码。

2、明确指出本书的意思：所谓高质量的代码，在WEB标准的思想指导下，在实现结构、

样式和行为分离的基础上，还要做到"精简、重用、有序"

第二章：团队合作

1、以盛大公司一则前端攻城师招聘要求为例，说明前端工程师的职责以及技术要求，但指出flash虽然从广义上属于前端开发的范畴，可在大多数的招聘要求中并未提及，它从前端开发中被分离出来。

2、必须要强调，前端工程师需关注的知识面非常广，上游有交互设计师和视觉设计师，下游有服务器端工程师。所以位于网站开发中游的前端工程师就必须和他们沟通。。



这张图足以说明，其范畴之广。

3、老话题，注释狠重要，是滴，注释在所有编程中都重要，你亲手写的代码，如果功能复杂，代码量大的话，时间长了，你也认不得它了

4、重用，重用这件事，在编程中也很重要，一个是提高开发效率，一个也方便维护和护展，可是，要提取公共组件，可不是一件易事，当年我写.NET的时候，同组一男孩子，提公用方法，提得是乱七八糟，这个，与经验有关，与人把握全局的能力也有关（个人意见，仅供参考）

5、麿刀不误砍柴工--其实我一直很BS什么都不问，什么都不管就直接让你做的行为，前期如果规划得好，后期工作起来顺利，也会快速，如果没规划，走一步算一步，感觉很容易崩溃。万一出现一个问题，需要改变方法，那极有可能全部推翻重来，劳民伤财啊。

6、关于制订规范和团队合作，要合作就要有规范，我前几天也写了一份7页的word文档，专门制订了一系列的规范。比如命名规范，比如合作时的方式方法等等.像一些稍微像样的公司，你一入职，他们会先发给你一份开发规范文档，目的就是为了今后的团队合作。

第三章：高质量的HTML

1、部分标签的全称和中文翻译对照表，常见的标签中，只有div和span是无主义的，

2、语义化对SEO的重要性(语义化，我这么理解，把写好的页面去掉CSS，仍然看得懂意思的，那叫语义化良好)
3、语义化的N个例子

<form>可以用<fieldset>和<legend>去编写





　　 表单域要用fieldset标签包起来，并用legend标签说明表单用途。（fieldset和legend都有默认边框，因此要设border:0）

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置ID属性，在label标签中设置“for=someld” 让说明文本和相应的input关联起来

　　 table标题要用caption，表头要用thead包围，主体用tbody包围，尾部用tfoot包围，表头用th,单元格用td





　　从这里开始，我将选取个人认为比较需要知道的要点，而不是基础哦，大部分我懂的基础，我略过了。请谅解...

第四章：高质量的CSS

1、关于css命名过长



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





3、css就近原则



4、尽量不使用子选择器



　　　

5、是否选择css sprite取决于网站流量





6、触发hasLayout





7、IE6和IE7不支持display:inline-block，而是display:inline-block令行内元素触发haslayout属性，其效果与设置zoom:1是一样的。但FF不支持zoom:1，所以我们为了兼容IE8和FF，还是使用 display:inline-block

8、保证main先加载



9、负数z-index

z-index 为负数的元素，位于z-index 为0的body之下，被透明的body遮住，所以无法点鼠标点击到，不能写一些单击事件效果

多个元素重叠，除了设置position为relative或absolute激活z-index外，还有一种特殊情况，它并未激活z-index ，但仍然让元素发生重叠--负边距

如果不设置z-index 值，那么z-index 默认为0，但它仍然会浮于body之上，如果多个元素z-index值相同，那么HTML标签中后出现的元素，会浮在先出现元素之上

flash如果和其他元素有重叠，无论如何设置z-index ，Flash都会始终浮在其他元素之上，这个与z-index 无关（浏览器解析页面时，会先判断元素类型，如果是窗口类型，会优先于非窗口类型的元素，显示在页面最顶端，如果同属非窗口类型，才会判断z-index 的大小）



select元素在IE 6下也是以窗口形式显示的，这是IE6的一个bug