推出的理由及目标
HTML5的出现，对于Web来说意义是非常重大的，因为他的意图是想要把目前Web上存在的各种问题一并解决掉了。
- Web浏览器之间的兼容性很低
- 文档结构不够明确
- Web应用程序的功能受到了限制 世界知名浏览器厂商对HTML5的支持 微软、Google、苹果、Opera、Mozilla
语法改变
- 内容类型
- DOCTYPE声明
- 指定字符编码
- 可以省略标记的元素
- 具有boolean值的属性
- 省略引号
新增的元素和废除的元素
-
新增的结构元素
section、article、aside、header、hgroup、footer、nav、figure
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时。推荐使用div而非section元素。article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。article元素是可以嵌套使用的。article元素可以用来表示插件。
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。
nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要放进nav元素，只需要将主要的、基本的连接组放进元素即可。nav元素应用场景：- 传统导航条 - 侧边栏导航 - 页内导航 - 翻页操作
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网络链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。
hgroup元素是将标题及子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。
footer元素可以作为其上层父级内容区块是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
-
新增的其他元素
video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu
-
新增的input元素的类型
email、url、number、range、Date Pickers
废除的元素
- 能使用CSS替代的元素：basefont、big、center、font、s、tt、u等
- 不再使用frame框架
- 只有部分浏览器支持的元素
- 其他被废除的元素
全局属性
新增的属性和废除的属性
-
contentEdittable属性:(true/false 有继承性) 允许用户编辑属性中的内容
-
designMode属性:(on/off 只能在js中修改编辑)用来指定整个页面是否可编辑
-
hidden属性:(true/false 页面装载后页面允许js进行修改)通知浏览器不渲染该元素
-
spellcheck属性: 针对input、textare文本输入框的新属性，进行拼写和语法检查
-
tabindex属性:(默认情况下只有链接元素/表单元素按tab键获取到焦点，可直接在其他标签上加tabindex属性进行使用)当不断敲击tab键，让窗口或页面中的控件获得焦点，对窗口或页面中的所有元素进行遍历，每个控件的tabindex表示是第几个被访问到的
表单新增元素与属性
- 表单内元素的form属性 在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。
<form id="testform">
<input type="text">
</form>
<textarea form="textform"></textarea>
- 表单内元素的formaction属性 在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另外一个页面，而在HTML5中可以为所有的提交按钮，添加不同的formaction属性，使单击不同的按钮可以将表单提交到不同的页面。
<form id="testform" action="xx1.jsp">
<input type="submit" name="s1" value="v1" formaction="xx1.jsp">提交到xx1.jsp页面
<input type="submit" name="s2" value="v2" formaction="xx2.jsp">提交到xx2.jsp页面
</form>
- 表单内元素的formmethod属性 在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，所以每个表单内只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对没一个表单元素分别指定不同的提交方法。
<form id="testform">
<input type="submit" name="s1" value="v1" formmethod="post" formaction="xx1.jsp">提交到xx1.jsp页面
<input type="submit" name="s2" value="v2" formmethod="get" formaction="xx2.jsp">提交到xx2.jsp页面
</form>
- 表单内元素的formenctype属性 在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进编码。在HTML5中，可以使用formenctype属性对单元元素分别指定不同的编码方式。
<form id="testform">
<input type="text" formenctype="text/plain"> //表单数据中的空格被转换为“+”号但不对表单中的特殊字符进行编码
<input type="text" formenctype="multipart/form-data"> //不对字符进行编码，在使用包含文件上传控件时，必须写
<input type="text" formenctype="application/x-www-form-urlencoded"> //在发送前编码所有字符，但表单的action属性为get时，浏览器则用当前编码方式，把表单转换成一个字符
</form>
- 表单内元素的formtarget属性 在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
<form id="testform">
<input type="submit" name="s1" value="v1" formtarget="_blank" formaction="xx1.jsp">//在新页面打开
<input type="submit" name="s2" value="v2" formtarget="_self"formaction="xx2.jsp">//在当前页打开
<input type="submit" name="s" value="v1" formtarget="_parent" formaction="xx1.jsp"> //在当前页打开
<input type="submit" name="s2" value="v2" formtarget="_top"formaction="xx2.jsp"> //在当前页打开
<input type="submit" name="s2" value="v2" formtarget="framename"formaction="xx2.jsp">//在当前页打开
</form>
-
表单内元素的autofocus属性 为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。
-
表单内元素的required属性 HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果该元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
<form action="xx1.jsp">
<input type="text" required>
<button type="submit">提交</button>
</form>
<textarea form="textform"></textarea>
- 表单内元素 的labels属性 在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表元素所绑定的标签元素所构成的集合。
<script>
function Validate(){
var txtName = document.getElementById("txt_name")
var button = document.getElementById("btnValidate")
var form = document.getElementById("testform")
if(textName.value.trim()==""){
var label = document.createElement("label")
label.setAttribute("for","txt_name")
form.insertBeform(label, button)
txtName.labels[1].innerHTML = "请输入姓名"
txtName。labels[1].setAttribute("style","font-size:9px;color:red")
}
}
</script>
<form id="testform">
<label id="label" for="txt_name">姓名：</label>
<input id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
- 标签的control属性 在HTML5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。
<body>
<script>
function setValue(){
var label = document.getElementById("label")
var textbox = label.control
textbox.value = "010010"
}
</script>
<form>
<label id="label">
邮编：
<input id="txt_zip" maxlength="6">
<small>请输入六位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>
</body>
-
文本框的placeholder属性 placeholder是指当文本框处于输入状态时显示的输入状态。当文本框处于输入状态且未获取光标焦点时，模糊显示输入提示文字。
-
文本框的list属性 在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
<form>
<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display:none">
<option value="HTML5学习">HTML5学习</option>
<option value="CSS3学习">CSS3学习</option>
<option value="JS学习">JS学习</option>
</datalist>
</form>
-
文本框的AutoComplete属性 帮助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能。在HTML5之前，因为谁都可以看见输入的值，所有的安全方面存在缺陷，只要使用AutoComplete属性，安全性方面也可以得到很好的控制。(三个值：不填、on、off 不填和on同理)
-
文本框的pattern属性 在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定形式。
-
文本框的SelectionDirection属性 这对input元素与textarea元素，HTML5增加了SelectionDiraction属性。当前用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，改属性值为"forward",当用户反向选取文字时，该属性值为"backward"。当用户没有选取任何文字时，该属性值为“forward”。
<script>
function AD() {
var conttrol = document.forms[0]['text']
var direction = control.selectionDirction;
alert(direction)
}
</script>
<form>
<input type="text" name="text">
<input type="button" value="点击我" onclick="AD()"
</form>
-
文本框的indeterminate属性 对于复选框checkbox元素来说，过去只是选取与非选取两种状态。在HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，一说明复选框处于“尚未明确是否选取”状态。
-
image提交按钮的height属性与width属性 正对类型为image的input元素，HTML5新增了两个属性，height、width分别用来指定图片按钮的高度和宽度。
HTML5改良的input元素
- 增加与改良的input元素 url类型、email类型、date类型、time类型、datetime类型、datetime-local类型、month类型、week类型、number类型、range类型、search类型、Tel类型、color类型
<form>
<!-- url类型-->
<input name="url" type="url" value="http://www.xxx.com">
<!-- email类型 -->
<input name="email" type="email" value="xx@xx.com">
<!-- date类型-->
<input name="date" type="date" value="">
<!-- time类型-->
<input name="time" type="time" value="10:00">
<!-- datetime类型-->
<input name="datetime" type="datetime" value="">
<!-- datetime-local类型-->
<input name="datetimelocal" type="datetime-local" value="">
<!-- month类型-->
<input name="month" type="month" value="2010-01-01">
<!-- week类型-->
<input name="week" type="week">
<!-- number类型-->
<input name="number" type="number" step="5" max="100" min="15" value="15">
<input type="submit" value="提交">
</form>
<!-- 计算器-->
<br/>
<script>
function sum() {
var n1 = document.getElementById("num1").valueAsNumber;
var n2 = document.getElementById("num3").valueAsNumber;
document.vauleAsNumber = n1 + n2;
}
</script>
<form>
<input type="number" id="num1">
+
<input type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="number" value="计算" onclick="sum()">
</form>
<!-- range类型-->
<input name="range" type="range" step="5" max="100" min="0" value="15">
<!-- search类型-->
<input type="search">
<!-- tel类型-->
<input type="tel">
<!-- color类型-->
<input type="color" onchange="document.body.style.backgroundColor = document.getElementById('currentColor').textContent = this.value;">
<span id="currentColor"></span>
<!-- output元素的追加-->
<br/>
<script>
function value_change() {
var number = document.getElementById("range").value;
document.getElementById("output").value = "number";
}
</script>
<form id="testform">
<input id="range" type="range" min="0" max="100" value="10" step="5" onchange="value_change()">
<output id="output">10</output>
</form>
- 表单验证
<!-- 表单提交验证-->
<script>
function check(){
var email = document.getElementById("email");
if(email.value==""){
alert("请输入email")
return false;
} else if(!email.checkValidity()){
alert("请输入正确的Email地址")
return false；
}
}
</script>
<form id="testform" onsubmit="" novalidate="true">
<label for="email">Email</label>
<input name="email" type="email" id="email"><br/>
<input type="submit">
</form>
HTML5增强的页面元素
figure、figcaption、details、summary、mark
<!-- figure元素以及figcaption元素-->
<figure>
<img src="1.jpg" alt="1">
<img src="2.jpg" alt="2">
<figcaption>只能写一个figcaption标题</figcaption>
</figure>
<!-- details元素和summary元素-->
<script>
function detail_onclick(detail){
var p = document.getElementById("p");
if(detail.open){
p.style.visibility = "hidden";
} else {
p.style.visibility = "visible";
}
}
</script>
<details id="detail" onclick="">
<summary>速度与激情7</summary>
<p id="p" style="visibility: hidden">你好么。。。</p>
</details>
ol、dl、cite、small
<!-- 有序列表ol-->
<ol start="5" reversed>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
<!-- dl多个名字的列表项-->
<dl>
<dt>Hello</dt>
<dd>你好就是Hello</dd>
<dt>Hello1</dt>
<dd>你好就是Hello1</dd>
</dl>
<!-- cite元素表示作品的标题-->
<h3>cite元素</h3>
<p>我最喜欢的电影史<cite>速度与激情</cite></p>
<!-- small元素标识小字印刷体的元素-->
progress元素、meter元素
<!-- 任务的完成进度-->
<script>
function btn(){
var i = 0;
function thread_one(){
if(i<=100){
i++;
updateprogress(i)
}
}
setInterval(thread_one,100);
}
function updateprogress(newValue){
var progressBar = document.getElementById("p")
progressBar.value = newValue;
progressBar.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
<section>
<h2>progress元素的使用</h2>
<p>完成的百分比<progress style="background-color: #269abc" id="p" max="10"></progress></p>
<input type="button" onclick="btn()" value="点击">
</section>
<!-- meter元素-->
<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>
Range对象基本概念
一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取页面上的任何区域。
HTML5编辑API之Range对象
<body>
<script>
function rangeTest(){
var html;
showRangeDiv = document.getElementById("showRange")
selection = document.getSelection()
if(selection.rangeCount>0){
html = "您选取了>"+selection.rangeCount+"<内容<br/>"
for(var i=0; i<selection.rangeCount;i++){
var range = selection.getRangeAt(i)
html+="第"+(i+1)+"段内容为："+range+"<br/>"
}
showRangeDiv.innerHTML = html
}
}
</script>
Selection对象与Range对象的使用
<input type="button" value="点击我" onclick="rangeTest()">
<div id="showRange"></div>
</body>
selectNode、selectNodeContents、deleteContents
<body>
<script>
function deleteRangeContent(onlyContent){
var div = document.getElementById("div")
var rangeObj = document.createRange(); //创建range对象
if(onlyContent){
rangeObj.selectNodeContents(div)
rangeObj.deleteContents()
} else {
rangeObj.selectNode(div)
rangeObj.deleteContents()
}
}
</script>
<div id="div" style="background-color: #e0a0b0;width: 300px; height: 50px">
元素中的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
</body>
setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter方法
<body>
<script>
function deleterChar(){
var div = document.getElementById("myDiv")
var textNode = div.firstChild;
var rangeObj = document.createRange()
rangeObj.setStart(textNode,1)
rangeObj.setEnd(textNode,4)
rangeObj.deleteContents()
}
</script>
<div id="myDiv" style="color:red">
这段文字是用来删除的
</div>
<button onclick="deleterChar()">删除文字</button>
</body>
<body>
<script>
function deleteRow() {
var table = document.getElementById("myTable")
if(table.rows.length > 0){
var row = table.rows[0]
var rangObj = document.createRange();
rangObj.setStartBefore(row)
rangObj.setEndAfter(row)
rangObj.deleteContents()
}
}
</script>
<table id="myTable" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
<button onclick="deleteRow()">删除第一行</button>
</body>
cloneRange、cloneContents、extractContents方法
<body>
<script>
function cloneRange(){
var rangeObj = document.createRange();
rangeObj.selectNodeContents(document.getElementById("p"))
var rangeClone = rangeObj.cloneRange()
alert(ranrgeClone.toString)
}
</script>
<p id="p">这里是克隆的内容</p>
<button onclick="cloneRange()">克隆</button>
</body>
<script>
function cloneContent(){
var div = document.getElementById("div")
var rangeObj = document.createRange()
rangeObj.selectNodeContents(div)
var docFrangMent = rangeObj.cloneContents()
div.appendChild(docFrangMent)
}
</script>
<div id="div">
你好么？
<br/>
<button onclick="cloneContent()">克隆</button>
</div>
<script>
function moveContent(){
var srcDiv = document.getElementById("srcDiv")
var distDiv = document.getElementById("distDiv")
var rangeObj = document.createRange()
rangeObj.selectNodeContent(srcDiv)
var docFragment = rangeObj.extractContents()
distDiv.appendChild(docFragment)
}
</script>
<div id="srcDiv" style="background-color:red; width: 300px;height: 50px;">你好</div>
<div id="distDiv" style="background-color:red; width: 300px;height: 50px;">你好</div>
<button onclick="moveContent()">移动元素</button>
collapse、detach方法
<body>
<script>
var rangeObj = document.createRange()
function selectRangeContents(){
var div = document.getElementById("div")
rangeObj.selectNode(div)
rangeObj.detach()
}
function unselect(){
rangeObj.collapse(false)
}
function showRange(){
alert(rangeObj.toString())
}
</script>
<div id="div" style="background-color: red; width: 300px; height: 50px;">元素</div>
<button onclick="selectRangeContents()">选择元素</button>
<button onclick="unselect()">取消元素</button>
<button onclick="showRange()">显示Range元素</button>
</body>
insertNode方法、compareBoundaryPoints方法
<script>
function moveButton(){
var btn = document.getElementById("button")
var selection = document.getSelection()
if(selection.rangeCount > 0) {
var range = selection.getRangeAt(0)
range.insertNode(btn)
}
}
</script>
<div onmouseup="moveButton()" style="width: 400pxl; background-color: red;">
sdfghjklfkl.nhuinidsc
</div>
<button id="button">按钮</button>
<script>
function testPlace(){
var boldText = document.getElementById("boldTest")
var boldRange = document.createRange()
boldRange.selectNodeContents(boldText.firstChild)
var selection = document.getSelection()
if(selection.rangeCount>0){
var selRange = selection.getRangeAt(0)
if(selRange.compareBoundaryPoints(Range.START_TO_END)){
alert("选取的文字在粗体前面")
}else{
if(selRange.compareBoundaryPoints(Range.END_TO_START)){
alert("后面')
}
}
}
}
<script>
这是一段文字，我也不<b id="boldTest">知道</b>些什么，随便吧
<br/>
<button onclick="testPlace()">位置比较</button>
