一、基础知识
1、打造高品质的前端代码，提高代码可维护性——（精简，重用，有序） (网页重构)
精简代码可以让文件变小；有利于客户端快速下载；重用可以让代码更易于精简。同时有助于提升开发速序，有序可以让我们更清晰的组织代码，使代码易天维护，有效应对变化。
2、语义化，熟悉所有规范的HTML标签，理解各标签的语义，在合适的地方使用合适的标签。
例如：h表示标题文字，p表示文字内容，ul，ol表示无序与有序列表
3、渐进增强与优雅降级
1) 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2) 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
4、重绘与重排
1) 重排 (html改变) 一般是位置，大小，节点变化引起文档空间变化时发生的。
引起重排属性和方法：
DOM改变、input 输入内容改变、resize、style属性改变、margin、计算offsetWidth和offsetHeight。
2) 重绘（css改变）一般是颜色等不引起文档结构变化时发生的
注：重绘不一定导致重排，但重排一定会导致重绘。
5、CSS优先级特征
!important > 内联样式 > ID选择器 > 类选择器 > 继承 > 浏览器默认属性
6、常用块元素与内联元素：
块元素 div、form 、h1、 p、table 、ul
内联元素 a、br、em、input、span、strong
7、CSS 裸奔日是每年的4月9日，目的是为了推动Web标准、提倡简洁为美、使用正确的(x)html语义标记、良好的层次结构。
1）多div 少class(为将来做考虑，扩展性)
2）少用绝对定位、相对定位。
二、项目常用
1、favicon图标介绍转换地址： http://www.bitbug.net/一般大小：16X16 favicon.ico
2、高速模式显示（webkit）
1）360高速浏览 <meta name=”renderer” content=”webkit”>
2）用以声明当前页面用chrome内核来渲染。
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
扩展：
国内的主流浏览器都是双核浏览器
由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。
以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。
兼容模式与高速模式选择：（重要）
1）IE 兼容模式 <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”> Edge模式选择
<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> IE7模式选择
2）360高速浏览 <meta name=”renderer” content=”webkit”>
3）用以声明当前页面用chrome内核来渲染。
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
（注：Google Chrome 浏览器内嵌框架 – GCF,使用GCF可以让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，并且支持Windows XP及以上系统的IE6/7/8。）
3、针对ie9以下浏览器跳转新页面，友好提示
（1）<!–[if lt IE 9]><script>window.location = ‘error.html’;</script><![endif]–>
（2）针对ie7浏览器的友情提示
<!–[if lte IE 7]>
<div style=”background:#f10521; font-size:16px; color:#fff; text-align:center; height:40px; line-height:40px”>
您的IE浏览器版本过低，为了获得更好的浏览体验，建议您升级至IE最新版或使用Chrome，Firefox等浏览器。
</div>
<![endif]–>
4、*autocomplete=”off”;关闭浏览器的保存用户名与密码功能 （重要）
5、input,textarea{outline:none;}去掉chrome,safi框选择。
6、省略号兼容问题
white-space:nowrap;/*设置不折行*/text-overflow:ellipsis;/*这就是省略号喽*/
-o-text-overflow:ellipsis;/*兼容opera*/overflow: hidden;/*设置超过的隐藏*/width:420px;
7、border:0消耗内存 border:none不予对border进行任何渲染，节省内存。
8、禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
9、在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。（重要）
设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素。
针对ie7/8浏览器：display:table-cell; *display:inline-block;
例如：display:table-cell实现的列表布局
.list_row{display:table-row;}
.list_cell{display:table-cell; *display:inline; width:33.3%; padding-bottom:30px; vertical-align:top; *zoom:1;}
10、表单中Readonly和Disabled的区别
1) Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
2) 表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。
小技巧：diabled可用readonly代替，background-color:#cccccc;加上灰色背景色就可以。
例如：
<input name=”q1″ type=”text” id=”q1″ value=”readonly” readonly=”true” />
<input name=”q2″ type=”text” disabled=”disabled” id=”q2″ value=”disabled” />
11、visibility: hidden;与display:none区别：
visibility: hidden—-将元素隐藏，但是在网页中该占的位置还是占着。
display: none—-将元素的显示设为无，即在网页中不占任何的位置。
12、引入CSS的方法有两种，一种是@import，一种是link
@import url(‘地址’); <link href=”地址” rel=”stylesheet” type=”text/css” />
现在绝大部分的网站都采用后一种link方式，原因在于
@import先加载HTML，后加载CSS
link先加载CSS，后加载HTML。
13、font-face 字体库，包括格式：ttf、eot、svg、woff字体库格式。
@font-face {
font-family: roboto-regular;
src: url(font/roboto-regular.ttf) format(“truetype”); /* Safari, Android, iOS */
src: url(font/roboto-regular.eot) format(“embedded-opentype”); /* IE6-IE8 */
src: url(font/roboto-regular.svg) format(“svg”); /* Legacy iOS */
src: url(font/roboto-regular.woff) format(“woff”); /* Modern Browsers */}
14、清除ie的默认选择框样式清除，隐藏下拉箭头ie9
select::-ms-expand {display: none;}
15、IE10 取消input框默认的叉叉和密码输入框的眼睛
::-ms-clear { display: none; } ::-ms-reveal { display: none; }
16、Chrome, 其默认有最小字体大小限制 -webkit-text-size-adjust:none;
17、HTML5已经去掉name属性，实现锚点时请使用id
18､怎么让Chrome支持小于12px 的文字？
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
三、兼容问题
1、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）
解决方法：display:inline
2、img于块元素中，底边多出空白
解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;
3、PNG半透明图片的问题 DD_belatedPNG.js
4、li在IE中底部3像素bug float:left;width:100%;
5、IE7下position:relative与overflow的问题
父容器设置overflow:auto;子元素设置属性position:relative;在ie6、ie7中该子元素不随滚动条滚动。
给设置了overflow:auto属性的父容器也加上position:relative。
6、清除图片下方出现几像素的空白间隙
方法1：img{display:block;}
方法2：img{vertical-align:top;}
方法3：#test{font-size:0;line-height:0;}
7、css hack
IE6能识别*，但不能识别!important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
例如：
color:gray; FF等非IE浏览器字体色将为灰色
color:red\9; IE8 IE9字体色将为红色
*color:green; IE7字体色将为绿色
_color:blue; IE6字体色将为蓝色
8、inline-block 元素之间会莫名其妙多出3px的间距 (重要)
处理方法：在inline-block的父元素中加上 font-size：0；
font-size:0清除换行符间隙
.space {font-size: 0;-webkit-text-size-adjust:none;}
.space a {font-size: 12px;}
9、overflow：hidden和display: inline-block一起使用时会造成baseline的移动，加了vertical-align: bottom可以解决这个问题。
10、white-space属性应用：
white-space:normal; 默认。空白会被浏览器忽略。
white-space:pre;空白会被浏览器保留
white-space:pre-line; 合并空白符序列，但是保留换行符。
是英文的一个空格
  相当于半个中文字的位置
  相当于一个中文字的位置
四、页面优化
1、PageSpeed Insights
PageSpeed 的测试包含移动设备和桌面设备两方面，使您的网页在所有设备上都能快速加载。分析页面状态。
页面优化方面：
1）图片整合，减少服务请求数量。
图片进行无损压缩优化，推荐地址：
http://www.smushit.com/ysmush.it/ 针对png,jpg
http://tinypng.org/ 针对png
2）尽量加JS文件放到网页结尾处，从而来提高网页打开速度。（页面加载完成后读取）
3）js，css的压缩，img的无损压缩。
五、SEO方面
1、关于SEO优化方面：
1）alt（图片）和title属性，为搜索引擎提供更多的背景和相关性。
2）ico、标题、关键词、描述
2、Xenu软件
用Xenu方便的检测网站内部链接的可爬行性,是否有错误链接
注：图片是否显示问题，链接问题
尽量少用绝对定位、相对定位（注：容易导致页面不好控制）
常用标签名称：
< <
> >
& &
" ‘
® 注册符号
© 版权符号
™ TM
» >>
“ 左引号
” 左引号
· ……
  一个空白位
