作者：jiuye | 来源：互联网 | 2023-08-28 15:27
2010年6月第1版1.除了应掌握CSS、HTML、JavaScript技术，还要清楚地了解它们在不同浏览器上的兼容情况，渲染原理和存在的Bug。（推荐序）2.在前端开发这个领域，“一专多
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）
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有