day011-hTML5
（一）html5新增标签
1、header footer article（内容区） aside（侧边栏） details（文档某个细节） summary（details中的标题） figure（独立的流内容） figcaption（figure的标题）marh（标记，默认是黄色） nav（导航链接）。
2、meter（value实际值，min最小值，max最大值） <ruby>(给汉字加拼音)
（二）html中新增的表单元素
1、eamil类型 2、url类型 3、number类型 4、range类型 5、date类型 6、searche类型 7、color
（三）其他新增标签
1、progreen（下载进度标签） 2、section（文档节点标签） 3、video（视频标签） 4、audio（音频标签） 5、source 6、datalist(提示了可能值) 7 、keygen 8、embed 9、canvas（绘图标签）
day012-css媒体查询、css3多列布局
（一）Media Query响应式布局-媒体查询
简而言之，就是一个网站可以兼容多个终端，而不是Wie每一个终端做一个特电的版本。
响应式设计不一定是最佳选择，如果公司有足够人力、资源，为每个终端体重特点的版本当然跟最好的。但往往一些公司或者页面没必要这样，用媒体查询比较方便。
（二）优缺点
优：1、面对不同的分辨率设备灵活性强
2、能够快捷解决多设备显示适应问题
缺：1、需要兼容各种设备工作量大，效率略慢。
2、代码累赘。会出现掩藏无用的元素，加载时间长
3、一定程度上改变了网站原有的布局，会出现用户混淆的情况
（三）css中的media query（媒体查询）是什么？
作为css3规范的一部分，媒体查询可以针对不同的屏幕尺寸设置不同的样式，它为每种的用户提供了最佳体验，网站在任何尺寸设置下都能有最佳的显示效果
（四）使用media query的基本语法
第一种（在内部样式style中）： @media mediatype and|not|only （media feature）{
css-code；
}
注意and后面的空格！
其中：mediatye指的是媒体类型，常用的是screen（手机、电脑、平板），还有all（所有设备）、print（用于打印机和打印预览）、speech（应用于屏幕阅读器等发声设备）；
第二种（外联样式）：<link rel="stylesheet" media="screen and (min-width:1000px)" href="1000.css"/>
（五）多列、用户界面相关新属性
多列：column-count 分几列 column-gap 列间距 column-rlue 列分割线的样式
例：div{column-count：3； -webkit-column-count：3； -moz-column-count:3; }
[以上是应对各个浏览器，最好每个数字都设置一样]
column-rule：宽度 样式 颜色；【宽度值有thin（细边框）、medium（中等边框）、thick（粗边框），也可以指定数值；样式值有hidden，dotted、dashed、solid等】
（六）column-span：指定元素要跨多少列
（七）Box-sizing
box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来设定义元素，以适应区域。
两种盒模型：1、content-box（标准） 2、border-box（怪异）
day013-《css sprite》
（一）什么是精灵（css sprite）
css sprite 又称css精灵，雪碧图，是一种网页图片处理方式。
（二）css sprite 原理
其实就是把 网页中的一些背景图片整合到一张图片文件中，在利用css的background-img、background-repeat、background-position属性，对这张大图进行 点位。background-position可以用数字negative精确的定位出背景图片的位置。
（三）scc sparite优点
1、能减少网页的http请求，从而大大提高了页面的性能。
2、能减少图片的字节
3、解决了命名的困扰，一张图片，一个名字就够了。
一句话概述：css sprite（图片整合技术）的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面的加载速度。