前端复习

1.渐进增强

web设计时强调可访问性，语义化HTML标签，外部样式表和脚本，保证所有人都能访问页面的基本内容和功能，同时为高级浏览器和高宽带用户提供更好的用户体验

所有浏览器都必须能访问基本内容
所有浏览器都必须使用基本功能
所有内容都包含在语义化标签中
通过外部css提供增强的布局
通过非侵入式，外部js提供增强功能

2.状态码及其含义

1XX 信息状态码
2XX 成功状态码
3XX 重定向
4XX 客户端错误
5XX 服务器错误

3.css hack原理

利用不同浏览器对css的支持和解析结果不一样，编写针对特定浏览器样式

IE条件注释，适用于IE5-IE9

<!--[if IE 6]>
<![endif]-->

选择器hack

4.link和import的区别

link是HTML方式，@import是css方式
link可以最大限度支持并行下载，@import是同步下载
浏览器对link的支持早于@import
@import必须在样式规则前，可以在css文件中引用其他文件
link优于@import

5.图片格式选择

GIF

无损压缩
支持简单动画
支持透明

JPEG

有损压缩
可控制压缩质量
不支持透明
适合照片

PNG

支持透明，无动画
无损压缩
适合图标背景，按钮

6.css不继承属性

文本属性
vertical-align 垂直文本对其
text-decoration 文本修饰
text-shadow 文本阴影
盒子模型属性
width, height, margin, padding
背景属性
background
定位属性
float, clear, position, overflow, z-index

7.兼容opacity

使用IE5-IE8的filter滤镜来实现，滤镜中的是透明度

.opacity{
  opacity: 0.4;
  filter: alpha(opacity=60);
}

8.使用伪元素清除浮动的原理

display: table为了防止容器和子元素的垂直外边距合并

9.BFC

创建规则：

根元素
浮动元素
绝对定位元素
display取值为inline-block
overflow不是visible的元素

作用：

可以包含浮动元素
不被浮动元素覆盖
给父元素创建BFC，阻止父子元素的margin折叠

10.图片hack

可以为图片添加伪元素，正常情况下img是替换元素，当图片无法正常加载时，就会显示图片的伪元素，可以设置其绝对定位和宽高，提供友好的加载失败提示

不兼容苹果浏览器，可以配合懒加载，

11.图片懒加载的原理

将页面中所有img的src属性用data-src代替，当页面滚动到此图片出现在可视区时，用js取到图片的data-src赋值给src属性

12.defer属性

HTML5规范要求脚本按他们出现的先后顺序执行，defer脚本也会先于DOMContentLoaded事件执行，现在的执行情况是，执行延时脚本不一定会按照顺序执行，也不一定会DOMContentLoaded事件执行触发前执行