HTML5新元素、新属性

1、calc（100% - 像素）：计算一行另外一个盒子的宽度。

  <style>
    .left {
         calc(100% - 100px);
        height: 100px;
        background-color: darkmagenta;
        float: right;
    }

    .right {
         100px;
        height: 100px;
        float: right;
        background-color: darkorange;
    }
</style>

2、消除浮动，给影响到的元素加clear：both.

3、新增元素以及属性：

  1、datalist 相当于之前的select 其id跟input输入框的list的值一样，才能进行使用。
  2、placeholder  占位符——输入框一开始灰色的提示
  3、autofocus    获取焦点
  4、autocomplete 自动完成，有两个值：on和off
<form action="" method="GET">
    <input list="browsers" placeholder="Chrome" autofocus>
    <datalist id="browsers">
        <option value="Internet Explorer" ></option>
        <option value="Firefox"></option>
        <option value="Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
    </datalist>
    <input type="submit">
</form>

  5、required 必填项
  6、novalidate 关闭验证

  7、表单input输入类型
        1、email  只能检测是否有@和@后面有没有内容，邮箱具体对不对不检测
        2、url   协议域名 都要写
        3、number  只能输入数字
        4、search  搜索框
        5、color 拾色器
        6、time 时间
        7、date 年月日
        8、week   第几周
        9、month  几月
 `<form action="" method="get" novalidate>
    <!-- 时间 -->
    <input type="time">
    <!-- 拾色器 -->
    <input type="color" name="" id="">
    <!-- 年月日 -->
    <input type="date">
    <!-- 第几周 -->
    <input type="week">111
    <!-- 几月 -->
    <input type="month">
    <!-- 数字 -->
    <input type="number">
    <!-- 普通输入框 -->
    <input type="text">
    <!-- 搜索框 -->
    <input type="search">
</form>`  

  8、视频video、音频audio

  两者都有的属性：controls、loop、autoplay、muted。
  有paused属性，但是没有play属性。
  有pause和play方法
  video还有width和height属性，可以进行设置。本身的元素属性不需要加px。
  source的引入防止浏览器不认识该格式。

  video 支持的格式：MP4、ogg、webm
  audio支持的格式：MP3、ogg、amr、wav、wma

4、兼容HTML5

<!-- 条件注释 -->
<!--[if lt IE9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<!-- html5shiv.min.js  处理ie9以下的对于H5标签的兼容性问题  respond.js 处理css3的兼容性问题-->