<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,ul{ margin:0; padding: 0; } nav{ display: block; height: 30px; } ul{ width: 100%; } ul li{ list-style: none; float: left;height: 30px;width:20%; text-align: center;background-color: #ccc; } .content { margin-top: 20px; } .content:after{ content: ""; display: block; visibility: false; clear: both; } .content article{ float: left; width: 80% ; } .content aside{ float: left; width: 20% ; background-color: #e3e3e3;} .content h3{ margin-top: 20px; } footer{ text-align: center;margin-top: 15px; } .red { color: red; } </style> <script type="text/javascript"> window.onload = function(){ var qq = document.getElementById("qq"); qq.addEventListener("invalid",function(){ qq.setCustomValidity("亲，您输入的QQ不对啦！"); }); }; </script> </head> <body> <header> <nav> <ul> <li><a href="#">国内机票</a></li> <li><a href="#">国际机票</a></li> <li><a href="#">酒店</a></li> <li><a href="#">火车票</a></li> <li><a href="#">保险</a></li> </ul> </nav> </header> <section class="content"> <article> <form action="" id="myform" > <h3>新增的语义化标签</h3> <article>section header nav footer aside article</article> <h3>新增的表单类型</h3> text:<input type="text" onchange="alert(this.value)" ><br> date:<input type="date"> <br> time:<input type="time"><br> week:<input type="week"><br> month:<input type="month"><br> number:<input type="number"> <br> search:<input type="search"> <br> color:<input type="color"> <br> range:<input type="range"> <h3>两个事件</h3> text oninput:<input type="text" oninput="alert(this.value)" ><br> text onchange:<input type="text" onchange="alert(this.value)" ><br> <h3>新的表单校验</h3> email:<input type="email"><br> url:<input type="url"><br> require:<input type="text" required ><br> 自定义事件：<input type="text" id="qq" pattern="[0-9]\d[4,10]" > <h3>其他表单属性</h3> placeholder：<input type="text" placeholder="请输入姓名" ><br> autofocus:<input type="text" autofocus><br> autocomplete:<input type="text" autocomplete="on" name="name" ><br> multiple:<input type="file" multiple="multiple"><br> <label for="course"> 课程：<input type="text" list="courseList" id="course"> </label> <datalist id="courseList"> <option value="php">php</option> <option value="python">python</option> <option value="photoshop">photoshop</option> <option value="java">java</option> <option value="javascript">javascript</option> <option value="front end">front end</option> <option value="back end">back end</option> </datalist> <h3>HTML多媒体 音频和视频</h3> <audio src="Kalimba.mp3" controls autoplay> <source src="Kalimba.mp3"> <source src="Kalimba.ogg"> <source src="Kalimba.mp3"> 你的浏览器不支持音频播放，请更新你的浏览器版本 </audio> <br> <video src="Wildlife.wmv" controls autoplay width="300px"> <source src="Wildlife.wmv"> <source src="Wildlife.ogg"> <source src="Wildlife.webM"> </video><br> <h3>DOM扩展（重要）</h3> //根据类型查找元素，返回一个伪数组 document.getElementsByClassName(“className”) //通过css选择器获取元素，返回符合要求的第一个元素,注意返回结果是对象 document.querySelector(“css选择器”) //通过css选择器获取元素，返回伪数组 document.querySelectorAll(“css选择器”) <h3> 类名操作 </h3> 添加类：node.clasList.add("className"); 移除类: node.classList.remove("className"); 切换类：node.classList.toggle("className")； 判断类: node.classList.contains("className"); <h3>自定义属性</h3> <section id="attrDemo" data-name="lxf" age="27" > 在HTML5中我们可以自定义属性，其格式如下data-*="" <br> div id="demo" data-name="itcast" data-age="10" data-user-name="hcc"><br> var demo = document.querySelector(‘#demo‘);<br> 1、读取 demo.dataset[‘name‘] 或者 demo.dataset[‘age‘]<br> 2、设置demo.dataset[‘name‘] = ‘web developer‘<br> 3、demo.dataset[‘userName‘]//如果-比较多，需要转换成驼峰命名法。<br> </section> <h3>进度条(了解)</h3> <progress value="50" min="0" max="100" ></progress><br> <meter value="30" min="0" max="100" low="20" high="80"></meter> <br> <input type="submit" value="提交"> </form> <br> form属性： <input type="password" name="pwd" form="myform"> </article> <aside> aside </aside> </section> <footer> <p> Copyright ? 2005 - 2017 际珂国际 Inc. All Rights Reserved. 版权所有 </p> 商旅管家 一站式服务平台 沪ICP备13006682号 </footer> </body> </html>