1. 问:如果用的ajax请求提交而不用表单的submit是否需要form元素？
答：理论上是不需要用form的 但是建议用form
1. form中submit和reset的特性可以使用
2. 有form时可以用一些方法批量获取表单（第三方库可以整体提取值）
3. 第三方库可以进行表单验证
4. 对用户来说，用form可以记住密码
2. HTML5新增内容
- 新区块标签 section article nav aside（一般不在大纲中）
- 表单增强 日期 时间 搜索 表单验证 placeholder 自动聚焦
- 新增语义
- header/footer（可放在div等里面）
- section/articel (区域，div最宽泛，当不知道用什么时可以用div；当知道是一块文章/导航等可以用section；当知道是一篇文章时可以用article）
- nav 导航
- aside 不重要内容
- em/strong 强调
- i 图标
- 新的API（离线/音视频/图形/实时通信/本地存储/设备能力）
- 分类和嵌套变更
3. doctype的意义是什么
以前IE渲染有自己的模式，最典型的是盒子模型，盒子模型设置的宽度是包括margin和padding的，
doctype的意义是 1. 让浏览器以标准模式渲染 2.让浏览器知道元素的合法性
4. HTML属于SGML
5. XHTML属于XML，是HTML进行XML严格化的结果
6. HTML5不属于SGML或XML，比XHTML宽松
7. em和i有什么区别
em是语义化的标签，表示强调
i是纯样式的标签，表斜体
HTML5中i不推荐使用，一般用作图标
8. 语义化的意义是什么
- 开发者容易理解
- 机器容易理解结构（搜索/读屏软件）
- 有助于SEO（搜索引擎优化）
- semantic microdata(语义扩展）内容被搜索引擎更好的理解、分析和索引，便于维护
9. 哪些元素可以自闭合
- 表单元素 input
- 图片img
- br(换行符） hr（分隔）
- meta link
10. HTML和DOM关系
写的HTML其实是一串字符串，是流的形式，通过浏览器解析后成为DOM，JS维护的是解析后形成的DOM树，并不是HTML
11. property和attribute关系
property：特性，是活的，是在解析后DOM中
attribute：属性，是死的，是在HTML中
property和attribute的改变彼此间不影响
12. CSS选择器优先级
- 元素选择器 a{}
- 伪元素选择器 ::before{}
- 类选择器 .link{}
- 属性选择器 [type=radio]{}
- 伪类选择器 :hover{}
- ID选择器 #id{}
- 组合选择器 [type=checkbox] + label{}
- 否定选择器 :not(.link){}
- 通用选择器 *{}
13. 选择器权重
- ID选择器 +100
- 类 伪类 属性 +10
- 元素 伪元素 +1
- 其它选择器 +0
14. 雪碧图作用
- 减少HTTP请求，提高加载性能
- 一些情况下可以减少图片大小
15. 自定义字体的使用场景
- 宣传/品牌/bannner等固定文案
- 字体图标
16. base64的使用
- 减少http请求
- 适用于小图片
- base64的体积约为原图的4/3
17. 伪类和伪元素的区别？
- 伪类表状态：如鼠标正悬停在这个元素上，一个链接等
- 伪元素是真的有元素：如 before 等是真实存在的元素
- 伪类用 : 伪元素用 ::
- 由于浏览器原因，有些伪元素还是要用 :
18. 如何美化checkbox
- 用lable[for]与input的id关联
- 隐藏原生input
- :checked + label
19. 实现两栏（三栏）布局
- 表格布局
- float+margin（主流方式，兼容性好，要注意清除浮动）
- inline-block （注意清除间隙）
- flexbox比较新的布局方式，但是兼容性不是很好
20. position：absolute和fixed有什么区别？
- absolute是相对最近的absolute/relative
- fixed是相对屏幕viewport
- fixed早期在移动端的兼容性不好，一般不能够使用，在最近两年的设备兼容性好一些
21. 为什么display:inline-block有间隙
原因:有字符间距
解决方法：
- 消除字符：将字符写在一行或中间加注释
- 消除间距：将字体设置为0
22. 如何清除浮动
原因： float元素独立于文本流之外
解决方法：让盒子负责自己的布局
overflow:hidden(auto)::after{clear:both}
23. 如何适配移动端
- 一定要加viewport
- rem/viewport/media query
- 设计上：隐藏 折行 自适应
24. 如何用一个div画XXX
- 用box-shadow无限投影 + ::before + ::after
25. 如何产生不占空间的边框
- box-shadow
- outline
26. 如何实现圆形元素（头像）
- border-radius:50%
27. 如何实现ios图标
用clip-path:(svg)
28. 如何实现半圆/扇形等图形
- border-radius组合 边框 边框粗细 圆角半径
29. 如何平移/放大一个元素
- transform:trabslateX(100px)
- transform:scale(2)
30. 如何实现3D效果
- perspective:500px;
- transform-style:preserve-3d;
- transform:translate rotate;
31. 过渡动画和关键帧动画的区别
- 过渡动画需要有状态的变化
- 关键帧动画不需要状态变化
- 关键帧动画能控制的更精细 reverse infinite 等
32. 如何实现逐帧动画
- 使用关键帧动画
- 去掉补间 steps(1)
33. CSS动画的性能（CSS动画和JS动画无法讨论谁好谁坏）
- 性能不坏
- 部分情况下优于JS
- 但JS可以做得更好
- 部分高危属性 box-shadow等 无论用CSS还是JS性能都比较差
34. 常见CSS预处理器
- Less 原生是用nodejs写的 还有一个版本可以在浏览器中运行
- Sass 原生用ruby写的 还有衍生的node版本，用C++写的
35. CSS预处理器作用
- 更好的组织CSS代码
- 提高代码复用率
- 提升可维护性
36. 预处理器功能
- 嵌套 反映层级与约束
- 变量和计算 减少重复代码
- extend和mixin 代码片段
- 循环 适用于复杂的有规律的样式
- import CSS文件模块化
37. 预处理器优缺点
- 优点 提高代码复用率和可维护性
- 缺点 需要编译 学习复杂
38. Bootstrap优缺点
- 优点 CSS源码结构合理 有一套现成的样式
- 缺点 定制比较繁琐 体积大
39. Bootstrap如何实现响应式布局
- 原理 通过 media query设置不同分辨率的class
- 使用 为不同分辨率选择不同的网格class
40. 如何基于Bootstrap定制自己的样式
- 使用css同名类覆盖
- 修改源码重新构建
- 引用scss源文件 修改变量
