本篇简洁记录一下，有些值得学习的地方，方便日后记忆。
1.web标准--结构、样式、行为 的分离
- 结构标准（xml、xhtml、html）
- 样式标准（css）
- 行为标准（DOM、ECMAScript）
2.语义化标签意义在于
-
搜索引擎看到的只是代码只能通过标签来判断语义，来看当失去样式"css裸体日"（Web Developer可调试），网络结构是否组织良好有序/可读性
-
语义化标签应该注意：尽可能少地使用无语义标签div和span； 在语义不明显，既可以使用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；
3.组织CSS的方法
- base.css:与具体UI无关，力求精简和通用
- common.css:提供组件级的css类，尽可能将内部实现封装
- page.css:高度重用的模块有，每个页面都自己的page
4.CSS命名：
- 骆驼命名法: 区别不同单词，
- 划线: 表明从属关系,推荐组合命名
- 如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（如mt10，mb20）.模块最好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom(上下margin会重合，左右不会)。
5.权重:
- HTML标签权重是1
- class的权重是10
- id的权重是100
- !important的权重是1000。
- 如果CSS选择符权重相同，那么样式会遵循就近原则(哪个选择符最后定义，就采用哪个选择符的样式)
- CSS选择符需保证权重尽可能低。少用自选择器，多添加class。
6.CSS sprite
- 图片翻转技术将多张图片合并为一张,不懂可看这里
雪碧图 （耗时5分钟）
7.CSS hack
- IE条件注释；lt,gt,lte,gte
- 选择符前缀法；
- 样式属性前缀法。
8.解决超链接访问后hover样式不出现的问题
- love hate原则，即l（link）ov（visited）e h（hover）a（active）te。
9.haslayoutIE浏览器专有的属性
- 用于CSS的解析引擎，在IE下一些复杂的CSS设置解析起来会出现bug，
- 其原因可能与haslayout没有被自动触发有关；haslayout触发方法：设置width，height的值，设置position为relative，但是会有副作用；更好的解决方法：使用“zoom：1”.
10.块级元素和行内元素
- 块级元素（div,p,form,ul,ol,li）
- 行内元素（span,strong,em）设置width，height属性,竖直方向边距（内外）无效。
11.display：inline-block
- 行内的块级元素，拥有块级元素的特点，可以设置长宽，可以设置margin和padding的值，却不独占一行，宽度并不沾满父元素。
- IE6和IE7不支持，可以通过触发行内元素的halayout实现。
12.水平居中
- 行内元素的水平居中： text-align：center
- 确定宽度的块级元素的水平居中 ：margin-left：auto；margin-right：auto
- 不确定宽度的块级元素水平居中：
1.将ul包含在table标签内，对table设置margin-left：auto和margin-right：auto；
2.改变块级元素的display为inline类型，然后使用text-align：center；
3.给父元素设置float，然后父元素设置position：relative 和left：50%，子元素设置position：relative和left：-50%。
13.垂直居中
-
父元素高度不确定的文本，图片，块级元素的竖直居中：通过给父容器设置相同上下边距实现。
-
父元素高度确定的单行文本的竖直居中：通过给父元素设置line-height来实现，line-height值和父元素的高度只相同。
-
父元素高度确定的多行文本，图片，块级元素的竖直居中
1.当父元素为td或th时，可以设置vertical-align属性
2.对支持display：table-cell的IE8H和Firefox用display：table-cell和vertical-align：middle来实现居中
3.不支持的IE6和IE7，使用特定格式的hack。
14.合作控制全局变量
- 团队合作中，用匿名函数将脚本包起来，可以有效控制全局变量，避免冲突隐患。
15.JavaScript分层
- base层：
1.位于底端，封装不同浏览器下JavaScript的差异
2.提供统一的接口，可以靠它来完成跨浏览器兼容的工作
3.扩展JavaScript语言底层提供的接口，让它提供更多更为易用的接口。 - common层：
1.中间层，依赖base层提供的接口
2.common层提供可供复用的组件，和页面功能没有直接关系 - page层：位于顶端，和页面里的具体功能需求直接相关
16.获得DOM节点的三种方法
- getElementById，
- getElementsByTagName
- getElementsByClassName（这个原生js没有,类库有）
17.使用id的注意事项
-
同一个页面里id只能出现一次，所以如果你的程序需要被多处复用，就一定不能使用id作为JavaScript获得DOM节点的挂钩。
-
组件需要指定一个根节点，以保持每个组件之间的独立性。
网友评论