HTML5和CSS3提高又又又是复习知识点的一天，hello大家好，想必大家都对HTML，CSS都很熟悉。那么对于HTM

又又又是复习知识点的一天，hello大家好，想必大家都对HTML，CSS都很熟悉。那么对于HTML5和CSS3新增的属性你是否又能立竿见影。当然这些属性越用越熟悉，但总会有你不经常用得到的，让我们一块回顾回顾吧 ...

HTML5的新特性

一、新增语义化标签

1.<header> 定义了文档的头部区域，在一个文档中可以定义多个

元素。它是块元素

<header>
   <p>这是文档的头部</p>
</header>

2.<footer> 定义文档页脚，它不只是页面的最底部，在文档中也可以定义多个。

<footer>
   <address>联系我们</address>
</footer>

3.<article> 定义页面独立的内容区域，标签定义的内容本身必须是有意义且必须独立于文档的其他部分，可用在的地方：博客文章，新闻，评论等。

<article>
    <h2>五一劳动节</h2>
    <div>
        今天是五一劳动节
    </div>
</article>

4.<aside> 定义页面的侧边栏内容

<aside>
  <ul>
    <li>腾讯</li>
    <li>阿里</li>
    <li>百度</li>
  </ul>
</aside>

5.<time> 定义时间或日期，time标签中的datetime属性定义的时间不会被显示，但可能被其他应用使用

<time datetime="2018-01-17">今天是我生日</time>

6.<ruby> 加注释，ruby标签有两个子元素，rt注释的内容，rp是该标签不显示时显示的文字

<ruby>
  人<rt>ren</rt>
  <rp>该标签无法显示</rp>
</ruby>

7.<details> 用于描述文档或者文档某一部分细节，summary是details元素的标题

<details>
  <summary>点击查看更多</summary>
  <p>这是点击后的内容</p>
</details>

8.<mark> 定义带有几号的文本，它会给你想要突出显示的文本加个背景色

<p>我最喜欢<mark>数学</mark></p>

9.<nav> 定义导航栏

<nav>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.360.com">360</a>
<nav>

10.<progress> progress显示数据的进度，属性value指定当前值，max最大值，最小值0不用设置

<progress value="30" max="100"></progress>

11.<section> section一般有两个作用，1.定义文档中的节，和div类似。2.定义文章，这时一般带有标题

<section>
  <h1></h1>
  <p></p>
</section>

12.<video> 定义视频，属性src引入资源，controls视频的控制控件

<video src="" controls="controls">你的浏览器不支持video标签</video>

以防用户浏览的视频不支持某些格式的视频，可以为用户多准备些格式的视频,目前支持的视频格式video/ogg，video/mp4，video/webm其他格式需要转换

<video controls="controls">
  <source src="" type="video/ogg">
  <source src="" type="video/mp4">
  <source src="" type="video/webm">
  你的浏览器不支持video标签
</video>

13.<audio> 该标签可定义声音，及其他的音频文件，不加controls不显示音频的控制界面

<audio src="" controls="controls">你的浏览器不支持audio标签</audio>

<video controls="controls">
  <source src="xx.ogg" type="audio/ogg">
  <source src="xx.mp3" type="audio/mpeg">
  你的浏览器不支持audio标签
</video>

目前音频可用类型audio/ogg，audio/mpeg

14.<datalist> 提示可能的值，datalist及其选项不会被显示出来，它仅仅是合法输入值的列表使用input元素的list属性来邦定datalist，下面选项使用option定义

<input type="text" list="cars">
  <datalist id="cars">
      <option value="宝马"></option>
      <option value="奔驰"></option>
      <option value="奥迪"></option>
  </datalist>

14.<embed> 定义插入的内容，如插件，flash，标签中间不要加内容会显现出来

<embed src="swf/flash5924.swf" tyep="application/x-shockwave-flash"></embed>

15.<canvas> canvas画布只是个容器，你可以通过控制坐标在canvas上绘制图形，一般配合js可以实现非常复杂的动画效果

二、新增的input类型

search 搜索框 number tel（手机号）

三、新增的表单属性

提示信息，输入则不显示： placeholder=""；

// 改变提示信息的字体颜色
input::placeholder{
    color:...;
}

multiple="multiple": 可以选择多个文件
autocomplete : 是否保存用户输入值默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表 ( list值为datalist标签的id )
required : 此项必填，不能为空带有必填字段的表单
Pattern: 正则验证 pattern="\d{1,5}“
formaction: 在submit里定义提交地址

CSS3新特性

一.新增选择器

1.属性选择器 [属性] 重点: 属性=某个值进行选择

 input[type="text"]{ }

权重为10

2.结构伪类选择器

第一个/最后一个孩子 E:first/last-child{}
第n个元素 E：nth-child(n)
E:nth-child(n):选择某个父元素的一个或者多个特定的子元素
n可以是数字，关键字和公式
n如果是数字,就是选择第n个子元素，里面数字从1开始
n可以是关键字：even偶数，odd奇数
n可以是公式：n 偶数：2n 奇数2n+1 5n 5···最后：n+5 前五个：-n+5

