HTML5（新语义化标签，多媒体标签，新增的 input 类型 和 表单属性）

新语义化标签

多媒体标签:

1.音频

支持三种音频格式：MP3 Wav Ogg

常见属性
autoplay=“autoplay” 自动播放

controls=“controls” 向用户显示播放插件（按钮）

loop=“loop” 循环播放

preload=“preload” 音频在页面加载时进行加载

谷歌把视频 音频的自动播放都禁止了，视频可以加muted 来静音播放， 音频则只能用js

属性 和 属性值 相同，都可简写， 如autoplay=“autoplay” 可简写成 autoplay。

  <audio controls="controls">
        <source src="media/snow.mp3" type="audio/mpeg" />
        <source src="media/snow.ogg" type="audio/ogg" />
        您的浏览器不支持播放声音
    </audio>

  <audio src="" autoplay loop controls preload></audio>

2.视频 video

支持 三种视频格式 ：MP4 WebM Ogg （尽量使用 mp4 ）

常见属性
autoplay=“autoplay” 自动播放 （ 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性 ）

muted=“muted” 静音播放

controls=“controls” 向用户显示播放插件（按钮）

width ：100px 播放器的宽

height: 100px 播放器的高

loop=“loop” 循环播放

preload:=“auto” （预先加载视频） none (不应加载视频)

poster="…/images/logo.png" 带有预览图

source - 标签是为了能够兼容各种浏览器对不同媒体类型的支持，我们可以用多个元素来提供多个不同的媒体类型。支持mp4格式视频流的浏览器可以播放mp4文件，如果不支持，可以播放Ogg文件。

 <video autoplay muted controls loop preload="auto" poster="../images/logo.png">
       <source src="movie.mp4" type="video/mp4">
       <source src="movie.ogg" type="video/ogg">
        您的浏览器太low了，不支持播放此视频
    </video>

 <video src="media/video.mp4" autoplay muted controls loop></video>

新增的 input 类型 和 表单属性

 <form action="">
        数字<input type="number" max="50" min="1" value="20">
        手机号<input type="tel" maxlength="11" placeholder="手机号">
        搜索<input type="search" placeholder="请输入搜素内容" accesskey="s">
        滑块<input type="range">

        <input type="file" name="" id="" multiple>

        <input type="submit" value=" 提交">

    </form>

 /* 去掉搜索框中的小× */
    input[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        /* 此处只是去掉默认的小× */
    }

    /* 去掉数字后的 上下按钮 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }

    /* 可以修改placeholder里面的字体颜色 */
    input::placeholder {
        color: pink;
    }