HTML5和CSS3

html5上新增加了语义化标签（结构标签），表单属性，表单种类，全局属性。
css3增加了transition过渡属性，transfrom变形属性，animation帧动画

标签语义化：用合理的标签做合理的事情

CSS3有哪些新特性？

1、css3实现了圆角（border-radius），阴影（box-shadow）
2、对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）
3、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4、增加了更多的css选择器和多背景 rgba
5、在css3中唯一引用的伪元素是 ：selection
6、媒体查询和多栏布局
7、border-image：将图片规定为包围 div 元素的边框

2、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

1、拖拽释放（Drag and drop） API
2、语义化更好的内容标签（header：头部，nav：导航部分，footer：尾部，aside：用于主要内容部分，article：表示独立的一块，section：表示页面中的一块区域）
3、音频，视频（audio，video）API
4、画布（Canvas）API
5、地理（Geolocation）API
6、本地离线存储 localStorage 长期存储数据，浏览器关闭数据不丢失
7、sessionStorage的数据浏览器关闭后会自动删除
8、表单控件，calendar、date、time、email、url、search
9、新的技术webworker, websocket, Geolocation

表单种类：

time：时间
tel：手机号 数字键盘

表单属性：
autocomplete：是否保存用户输入信息
required： 必须输入内容

移除了的元素：

1、纯表现的元素：basefont，big，center，font，s，strike，tt，u。
2、对可用性产生负面影响的的元素：frame，frameset，noframes。

新增标签的兼容问题：

HTML5语义化标签在IE6-8下，对于不支持的标签不会有任何的样式,也默认的当成行内元素来出理,所以在样式表里要对这些标签定义一下 它默认的display
通过引入如下js来解决ie9以下新增标签的兼容问题

什么是响应式设计？

他是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站正常运行

CSS3新增加了那些伪类？

1、p:first-of-type 选择属于其父元素的首个 p 元素的每个p元素。
2、p:last-of-type 选择属于其父元素的最后 p元素的每个 p 元素。
3、p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。
4、p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
5、p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
:enabled：启用、:disabled：关闭（ 控制表单控件的禁用状态）。:checked，单选框或复选框被选中

css3的核心模块：

transition：过渡动画
transform：变形属性
animation：帧动画
Transition过渡：
transition-property 过渡属性 all|[attr]
transition-duration 过渡时间
transition-delay 延迟时间
linear：（匀速）

2D变换：

rotate() 旋转函数

css3的结构选择器：

nth-child(n) 获取第几个子元素
first-child 第一个子元素

在css2中所有的属性都是即时效果的
在css3中增加了动画属性，可以实现动画效果

响应式开发：

1、设置viewport（视口）
2、页面布局不能使用绝对宽度
3、引入媒体查询

现存的三种布局方式:
              固定布局
              流式布局
              弹性布局

响应式布局：

响应式布局说白就是页面根据不同的屏幕像素宽高适应页面布局
就是随着页面的属性（宽高）变化，页面也跟这变化
主要css技术：
1、多使用max-width/min-width，不写死宽度
2、多使用 media查询来响应不同的分辨率
3、使用动态，rem方案保证移动端的显示效果

响应式和自适应的区别：

1、自适应布局（流体布局、fluid、layout）值得是页面的宽度不固定，跟响应式宽度没关系
2、自适应页面强调不写死宽度；响应式页面强调 响应
3、自适应页面可以响应式，也可以不响应式
4、响应式页面可以自适应，也可以不自适应，（也就是定宽度）

移动端常用的事件类库

1、百度云TOUCH手势事件库
2、Zepto(移动端的小型jQuery=>它的用法和实现完全是按照JQ实现的)

css预处理器-less

less自带一套语法及解析器，通过解析器可以将less代码转换成css代码
1、增加了变量
2、增加了Mixin混合：其实指的就是将其他选择器里的内容拿过来用
增加了变量、Mixin、函数等特性

在当前LESS文件中导入所依赖的LESS文件

reference：只是导入过来供调取使用,编译的时候不编译这里的代码
@import "reset";
@import (reference) "public";

简述一下Sass、Less，且说明区别？

他们是动态的样式语言，是css预处理器，css上的一种抽象层，他们是一种特殊的语法/语言而编译成css

1、变量符不一样，less是@，Sass$
2、Sass支持条件语句，可以使用if{}，else{}，for循环等等，而less不支持
3、Sass是基于Ruby的，是在服务器端处理的，而less是需要一如less.js来处理less代码输出css到浏览器

Sass和less的相同之处

1、变量：可以单独定义一些通用的样式，在需要的时候进行调用
2、混合（Mixin）：class中的class（将一个class引入另一个class中，实现class之间的继承），还可以带参数的混合，就像函数一样
3、嵌套：class中嵌套class，从而较少class的重复
4、运算：提供了加减乘除

Sass和less的不同之处

1、实现方式：less是基于JavaScript，是在客户端进行处理的。而sass是基于Ruby的，是在服务器端进行的处理的
2、定义变量：less定义变量使用前缀是@，而sass是$
3、混合：less使用混合时，只需要在classB中根据classA的命名来使用，Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。
4、解析方式：Less可以向上/向下解析；Sass只能向上解析
5、变量的作用域：Less中的变量有全局和局部之分；Sass可以变量可以理解为都是全局的，但可以通过在变量后面跟！default，在引入Sass文件之前改变变量的属性值来解决这一问题。
6、比起Less，Sass中增加了条件语句（if、if...else）和循环语句（for循环、while循环和each循环）还有自定义函数：