1. doctype的意义是什么？
- 让浏览器以标准模式渲染
- 让浏览器知道元素的合法性
2. HTML、XHTML、HTML5的关系？
- HTML属于SGML
- XHTML属于XML，是HTML进行XML严格化的结果
- HTML5不属于SGML或XML，比XML宽松
3. HTML5有什么变化？
- 新的语义化元素
- 表单增强
- 新的API（离线、音视频、图形、实时通信、本地存储、设备能力）
- 分类和嵌套变更
4. em和i有什么区别？
- em是语义化的标签，表强调
- i是纯样式的标签，表斜体
- HTML5中i不推荐使用，一般用做图标
5. 语义化的意义是什么？
- 开发者容易理解
- 极其容易理解结构（搜索、读屏软件）
- 有助于SEO
- semantic microdata
6. 哪些元素可以自闭合？
- 表单元素input
- 图片img
- br、hr
- meta、link
7. HTML和DOM的关系？
- HTML是死的
- DOM由HTML解析而来，是活的
- JS可以维护DOM
8. property和attribute的区别？
- attribute是死的，是写在html中的
- property是活的
- 修改不互相影响
9. form的作用？
- 直接提交表单
- 使用submit / reset按钮
- 便于浏览器保存表单
- 第三方库可以整体提取值
- 第三方库可以进行表单验证
10. 选择器权重？
- ID选择器 #id +100
- 类、属性、伪类 +10
- 元素、伪元素 +1
- 其他选择器 +0
11. css背景？
（1）渐变色背景
.c2{
height:90px;
/* background: -webkit-linear-gradient(left, red, green); */
/* background: linear-gradient(to right, red, green); */
/* background: linear-gradient(180deg, red, green); */
/* background: linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%); */
background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%); /* 交叉线背景 */
background-size: 30px 30px;
}
12. 文字折行？
- overflow-wrap(word-wrap)通用换行控制 —— 是否保留单词
- word-break 针对多字节文字 —— 中文句子也是单词
- white-space 空白处是否换行
13. base64的使用？
- 用于减少HTTP请求
- 适用于小图片
- base64的体积约为原图4/3
14. 伪类和伪元素的区别？
- 伪类表状态
- 伪元素是真的有元素
- 前者单冒号，后者双冒号
15. 如何美化checkbox？
- label[for]和id
- 隐藏原生input
- :checked + label
16. 如何实现3D效果？
- perspective: 500px;
- transform-style:preserve-3d;
- transform: translate rotate …
17. css动画？
（1）动画的原理
- 视觉暂留作用
- 画面逐渐变化
（2）动画的作用
- 愉悦感
- 引起注意
- 反馈
- 掩饰
（3）css中动画的类型
- transition补间动画
- keyframe关键帧动画、逐帧动画（animation）
（4）补间动画
- 位置 - 平移（left/right/margin/transform）
- 方位 - 旋转（transform）
- 大小 - 缩放（transform）
- 透明度（opacity）
- 其他 - 线性变换（transform）
（5）关键帧动画
- 相当于多个补间动画
- 与元素状态的变化无关
- 定义更加灵活
（3）逐帧动画
- 适用于无法补间计算的动画
- 资源较大
- 适用steps() animation-timing-function: steps(1);
18. 过渡动画和关键帧动画的区别？
- 过渡动画需要有状态变化
- 关键帧动画不需要状态变化
- 关键帧动画能控制更精细
19. 如何实现逐帧动画？
- 使用关键帧动画
- 去掉补间（steps）
20. css动画的性能？
- 性能不坏
- 部分情况下优于JS
- 但JS可以做到更好
- 部分高危属性box-shadow等
