1、HTML5新标签

HTML新加了许多语义化标签，这些标签由于是新出的，适用于高版本浏览器，ie9以下不推荐使用，推荐手机浏览器使用，因为手机浏览器出来的晚一点，但是浏览器的起点特别高。
Header 头部标签
nav 导航标签
section 文档中的区段标签
article 文章标签
aside 侧边栏
footer 页脚，底部标签

801509-20160711082959467-525706727.png

2、拖拽

拖拽是一种特别常见特性，应用范围非常广，在HTML5中拖拽成了一部分，任何元素都可以拖拽。
h5中使用draggable属性改为true即可,false就可以阻止拖拽

<div draggable="true">231231</div>

3、音频(audio)，视频标签(video)

H5还规定了浏览器中的视频，音频规范

音频

    <audio autoplay controls loop>
        <source src="../media/赤伶.mp3" type="audio/mpeg">
        <source src="../media/赤伶.ogg" type="audio/agg">
        对不起您的浏览器不支持音频
    </audio>

音频常用属性
autoplay 自动播放
controls 播放控件
loop 循环播放

视频

    <video  controls autoplay width="500px" muted loop poster="../img/桐.png" preload>
        <source src="../media/aaaa.mp4">
    </video>

视频常用属性
controls 播放控件
autoplay 自动播放
muted 静音播放
loop 循环播放
poster 播放预加载图片
preload 预加载auto（默认加载）none(不加载)

4、新增input类型

    <input type="color">  可以挑选颜色
    <input type="date">   日期input
    <input type="email">  邮箱input
    <input type="month">  只包括年，月日期
    <input type="number"> 只可以输入数字类型
    <input type="range">  类似于进度条
    <input type="search"> 搜索框
    <input type="tel">    手机号input
    <input type="time">   只包括时间日期
    <input type="url">    可以放url路径
    <input type="week">   xxx年的xx周

5、表单元素

标签 datalist
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

6、localStorage和sessionStorage

这是h5新出的两种数存储存方式。

localStorage和sessionStorage区别

1、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

2、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

3、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。

localStorage语法

   // 设置localStorage
    localStorage.setItem('存储对象名', 存储对象值)//将localStorage中存储信息，由于localStorage中的存储值必须是个字符串，我们可以使用JSON.stringify()这个方法把他变成字符串
    // 读取localStorage
    localStorage.getItem('存储对象名')// 获取localStorage中的信息，在获取到信息是，我们可以只使用JSON.parse()转换成对象使用
    //删除或清空localStorage的方法
    // 1、删除指定的
    localStorage.removeItem("变量")
    // 2、清空所有的
    localStorage.clear()
    // 遍历本地存储的方法
    for (var i in localStorage) {
        if (localStorage.getItem(i)) {
            console.log(localStorage.getItem(i));
        }
    }

sessionStorage语法

由于sessionStorage是在浏览器关闭就自动清除，就不存在清除问题

    // 设置sessionStorage
    sessionStorage.setItem('存储对象名', 存储对象值)
    // 读取sessionStorage
    sesessionStorage.getItem('存储对象名')

7、HTML5 canvas(绘画)

什么是 canvas?

1、HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
2、<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
3、你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

简单实列

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
//找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
//然后，创建 context 对象：
var ctx=c.getContext("2d");
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
//下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Canvas 坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

8、HTML5 地理定位

h5还推出了地理定位功能，但是要获取到用户同意才能进行定位
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
下面是h5地理定位简单使用，不含错误处理。

