Web前端开发修炼之道—笔记

 

　　01、判断标签的语意是否良好：去掉页面中所有的样式，看网页结构是否良好有序，仍然具有很好的可读性；

　　02、fieldset标签包围表单域，默认有边框，设置border为none；legend标签说明表单用途，display属性设置为none；input对应文本用label标签，通过input的ID属性值与label的for属性值关联；

　　03、表格标题用caption，表头用thead， 主题用tbody，尾部用tfoot，表头与一般单元格区分，表头用th， 表格用td；

　　04、浏览器的浏览模式有标准模式和怪异模式两种。标准模式浏览规范页面，怪异模式模拟老式浏览器浏览老站点页面 ，两者具有比较大的差异。怪异模式通过文档格式定义DTD触发，如果在IE中漏写DTD声明，就会触发怪异模式；

　　05、CSS命名推荐使用英语，常见的两种命名方法：骆驼命名法和划线命名法。骆驼命名法是指从第二个单词开始，每个单词首字母大写。划线命名法是指单词间用中划线或下划线分割。两种命名方法推荐组合使用；

　　06、 html标签的id属性值只能挂一个，class属性可以挂多个。在定义class灵活运用“多用组合，少用继承”的原则；

　　07、相邻元素在设置margin-top和margin-bottom属性时，会产生上下重合问题，相邻左右边距不会产生该问题；

　　08、 CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符。权重规则是这样的：HTML标签权重为1，class权重为10，id的权重是100；同权重选择符，样式遵循就近原则，采用最后定义的选择符样式；

　　09、CSS sprite技术的好处是一次请求HTTP多次使用减轻服务器压力，但是多图片集合会降低开发效率，增大维护难度；

　　10、CSS编码风格有两种：多行式和一行式。多行式的编码可读性更强，但行数过多。一行式可读性差些，行数少，有利于提高开发速度；

　　11、CSS hack——IE条件注释

<!--[if IE]>

<link type="text/css" href="test.css" rel="stylesheet">

<!--[if IE]> 

　　如果只是针对某个范围内版本的IE进行hack，可以结合lte(小于等于)、lt(小于)、gte(大于等于)、gt(大于)、!(不等于)关键字进行注释；

<!--[if gt IE6]>

<link type="text/css" href="test.css" rel="stylesheet">

<![endif]>

 　　除了可以对引用的CSS进行hack，还可以包围style进行hack：

<!--[if IE6]>

<style type="text/css">

.test{}

</style>

<![endif]-->

　　也可以对JS进行hack。IE条件注释是微软官方推荐的hack方式，理论上是最好的选择，但要求集中所有hack；

　　12、CSS hack——选择符前缀法，它的可维护性强，但是在向后兼容性上存在一点风险。CSS hack——样式属性前缀法，只在特定浏览器下生效，但是向后兼容存在风险；

　　13、A标签的四种状态排序有一定的规则，即love hate原则，l(link)ov(visited)e h(hover)a(active)te ；

　　14、block块儿元素和inline行内元素的区别：块儿元素独占一行，宽度自动填满父元素，可以设置width和height属性，可以设置margin和padding内外边距属性，对应的CSS属性是display:block。行内元素不会独占一行，相邻元素会排列在同一行里，其宽度随元素的内容而变化，其水平方向的内外边距正常，但竖直方向的边距却无效果，对应的CSS属性是display:block；

　　15、 display:inline-block，IE6和IE7不支持这个属性，需要通过触发行内元素hasLayout。display:inline-block是行内块元素，拥有块儿元素的特点，可以设置长宽，可以设置内外边距，但它不独占一行，集块儿元素和行内元素于一身；

　　16、 网格布局中，原则上重要的内容放在前面先行加载，不太重要的放后面后加载；

　　17、Flash在网页中有wmode属性，用于指定窗口模式，其属性值有window/opaque(非窗口不透明)/transparent(非窗口透明)，默认为window；

