<!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>
浙公网安备 33010602011771号