E:nth-child(n): 会把所有的孩子都排列序号，执行的时候首先看：nth-child(1): 之后回去看前面div
E:nth-of-type 会把指定元素的孩子排列序号，执行的时候先看 div指定元素之后再看第几个孩子 3.伪元素选择器（重点） -----权重是1

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

语法规范：

 element::before{ content}

二、盒子模型border-box

 box-sizing：content-box；默认值
 box-sizing：border-box；不会撑大盒子
 //页面内外边距初始化
 *{
    padding：0；
    margin：0；
    box-sizing：border-box；
 }

三、其他新特性

CSS滤镜filter：filter：函数(); 例如：blur模糊处理数值越大越模糊
CSS3 calc函数：width：calc（100% - 80px） + - * /
CSS3过渡（重点）

常用属性：

transition-property：属性名称
transition-duration: 间隔时间
transition-timing-function: 动画曲线
transition-delay: 延迟

简写：transition：要过渡的属性花费时间(s) 运动曲线(ease) 何时开始;

口诀：谁做过渡给谁加 多个属性都变化属性写all

四、CSS3 2D转换

转换（transform）具有颠覆性的特性，实现元素位移（translate），旋转（rotate），缩放（scale）等效果

1.二维坐标系横向为x 纵向为y

2.移动---类似定位 translate

语法：transform：translate(x,y); 或者分开写 transform：translateX(n) transform：translateY(n)

特性：

最大的优点：不会影响其他元素的位置
参数可以用% 是盒子自身宽度高度来对比的
让盒子实现水平和垂直居中先绝对定位然后transform：translate（-50%，-50%）
对行内标签没有效果 3.旋转 rotate

语法：transform：rotate（度数：deg）

特性：

度数单位是deg
角度为正时，顺时针，角度为负时，逆时针
中心的是元素中心点 4.转换中心点 transform-origin 语法： transform-origin：x y;

特性：

注意用空格隔开
默认是（50% 50%）
xy 像素/方位名词 5.缩放scale

语法：transform：scale(x,y);

特性：

xy是数字，不跟单位。1是一倍 2是2倍缩小：小于一
等比例缩放：transform：scale（2）；
最大优势：不会影响其他盒子，而且可以设置中心点 6.综合写法 transform：translate() rotate() scale();

有顺序问题（先旋转会改变坐标轴的方向）
同时有位移和其他属性的时候，要把位移放在最前面

五、CSS3 动画 animation

1.动画的基本使用

1.先定义动画 2.再使用动画

   //用keyframes 定义动画（类似定义类选择器） 
   @keyframes move {
        /* 开始状态 */
        0% {
            transform: translateX(0px);
        }
        /* 结束状态 */
        100% {
            transform: translateX(1000px);
        }
    }
  //元素使用动画
  /* 动画名称 */a
  animation-name: move;
  /* 持续时间 */
  animation-duration: 1s;

注意：

可以做多个状态 keyframes关键帧
里面的百分比要是整数
里面的百分比是总的时间的划分 2.动画常用属性

animation-name：动画名称
animation-duration: 间隔时间
animation-timing-function: 动画曲线
animation-delay: 延迟
animation-iteration-count：n | infinite;动画播放次数
animation-direction: normal | alternate;

normal：正常播放动画
alternate: 轮流反向播放动画，奇数次正向播放，偶数次反向播放

animation-fill-mode:

none 表示等待期和完成期，元素样式都为初始状态样式，不受动画定义（@keyframes）的影响。
both 表示等待期样式为第一帧样式，完成期保持最后一帧样式。
backwards 表示等待期为第一帧样式，完成期跳转为初始样式
forwards 表示等待期保持初始样式，完成期间保持最后一帧样式。 3.动画简写属性 animation：动画名称持续时间运动曲线（匀速linear）何时开始播放次数是否反方向动画起始或者结束的状态

4.速度曲线细节 animation-timing-function：默认是ease/linear/steps()（指定了时间函数中的间隔数量步长）

六、CSS3D转换

1.三维坐标系：

x轴：水平向右注意：x右边是正值，左边是负值
y轴：垂直向下注意：y下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值 2.3D位移：translate3d(x,y,z) 不能省略没有写0 z单位是px

3.3D旋转：rotate3d(x,y,z)---左手法则 transfrom：rotateX（45deg） 沿着正方向旋转

4.透视：perspective（写到父盒子上面）

d：视距
z：z轴物体距离屏幕的距离 z轴越大（正值）看到的物体越大 5.3D呈现：transfrom-style（重要的）

控制子元素是否开启三维立体环境
transfrom-style：flat 子元素不开启3d立体空间，默认的
transfrom-style：preserve-3d：子元素开启3d立体空间
代码写给父级，但是影响的是子盒子 好了，今天就到这里，感觉学到亿点的小伙伴点个赞支持支持，不足有欠缺的地方欢迎评论区纠正，下期再见！