Html5+Css3

Html5+Css3

---

前言

本文介绍HTML5 和css3 新的特性对浏览器有兼容性要求，IE基本仅支持IE9以上版本

一、HTML5 的新特性

1 HTML5 新增的语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

2 HTML5 新增的多媒体标签audio /video

HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。

1 视频video支持格式（主要是MP4）

当前 元素支持三种视频格式： 尽量使用 mp4格式

1.1 video语法

<video src="文件地址" controls="controls"></video>

兼容性写法

 <video controls="controls" width="300">
 <source src="move.ogg" type="video/ogg" >
 <source src="move.mp4" type="video/mp4" >
 您的浏览器暂不支持 <video> 标签播放视频
 </ video >

1.2 video常见属性

2 音频audio 支持格式（MP3）

当前 元素支持三种音频格式：

2.1 音频audio语法

<video src="文件地址" controls="controls"></video>

兼容性写法

 < audio controls="controls" >
 <source src="happy.mp3" type="audio/mpeg" >
 <source src="happy.ogg" type="audio/ogg" >
 您的浏览器暂不支持 <audio> 标签。
 </ audio>

2.2 audio常见属性

3. 多媒体标签总结

3 HTML5 新增的 input 类型(number tel search)

4 HTML5 新增的表单属性

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
 color: pink;
 }

二、CSS3 的新特性

CSS3 的现状

1.新增选择器（属性，结构，伪元素）

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

1.1 属性选择器

属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。

1.2 伪类选择器 E:nth-child(n) / E:nth-of-type(n)

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点）

1. n 可以是数字，关键字和公式
2. n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
3. n 可以是关键字：even 偶数，odd 奇数
4. n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
5. 

1.2.1 结构伪类选择器小结

1.3伪元素选择器 ::before ::after（重点）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

1.3.1 伪元素选择器使用场景1：伪元素字体图标

 p::before {
 position: absolute;
 right: 20px;
 top: 10px;
 content: '\e91e';
 font-size: 20px;
 }

1.3.2 伪元素选择器使用场景3：伪元素清除浮动

.clearfix:after {
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
} 

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

2 CSS3 盒子模型 box-sizing : content-box | border-box

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们
计算盒子大小的方式就发生了改变。

可以分成两种情况：

1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
2. box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding
和border不会超过width宽度）

3 CSS3 其他特性 模糊，width: calc 函数（了解）

3.1 CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

3.2 CSS3 calc 函数:

4 CSS3 过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或
JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响
页面布局。
我们现在经常和 :hover 一起 搭配使用。

4.1 过度的语法

 transition: 要过渡的属性 花费时间 运动曲线 何时开始;

5 2D转换transform（缩放scale，移动translate，旋转rotate，倾斜skew）

    转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放 
    缩放：scale
    移动：translate
    旋转：rotate
    倾斜：skew

5.1 2D 转换之移动 translate

  语法：transform：translate（x,y）

总结：

 定义 2D 转换，沿着 X 和 Y 轴移动元素
 translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
 translate类似定位，不会影响到其他元素的位置
 对行内标签没有效果

5.2 2D 转换之旋转 rotate 中心点:transform-origin x y

 语法：transform：rotate（angle）  //eg:transform:rotate(90deg)

总结：

 角度为正时，顺时针，负时，为逆时针
 默认旋转的中心点是元素的中心点

transform-origin:

  /* 设置旋转中心点*/
   
  transform-origin: x y;

5.3 2D 转换 缩放scale（x,y）

 语法
 transform:scale(x,y);

总结

 transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小

5.4 2D 转换transform同时使用多个属性

同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，其顺序会影转换的效果。（先旋转会改变坐标轴方向）

6 css动画 animation /@keyframes

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

动画序列：

1. 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
2. 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
3. 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
4.0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

6.1动画的基本使用

1. 用keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}

2. 元素使用动画

div {
       width: 200px;
       height: 200px;
       background-color: aqua;
       margin: 100px auto;
       /* 调用动画 */
       animation-name: 动画名称;
       /* 持续时间 */
       animation-duration: 持续时间;
    }

3 动画简写属性
animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画等待或者结束的状态;

animation: myfirst 5s linear 2s infinite alternate;

6.2 动画animation常用属性

7 3D 转换transform

7.1 3三维坐标系

7.2 3D移动translate3D(x,y,z)

7.3 透视 perspctive

7.4 translate Z

7.5 3D旋转 rotate3d

旋转方向判断：

7.6 3D呈现 transfrom-style：preserve-3d(给作用元素的父级）

补充 Html5和css3定义

1.狭义

2.广义HTML5