编写高质量代码 :Web前端开发修炼之道(读书笔记)

2010年6月第1版

1.除了应掌握CSS、HTML、JavaScript技术,还要清楚地了解它们在不同浏览器上的兼容情况,渲染原理和存在的Bug。(推荐序)

2.在前端开发这个领域,“一专多能”是非常必要的(14)

3.最流行的两个JavaScript框架jQuery和YUI:jQuery将所有组件全部放在了一个文件中,但它通过非常优秀的算法,让代码本身尽可能精简,从而尽量让代码在“加载和使用方便”的基础上,尽量往“精简”靠拢。而YUI将组件按功能分成了一个个不同的文件,“只根据需求加载相关的文件” (17)

4.判断网页标签语义是否良好:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性 (27)

5.一个语义良好的页面,h标签应该是完整有序没有断层的,要按照h1、h2、h3、h4这样依次排列下来(28)

6.推荐使用Firefox的插件——Web Developer,对标签是否语义良好进行调试,它提供了一个“禁用网页中的CSS”的功能 (29)

7.一般来说,表单域要用fieldset标签包起来,并用legend标签说明表单的用途。每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在label标签中设置“for =someId”来让说明文本和相应的input关联起来  (40)

8.表格标题要用caption,表头要用thead包围,主体部分用tbody包围,尾部要用tfoot包围,表头和一般单元格要区分开,表头用th,一般单元格用td (42)

9.尽可能少地使用无语义标签div和span;在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利 (43)

10.DTD:Document Type Definition,文档类型定义  (45)

11.如果在HTML的最开始漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中,(包括IE6、IE7、IE8)就会触发怪异模式 (46)

12.一开始就将浏览器的默认样式全部去掉。 如去掉ol和ul的列表样式,th的加粗,caption的居中,h系列标签的加粗、字号等     (53)

13.通用原子类里几个特殊的类:注意再理解一下  (53)

14.模块与模块之间尽量不要包含相同的部分,如果有相同的部分,应将它们提取出来,拆分成一个独立的模块。 (58)

  模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。 (60)

15.驼峰命名法用于区别不同单词,划线用于表明从属关系  (62)

16.类的使用:多用组合,少用继承  (71)

17.模块最好不要混用margin-top和margin-bottom,统一使用margin-top或margin-bottom (81)

18.HTML标签的权重是1,class的权重是10,id的权重是100  (82)

19.如果CSS选择符权重相同,那么样式会遵循“就近原则”,这值的是选择符定义的先后顺序,而不是挂class名的先后顺序。 (82)

20.为了保证样式容易被覆盖,提高可维护性,CSS选择符需保证权重尽可能低 (84)

21.CSS sprite:减少网页的HTTP请求数,减小服务器压力 (87)

22.CSS hack: IE条件注释法、选择符前缀法、样式属性前缀法 (92)

23.a标签的四种状态的排序问题:love hate 原则,即 l(link)ov(visited)e h(hover)a(active)te

24.“zoom”是最常用、最安全、成本最小的触发hasLayout的方式,一般情况下,使用它就完全可以触发hasLayout。如果遇到特殊的情况,“zoom:1”无效的情况下,我们可以通过设置“position:relative”来触发hasLayout,尽管它会带来一点副作用。(95)

25.块级元素的宽度会自动填满其父级元素宽度。块级元素可以设置width、height属性,行内元素设置width、height属性无效。块级元素即使设置了宽度,仍然是独占一行的。

行内元素的margin和padding属性很奇怪,水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果   (96)

26.text-align:center可以实现文本、图片等行内元素的水平居中。 (104) 确定宽度的块级元素水平居中是通过设置margin-left:auto和margin-right:auto来实现的 (105)

27.不确定宽度的块级元素的水平居中方法   3种(106)

28.父元素高度不确定的文本、图片、块级元素的竖直居中是通过给父容器设置相同上下边距实现的;父元素高度确定的单行文本的竖直居中,是通过给父元素设置line-height来实现的,line-height值和父元素的高度相同;  vertical-align属性只有当父元素为td或th时,才会生效,对于其他块级元素div、p等,默认情况下是不支持的。   父元素高度确定的多行文本、图片、块级元素的竖直居中方法: 使用表格包裹 ;使用display:table-cell  (109)

持续更新中,转载请注明出处~~

原文地址:https://www.cnblogs.com/KingdomLiu/p/5858157.html