HTML5--Day1
重点标注：
1.常用新增标签
详细查找HTML5参考手册
2.h5基于h4新添了一些更具有辨识度的标签，删去一些冗余标签，快捷键
strict html4
html4
html5
3.兼容性问题
在谷歌浏览器和IE9下，展示行级元素的属性
修改：将行级元素转换为块级元素
兼容问题1
实现IE9以下的浏览器的兼容问题:
(1)手动创建标签
(2)引入第三方插件（更便捷实用）
兼容问题2
4.表单新增属性：
email:规范了电子邮箱的完整验证
tel：限制用户只能输入数字
url：验证只能输入合法的网址，必须包含http://
number：之恩给你输入数字，不能输入其他数值；有min最小值、max最大值、value默认值
search：输入框中有删除键，能提供更加人性化的输入体验
range（范围）：能设置min、max、value（常用调音量）
color：能出现显色器，系统自带，方便进行颜色选取
time（时间）方便调整时间、date（日期）--能出现日历控件、datetime（可显示日期时间，但是只有苹果下面 的safari支持，具有一定的局限性）、datetime-local（常用，能够修改时间日期）、month、week....
-----------
placeholder（提示文本，提示占位）
autofocus:自动获取焦点
autocomplete：自动完成：on打开 off关闭
（1）必须成功提交过：提交过才会记录
（2）当前添加autocomplete的元素必须要有name属性
用户名：<input type="text" name="userName" placeholder="请输入用户名:" autofocus autocomplete="on"><br>
手机号：
（1）tel:不能进行验证,只能出现数字键盘（局限性）
（2）required：必须要输入 ，如果没有输入则会阻止当前数字的提交
（3）pattern ：正则表达式验证/*:代表任意个/？：代表0个过1个/+：代表1个或多个
手机号：<input type="tel" required pattern="^(/+86)?1\d
{10}$"><br>
文件：
multiple：可以选择多个文件
<input type="file" name="photo" multiple><br>
邮箱：
email：有默认验证，在email中multiple允许输入多个邮箱地址，以逗号分隔开
<input type="email " name ="email" multiple>
表单提交（多个提交）
如果出现多个提交，在正常情况下只能实现第一个提交，为完成多个，可在所属的form中指定id在提交中进行调动
<input type ="text" name ="address" form =" myform">
表单新增元素：
datalist
效果图，火狐不支持
多个输入框（注意点：建立关联，如果使用了url）
多个输入框
！如果input输入框的type类型是url，那么value值必须要添加http://
keygen（实现加密操作；浏览器基本不支持）
（1）生成公钥和私钥
（2）信息+私钥=二次加密，然后客户端将公钥和二次加密之后的数据传送给服务器，通过使用接收到的公钥来解密数据，所以keygen能进行加密和验证
output（显示输出信息，只能显示不能够修改）
<output>总金额：100元</output>
新增表单时间
oninput：监听当前指定元素内容的改变：只要内容改变（添加内容或者删除内容）就会触发这个事件
onkeyup：键盘弹起的时候触发，每一个键的弹起都会触发一次
oninvalid：当验证不通过时触发
事件
！注意点：oninput和onkeyup区别，如果添加的内容是通过鼠标操作，如：复制粘贴，则oninput会触发而onkeyup不会触发
新增进度条：
（1）progress（max最大值、value当前进度值）
<progress max="100" value="30"></progress>
（2）meter度量条(度量值：衡量当前进度值、high：规定较高的值、low：规定较低的值、max、min、value)
<meter max="100" min="0" high="80" low="40" value="30"></meter>
表单实践
html：
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 表单实践</title>
<link rel="stylesheet" type="text/css" href="day1.css">
<script type="text/javascript" src=""></script>
</head>
<body>
<form action="">
<fieldset>
<legend>学会档案</legend>
<label for="userName">姓名：</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名">
<label for="userPhone ">手机号码：</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email" >
<label for="collage">所属学院</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择">
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist>
<label for="score">入学成绩</label>
<input type="number" name="score" max="100" min="0" value="0" id="score">
<label for="">基础水平</label>
<meter id="level" max="100" min="0" low="59" high="90" ></meter>
<label for="inTime">入学时间：</label>
<input type="data" name="inTime" name="inTime">
<label for="leaveTime">毕业日期：</label>
<input type="data" name="leaveTime">
<input type="submit">
</fieldset>
</form>
<script>
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
</html>
css：
*
{
padding: 0%;
margin:0%;
}
form
{
width: 600px;
margin: 20px auto;
}
form > fieldset
{
padding: 10px;
}
form > fieldset >meter,
form > fieldset >input
{
width: 100%;
height: 40px;
line-height: 40px;
margin: 10px 0;
border:none;
border:1px solid #CCC;
border-radius: 4px;
font-size: 16px;
padding-left: 5px;
box-sizing: border-box;
}
form >fieldset >meter{
padding-left: 0px;
}
效果图
表单
多媒体标签：
音频：audio / 视频：video
音频：
（1）src:播放文件的路径
（2）controls：音频播放器的控制器面板
（3）autoplay：自动播放
（4）loop：循环播放
<audio src="./mp3/aa.mp3" controls></audio>
视频：
（1）poster：指定视频 还没有完全下载完毕，或者用户没有点击播放前的显示封面，默认是该视频的第一帧
（2）width:视频的宽度 / height：视频的高度
（3）注意事项：视频始终会保持原始的宽高比，如果你同时设置宽高，并非将视频的大小进行修改而是修改视频占据的区域,一般只设置宽度或高度。
<video src="../mp3/mp4.mp4" poster="../images/11.jpg" controls></video>
设置多个源：
<video controls>
<source src="../mp3/flv.flv" type=" video/flv">
<source src="../mp3/mp4.mp4" type=" video/mp4">
</video>
---------------
获取DOM元素
操作元素类样式
add：为元素添加指定名称的样式，一次只能添加一个样式
document.querySelector(#add).onlclick=function{
document.querySelector("li").classList.add("red");
}
classList：当前元素的所有样式列表----数组
remove:为元素移除指定名称的样式，一次也只能移除一次（移除的是样式不是属性）
document.querySelector(#remove).onlclick=function{
document.querySelector(".blue").classList.remove("blue");
}
toggle：切换元素样式。如果没则提那家指定的样式，如果有则移除
contains：判断元素是否包含指定名称的样式，返回true或fulse
