区别
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值的属性
<!--只写属性不写属性值，属性为true-->
<input type="checkbox" checked /><br/>
<!--不写属性，属性为false-->
<input type="checkbox" /><br/>
<!--属性值=属性名，属性为true-->
<input type="checkbox" checked="checked" /><br/>
<!--属性值=空字符串，属性为true-->
<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标签通常表示文档，页面中独立的部分，一篇博客，文章或其他独立的部分，通常可以用来表示插件，可嵌套
<!--artical标签通常表示文档，页面中独立的部分，一篇博客，文章或其他独立的部分，通常可以用来表示插件，可嵌套-->
<article>
<header>
<h1>这里是标题</h1>
<p>文本段落</p>
</header>
<artical> <h3>这里是评论区域</h3>
<p>正文在这里</p>
</artical>
<footer>底部文本</footer>
</article>
artical
aside标签通常表示当前页面或文章的附属信息，侧边栏，广告弹出框等，一个独立的部分
<!--aside标签通常表示当前页面或文章的附属信息，侧边栏，广告弹出框等，一个独立的部分-->
<aside>
<nav>
<h3>评论</h3>
<ul>
<li>好好学习</li>
<li>天天向上</li>
</ul>
</nav>
</aside>
aside
section内有标题有内容，强调分块或分段
<!--section内有标题有内容，强调分块或分段，artical元素强调独立性-->
<section>
<h1>标题</h1>
<p>内容</p>
</section>
section
nav主要用来做页面导航
<nav>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</nav>
nav
time元素表示时间
<time datetime="2017-2-4">2017-2-4</time>
<!--T表示时间-->
<time datetime="2017-2-4T17:00">2017-2-4</time>
<!--Z国际标准UTC时间-->
<time datetime="2017-2-4T17:00Z">2017-2-4</time>
<!--+表示时差-->
<time datetime="2017-2-4T17:00+06:00">2017-2-4</time>
time
pubdate表示发布时间
<!--pubdate表示发布时间-->
<time datetime="2017-2-24" pubdate>2017-2-24</time>
3.2 新增的非主体结构元素:address、header、hgroup、footer元素
address元素用来在文档中呈示联系信息，包括联系人，联系地址，邮箱，电话等联系信息
header元素(一个页面可以有多个):
<header>
<nav>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</nav>
</header>
hrader
hgroup标签用于归类同一个标题下的子标题
<header>
<hgroup>
<h1>大标题</h1>
<h2>小标题</h2>
</hgroup>
<p>这是正文</p>
</header>
hgroup
footer元素：
<footer>
<ul>
<li><a href="#">版权信息</a></li>
<li><a href="#">站点地图</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</footer>
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表单的标签脱离form标签，添加css样式更方便-->
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
form属性
formaction属性:
<!--HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，
在HTML5中可以为所有的提交按钮增加不同的formaction属性，使单击不同按钮可以将表单提交到不同页面-->
<form>
<input type="submit" name="n1" value="v1" formaction="../3/address.html">按钮1</input>
<input type="submit" name="n1" value="v2" formaction="../3/hgroup.html">按钮2</input>
<input type="submit" name="n1" value="v3" formaction="../3/paiban.html">按钮3</input>
formaction属性
formmethod属性:
<form id="testform">
<!--formmethod属性对每一个表单元素分别指定不同的提交方法-->
<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>
formmethod属性
formtarget属性:
<form>
<input type="submit" name="n1" value="v1" formtarget="_blank" formaction="../3/address.html">按钮1</input>
<input type="submit" name="n1" value="v2" formtarget="_self" formaction="../3/hgroup.html">按钮2</input>
<input type="submit" name="n1" value="v3" formtarget="_parent" formaction="../3/paiban.html">按钮3</input>
<input type="submit" name="n1" value="v3" formtarget="_top" formaction="../3/paiban.html">按钮4</input>
<input type="submit" name="n1" value="v3" formtarget="framename" formaction="../3/paiban.html">按钮5</input>
</form>
formtarget属性
formenctype属性:
<form>
<!--formmethod属性对表单元素分别指定不同的编码方式-->
<input type="text" formenctype="text/plain">
<input type="text" formenctype="multipart/form-data">
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>
formenctype属性
autofocus属性:
<form>
<!--文本框，选择框，按钮空间加上autofocus属性，当页面打开时，该控件自动获得焦点-->
<input type="text">
<input type="text" autofocus>
</form>
autofocus属性
required属性:
<form>
<!--required属性，如果输入框内为空，就不能提交，会提示必须输入字段-->
<input type="text" required="required">
<button type="submit">提交</button>
</form>
required属性
list元素:
<!--list属性类似于选择框，当用户想要设定的值不在选择列表内可自行输入，属性值为某个datalist元素的id-->
<input type="text" list="greetings">
<datalist id="greetings">
<option value="html学习">html学习</option>
<option value="css学习">css学习</option>
<option value="ios学习">ios学习</option>
</datalist>
list属性
下拉菜单:
<select name="" id="">
<option value="">html5</option>
<option value="">css3</option>
<option value="">javascript</option>
</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>
control属性
创建节点:
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></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>
<!--autocomplete 属性规定表单是否应该启用自动完成功能。
autocomplete属性值为on/off/空，默认空为on
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。-->
<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>
<!--checkbox有三种状态，选中，未选中，及不明选中状态(indeterminate)-->
<input type="checkbox" id="input" indeterminate>选中测试
<script>
var input=document.getElementById("input");
input.indeterminate=true;
</script>
</body>
pattern正则表达式:
<form action="">
<!--pattern正则表达式-->
请输入<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>
checkValidity()方法执行输入校验
5.2 type类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--url类型-->
<input type="url" name="url" value="http://www.baidu.com">
<input type="submit" value="提交">
</form><br/>
<form>
<!--email类型-->
<input type="email" name="email" value="956600450@qq.com">
<input type="submit" value="提交">
</form><br/>
<!--date类型-->
<label for="meeting">培训日期：</label><input id="meeting" type="date" value="2017-02-24"/><br/><br/>
<!--time类型-->
<input type="time" name="time" value="10:00"><br/><br/>
<!--datetime类型(UTC国际标准时间)-->
<input type="datetime" name="datetime" value="10:00"><br/><br/>
<!--datetime-local类型(本地日期时间)-->
<input type="datetime-local" name="datetime-local"><br/><br/>
<!--month类型-->
<input type="month" name="month" value="2017-02-06"><br/><br/>
<!--week元素-->
<input type="week" name="week"><br/><br/>
<!--number元素-->
<input type="number" name="number" value="10" min="10" max="30" step="10"><br/><br/>
<!--计算器(valueAsNumber),valueAsNumber属性很轻松地设置和读取该元素中的数值-->
<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>
<!--range属性只允许输入一定范围内的数值，可设置最大最小及每次拖动步数-->
<br/><br/>
<input type="range" name="range" step="5" min="0" max="100" value="20"><br/><br/>
<!--search类型-->
<input type="search"><br/><br/>
<!--tel类型-->
<input type="tel"><br/><br/>
<!--color类型-->
<input type="color" number="color" onchange="document.body.style.backgroundColor=document.getElementById('colorContent').textContent=this.value;">
<span id="colorContent"></span>
<br/><br/>
<!--output元素的追加-->
<input type="range" value="15" min="0" max="100" step="5" id="range1" onchange="value_change()">
<output id="output1">15</output>
<script>
function value_change() {
var range1=document.getElementById("range1");
document.getElementById("output1").value=range1.value
}
</script>
</body>
</html>
type
5.3计算器
<body>
<!--计算器2-->
<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>
<!--radio单选按钮必须有个相同的name才能算一组-->
你是男生还是女生?
<br/>女生<input type="radio" name="sex"x>
男生<input type="radio" name="sex">
</form>
6、新增的页面元素
6.1 cite元素
<!--cite元素主要表示作品，一本书，一部电影，一首歌等的标题，可在页面中详细引用也可提一下-->
<h3>cite元素</h3>
<p>我最近想看电影<cite>功夫瑜伽</cite></p>
6.2 small元素
<!--small元素标识小字印刷体版权等相关法律信息-->
<small>这里可以写版权等</small>
6.3 details元素和summary元素
<body>
<!--details元素和summary元素(details元素表示该元素有内部元素可被展开隐藏显示，有个布尔值属性open)
summary元素是details元素的从属元素-->
<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元素是一种组合元素，带有其标题，表示网页上独立的内容，可表示图片，统计图，代码示例，音频，视频插件等
figcaption元素是figure的标题，一个figure只能有一个figcaption标题元素-->
<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元素
<!--mark元素表示突出高亮显示的内容-->
<p>谁比较突出，就是<mark>我</mark></p>
6.6progress元素
<body>
<!--progress元素代表任务完成的进度等-->
<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类型有disc(实心圆，默认),circle(空心圆，嵌套二级默认),square(实方块)-->
<ul type="">
<li>html5</li>
<li>css3</li>
<li>javascript</li>
</ul>
ol有序列表:
<!--ol有序列表type类型有A、a、I、i，默认为数字，start属性表示从哪个数字开始,reversed倒数-->
<ol start="5">
<li>html5</li>
<li>css3</li>
<li>javascript</li>
</ol>
ol li ul嵌套列表:
<!--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 dd列表-->
<dl>
<dt>标题</dt>
<dd>注释</dd>
<dt>标题</dt>
<dd>注释</dd>
</dl>
8.table表格
<!--cellpadding内容距单元格边框间距
cellspacing单元格间距
align对齐方式
colspan跨列
rowspan跨行-->
<table border="1" bgcolor="#f0f8ff" cellpadding="10" cellspacing="0" align="center" style="text-align: center">
<caption>标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
<tr>
<td colspan="2">单元格1</td>
<td>单元格1</td>
<td>单元格1</td>
</tr>
<tr>
<td>单元格2</td>
<td>单元格2</td>
<td rowspan="3">单元格2</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格3</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格4</td>
<td>单元格4</td>
</tr>
</table>
9.内联框架
iframe元素:
<!--iframe 元素会创建包含另外一个文档的内联框架（即行内框架-->
<iframe src="test.html" frameborder="0" width="400px" height="400px"></iframe>
10.实体
带有特殊字符的标签不能被展现出来，要通过html实体的方式表达，如：
<html>表示<html>
11.audio音频元素
<audio src="../../audio/1.mp3" controls="controls">您的浏览器暂不支持播放</audio>
<br/><br/><br/>
<!--方法2，自定义界面显示-->
<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/>
<!--方法2，自定义界面显示-->
<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存储1</title>
<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输入框中输入内容，点击save按钮，自动保存当前输入框中内容为本地存储，-->
<input type="text" id="inp">
<button type="button" id="btn">save</button>
</body>
</html>
14.2 sessionStorage数据存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web存储2</title>
<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">0</span>
<button type="button" id="btn1">add</button>
</body>
</html>
15.canvas图形绘制标签
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
<!DOCTYPE HTML>
<html>
<body>
<!--通过 canvas 元素来显示一个红色的矩形：-->
<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框架