1.标签三大类及区别：
块级元素 <div> 默认占元素整行 ，可设宽高
行内块元素 <img> 默认不占整行 ，可设宽高 内容宽
行内元素 <a>默认不占整行 不可设宽高 内容宽
2.css引入方式有几种：
内嵌式 ： 通过<style></style>来书写CSS代码。（一般放在<head>。）
外联式：<link>引入 （<link>标记只能放在<head>中）
行内样式：通过style的属性来书写CSS代码 举例：<p style=“font-size:24px;”></p>
3.css样式优先级：
权重！
行内样式>内部样式
行内样式>外部样式
一级一级往下找它会逐个+1
4.前端三大模块及作用：
html 标签 css 样式 js行为
5.html语意化：
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
6.H5和html有什么区别：
h5是html的升级 去其糟粕 取其精华
7.为什么写！doctype：
声明文件类型为html
css盒模型有几种，区别是什么：
标准盒模型，一个块的总宽度 = width（content的宽度） + margin（左右）+ padding（左右）+ border（左右）
怪异盒模型，一个块的总宽度 = width（content + border + padding）+ margin(左右)
8.水平垂直居中的方法：
1.margin和width实现水平居中 2.inline-block实现水平居中方法 3.浮动实现水平居中的方法
4.绝对定位实现水平居中 5.CSS3的flex实现水平居中方法 6.CSS3的fit-content实现水平居中方法
7.最外层转table 内层转table-cell 设置text-align:center; vertical-align:middle;
9.常见五大浏览器及其内核：
-webkit) //谷歌 Safari（苹果）
-moz- // Firefox
-ms- // IE
-o- // Opera
10.css3有哪些新增的属性
-
RGBA和透明度
-
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
-
word-wrap（对长的不可分割单词换行）word-wrap：break-word
-
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
-
font-face属性：定义自己的字体
-
圆角（边框半径）：border-radius 属性用于创建圆角
-
边框图片：border-image: url(border.png) 30 30 round
-
盒阴影：box-shadow: 10px 10px 5px #888888
-
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
- transition过渡
- @keyframes定义动画 animation 使用动画
- transform：
- translate()平移
- rotate()旋转
- scale()缩放
- skew()翻转
- matrix()把2d方法组合到一起
11.什么是响应式设计
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
12.css3新增的伪类
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
13.css3的动画实现
animation（使用动画）: myfirst 5s;
@keyframes 中创建动画，把它捆绑到某个选择器，myfirst选择器
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
14.元素隐藏方法
display:none; 不占位
visibility:hidden占位
opacity：0元素透明
height：0
15.优化网站
1. 减少HTTP请求数。
2. 减小被请求文件的大小，减少请求数据占用的网络带宽。
3. 通过版本化控制客户端缓存。
5. 删除页面中一些可有可无的内容。
6. 删除网页代码中的空语句。
7. 删除HTML的默认属性。
8. 优化CSS。
9. Visibility快于Display。
10. 保持同一URL的大小写一致性。
11. 让标记有始有终。
12. 不要将整个页面内容塞到一个Table中。
13. 使用iframe嵌套另一个页面。
14. 把JavaScript移到HTMl文件末尾。
15. 友情链接的学问。
16. 图片优化。
17. 网址后加斜杠。
18. 标明高度和宽度。
16.优雅降级和间隙增强
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
17.cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中