html4与html5的区别及html5的一些新特性
区别
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>
aside标签通常表示当前页面或文章的附属信息，侧边栏，广告弹出框等，一个独立的部分
<!--aside标签通常表示当前页面或文章的附属信息，侧边栏，广告弹出框等，一个独立的部分--> <aside> <nav> <h3>评论</h3> <ul> <li>好好学习</li> <li>天天向上</li> </ul> </nav> </aside>
section内有标题有内容，强调分块或分段
<!--section内有标题有内容，强调分块或分段，artical元素强调独立性--> <section> <h1>标题</h1> <p>内容</p> </section>
nav主要用来做页面导航
<nav> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </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>
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>
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表单的标签脱离form标签，添加css样式更方便--> <form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea>
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>
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>
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>
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>
autofocus属性:
<form> <!--文本框，选择框，按钮空间加上autofocus属性，当页面打开时，该控件自动获得焦点--> <input type="text"> <input type="text" autofocus> </form>
required属性:
<form> <!--required属性，如果输入框内为空，就不能提交，会提示必须输入字段--> <input type="text" required="required"> <button type="submit">提交</button> </form>
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>
下拉菜单:
<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>
创建节点:
<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>
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>
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框架
