HTML5表单新标签和属性

概述HTML5的新特性
        1) web socket
            服务器与浏览器之间的请求连通
            web socket    可以保持服务器与浏览器之间的持久连通
        2) 离线 & 缓存
            离线：断网，有些网站一旦断网脱机就立刻不能访问，h5提出新的api可以对关键的网页进行缓存
            存储：程序持久化的方法，数据库持久化mysql,断电关机数据不丢失就是持久化的作用，h5提供了js对数据操作的api,localStorage,sessionStorage,webDataBase
        3) 音频与视频
            audio & video
            embed
        4) 3D 图像 效果
            增加API        canvas    WebGl    svg
        5) 性能与集成
            增加web worker 可以进行js的在线操作，之前的js是单线程的，不能操作多线程，h5能让js进行多线程操作(浏览器的支持性特别差)
        6) 设备
            h5可以用电脑或手机操作硬件设备
            调用地理位置，摄像头，触控设备，检测设备，这些硬件设备主要是手机端的API
        7) css3

HTML5新增标签：
    表单类型 type=''
        email 当表单提交时检测是不是一个电子邮件格式
        url  当表单提交时检测是不是一个url
        tel 电话号码
        date  年月日控件
        time  时分控件
        datetime-local    年月日时分 本地
        month    年月格式
        week    年周格式
        number  数字格式
        range   选择区间
        search  搜索框 后边有一个叉号，用于清空
        color   颜色选择

   表单新属性
        placeholder    占位符 提示语句
        required    必填框
        autofocus    自动获取焦点在页面刷新的时候
        pattern        正则验证
        min/max        最小值/最大值
        step        每一步走多远
        minlength/maxlength        最大最小长度
        list        指定一个datalist作为下拉菜单

   结构标签
      <section></section>   模块
      <article></article>   文章
      <header></header>     头部
      <footer></footer>     底部
      <nav></nav>           导航
      <address></address>   地址

  媒体标签

       视频标签
      <video width="320" height="240">
        <source src="" type="video/ogg">
        <source src="" type="video/mp4">
      </video>

      属性

         controls
            在视频的底部展示一个工具栏，鼠标悬停在视频上会出现，鼠标移开消失
        preload
            是否在页面加载后载入视频
            auto：当页面加载后载入整个视频
            metadata：只加载播放文件的基本信息(尺寸，时间，第一针的信息，曲目列表......)
            注意：autoplay 自动播放 谨慎使用
        loop(循环)
            视频播放结束后循环播放 
        poster(海报)
            在视频文件播放前显示的图片
            poster='url'
        muted(消除声音)
            为视频或音频文件设置静音或者消除静音，或者检测当前是否是静音
        volume(音量)
            获取或设置视频文件的音量，值在0-1之间
        duration(持续的时间)
            整个媒体文件的播放时长，以s为单位
        currentTime
            以s为单位返回从开始到当前媒体播放了多长时间，在播放过程中可以设置这个值进行视频播放定位
        ended(已结束)
            如果视频播放完毕就返回true
            用于判断当前视频是否播放完毕
        paused(已经暂停)
            如果视频被暂停返回true
            判断视频是否已暂停
        currentSrc
            以字符串的形式返回当前正在播放视频的文件，对应当前浏览器在source元素中选中的文件
        play()
            开始播放
        pause()
            暂停播放
        load()
            媒体开始加载
        canPlayType
            用来测试浏览器是否支持指定的媒体类型
            返回值：
                空字符串：说明不支持
                maybe:：可能支持
                probably:大概也许可能支持

  音频标签
    <audio>
      <source src="" type="audio/ogg">
      <source src="" type="audio/wav">
      <source src="" type="audio/mp3">
    </audio>

语义标签

1) 图片与图片的标题标签
            figure    figcaption
            <figure>
                <img src="images/1.png" alt="">
                <figcaption>这是一张图片</figcaption>
            </figure>
        2) div可编辑属性
            contenteditable = false|true    true为可编辑
            h5中大部分内容标签都可以支持这个属性
        3) 搜索框下拉标签
            datalist 标签
            包含选择内容下拉菜单
        4) 进度条
            progress 标签
            value min max title
            meter 标签
            <progress value="60" min='0' max='100' title="60%">60%</progress>
            <meter value="60" min="0" max="100" title="60%">60%</meter>
        5) 高亮标签
            mark
        6) 地址标签
            address
        7) 注释语义
            ruby    rp rt
            <ruby>
                漢<rp><rt>han</rt></rp>
                字<rp><rt>zi</rt></rp>
            </ruby>
        8) 摘要与细节
            details    summary
            details:用来定义细节，可以是文本或图片等
            summary:用来包含细节的标题，必须写在details中，并且是details的第一个儿子