html5新特性
div和span对搜索引擎来说是没有语义的。
1.新增语义化标签
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：块级标签
<aside>：侧边栏标签
<footer>：尾部标签
比如：
<style>
header,nav{
width:100%;
height:120px;
background-color:pink;
}
</style>
<body>
<header>header</header>
<nav>nav</nav>
</body>
注意：这种语义化标准主要针对搜索引擎的；
这些新标签页面中可以使用多次
在ie9中需要把这些元素转成块级元素
移动端更喜欢用这些标签
2.新增多媒体标签
音频：<audio>支持三种格式
| 格式 | IE9 | 火狐3.5 | Opera10.5 | Chrome3.0 | Safari3.0 |
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
<audio src="文件地址" controls="controls"></audio>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，音频在就绪后马上播放 |
| controls | controls | 向用户显示控件，比如播放按钮 |
| loop | loop | 每当音频结束时重新播放 |
| src | url | 要播放的音频的url |
兼容性写法：
<audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
</audio>
视频：<video>
Ogg ：火狐、谷歌支持
MPEG 4：IE、谷歌
WebM ：火狐、谷歌支持
<video src="文件地址" controls="controls"></video>
兼容性写法：
<video>
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
</video>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 视频就绪自动播放 |
| controls | controls | 显示播放控件 |
| width | pixels | 设置播放器宽度 |
| height | pixels | 设置播放器高度 |
| loop | loop | 循环播放 |
| preload | auto（预先加载）| none（不加载） | 是否预加载视频（有了autoplay就忽略这个属性） |
| src | url | 视频url地址 |
| poster | Imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
谷歌浏览器把自动播放禁了，解决办法：
给视频添加静音属性，autoplay="autoplay" muted="muted"
总结：
谷歌浏览器不支持自动播放音频和视频。视频有解决办法，音频没有
视频标签是重点，经常设自动播放，不使用controls控件，循环和设置大小属性
新增表单属性
<form action="">
邮箱：<input type="email" /> //可以自动检测输入的是不是邮箱
<input type="submit" value="提交">
</form>
| 属性值 | 说明 |
| type="email" | 限制用户输入必须是email类型 |
| url | .......url类型 |
| date | 日期类型 |
| time | 时间类型 |
| month | 月份类型 |
| week | 周类型 |
| number | 数字类型 |
| tel | 手机号码 |
| search | 搜索框 |
| color | 生成一个颜色选择表单 |
这些属性多用于移动端
| 属性 | 值 | 说明 |
| required | required | 必填 |
| placeholder | 提示文本 | 提示信息 |
| autofocus | autofocus | 自动获取光标效果 |
| autocomplete | off/ on | 下一次把鼠标定进去后，会显示上一次输入的内容，默认on； 有要求：1.必须有name属性 2.成功提交过 |
| multiple | multiple | 多选文件提交 |
CSS3属性选择器
比如：
button[disable]{ 权重1+10=11
cursor:default;
}
| 选择符 | 简洁 |
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且att属性值=val的E元素 |
| E[att^="val"] | 匹配具有att属性，值以val开头的E元素 |
| E[att$="val"] | 匹配具有att属性，值以val结尾的E元素 |
| E[att*="val"] | 匹配具有att属性、值中含有val的E元素 |
类选择器、属性选择器、伪类选择器权重10
CSS3结构伪类选择器
| 选择符 | 简洁 |
| E:first-child | 匹配父元素中第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
比如：
ul li:first-child{
background-color:pink;
}
ul li:nth-child(6){
background-color:pink;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
注意：nth-child(n)，这里的n可以是数字、关键字和公式。但是是选择父元素里面的第n个孩子，他不管里面的孩子是否是同一种类型。
关键字有even、odd等。
如果n是公式，那么公式里的n从0开始。公式比如：2n、2n+1、5n、n+5（从5开始）、-n+5（前5个）。第0个元素或者超过了元素个数的会被忽略。
比如：
div span:first-of-type{//满足span的第一个孩子,权重1+1+10
}
<div>
<p>这是一个p </p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
</div>
CSS3伪元素选择器
| 选择符 | 简洁 |
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
div::before{
content:"我";
}
<body>
<div>是</div>
</body>
最后显示，一个盒子里显示我是
注意：
1.before和after必须有content属性
2.before在内容的前面，after在内容的后面
3.before和after创建一个元素，但是属于行内元素（没有大小，只能通过转换display:block；来有大小）
4.伪元素和标签选择器一样，权重1
5.在结构（开发者模式elements）里我们看不到创建的这个盒子，只能通过before、after找他，所以它不是真正意义上的元素。
CSS3 2D转换
transform（转换）是CSS3中最具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
转换可以简单理解为变形。
移动：translate
旋转：rotate
缩放：scale
移动盒子的位置的方法：
1.定位 2.盒子外边距 3. 2d转换移动
比如：
div{
width:200px;
height:200px;
background-color:pink;
transform:translate(100px,100px); //x就是x上移动的位置，y同理
}
写法1：transform:translate(x,y);
写法2：transform:translateX(n);
写法3：transform:translateY(n);
注意：
1.translate最大的优点就是：不会影响其他元素的位置
2.对行内标签没有效果
3.translate(x,y)百分比，是针对盒子而言的百分比
比如：往上走，往左走，水平垂直居中，transform:translate(-50%,-50%);
旋转rotate
语法：
transform:rotate（度数）
注意：
1.rotate里面跟度数，单位deg，比如rotate(45deg)就是45度的意思
2.角度为正，顺时针，负，逆时针
3.默认旋转的中心是元素的中心点
做个小三角形
div{
width:250px;
height:35px;
border:1px solid black;
}
div::after{
content:"";
position:absolute;
top:0;
right:0;
width:10px;
height:10px;
border-right:1px solid #000;
border-bottom:1px solid #000;
transform:rotate(45deg);
}
让鼠标经过div，里面三角旋转
div:hover::after{
transform:rotate(225deg)；//45+180
}
<body>
<div></div>
</body>
转换中心点
语法：
transform-orign:x y;
注意:1. x y用空格隔开
2.可以给x y设置方位名词或者像素 (top bottom left right center)
div{
width:200px;
height:200px;
background-color:pink;
margin:100px auto;
transition:all 1s; //加过渡
}
div:hover{
transform:rotate(360deg);
}
2d转换之缩放scale
语法：
transform:scale(x,y);
注意：x y可以是数字，但没有单位，是倍数的意思。1就是一倍。＜1就是缩放。如果只写一个数字，默认另一个和这个数一样。
如果直接修改宽度、高度。宽度变大会往两边延伸，高度变大会往下延伸。最上边那个边是不动的。如果下面有盒子，会把下面的盒子撑大了。
优点：1.不会影响其他盒子，而且可以设置缩放的中心点
2d综合写
transform:translate() rotate() scale()等
顺序会改变转换效果
同时有移动和其他属性，把移动放最前
CSS3动画
动画可以设置多个节点来精确控制一个或一组动画，相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
动画的基本操作：
1.先定义动画
2.再调用动画
我们想页面一打开，就让一个盒子从左边走到右边。
1.用keyframes定义动画
@keyframes 动画名称{
0%{
transform:translateX(0px);
}
100%{
transform:translateY(10000px);
}
}
2.使用动画
div{
width:200px;
height:200px;
background-color:pink;
margin 100px auto;
animation-name:动画名称;
animation-duration:持续时间;
}
注意：0%是动画的开始，100%是动画的完成，这样的规则叫动画序列。这里的百分比是对总时间进行划分。
动画可以改变任意多的样式和任意多的次数。
可以用0%和100%规定动画变化发生的时间，也可以是from 和to。
动画属性：
| 属性 | 描述 |
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写，除了animation-play-state属性 |
| animation-name | 动画名 |
| animation-duration | 完成一个动画的持续时间，默认0 |
| animation-timing-funxtion | 规定动画的速度曲线,默认ease（低速开始，然后加快，结束前变慢） | linear(匀速) | ease-in（动画低速开始）| ease-out（低速结束）| ease-in-out（动画低速开始和结束）| steps()指定时间函数中的间隔数量（步长） |
| animation-delay | 规定动画从何时开始，默认0 |
| animation-iteration-count | 规定动画被播放的次数，默认1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认"normal"，alternate逆向 |
| animation-play-state | 规定动画是否正在运行或暂停，默认是running，还有pause |
| animation-fill-mode | 规定动画结束后状态，保持forwards，回到起始backwards |
简写动画属性：
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态
CSS3 3D转换
x轴：水平向右，右边正值，左边负值
y轴：垂直向下，下边正值，上边负值
z轴：垂直屏幕，往外面是正值，里面是负值
3D移动translate3d
在2d的基础上多了一个方向——z轴。
transform:translateX(100px); 沿着x轴移动
transform:translateY(100px);
transform:translateZ(100px);
transform:translate3d(x,y,z); 分别要移动的距离
注意：Z一般用px设置。
透视perspective
想要在网页产生3d效果，需要用到透视，
透视的单位是px
人的眼睛到屏幕的距离就是透视，物体离屏幕的距离就是z的距离
注意：透视写在被观察元素的父盒子上面，
写法perspective:?px，透视 数值越小，盒子越大；z越大，看到的物体越大。
（可以给父盒子加透视，然后多个子盒子修改z的值）
3D旋转rotate3d
3d旋转可以让元素在三维平面沿着x,y,z轴或自定义轴进行旋转。
语法：
transform:rotateX(45deg):沿着x轴正方向旋转45度，正方向，图片下面大，反方向，图片上面大。
transform:rotateY(45deg):正方向，左边大。
transform:rotateZ(45deg):（应用转盘抽奖），本身垂直，怎么转都是一样。
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg
左手准则：
左手的手指指向x轴正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的方向。
3D呈现transform-style： flat(默认不开启立体空间) | preserve-ed;(开启立体空间)
这个写给父级，影响的是子盒子。very important!
浏览器私有前缀
浏览器的私有前缀是为了兼容老版本浏览器的写法。
1.私有前缀
-moz-：代表火狐私有特性
-ms-:ie
-webkit-:谷歌
2.提倡的写法：
-moz-border-radius:10px
移动端
兼容移动端处理webkit内核浏览器即可。
移动端碎片化严重，分辨率和屏幕尺寸大小不一。
视口是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口（用户能看到的网页区域）、理想视口（需要我们给移动的页面添加meta视口标签）。
meta视口标签
标准设置：
<meta name="viewport" content=" width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
width:宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale:初始缩放比，大于0的数字
maximun-scale:最大缩放比，大于0的数字
minimum-scale:最小
user-scalable：用户是否可以缩放，yes或no（1或0）
在我们开发时候1px不一定等于1个物理像素，如果pc端，是相等的，移动端不一定。
1个px能显示的物理像素点的个数，叫做物理像素比。
但是50*50的图片，在手机中按照物理像素比放大倍数，就会变模糊。所以需要专门处理。=>使用倍图
准备一个比实际50*50大两倍的，也就是100*100的，然后通过css改为50*50；放到手机中变为100*100，本身也是100*100.
我们准备的图片比实际需要的大小，大2倍，就是两倍图。
背景缩放background-size：宽度 高度；
单位：长度 | 百分比 | cover（使背景图片完全覆盖背景区域，宽度 高度都要完全覆盖，可能有部分图片缺失） | contain（将图片扩大到最大尺寸，宽度和高度完全适应内容区域，可能有部分空白区域）
CSS3盒子模型 box-sizing
传统模式宽度计算：盒子宽度=css中width+border+padding
CSS3盒子模型：盒子宽度=css的width（里面包含了border+padding），即padding和border不会撑大盒子了
box-sizing:border-box； //CSS3盒子模型
box-sizing:content-box；//传统盒子模型
去掉高亮：
-webkit-tap-highlight-color：transparent；
1.单独制作移动端页面（主流）
(1) 流式布局（百分比布局）；——常见，通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
比如：
*{
margin:0;
padding:0;
}
section{
width:100%;
}
section div{
float:left;
width:50%;
height:400px;
}
<section>
<div></div>
<div></div>
</section>
(2)flex布局
优点：操作方便，布局简单。
缺点：PC端浏览器支持情况较差；IE11或更低版本，不支持或部分支持。
直接写：可以将span1,span2变成小盒子，自适应，不需要清除浮动，不管块元素还是行内元素都可以指定flex布局。
div{
display:flex;
width:80%;
height:300px;
background-color:pink;
}
<div>
<span>1</span>
<span>2</span>
</div>
注意：1.当我们为父盒子设为flex布局后，子元素的float、clear、vertical-align属性将失效。
2.上面例子中div就是flex父容器，span是子容器flex项目。子容器可以横向排也可以纵向排。
3.flex会让子元素在一行显示，如果显示不开就缩小子元素盒子大小。
原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
父属性：flex布局中分为主轴和侧轴，主轴就是x轴方向，侧轴就是y轴方向。元素跟着主轴排列
| 属性 | 属性值 | 说明 |
| flex-direction★ | row（默认从左到右）| row-reverse | column（从上到下） | column-reverse | 设置主轴的方向 |
| justify-content★ | flex-start(默认贴着头部对齐，如果x是主轴，从左到右）| flex-end（贴着右部对齐，顺序不变） |center(在主轴居中对齐，如果x是主轴，则水平居中) | space-around（平分剩余空间）| space-between(先两边贴边，再平分剩余空间)★ | 设置主轴上的子元素排列方式 |
| flex-wrap★ | 不想显示不开就缩小子元素盒子大小 ：nowrap（默认不换行）| wrap（换行） | 设置子元素是否换行 |
| align-content（必须出现换行） | flex-start（默认侧轴头部开始排列）| flex-end | center | space-around（子项在侧轴平分剩余空间）|space-between（子项在侧轴先分布在两头，再平分剩余空间）| stretch | 设置侧轴上的子元素的排列方式（多行） |
| align-items★ | flex-start（默认从上到下）| flex-end | center | stretch（沿着侧轴拉伸） | 设置侧轴上的子元素的排列方式（单行） |
| flex-flow：row wrap | 复合属性，相当于同时设置了flex-direction和flex-wrap |
align-content和align-items区别：
1.align-items适用于单行情况，只有上对齐、下对齐、居中和拉伸。
2.align-content适应于多行情况，单行无效，可以设置上对齐、下对齐、居中、拉伸和平均分配剩余空间等属性值。
flex布局子项常见属性：
1.flex:表示从剩余空间中分配多少份
item{
flex<number>;
}
（3）rem适配布局
页面布局文字能随屏幕大小变化而变化。
rem的基准是相对于Html元素的字体大小；em相对于父元素的字体大小来说。
rem可以通过修改html里面的文字大小，来改变页面中元素的大小，实现整体控制。（只需要让里面所有元素单位都改成rem）
媒体查询Media Query
1.用@media查询
2.可以针对不同屏幕尺寸设置不同的样式
3.重置浏览器大小过程中，页面根据浏览器的宽度高度重新渲染页面
语法：
@media mediatype 参数(media feature){
CSS-Code;
}
mediatype:all | print（用于打印机或打印预览） | screen（用于电脑屏幕、平板、手机等）
参数：and（将多个媒体特性连接到一起） | not（排除某个媒体特性） | only（指定）
media feature:width（输出设备中页面可见区域的宽度） | max-width | min-width
媒体查询+rem
可以实现不同设备宽度，实现页面元素大小的动态变化。
@media screen and(min-width:320px){
html{
font-size:50px;
}
}
@media screen and(min-width:640px){
html{
font-size:100px;
}
}
CSS弊端：
CSS是一门非程序式语言，没有变量、函数、作用域等概念。没有计算能力，不方便维护和扩展，冗余高。
Less
是一门CSS的扩展语言，也称为CSS预处理器。它在CSS语法基础上，引入了变量、运算、函数等功能。
总结：Less是一门CSS预处理语言，扩展CSS的动态特性。
1. Less变量：
@变量名：值；
2. Less的编译：
我们需要把Less文件编译生成css文件，html才能使用。
3. Less嵌套：将子元素的样式直接写到父元素里面
.header{
width: 200px;
height: 200px;
background-color: red;
a{
color: green;
}
}
<div class="header">
<a href="#">文字</a>
</div>
如果是伪类选择器/伪元素选择器/交集选择器：内层选择器的前面需要加&
a{
color: green;
&：hover{
color:blue;
}
}
4. Less运算
任何数字、颜色或者变量都可参与运算。
运算符的左右两侧必须有个空格隔开。
两个数参与运算，如果只有一个数有单位，最后结果就以这个单位为准
两个数参与运算，如果两个数都有单位，而且单位不一样，最后结果以第一个数的单位为准。
@border:5px + 5;
div{
width:200px - 50;
}
2.响应式页面兼容移动端（其次）
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
