区别
1.html5语法的改变
HTML5简化了很多细微的语法，例如：
1.1doctype的声明;
html4:
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
html5:
DOCUTYPE html>
1.2字符编码:
html4:
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
html5:
<meta charset="utf-8" />
HTML5的语法兼容HTML4和XHTML1，但不兼容SGML(标准通用标记语言)。html5有向下兼容
的特性，他可以完整的显示html4的内容;
1.3元素标记
不允许写结束标记的元素：br、embed、hr、img、input、link、meta、param。正确格式:<元素/>
<br/>
1.4具有boolean值的属性
<input type="checkbox" checked /><br/> <input type="checkbox" /><br/> <input type="checkbox" checked="checked" /><br/> <input type="checkbox" checked="" />
1.5省略引号
<input type=button value=点击>
新特性
2.全局属性（所有标签都可以使用的属性）
1.contentEditable属性.允许用户对文本进行编辑,是布尔值类型，true为可编辑，false为不可编辑，默认为true
2.designMode属性.规定页面是否可编辑，值为on/off,on为页面可编辑，off页面不可被编辑，必须在javascript中使用
3.hidden属性
4.spellcheck属性.针对input和textarea标签的文本拼写语法检查，拼写错误会提示
5.tabindex属性.规定按tab键之后的选择顺序，默认按tab键对链接元素和form表单有用，
通过tabindex属性可以使其他标签也可以按Tab键获取焦点，值为-1不会获取焦点
3.HTML5新增元素
3.1 新增的主体结构元素:artical,aside,section,nav,time,pubdate元素
artical标签通常表示文档，页面中独立的部分，一篇博客，文章或其他独立的部分，通常可以用来表示插件，可嵌套
<article>
<header>
<h1>这里是标题h1>
<p>文本段落p>
header>
<artical>
<h3>这里是评论区域h3>
<p>正文在这里p>
artical>
<footer>底部文本footer>
article>
aside标签通常表示当前页面或文章的附属信息，侧边栏，广告弹出框等，一个独立的部分
<aside> <nav> <h3>评论h3> <ul> <li>好好学习li> <li>天天向上li> ul> nav> aside>
section内有标题有内容，强调分块或分段
<section> <h1>标题h1> <p>内容p> section>
nav主要用来做页面导航
<nav> <ul> <li><a href="#">导航1a>li> <li><a href="#">导航2a>li> <li><a href="#">导航3a>li> ul> nav>
time元素表示时间
<time datetime="2017-2-4">2017-2-4time> <time datetime="2017-2-4T17:00">2017-2-4time> <time datetime="2017-2-4T17:00Z">2017-2-4time> <time datetime="2017-2-4T17:00+06:00">2017-2-4time>
pubdate表示发布时间
<time datetime="2017-2-24" pubdate>2017-2-24time>
3.2 新增的非主体结构元素:address、header、hgroup、footer元素
address元素用来在文档中呈示联系信息，包括联系人，联系地址，邮箱，电话等联系信息
header元素(一个页面可以有多个):
<header> <nav> <ul> <li><a href="#">导航1a>li> <li><a href="#">导航2a>li> <li><a href="#">导航3a>li> ul> nav> header>
hgroup标签用于归类同一个标题下的子标题
<header> <hgroup> <h1>大标题h1> <h2>小标题h2> hgroup> <p>这是正文p> header>
footer元素：
<footer> <ul> <li><a href="#">版权信息a>li> <li><a href="#">站点地图a>li> <li><a href="#">联系方式a>li> ul> footer>
网页排版:
<body> <header> <h1>大标题h1> <nav> <ul> <li><a href="#">首页a>li> <li><a href="#">帮助a>li> ul> nav> header> <article> <hgroup> <h1>大标题h1> <h2>小标题h2> hgroup> <p>文本正文p> <section> <div> <article> <h3>评论标题h3> <p>评论内容p> article> div> section> article> <footer> <small>版权内容...small> footer> body>
4.HTML5新增表单元素与属性
form属性：
<form id="testform"> <input type="text"> form> <textarea form="testform">textarea>
formaction属性:
<form> <input type="submit" name="n1" value="v1" formaction="../3/address.html">按钮1input> <input type="submit" name="n1" value="v2" formaction="../3/hgroup.html">按钮2input> <input type="submit" name="n1" value="v3" formaction="../3/paiban.html">按钮3input>
formmethod属性:
<form id="testform"> <input type="submit" value="v1" name="n1" formmethod="post" formaction="../3/address.html"> <input type="submit" value="v2" name="n2" formmethod="get" formaction="../3/footer.html"> form>
formtarget属性:
<form> <input type="submit" name="n1" value="v1" formtarget="_blank" formaction="../3/address.html">按钮1input> <input type="submit" name="n1" value="v2" formtarget="_self" formaction="../3/hgroup.html">按钮2input> <input type="submit" name="n1" value="v3" formtarget="_parent" formaction="../3/paiban.html">按钮3input> <input type="submit" name="n1" value="v3" formtarget="_top" formaction="../3/paiban.html">按钮4input> <input type="submit" name="n1" value="v3" formtarget="framename" formaction="../3/paiban.html">按钮5input> form>
formenctype属性:
<form> <input type="text" formenctype="text/plain"> <input type="text" formenctype="multipart/form-data"> <input type="text" formenctype="application/x-www-form-urlencoded"> form>
autofocus属性:
<form> <input type="text"> <input type="text" autofocus> form>
required属性:
<form> <input type="text" required="required"> <button type="submit">提交button> form>
list元素:
<input type="text" list="greetings"> <datalist id="greetings"> <option value="html学习">html学习option> <option value="css学习">css学习option> <option value="ios学习">ios学习option> datalist>
下拉菜单:
<select name="" id=""> <option value="">html5option> <option value="">css3option> <option value="">javascriptoption> select>
control属性:
<head> <meta charset="UTF-8"> <title>control属性title> <script> //h5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素; function setValue() { var label=document.getElementById("label"); var textbox=label.control textbox.value="100100" } script> head> <body> <form> <label id="label"> 邮编: <input id="input_text" type="text" maxlength="6"> <small>请输入六位邮编small> label> <input type="button" value="默认邮编" onclick="setValue()"> form> body>
创建节点:
<body> <ul id="myList"><li>Coffeeli><li>Teali>ul> <p id="demo">请点击按钮向列表插入一个项目。p> <button onclick="myFunction()">试一下button> <script> function myFunction() { var newItem=document.createElement("LI") var textnode=document.createTextNode("Water") newItem.appendChild(textnode) var list=document.getElementById("myList") list.insertBefore(newItem,list.childNodes[0]); } script> <p><b>注释：b><br>首先请创建一个 LI 节点，<br>然后创建一个文本节点，<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。p> body>
labels节点:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>labels节点title>
<script>
function validate(){
var name=document.getElementById("name");
var button=document.getElementById("button");
var form=document.getElementById("form");
if(name.value.trim()==""){
var label=document.createElement("label");
label.setAttribute("for","name");
form.insertBefore(label,button);
name.labels[1].innerHTML="请输入姓名";
name.labels[1].setAttribute("style","color:red;font-size:8px;padding:10px;");
}
}
script>
head>
<body>
<form id="form">
<label id="label" for="name">姓名label>
<input id="name" type="text">
<input type="button" value="验证" onclick="validate()" id="button">
form>
body>
html>
placeholder属性:
<input type="text" placeholder="请输入...">
autocomplete标签:
<body> <input type="text" list="greetings" autocomplete="off"> <datalist id="greetings"> <option value="html学习">html学习option> <option value="css学习">css学习option> <option value="ios学习">ios学习option> datalist> <p><b>注释：b>autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。p> body>
image标签的宽高属性:
<form> <label>姓名label> <input type="text"> <input type="image" src="../image/1.jpg" width="40px" alt="图片"> form>
checkbox属性:
<body> <input type="checkbox" id="input" indeterminate>选中测试 <script> var input=document.getElementById("input"); input.indeterminate=true; script> body>
pattern正则表达式:
<form action=""> 请输入<input type="text" pattern="[a-v]{4}"> <input type="submit" value="提交"> form>
selectionDirection属性:
<body> <form> <input type="text" name="text"> <input value="点击" type="button" onclick="clickBtn()"> form> <script> /*selectionDirection属性获取用户选中文本的方向*/ function clickBtn(){ var text=document.forms[0]["text"]; direction=text.selectionDirection; alert(direction) } script> body>
5、HTML5 改良的 input 元素的种类
5.1表单验证
<body> <form id="testform" onsubmit="test_submit()"> <label for="email">邮箱label> <input type="email" name="email" id="email"> <input type="submit" value="提交"> form> <script> function test_submit() { var email=document.getElementById("email"); if (email.value==""){ alert("请输入邮箱地址"); return false; } // 调用checkValidity()方法执行输入校验 else if(!email.checkValidity()){ alert("请输入正确的邮箱地址"); return false; } } script> body>
5.2 type类型
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<form>
<input type="url" name="url" value="http://www.baidu.com">
<input type="submit" value="提交">
form><br/>
<form>
<input type="email" name="email" value="[email protected]">
<input type="submit" value="提交">
form><br/>
<label for="meeting">培训日期：label><input id="meeting" type="date" value="2017-02-24"/><br/><br/>
<input type="time" name="time" value="10:00"><br/><br/>
<input type="datetime" name="datetime" value="10:00"><br/><br/>
<input type="datetime-local" name="datetime-local"><br/><br/>
<input type="month" name="month" value="2017-02-06"><br/><br/>
<input type="week" name="week"><br/><br/>
<input type="number" name="number" value="10" min="10" max="30" step="10"><br/><br/>
<input type="number" id="num1">+
<input type="number" id="num2">=
<input type="number" id="result" readonly>
<input type="button" id="button" onclick="bun()" value="计算">
<script>
function bun() {
var num1=document.getElementById("num1");
var num2=document.getElementById("num2");
var result=document.getElementById("result");
result.valueAsNumber=num1.valueAsNumber+num2.valueAsNumber;
}
script>
<br/><br/>
<input type="range" name="range" step="5" min="0" max="100" value="20"><br/><br/>
<input type="search"><br/><br/>
<input type="tel"><br/><br/>
<input type="color" number="color" onchange="document.body.style.backgroundColor=document.getElementById('colorContent').textContent=this.value;">
<span id="colorContent">span>
<br/><br/>
<input type="range" value="15" min="0" max="100" step="5" id="range1" onchange="value_change()">
<output id="output1">15output>
<script>
function value_change() {
var range1=document.getElementById("range1");
document.getElementById("output1").value=range1.value
}
script>
body>
html>
5.3计算器
<body> <input type="number" id="num1">+ <input type="number" id="num2">= <input type="number" id="result" readonly> <input type="button" id="button" onclick="bun()" value="计算"> <script> function bun() { var num1=document.getElementById("num1"); var num2=document.getElementById("num2"); var result=document.getElementById("result"); result.valueAsNumber=add(num1.valueAsNumber,num2.valueAsNumber); } function add(a,b) { return a+b; } script> body>
5.4 radio单选按钮的使用
<form> 你是男生还是女生? <br/>女生<input type="radio" name="sex"x> 男生<input type="radio" name="sex"> form>
6、新增的页面元素
6.1 cite元素
<h3>cite元素h3>
<p>我最近想看电影<cite>功夫瑜伽cite>p>
6.2 small元素
<small>这里可以写版权等small>
6.3 details元素和summary元素
<body> <details id="detail" onclick="detail_on()"> <summary>好看是电影在这里summary> <p id="p1">我就是好看的电影p> details> <script> function detail_on() { var p=document.getElementById("p1"); if(detail.open){ p.style.visibility="hidden"; }else{ p.style.visibility="visible"; } } script> body>
6.4 figure元素
<body> <figure> <img src="../image/1.jpg" alt="图片"> <img src="../image/2.jpg" alt="图片"> <img src="../image/3.jpg" alt="图片"> <figcaption>图片figcaption> figure> body>
6.5 mark元素
<p>谁比较突出，就是<mark>我mark>p>
6.6progress元素
<body> <section> <h3>progress进度h3> <p>完成的百分比<progress id="pro" value="0" max="100">progress>p> <input type="button" value="点击" onclick="btn()"> section> <script> function btn() { var i=0; function open(){ if(i<100){ i++; newPogress(i); } } //setInterval定时器 setInterval(open,200); } function newPogress(value_p) { var pro=document.getElementById("pro"); pro.value=value_p; } script> body>
7.列表的使用
ul无序列表:
<ul type=""> <li>html5li> <li>css3li> <li>javascriptli> ul>
ol有序列表:
<ol start="5"> <li>html5li> <li>css3li> <li>javascriptli> ol>
ol li ul嵌套列表:
<ol> <li>动物 <ul> <li>猫li> <li>狗li> ul> li> <li>植物 <ul> <li>花li> <li>草li> ul> li> <li>生物 <ul> <li>鱼li> <li>大树li> ul> li> ol>
dl自定义列表:
<dl> <dt>标题dt> <dd>注释dd> <dt>标题dt> <dd>注释dd> dl>
8.table表格
<table border="1" bgcolor="#f0f8ff" cellpadding="10" cellspacing="0" align="center" style="text-align: center">
<caption>标题caption>
<tr>
<th>表头1th>
<th>表头2th>
<th>表头3th>
<th>表头4th>
tr>
<tr>
<td colspan="2">单元格1td>
<td>单元格1td>
<td>单元格1td>
tr>
<tr>
<td>单元格2td>
<td>单元格2td>
<td rowspan="3">单元格2td>
<td>单元格2td>
tr>
<tr>
<td>单元格3td>
<td>单元格3td>
<td>单元格3td>
tr>
<tr>
<td>单元格4td>
<td>单元格4td>
<td>单元格4td>
tr>
table>
9.内联框架
iframe元素:
<iframe src="test.html" frameborder="0" width="400px" height="400px">iframe>
10.实体
带有特殊字符的标签不能被展现出来，要通过html实体的方式表达，如：
<html>表示
11.audio音频元素
<audio src="../../audio/1.mp3" controls="controls">您的浏览器暂不支持播放audio> <br/><br/><br/> <audio id="audio" src="../../audio/2.mp3">您的浏览器暂不支持播放audio> <button onclick="clickA()">暂停/播放button> <script> var audio=document.getElementById("audio") function clickA() { //pased:暂停状态 if(audio.paused){ audio.play(); }else{ //pase():暂停方法 audio.pause(); } } script>
12.video视频元素
<body> <video controls="controls">您的浏览器暂不支持播放 <source src="../../audio/1.mp4"> <source src="../../audio/1.ogg"> video> <br/><br/><br/> <video id="audio" src="../../audio/1.mp4">您的浏览器暂不支持播放video> <button onclick="clickA()">暂停/播放button> <script> var audio=document.getElementById("audio") function clickA() { //pased:暂停状态 if(audio.paused){ audio.play(); }else{ //pase():暂停方法 audio.pause(); } } script> body>
13.拖放
DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {
width:300px; height:300px;padding:10px;border:1px solid #aaaaaa;}
style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
script>
head>
<body>
<p>请把图片拖放到矩形中：p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
<br />
<img id="drag1" src="../../image/1.gif" draggable="true" ondragstart="drag(event)" />
body>
html>
14.web存储
之前，都是由cookie完成数据存储的，但是，cookie不适合大量数据的存储，因为它们由每一个对服务器请求来传递，使得cookie速度很慢且效率不高。
14.1localStorage数据存储
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web存储1title>
<script>
//1.localStorage数据存储，刷新浏览器数据依然存在
// 特点:localStorage存储的数据没有时间限制，无论多久之后依然可用，浏览器退出数据依然还在;
var inp;
var btn;
window.onload=function(){
inp=document.getElementById("inp");
//如果localStorage.text不为空，则输出它本身;
if(localStorage.text){
inp.value=localStorage.text;
}
btn=document.getElementById("btn");
btn.onclick=function(){
//alert(inp.value);
//点击按钮则将输入框中内容作为本地存储内容输出;
localStorage.text=inp.value;
}
}
script>
head>
<body>
<input type="text" id="inp">
<button type="button" id="btn">savebutton>
body>
html>
14.2 sessionStorage数据存储
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web存储2title>
<script src="sessionStorage.js">
//2.sessionStorage数据存储，刷新浏览器数据依然存在
// 特点:浏览器退出数据清除
var num=0;
var span;
var btn1;
window.onload=function () {
span=document.getElementById("span");
if (sessionStorage.num){
num=sessionStorage.num;
}else{
num=0;
}
btn1=document.getElementById("btn1");
btn1.onclick=function(){
num++;
sessionStorage.num=num;
showNumber();
};
};
function showNumber(){
span.innerHTML=num;
}
script>
head>
<body>
<span id="span">0span>
<button type="button" id="btn1">addbutton>
body>
html>
15.canvas图形绘制标签
DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
script>
body>
html>
15.HTML5废除的元素
废除basefont、big、center、font、s、tt、u等元素，
不再使用frame框架