第一部分 html和 css
1. 常用的 html5 特性
新增选择器 document.querySelector、document.querySelectorAll 语意化标签 article、footer、header、nav、section… 增强表单控件 calendar、date、time、email、url、search 地理位置接口 Geolocation 历史访问管理 history 媒体播放的 video 和 audio 本地存储 localStorage 和 sessionStorage Form Data 对象 绘图 canvas
2. 什么是 DOCTYPE 声明？怎么用？不写会有什么后果？
DOCTYPE 是 document type(文档类型)的简写。 ！DOCTYPE 是一个文档类型标记，是一种标准通用标记语言的文档类型声明，在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本。 用法：html5 中在页首加入，以前的 html4 中的 doctype 声明比较 复杂，分别是 strict 严格模式，transitional 宽松模式，frameset 框架模式。 不写的后果：所有现代浏览器会默认使用 html5 的文档声明，不会出现异常，但在一些 旧版本的 IE 浏览器中会进入怪僻模式，效果会变得很奇怪
3. html5 的离线存储用法及工作原理
该方法用于解决用户没有与因特网连接时，可以正常访问站点或应用，等到用户与因特网 连接成功时，会立即更新用户机器上缓存的文件。 原理：HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(注意，不是存储 技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储下来。 之后当网络处于离线状态下时，浏览器通过被离线存储的数据来进行页面展示
4.利用css 如何画一个三角形？
三角形原理：边框的均分原理
div {
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}
5.说说盒模型
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充， 和实际内容。 标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右) 怪异盒模型：一个块的总宽度=width+margin（左右）（既 width 已经包含了 padding 和 border 值） 如何设置：box-sizing:border-box
6.怎样去隐藏一个元素
- opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如 click 事件，那么点击该区域，也能触发点击事件的
- visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件
- display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元 素删除掉
7.display:none 和 visibilty:hidden 的区别
- visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件
- display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元 素删除掉。
8.说说一下flex布局
flex 是 Flexible Box 的缩写，意为"弹性布局"。指定容器 display: flex 即可。 容器有以下属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items， align-content。 flex-direction 属性决定主轴的方向； flex-wrap 属性定义，如果一条轴线排不下，如何换行；
9.css 的常用选择器
id 选择器，类选择器，伪类选择器等
10说说如何垂直居中一个元素？
- 父元素固定宽高，利用定位及设置子元素 margin 值为自身的一半。
- 父元素固定宽高，子元素设置 position: absolute，margin：auto 平均分配 margin
- css3 属性 transform。子元素设置 position: absolute; left: 50%; top: 50%;transform:
- translate(-50%,-50%);
- 将父元素设置成 display: table, 子元素设置为单元格 display: table-cell。
- 弹性布局 display: flex。设置 align-items: center; justify-content: center;
