html5标签
1.语义化标签（此类标签就样式说可以通过div+css代替，但是它主要是为了语义化而诞生）
<article>定义文章。
<aside>定义页面内容之外的内容。
<figure>定义媒介内容的分组，以及它们的标题。
<footer>定义 section 或 page 的页脚。
<header>定义 section 或 page 的页眉。
<mark>定义有记号的文本。
<nav>定义导航链接。
<section>定义文章板块。
<time>定义日期/时间。
关系是这样的：
<body>
<header> </header>
<nav></nav>
<main> <article> <section> <mark></mark> <time></time>
</section> </article> </main>
<footer> </footer>
</body>
body里面有header（头）、footer（尾）、main（主要内容）和nav（导航）
然后main里面有article（文章）
然后article里面分section（板块）
板块里面可以有mark和time
aside是不属于页面的内容，所以位于main之外
下面举一个例子：
<!DOCTYPE html>
<html>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
header,nav,article,footer,article,aside {
border: 1px solid grey;
padding: 10px;
}
</style>
<body>
<header>
header start:<br />
<base href="http://www.w3school.com.cn/"></base>
header end!
</header>
<nav>
nav start:<br /> <a href="index.asp">Home</a> <a
href="html5_meter.asp">Previous</a> <a href="html5_noscript.asp">Next</a><br />
nav end!
</nav>
<main>
<article>
article1:<br />
<section>
<time>9:00</time>
<br />
<mark>The People's Republic of China was born in 1949...</mark>
</section>
</article>
<article>
article2:<br />
<section>
<figure>
<p>黄浦江上的的卢浦大桥</p>
<p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>
<img src="i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
</section>
</article>
</main>
<aside>
<b><large>aside标签：定义页面内容之外的内容。</large>
</b><br /> aside start:<br /> The Epcot Center is a theme park in Disney
World, Florida. aside end!
</aside>
<footer>
footer start:
<p>Posted by: W3School</p>
<p>
Contact information: <a href="mailto:[email protected]">[email protected]</a>.
</p>
footer end!
</footer>
</body>
</html>
2.HTML <datalist> 标签
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
这就是前端组件dropdownlist，或者是可输入的combobox，很有用的组件！
3.HTML <details> 标签
<!DOCTYPE HTML> <html> <body> <details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details> </body> </html>
可以伸缩的div块，也是很有用的，html5的改进让人很兴奋！
4.HTML <dialog> 标签
<dialog open>这是打开的对话窗口</dialog>
<script>
function myFunction()
{
var x = document.createElement("DIALOG");
var t = document.createTextNode("This is an open dialog window");
x.setAttribute("open", "open");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
可以用如上代码控制打开一个dialog，而dialog内容可以是任意的标签
5.HTML <embed> 标签
<embed src="http://www.w3school.com.cn/i/helloworld.swf" />
<embed> 标签定义嵌入的内容，这里嵌入一个swf动画
6.HTML <mark> 标签
<p>Do not forget to buy <mark>milk</mark> today.</p>
相当于是加了文字背景
7.HTML <meter> 标签
<!DOCTYPE html> <html> <body> <p>显示度量值：</p> <meter value="41" min="0" max="100"></meter><br> <meter value="0.75">60%</meter> <p><b>注释：</b>Internet Explorer 不支持 meter 标签。</p> </body> </html>
8.HTML <nav> 标签
这个标签其实用div代替也是可以的，但是比div更具有语义化，表示导航
<!DOCTYPE HTML> <html> <body> <nav> <a href="/html/index.asp">Home</a> <a href="/html/html_intro.asp">Previous</a> <a href="/html/html_elements.asp">Next</a> </nav> </body> </html>
9.HTML <progress> 标签
<!DOCTYPE html> <html> <body> 下载进度： <progress value="22" max="100"> </progress> <progress> <p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 progress 标签。</p> </body> </html>
进度条，perfect！