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>
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 属性适用于 &lt;form&gt;,以及下面的 &lt;input&gt; 类型: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="[email protected]"> <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实体的方式表达,如:
&lt;html&gt;表示<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存储

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框架

分享给朋友:
您可能感兴趣的文章:
随机阅读: