1、语义元素 -- 有意义的元素
如:<form>、<table>、<img> -- 元素名称就清楚的定义了内容
无语义元素:<div>、<span>
2、HTML5 新语义元素
(1) <section>
定义文档中的节(章节、页眉、页脚等)
用法:包含在section标签里面的内容,它们的默认格式会和原始的有些区别。
<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
(2) <article>
定义独立的内容
<article> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </article>
(3) <nav>
定义导航链接的部分
用法:下面的html、JS、jQuery会自动排成一排,顶部导航的那种格式
<nav> <a href="/html/">html</a> <a href="/js/">JS</a> <a href="/jquery/">jQuery</a> </nav>
(4) <aside>
定义页面主区域内容之外的内容
aside的内容与主区域内容相关。如主区域是关于一个景点的介绍,aside的内容是该景点的联系方式。
使用:
<p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
(5) <header>
描述文档的头部区域
主要用于定义内容的介绍展示区域
不会影响其包含的内容的默认样式
可使用多个<header>
实例:
<article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p> </article>
(6) <footer>
描述文档的底部区域,页脚
通常包含文档的作者、著作权、链接、联系信息等
可多次使用<footer>
实例:
<footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>
(7) <figure> <figcaption>
<figure>:规定独立的流内容(图像、图表、照片、代码等等)。内容应该与主内容相关,但如果被删除,不对文档流产生影响。
<figcaption> 标签:定义 <figure> 元素的标题。被置于 "figure" 元素的 第一个/最后一个 子元素的位置。
使用:
<figure> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>