H5-新增标签

语义化标签
HTML 新增语义化标签
section元素 表示页面中的一个内容区块
article元素 表示一块与上下文无关的独立内容
aside元素 在article之外的，与article内容相关的辅助信息
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）
main元素 表示页面中的主要内容（ie不兼容）

       <header></header>
        <section>
            <nav>
                <figure>nav</figure>
                <ul>
                    <li></li>
                </ul>
            </nav>
            <main>
                <article>
                    <header>article-header</header>
                    <footer>article-footer</footer>
                </article>
                <article>
                    <header>article-header</header>
                    <footer>article-footer</footer>
                </article>
            </main>
            <aside>
                <figure>aside</figure>
                <p>lorem</p>
            </aside>
        </section>
        <footer></footer>

音频和视频

<div>视频和音频</div>
    音频
    controls 控制栏
    loop 循环
    autoplay 自动播放(谷歌浏览器刷新页面不允许)
    muted 静音
    <audio src="" controls loop autoplay muted></audio>

    视频
    autoplay 自动播放(谷歌浏览器刷新页面不允许 静音之后可以)
    poster 播放视频之前的海报
    width
    height
    <video src="" controls loop autoplay muted poster="图片路径"></video>

增强表单-input

<div>增强表单</div>
    <input type="text">
    type="color" 生成一个颜色选择的表单
    type="tel" 唤起拨号盘表单 手机使用
    type="search" 产生一个搜索意义的表单
    type="range" 产生一个滑动条表单 设置区间 min="100" max="200"
    type="number" 产生一个数值表单
    type="email" 限制用户必须数日emali类型
    type="url" 限制用户必须输入url类型 网址 完整地址
    type="date" 限制用户必须输入日期
    type="month" 限制用户必须输入月类型
    type="week" 限制用户必须输入周类型
    type="time" 限制用户必须输入时间类型
    type="datemite-local" 选取本地时间

    <form action="">
        name值必须写

        颜色选择
        <input type="color" name="color">
        <input type="submit">

        <input type="email" name="email">

        滑块效果 step每次滑动增加的值
        <input type="range" name="range" min="100" max="200" value="100" step="10">
        数字类型
        <input type="number" name="number" min="100" max="200" value="100" step="10">
        <input type="submit">
    </form>

<div>选项列表</div>
    Datalist:选项列表
    <input type="url" list="url-list" name="link">

    <datalist id="url-list">
        <option label="命名" value="手机">
        </option>

        <option label="命名" value="手表">
        </option>

        <option label="命名" value="手环">
        </option>
    </datalist>
    option元素永远都要设置value属性

新增表单属性

<div>新增表单属性</div>
    autofocus属性
    给文本，选择框或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个

    required属性
    验证输入不能为空

    Multiple
    可以输入一个或多个值，每个值之间用逗号隔开
    <input type="email" multiple>
    还可以应用于file

    pattern
    将属性值设为某个格式的正则表达式，在提交时会检查内容是否符合给定格式
    <input pattern="[0-9][A-Z]{3}" title="输入内容：一个数与三个大写字母" placeholder="输入内容：一个数与三个大写字母">


    <form action="">
        <div>
            用户名：<input type="text" autofocus raquired>
        </div>
        <div>
            邮箱：<input type="email" raquired>
        </div>
    </form>