1.H5优势:替代插件,画布,本地存储,数据提取,位置服务,多媒体
2.增加了有语义的结构标签
<header>
<nav>
<article>
<section>
<aside>
<footer>
<hgroup>
<figure>
<figcaption>
3. H5的差异
A. 文档类型
B. 语言lang
C. 不区分大小写,可以混合使用
D. 允许了布尔值(虽然在4.01有的松散规则下也可以)
E. 可以用引号,单引号,不要引号。
F. 可以省略结束标签,例如<p>测试
G. 可以完全省略的标签(比如body,html,head等,但会降低可读性)
4. 新增及删除标签
A. 新增:结构标签,表单标签,媒体标签,其他功能标签(例如:mark标注,progress进度条<max value>,time发布日期、更新日期,ruby,rt,wbr,canvas,details,datalist,source等)
B. 删除:能被css替代(比如font),frame
<embed></embed>
H5表单标签,媒体标签,其他标签,语义结构标签
练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" value="1" name="a" />男
<inpUt tYpe="radio" value="2" name="a" checked/>女
<!--
//引号,双引号,单引号
//1.文档类型,2.语言,3.布尔值,4.属性的引号,5.可省略结束标签
//不允许写结束符的标签:area,basebr,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
//可以省略结束语的标签:li,dt,dd,p,rt,optgroup,option,colgroup,thread,tbody,tr,td,th
//可以完全省略的标签:html,head,body,colgroup,tbody
//新增的结构标签:section,article,aside,header,hgroup
//新增/删除标签
//a.结构标签(section,article,aside,header,hgroup,footer,nav,figure)
// 表单标签
// 媒体标签(video,audio,embed)
// 其他功能标签
//b.可以用CSS替代的标签,不再使用frame,只有个别浏览器支持的标签,其他不常用的标签
-->
<br />
<hr />
<form action="" method="">
电子邮箱:<input type="email" name="email" />
日历:<input type="date" name="time" />
范围range:<input type="range" name="range" min="0" max="100"/>
主页:<input type="url" name="url" />
number:<input type="number" name="number" />
搜索:<input type="search" name="search" />
</form>
<p>i want to show <mark>mark</mark></p>
<progress max="100" value="50"></progress>
<h3>time</h3>
更新日期:<time datetime="2013-10-11T09:00">9:00</time>
发布日期:<time datetime="2013-10-11T09:00" pubdate>9:00</time>
<h3>ruby</h3>
<ruby>
图片
<rt>一张用于显示图片的东西</rt>
<rp>一张用于显示图片的东西</rp>
</ruby>
<h3>wbr</h3>
<p>如果想要学好JAVA,必须勤加练习
<wbr></wbr>
H5新增了很多标签
</p>
<details>
<summary>我的同学</summary>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</details>
<!--
作者:464525021@qq.com
时间:2017-11-28
描述:wbr转换行,若宽度不够,就换行。ruby用处 pubdate,datalist像select
-->
<h3>keygen</h3>
<form action="" method="">
用户名:
<label><input type="text" name="username"/></label>
加密方式:
<keygen name="security" />
<input type="submit" value="提交" />
</form>
<h3>menu</h3>
<menu type="toolbar">
<li>
<input type="checkbox" />
red
</li>
<li>
<input type="checkbox" />
blue
</li>
</menu>
</body>
</html>
浏览器显示:
无法显示