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]-->