编写高质量代码：Web前端开发修炼之道

2019独角兽企业重金招聘Python工程师标准>>>

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

 

转载于:https://my.oschina.net/changeme/blog/264636