html5-01 新增非表单元素和新增表单属性

一,新增的非表单元素
<!-- 新增1,canvas -->
    <canvas></canvas>
    <!-- 新增2,audio -->
    <audio src="./yinyue.mp3" controls></audio>
    <!-- 新增3,video -->
    <video src="./shipin.mp4" controls height="300" width="800"></video>
    <!-- 新增4,sourse,用于提升资源兼容性 -->
    <source src="./yinyue.mp3">
    <!-- 新增5,datalist 新列表 -->
    <input list="datalist" name="" id="">
    <datalist id="datalist">
        <option value="aaaa"></option>
        <option value="bbbb"></option>
        <option value="cccc"></option>
    </datalist>
    <!-- 新增6,keygen规定用于表单的密钥对生成器字段-->
    <keygen>
    <!-- 新增7,output定义不同类型的输出，比如脚本的输出 -->
    <output></output>
    <!-- 新增8,artcle 文字部分 -->
    <article>文字块</article>
    <!-- 新增9,aside 侧边栏 -->
    <aside>内容</aside>
    <!-- 新增10,footer 页脚 -->
    <footer>页脚</footer>
    <!-- 新增11,header 页头 -->
    <header>头部</header>
    <!-- 新增12,nav 导航栏 -->
    <nav>导航栏</nav>
    <!-- 新增13,progress 任务进度 -->
    <progress></progress>
    <!-- 新增14,section 文档节 -->
    <section></section>

二,新增表单属性
<!-- 占位符 -->
    <input type="text" placeholder="6666">
    <!-- 页面加载自动获取焦点 -->
    <input type="text" autofocus>
    <!-- 浏览器是否保存上次搜索记录 -->
    <input type="text" autocomplete>
    <!-- 设置必填项 -->
    <input type="text" required>
    <!-- 设置关闭严格验证 -->
    <input type="email" novalidate>
    <!-- 设置精确自定义验证 -->
    <input type="text" pattern="^[\d]{4}$">

三,表单提交详解
<form action="http://59.111.104.104:8086/pcUser/login" method="post">
<input type="text" placeholder="请输入账号" name="username" class="header_ddd_user">
                    <input type="password" placeholder="请输入密码" name="password" class="header_ddd_password">

                    <input type="submit" value="登录" class="header_ddd_login">
<!-- </form> -->

1,action:"url"接口地址
2,method:"post"请求方式
3,input中的name即是一条参数
name="表单内的数据"
四,H5兼容性问题解决方案一
解决ie浏览器关于h5标签的不识别问题
<!--[if lt IE 6]>
     <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
     <![endif]-->

插入于head标签之间

兼容h5和c3
<!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->