<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>html新特性</title>-->
<!--</head>-->
<!--<bod>-->
<!---->
<!--</bod>-->
<!--</html>-->
<!--在HTML5中，有许多新引入的元素，hgroup就是其中之一。假设我的网站名下面紧跟着一个子标题，-->
<!--我可以用<h1>和<h2>标签来分别定义。然而，这种定义没有说明这两者之间的关系。而且，-->
<!--h2标签的使用会带来更多问题，比如该页面上还有其他标题的时候。-->
<!--在HTML5中，我们可以用hgroup元素来将它们分组，这样就不会影响文件的大纲。-->
<hgroup>
<h1>我是大标题</h1>
<h2>我是小标题</h2>
</hgroup>
<!--将文字和图片内在联系起来。因此，HTML5引入了<figure>元素。当和<figcaption>结合起来后，我们可以语义化地将注释和相应的图片联系起来。-->
<figure>
<img src="img/662E.tmp.jpg">
<figcaption> <p> 学护理</p> </figcaption>
</figure>
<!--在HTML5中，<small>被用来定义小字。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，<small>可以正确地诠释这些信息。-->
<small>这是small来定义网站底布的版权状态，试试吧</small>
<!--HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”或聚焦，默认情况下，我们现在可以利用自动聚焦属性。-->
<p>你的姓名：</p><input type="text" autofocus>
<!--当使用<audio>元素时请记得包含两种音频格式。FireFox想要.ogg格式的文件，-->
<!--而Webkit浏览器则需要.mp3格式的。和往常一样，IE是不支持的，且Opera 10及以下版本只支持.wav格式。-->
<audio controls autoplay>
<source src="xx.ogg"/>
<source src="xx.mps"/>
<p>
你的版本不支持
请下载 <a href="xx.mp3">地址</a>
</p>
</audio>
<!--HTML5中不仅有<audio>元素，而且还有<video>。然而，和<audio>类似，HTML5中并没有指定视频解码器，-->
<!--它留给了浏览器来决定。虽然Safari和Internet Explorer9可以支持H.264格式的视频，-->
<!--Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，指定HTML5的视频时，你必须提供这两种格式。-->
<video controls autoplay>
<source src="xx.ogv">
<source src="xx.mp4">
<p>
你的版本不支持
请下载 <a href="xx.mp4">地址</a>
</p>
</video>
<!--在HTML4或XHTML中，你需要用一些正规表达式来验证特定的文本。而HTML5中新的pattern属性让我们能够在标签处直接插入一个正规表达式。-->
<form action="" method="post">
<label for="username">
Create a Username:
</label>
<input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
<button type="submit">Go</button>
</form>
<br>
<br>
<!--datalist-->
<form oninput="x,value=parseInt(a,value)+parseInt(b.value)">
<input id="myCar" list="cars">
<datalist id="cars">
<option value="BMW"></option>
<option value="Ford"></option>
<option value="Volvo"></option>
</datalist>
</form>
<!--mark-->
<h3>mask</h3>
<p>do not forget to buy <mark>milk</mark> today</p>
<h1>进度条 progress</h1>
<progress max="100" value="85"></progress>
<!--time-->
<h3>time</h3>
<p>
发布日期 <time datetime="2012-1-21">9:00</time>
更新日期
<time datetime="2012-2-12T09:00Z" pubdate>9:00</time>
</p>
<!--wbr-->
<h3>wbr</h3>
<p>h5新特性 换行 如你要学习阿贾克斯，那么先熟悉XML
<wbr></wbr>
http request 对象
</p>
<!--command 不支持-->
<menu>
<command onclick="alert('1')" lable="click" >
click me
</menu>
<!--details-->
<h3>details</h3>
<details open>
<summary>MacBook Pro Specification</summary>
<ul>
<li>dja</li>
<li>djb</li>
<li>djc</li>
<li>djd</li>
</ul>
</details>
</body>
</html>