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