　　18、IE支持object标签，firefox支持embed标签，所以在网页中，常将两者合写；

　　19、PNG图片在IE6下无效果，可以使用IE下私有的滤镜功能解决，格式如下：progid:DXimageTransfrom.Microsoft.AlphaImageLoader(src='图片路径',sizingMethod='crop')；

　　20、水平居中的三种思路：①行内元素通过给父元素设置text-align:center实现；②确定宽度的块元素可以设置左右外边距自适应margin:0px auto；③不确定宽度的块元素可借助table实现，可将块元素通过display:inline转换为行内元素设置text-align:center，可通过给父元素设置float属性，然后设置父元素position:relative和left:50%，子元素设置position:relative和left:-50%，但这种方法会带来副作用；

　　21、竖直居中的方法：①父元素高度不确定的块元素，给父元素设置相同的内边距；②父元素高度确定的单行文本，可设置父元素的行高line-height与高度height相同；③父元素高度确定的多行文本、图片、块元素的竖直居中，可以借助table的vertical-align:center，可使用IE8和firefox支持的display:table-cell；

　　22、所谓高质量的代码，在WEB标准的思想指导下，在实现结构、样式和行为分离的基础上，还要做到三点：精简、重用、有序。精简代码大小，重用提升开发速度，有序易于维护；

　　23、原生javascript被浏览器默认支持，javascript类库是在原生javascript的基础上封装了跨浏览器的特性并扩展了一些功能；

　　24、hasLayout是IE浏览器的专有属性，用于CSS的解析引擎。触发hasLayout的方法有很多种，例如用zoom:1触发，但在复杂的CSS下也会无效，但它是最常用、最安全的方式；

　　25、position:relation和position:absolute都可以改变元素在文档流中的位置，可以让元素激活left/right/top/bottom和z-index属性。position:relation保留自己在z-index:0层的占位，即使设置了left/right/top/bottom，但仍在0层不会对该层其他元素造成影响。position:relation完全脱离文档流，不再在0层占位，设置的left/right/top/bottom是相对于自己最近的父元素。float也可以改变文档流，但它不会让元素上浮，仍在0层排列，只能通过float:left和float:right控制元素在同层的左右浮动，它会影响到周围元素的排列；

　　26、注释规范：

　　文件头注释：

/**

*文件用途说明

*作者姓名

*联系方式

*时间日期

**/

 　　大模块注释：

//====================

//代码用途

//====================

　　小模块注释 ：

//代码说明(单独占一行)

 　　27、推荐公用base.css

@charset "utf-8";

/* CSS Document */

/*CSS reset*/

html{color:#000;background:#FFF;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,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,optgroup{font-style:inherit;font-weight:inherit;}

del,ins{text-decoration:none;}li{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;font-variant:normal;}

sup{vertical-align:baseline;}

sub{vertical-align:baseline;}

legend{color:#000;}

input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

input,button,textarea,select{*font-size:100%;}



/*文字排版*/

.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:underlline;}

.no_unl{text-decoration:none;}



/*定位*/

.tl{text-align:left;}

.tc{text-align:center;}

.tr{text-align:right;}

.bc{margin-left:0;margin-right:0;}

.fl{float:left;display:inline;}

.fr{float:right;display:inline;}

.cb{clear:both;}

.cl{clear:left;}

.cr{clear:rigth;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.vm{verticle-align:middle;}

.pr{position:relative;}

.pa{position:absolute;}

.abs-right{position:absolute;right:0}

.zoom{zoom:1;}

.hidden{visiility: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;}

.w300{width:300px;}

.w400{width:400px;}

.w500{width:500px;}

.w600{width:600px;}

.w700{width:700px;}

.w800{width:800px;}

.w{width:100%}

.h50{width:50px;}

.h80{width:80px;}

.h100{width:100px;}

.h200{width: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:50px;}

.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;}

.pt100{padding-top:100px;}

.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;}