HTML和CSS
1.W3C标准：
W3C标准由结构化标准语言，表现标准语言，行为标准语言等组成。W3C不是某一个标准，而是一系列标准的集合。
结构标准语言：XML和XHTML
拓展：建立XHTML的目的是实现HTML向XML的过渡
表现标准语言：CSS 拓展：CSS层叠演示表
行为标准语言：DOM和ECMAScript
2.http和https的区别：
HTTP 属于超文本传输协议，用来在 Internet 上传送超文本，而 HTTPS 为安全超文本传输协议，在 HTTPS 基础上拥有更强的安全性，简单来说 HTTPS 是 HTTP 的安全版，是使用 TLS/SSL 加密的 HTTP 协议。
1）https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2）http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3）http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4）http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
3.常用的http状态码:
分为5个大类：
1xx 服务器收到请求，可以继续执行
2xx 请求成功
3xx 重定向 需要进一步操作来完成请求
4xx 客户端错误
5xx 服务器错误
其中经常出现的有：
200成功服务器已成功处理了请求。
302重定向
304读取缓存
403禁止访问服务器拒绝此请求
404请求的资源不存在
500服务器内部错误服务器遇到错误，无法完成请求
4.cookie和session的区别
cookie存储在客户端（浏览器），session存储在服务端。Cookie不会占用服务器资源，是存在客户端内或者一个cookie文本文件中，而“session”则会占用服务器资源。
Cookie和Session的应用场景：session登陆验证信息；cookie判断用户是否登录过网站，以便下次登录时能够直接登录，如果我们删除cookie，则每次登录必须重新填写登录的相关信息。
5.HTML定义：HTML超文本标记语言，用于在internet上显示Web页面的主要标记语言
6.HTML5新特性：
（1） 拖拽（Drag）释放（Drop）API
（2） 语义化标签（header,nav,footer,aside,article,section）
（3） 音频、视频API（audio,video）
（4） 画布（Canvas）API
（5） 地理（Geolocation）API
（6） 数据存储localStorage和sessionStorage
localStorage和sessionStorage的区别：
都是用来存储客户端临时信息的对象，他们都只能存储字符串类型的对象，localStorage的生命周期是永久，若不在浏览器上清除该信息，它就会一直存在；而sessionStorage的生命周期为当前窗口或标签
页，一旦窗口或标签页被永久关闭了，则所有通过sessionStorage存储的数据都会被清空。localStorage可以在同一域名下的不同页面之间相互访问，sessionStorage只能在一个标签页下访问。
（7） 表单控件 calendar，date，time，email，url，search
7.CSS定义：CSS层叠样式表，用来表示HTML或XML等文件样式的计算机语言，可以静态修饰网页，还可以配合各种脚本语言动态的对网页各元素进行格式化
8.CSS选择器：
基础选择器：标签选择器、类选择器、ID选择器、通配符选择器
复合选择器：交集选择器 标签+类（ID）选择器{属性：值；}、
后代选择器 选择器+空格+选择器{属性：值;}、
子代选择器 选择器>选择器{属性:值;}、
并集选择器 选择器+，+选择器+，选择器{属性:值;}
9.元素之间的转换:
块->行内 display:inline
行内->块 display:block
块、行内->行内块 display:inline-block
行内元素可以定义左右的外边距，上下会被忽略掉
元素之间的区别：块元素独占一行，行内元素和行内块元素在一行显示，行内元素不能直接设置宽高，块元素和行内块元素可以设置宽高，块元素可以嵌套行元素和一些块元素，但行元素不能嵌套块元
素，其中p不能包含块元素，块元素的宽度就是父级的宽，行元素的宽高就是内容撑开的宽高，行内元素遇到父级边缘就会换行。
块元素：div,h1-h6,p,ul,li
行内元素：span,a,strong,em,del,ins
行内块元素：input,img
10.CSS三大特性：
层叠性 样式发生冲突时，总是执行后边的代码、
继承性 文字的所有属性都可以继承，h系列不能继承文字大小，a不能继承颜色、
优先级 默认样式<标签选择器<类选择器 继承的权重为0 权重会叠加 11.盒子模型： 标准盒子模型的宽度和高度只属于content，则 盒子总宽度=width+padding*2(假设padding四周都一样)+border*2+margin*2 盒子总高度=height+padding*2+border*2+margin*2 2. 怪异模型（即IE盒子模型border-box） 怪异盒子模型的宽度和高度包括content部分+padding和border部分，则 盒子总宽度=margin*2+width 盒子总高度=margin*2+height 12.CSS外边距合并现象 两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后外边距的高度等于两个发生合并的外边距中较高的那个边距值 13.嵌套的盒子外边距塌陷 1、 给父盒子设置边框 2、 给父盒子设置overflow：hidden；隐藏溢出 14.浮动布局 float:left/right 特点：不脱标，浮动的盒子在一行上显示 作用：文本绕图、制作导航、网页布局 清除浮动（清除浮动带来的不利影响）： 在最后一个浮动元素后添加标签,
给父级元素使用overflow:hidden;（如果有内容出了盒子，不能使用这个方法），
伪元素清除浮动
.clearfix:after{
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
15.定位
静态定位：position：static
绝对定位：position：absolute
脱标（不占据原来的位置），位置从浏览器出发，行内元素绝对定位后转换为行内块；父盒子使用定位，子盒子绝对定位，子盒子的位置从父元素位置出发
相对定位：position：relative
位置从自身出发，不脱标，行内元素不能转行内块
子绝父相：想将一个div或者元素定位在一个具体的范围之内，又想让这个元素的位置可以随意调整，就可以使用子绝父相。在制作下拉菜单时，就可以保证在缩放的情况下，还可以使下拉菜单在相应范围 内。
固定定位：position：fixed
脱标，位置从浏览器出发，会转化为行内块
16.CSS3新特性：
- 新增RGBA模式
- 文字阴影（text-shadow）
- 边框：圆角（border-radius），边框阴影（box-shadow）
- 盒子模型：box-sizing
- 背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-cilp 设置背景图片的裁剪区域
6.渐变：linear-gradient、radial-gradient
7.过渡：transition 可实现动画
8.自定义动画
9.border-image
10.2D转换 transform：translate(x,y)定位 rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
11.3D转换
12.新增选择器：属性选择器、伪类选择器、伪元素选择器
17. 弹性布局： 如果一个元素指定了display：flex，我们就说这个元素制定了弹性布局；并称他为容器，容器内的子元素成为item。任何元素都能指定flex布局，行内元素可以通过display：inline-flex来指定；指定弹性布局后，有6个属性可以使用，flex-direction 定义了主轴方向，flex-wrap 一条轴线排不下 item换行的方式，justify-content 定义item项在主轴上的对齐方式，align-items 定义了item项在副轴上的对齐方式，align-content 定义了多根轴线的对齐方式 如果item项只有一根轴线，则该属性不起作用
18. 盒子的水平垂直居中：
方法一、子绝父相 并设置子元素的top和left属性为50% margin-top和margin-left为-50px
方法二、子绝父相 设置子元素margin：auto 上下左右均为0
方法三、在父元素中设置display：table-cell属性 设置vertical-align：middle；text-align：center；子元素设置块元素转行内块元素
方法四、在父元素中添加display：flex属性 设置 justify-content：center；align-items：center
方法五 计算父盒子和子盒子的空间距离
方法六、利用transform 子绝父相 top和left设置50% transform：translate（-50%，-50%）
19. 如何垂直居中一个img
Display：table-cell
Text-align：center
Vertical-align：middle