<script>
function getLocation()
{
   // 检测是否支持地理定位
    if (navigator.geolocation)
    {
    //如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息    
   //如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象
     navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 //showPosition() 函数获得并显示经度和纬度
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}
</script>

9、H5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（相当于实现多线程并发）

10、HTML5 WebSocket

ws (1).png

css3

1、css3新增选择器

属性选择器

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

20180816104833536.png

结构性伪类选择器—root

:root{background:orange}
html {background:orange;}

结构性伪类选择器—not

input:not([type="submit"]){
  border:1px solid red;
}

结构性伪类选择器—empty

p:empty {
  display: none;
}

结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

结构性伪类选择器—first-child

:first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

结构性伪类选择器—last-child

:last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。

结构性伪类选择器—nth-child(n)

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

这里写图片描述

:only-child选择器

:only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

:enabled和:disabled选择器

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。

:disabled选择器刚好与:enabled选择器相反，用来选择不可用表单元素。要正常使用:disabled选择器，需要在表单元素的HTML中设置“disabled”属性。

:checked选择器

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器:checked配合其他标签实现自定义样式。而:checked表示的是选中状态。

::selection选择器

::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。

:read-only和read-write选择器

:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。

::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动

:nth-of-type

    p:nth-of-type(n){ //还可以写odd(奇数)和even(偶数) 还可以写使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

    }

2、边框圆角

 border-radius: 数值+单位(em,rem,px,%);

3、透明度

background: rgba(red, green, blue, 0-1);
opacity: 0-1;

rgba()和opacity:;区别

rgba()和opacity都能实现透明效果
但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度
而rgba()只作用于元素的颜色或其背景色。

4、Word Wrap

word-break: break-word; //长单词换行

5、文字阴影

text-shadow:x方向偏移量 y方向偏移量 阴影长度 阴影颜色;

6、盒阴影

box-shadow:x方向偏移量 y方向偏移量 阴影长度 阴影颜色

7、渐变

背景渐变：background: linear-gradient(颜色1,颜色2),
          默认是从上往下，改变方向，在颜色1前加上: to 方向
          也可以使用rgba()颜色
径向渐变：background: radial-gradient(red,blue,yellow);

8、transform变形

    rotate(ndeg) 旋转n角度
    scale(倍数) 缩放 scale(w倍数,h倍数)
    skew(ndeg) 变形
    translate(x,y) 位置移动

9、 transition过渡

 transition: all linear 03s; // all(全部) linear(运动曲线) （时间）

steps.png

10、css动画

    自定义动画：
        @keyframs 动画名{
            from{}
            to{}
        }
    使用动画：
        选择器{
            css样式;
            animation:animation: name duration timing-function delay iteration-count direction fill-mode;
            /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
        }
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out; //上图运动曲线这里也可以使用
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;

11、媒体查询

媒体查询语法

@media screen and (min-width:970px){
            body{
                background-color: red;
            }
        }
        @media screen and (min-width: 560px) and (max-width: 969px){
            body{
                background-color: green;
            }
        }
        @media screen and (min-width: 321px) and (max-width: 559px){
            body{
                background-color: blue;
            } 
        }
        @media screen and (max-width: 320px){
            body{
                background-color: yellow;
            } 
        }

mediatype 查询类型

1.jpg

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

• and：可以将多个媒体特性连接到一起，相当于“且”的意思。
• not：排除某个媒体类型，相当于“非”的意思，可以省略。
• only：指定某个特定的媒体类型，可以省略。

媒体查询书写规则

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

12、弹性盒(flex)

c3出来我认为最强大，最好用的就是弹性盒，解决了浮动出现的任何问题

###  父项常见属性
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行  
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

• 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
• 默认主轴方向就是 x 轴方向，水平向右

• 默认侧轴方向就是 y 轴方向，水平向下

  
  
  1.JPG
  
  
  注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
  2.JPG

justify-content

justify-content：设置主轴上的子元素排列方式

3.JPG

flex-wrap

flex-wrap: 设置是否换行

• 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
• nowrap 不换行
• wrap 换行

align-content

align-content：设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

4.JPG

align-items

align-items：设置侧轴上的子元素排列方式（单行）

• 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
• flex-start 从头部开始
• flex-end 从尾部开始
• center 居中显示
• stretch 拉伸

align-items和align-content区别

• align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
• align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
• 总结就是单行找align-items 多行找 align-content

子项常见属性

• flex子项目占的份数

flex属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item {
    flex: <number>; /* 默认值 0 */
}

13、font-face属性

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体

基本语法

  @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }