HTML5中的新增标签：
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。
canvas
标签 描述
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
多媒体
标签 描述
<audio> 定义音频内容
<video> 定义视频（video 或者 movie）
<source> 定义多媒体资源 <video> 和 <audio> 字体
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
表单
标签 描述
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。
语义和结构
HTML5提供了新的元素来创建更好的页面结构：
标签 描述
<article> 定义页面的侧边栏内容
<aside> 定义页面内容之外的内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义运行中的进度（进程）。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
HTML中移除的标签：
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym> 字体兼容
<applet> java组件
<basefont> 字体
<big>
<center>
<dir> 目录
<font>
<frame>
<frameset>
<noframes>
<strike>
HTML中的语义标签
1.传统页面的标签使用
2.HTML5页面中的标签使用，如：
<body>
<header>定义了文档的头部区域</header>
<div>
<article>定义页面的侧边栏内容</article>
<aside>定义页面内容之外的内容</aside>
</div>
<footer>定义 section 或 document 的页脚</footer>
</body>
兼容处理：
1.在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
2.处理方式：在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题（测试在IE下面的兼容性：ieTester软件的使用）
<script src="../js/html5shiv.min.js"></script>
HTML5中表单新增的标签：
<form action="">
用户名：<input type="text" name="userName"> <br>
密码：<input type="password" name="userPwd"> <br>
<!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->
邮箱：<input type="email"> <br>
<!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
电话：<input type="tel"> <br>
<!--验证只能输入合法的网址：必须包含http://-->
网址：<input type="url"> <br>
<!--number：只能输入数字(包含小数点)，不能输入其它的字符
max:最大值
min:最小值
value:默认值-->
数量：<input type="number" value="60" max="100" min="0"> <br>
<!--search：可以提供更人性化的输入体验-->
请输入商品名称：<input type="search"> <br>
<!--range:范围-->
范围：<input type="range" max="100" min="0" value="50"> <br>
颜色：<input type="color"> <br>
<!--日期时间相关-->
<!--time:时间：时分秒-->
时间：<input type="time"> <br>
<!--date：日期：年月日-->
日期：<input type="date"> <br>
<!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
日期时间：<input type="datetime"><br>
<!--datetime-local:日期和时间-->
日期时间：<input type="datetime-local"> <br>
月份：<input type="month"> <br>
星期：<input type="week">
<!--提交-->
<input type="submit">
</form>
表单新增的属性:
<form action="" id="myForm">
<!--placeholder：提示文本，提示占位-->
<!--autofocus:自动获取焦点-->
<!--autocomplete:自动完成：on:打开 off:关闭
1.必须成功提交过:提交过才会记录
2.当前添加autocomplete的元素必须有name属性-->
用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
<!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘-->
<!--required:必须输入，如果没有输入则会阻止当前数据提交-->
<!--pattern:正则表达式验证
*:代表任意个
?:代表0个或1个
+：代表1个或多个-->
手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
<!--multiple：可以选择多个文件-->
文件：<input type="file" name="photo" multiple> <br>
<!--email:有默认验证 在email中，multiple允许输入多个邮箱地址，以逗号分隔-->
邮箱：<input type="email" name="email" multiple><br>
<!--提交：-->
<input type="submit"> <br>
</form>
<!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交-->
<!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交-->
地址：<input type="text" name="address" form="myForm">
HTML5-新增的表单元素-datalist:
<form action="">
<!--专业：
<select name="" id="">
<option value="1">前端与移动开发</option>
<option value="2">java</option>
<option value="3">javascript</option>
<option value="4">c++</option>
</select>-->
<!--不仅可以选择，还应该可以输入-->
<!--建立输入框与datalist的关联 list="datalist的id号"-->
专业：<input type="text" list="subjects"> <br>
<!--通过datalist创建选择列表-->
<datalist id="subjects">
<!--创建选项值：value:具体的值 label:提示信息，辅助值-->
<!--option可以是单标签也可以是双标签-->
<option value="英语" label="不会"/>
<option value="前端与移动开发" label="前景非常好"></option>
<option value="java" label="使用人数多"></option>
<option value="javascript" label="做特效"></option>
<option value="c" label="不知道"></option>
</datalist>
网址：<input type="url" list="urls">
<datalist id="urls">
<!--如果input输入框的type类型是url,那么value值必须添加http://-->
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.sohu.com"></option>
<option value="http://www.163.com"></option>
</datalist>
</form>
表单新增的事件:
<form action="">
用户名：<input type="text" name="userName" id="userName"><br>
电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
<input type="submit">
</form>
<script>
/*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
document.getElementById("userName").oninput=function(){
console.log("oninput:"+this.value);
}
/*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/
document.getElementById("userName").onkeyup=function(){
console.log("onkeyup:"+this.value);
}
/*oninvalid:当验证不通过时触发*/
document.getElementById("userPhone").oninvalid=function(){
/*设置默认的提示信息*/
this.setCustomValidity("请输入合法的11位手机号");
}
</script>
多媒体：
1.音频播放：audio标签的使用:
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放
<audio src="../mp3/aa.mp3" controls></audio>
video：视频:
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放
poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像
width:视频的宽度
height:视频的高度
注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放
<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls height="600"></video>
source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择
<video src="../mp3/flv.flv" controls></video>
<video controls>
<!--视频源，可以有多个源-->
<source src="../mp3/flv.flv" type="video/flv">
<source src="../mp3/mp4.mp4" type="video/mp4">
</video>
html5操作dom：
query:查询 Selector：选择器 querySelector(传入选择器名称)
querySelector:获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素*/
参数要求：如果是类选择器，必须添加. 如果是id选择器， 必须添加# ,否则当成标签处理
var javaLi=document.querySelector(".green");
//var javaLi=document.querySelector("#c");
console.log(javaLi);
/*querySelectorAll获取满足条件的所有元素--数组*/
var allLi=document.querySelectorAll("li")[0];
console.log(allLi);
html5类样式的操作：
- add:为元素添加指定名称的样式.一次只能添加一个样式:
document.querySelector("#add").onclick=function(){
/*classList:当前元素的所有样式列表-数组*/
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underline");
//document.querySelector("li").className="red underline"
/*获取样式*/
var result=document.querySelector("li").classList.item(2);
console.log(result);
}
- remove:为元素移除指定名称的样式(不是移除class属性)，一次也只能移除一个:
document.querySelector("#remove").onclick=function(){
document.querySelector(".blue").classList.remove("blue");
}
- toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加。如果有则移除:
document.querySelector("#toggle").onclick=function(){
document.querySelectorAll("li")[2].classList.toggle("green");
}
- contains:判断元素是否包含指定名称的样式，返回true/false
document.querySelector("#contain").onclick=function(){
var isContain=document.querySelectorAll("li")[3].classList.contains("red");
console.log(isContain);
}
html5自定义属性：
1.data-开头
2.data-后必须至少有一个字符，多个单词使用-连接
建议：
1.名称应该都使用小写--不要包含任何的大写字符
2.名称中不要有任何的特殊符号
3.名称不要副作用纯数字
<p data-school-name="itcast">传智播客</p>
<p data-name="itcast">传智播客</p>
取值:
<script>
window.onload=function(){
var p=document.querySelector("p");
/*获取自定义属性值*/
/*将data-后面的单词使用camel命名法连接:必须使用camel合法法获取值否则有可能无法获取到值*/
//var value=p.dataset["schoolname"];//data-schoolname
var value=p.dataset["schoolName"];//data-school-name
console.log(value);
}
</script>
网友评论