1、新增的元素：
1）新增的结构元素：
<section>、<article>、<aside>、<header>、<footer>、<nav>、<address>、<figure>、<main>
2）新增的其他元素：
<video>、<audio>、<embed>、<mark>、<progress>、<meter>、<time>（日期或时间）、<rudy>、<rt>、<rp>、<wbr>、<canvas>、<command>、<details>、<datalist>、<datagrid>、<keygen>、<output>、<source>、<menu>、<dialog>
3）新增的input元素的类型
email、url、number、tel、search、color、range、date、month、week、time（时间）、datetime、datetime-local
①日期与时间元素的step属性：
元素类型 step属性的单位 step属性的默认值 date 1日 1 datetime-local 1秒 60 month 1个月 1 week 1周 1 time 1秒 1 ② min属性和max属性限定输入日期与时间的范围；
③ 对于number类型来说：javascript脚本代码可以利用valueAsNumber设置和获取该元素中的数值；
目前为止，还没有针对新元素的局部区域进行修改的样式；
2、废除的元素：
① 能使用CSS替代的元素；
②不再使用frame框架；
③ 只有部分浏览器支持的元素
3、全局属性
全局属性：指的是可以对任何元素都使用的属性；
1）contentEditable属性
主要功能时允许用户编辑元素中的内容；该属性时是一个布尔值属性，为true时表示该元素内容可编辑；
在编辑完元素中的内容后，要保存其中内容，只能把该元素的innerHTML发送到服务器端进行保存；
2）designMode属性
用来指定整个页面是否可编辑；该属性有两个值“on”（可编辑）和“off”（不可编辑）；
designMode属性只能在javascript脚本中被编辑修改；
document.designMode="on";
3）hidden属性
所有的元素都允许使用hidden属性；
功能：通知浏览器不渲染该元素，使该元素处于不可见状态。但元素中的内容还是被浏览器创建的；
是一个布尔值属性，true=>元素处于不可见状态；
4）spellcheck属性
功能：对用户输入的文本内容进行拼写和语法检查。（针对文本输入框的新属性）
是一个布尔值属性，为true时表示要检查；
如果元素的readyOnly属性或disabled属性设置为true，则不执行拼写检查；
4、time元素的pubdate属性
pubdate属性是一个布尔值属性，可以被应用到article元素中的time元素上，意思是 time元素代表了文章或整个网页的发布时间。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>putdate与time结合使用</title> </head> <article> <header> <h1>关于<time datetime=2010-10-29>10月29日</time>的舞会通知</h1> <p>发布日期:<time datetime=2010-10-11 pubdate>2010年10月11日</time></p> </header> <p>大家好:我是法律系3年级学生代表,......(关于舞会的通知)</p> </article>
即，2010年10月11日 是该文章的发表日期，而10月29日是舞会的时间；
5、output元素的追加
output元素定义不同类型的输出，必须从属于某个表单，即，它必须写在表单内部，或者对它添加form属性；
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>output元素示例</title> </head> <script type="text/javascript"> function value_change(){ var number=document.getElementById("range1").value; document.getElementById("output1").value=number; } </script> <form id="testform"> 请选择一个数值： <input id="range1" type=range min=0 max=100 step=5 onchange="value_change()" /> <output id="output1">10</output> </form>
6、表单新增属性
1）form属性：可以把表单从属元素写在页面的任何地方，添加form属性即可把该元素与某表单关联起来；
2）formaction属性：可以为页面中所有按钮添加不同的formaction属性，使得在单击不同的按钮可以提交不同的页面；
3）formmethod属性：可以对每个表单元素分别制定不同的提交方法；
4）formenctype属性：表单未发送到服务器之前，对表单元素分别指定不同的编码方式；
① application/x-www-form-urlencoded; （默认的编码方式）
② multipart/form-data：不对字符编码；（使用包含文件上传控件时，必须使用该值）
③ text/plain：表单中空格换为“+”，不对表单中的特殊字符进行编码；
5）formtarget属性：可以每个提交按钮单独指定提交后在何处打开所需要加载的页面；
① _blank：在新窗口打开； ② _self：在相同的框架中打开；（默认） ③ _parent：在当前框架的父框架中打开；
④_top：在当前浏览器窗口中打开； ⑤ framename：在指定的框架中打开；
6）autofocus属性：当画面打开时，该控件自动获得光标焦点；
7）required属性：不允许控件元素中的内容为空白；
8）placeholder属性：模糊提示输入提示文字（占位符提示）
9）pattern属性：输入某个指定的正则表达式，不符合格式，不允许提交；
10）label属性：绑定控件元素；
① control属性：通过control属性来访问label绑定的表单元素；
11）文本框的list属性：该属性为某个datalist元素的id。datalist类似于选择框，用于文本框输入提示；
12）autocomplete属性：有“on”、“off”、“”（不指定）三种值；当设置为“on”时，可以显式指定候补输入的列表数据；
13）文本框的selectionDirection属性：获得用户在文本框选取部分文本时的选择方向，正向选取为“forward”，反向选取为“backward”；
14）复选框的indeterminate属性：为true时表示复选框处于“尚未明确是否选取的状态”；所以在html5中，复选框的状态判断应该为：是否明确状态=>是否选取；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script type="text/javascript">
// control属性实例
function setvalue(){
var label=document.getElementById("label");
var textbox=label.control;
textbox.value="232100";
}
// selectionDirection属性实例
function AlertSelectionDirection(){
var control=document.forms[0]['test'];
var a=control.selectionDirection;
alert(a);
}
// indeterminate属性实例
var cd=document.getElementById("cd");
cd.indeterminate = true;
</script>
<body>
<form id="testform" action="serve.jsp">
<!-- formaction属性：指定要提交的页面 -->
<!-- formtarget属性：指定在何处打开页面 -->
<input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">
<!-- formmethod属性：指定提交方式 -->
<input type="submit" name="s2" value="post提交方式" formmethod="post">
<input type="submit" name="s3" value="get提交方式" formmethod="get">
<!-- 指定编码方式 -->
<input type="submit" value="上传" formaction="upload.jsp" formenctype="multipart/form-data">
<!-- 自动聚焦 文本框不能为空 要求输入一个数字和3个大写字母-->
<input type="text" autofocus required pattern="[0-9][A-Z]{3}" placeholder="输入一个数字和3个大写字母">
<br>
<label id="label">
邮编：<input id="txt" maxlength="6">
</label>
<input type="button" value="control" onclick="setvalue()">
<!-- label利用for绑定表单元素 -->
<label for="txtname">姓名：</label>
<input id="txtname" type="text" name="greeting" list="greetings" autocomplete="on">
<datalist id="greetings">
<option>good</option>
<option>hello</option>
<option>amy</option>
</datalist>
<br>
<!-- 文本框的selectionDirection属性 -->
<input type="text" name="test">
<input type="button" value="点击" onclick="AlertSelectionDirection()">
<br>
<input type="checkbox" indeterminate id="cd">indeterminate属性测试
</form>
<!-- form属性:添加控件到表单中 -->
<textarea form="testform"></textarea>
</body>
</html>7、表单取消验证与显示验证
1）取消验证
① 利用form元素的novalidate属性来关闭整个表单验证；（设置为true时，关闭表单验证）；
② 利用input元素或submit元素的formnovalidate属性，让表单验证对单个input元素失效；
注意：如果对submit按钮使用了formnovalidate属性，单击该按钮时，相当于使用了form元素的novalidate属性，整个表单验证都失效；
2）显示验证
form元素与input元素（包括select元素与textarea元素）都具有checkValidity方法，该方法可以显示地对表单内所有的元素内容或单个元素内容进行有效性的验证；
<!DOCTYPE html> <meta charset=UTF-8 /> <title>checkValidity示例</title> <script language="javascript"> function check() { var email = document.getElementById("email"); if(email.value=="") { alert("请输入Email地址"); return false; } else if(!email.checkValidity()) { alert("请输入正确的Email地址"); return false; } else alert("您输入的Email地址有效"); } </script> <form id=testform onsubmit="return check();" novalidate="true"> <label for=email>Email</label> <input name=email id=email type=email /><br/> <input type=submit> </form>
8、增强的页面元素
8.1 figure元素与figcaption元素
1）figure元素是一种元素的组合，可带有可选标题，用来表示网页上一块独立的内容，将其从网页上移除后对网页上其他内容产生任何影响。表示内容通常是：图片、统计图或代码实例；
2）figcaption元素表示figure元素的标题，必须写在figure元素内部；
一个figure元素最多只允许放置一个figcaption元素，但允许放置多个其他元素师；
<figure> <img src="sl.jpg" alt="森林"> <figcaption>森林</figcaption> </figure>
8.2 details元素与summary元素
1）details元素为一种用于标识该元素内部的子元素可以展开、收缩显示的元素。
该元素具有一个布尔类型的open类型，当该值为true时，该元素内部的子元素应该展开显示；反之，收缩；
2）summary元素从属于details元素，当收缩时，呈现的内容，如果没有该元素，浏览器会提供默认的文字；
<details id="detail1"> <summary>精武风云</summary> <p id="p">陈真（甄子丹 饰）当年为报杀师之仇，独闯 虹口道场...(精武风云电影介绍）</p> </details>
当把summary元素去掉时显示结果如下：
3）mark元素
mark元素表示页面中需要突出显示或高亮显示的，目的是引起读者的注意；
<h1>搜索"<mark>HTML 5</mark>",找到相关网页约10,200,000篇，用时0.041秒</h1>
注意：<mark>和HTML4的<em>、<strong>两个元素的作用是有区别的；
① mark元素的标识目的与原文作者无关，是后来被引用时添加上去的，目的是引起当前用户的注意；
② <em>元素是作者为突出文章重点使用的；
③ <strong>元素是原文作者用来强调一段文字的重要性，比如：警告信息、错误信息等；
4）progress元素
progress元素表示一个任务的完成进度；
value属性表示已经完成了多少工作量；(大于等于0，小于等于max)
max属性表示总共有多少工作量；（>=0）
<p>完成百分比: <progress id="p" max=100></progress></p>
5）meter元素
meter元素：表示规定范围内的数量值；
属性如下：
① value：实际值；
② min：允许使用的最小值；
③ max：允许使用的最大值；
④ low：规定范围的下限值；
⑤ high：规定范围的上限值；
⑥ optimum：最佳值；
<p>磁盘使用量：<meter value="40" min="0" max="160" low="50" high="120" optimum="90"></meter> 40/160 GB</p> <p>磁盘使用量：<meter value="140" min="0" max="160" low="50" high="120" optimum="90"></meter> 140/160 GB</p> <p>磁盘使用量：<meter value="90" min="0" max="160" low="50" high="120" optimum="90"></meter> 90/160 GB</p>
6）dialog元素
dialog元素代表一个对话框，默认情况下该元素处于隐藏状态，可以在js脚本中使用show()方法显示dialog元素，使用close()方法隐藏dialog元素；而showModal()方法以模式对话框的形式显示dialog元素；
具有属性：
open：表示在页面打开时即显示dialog元素；
returnValue：对话框设置或返回一个返回值；
<input type="button" value="打开对话框" onclick="document.getElementById('dg').showModal();document.getElementById('dg').returnValue='对话框的值';"> <dialog id="dg" style="width:90%;text-align:center;" onclose="alert('对话框被关闭')" oncancel="alert('用户在模式窗口中按下Esc键')"> <h1>用户登录</h1> <main> <form> <label for="txtName" value="用户名："/><input type="text" id="txtName"/><br/> <label for="txtPassword" value="密码："/><input type="password" id="txtPassword" autofocus/><br/> <input type="button" value="登录" /><input type="button" value="关闭" onclick="document.getElementById('dg').close();alert(document.getElementById('dg').returnValue);"/> </form> </main> </dialog>7）改良的元素
① a元素添加download属性，用户点击超链接时，将直接下载超链接所指向的资源文件；
② ol列表添加属性：
start：使列表项序号从该属性指定的值开始递增；
reversed：反向编号；即，降序；
