HTML5—新语义元素header、nav、section、article、aside、footer......
 

HTML5 语义元素

语义= 意义

语义元素 = 有意义的元素

什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

新语义元素:

HTML5提供了新的语义元素来明确一个Web页面的不同部分。

<header>:描述了文档的头部区域,于定义内容的介绍展示区域
<nav>:定义导航链接的部分。
<section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,section通常 包含了一组内容及其标题。
<article>:定义独立的内容。
<aside>:定义页面主区域内容之外的内容(比如侧边栏)。
<figure>:标签规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>:定义 <figure> 元素的标题。
<footer>:述了文档的底部区域,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 语义元素</title>

</head>
<body>

<!-- wrapper -->
<div class="wrapper">
<nav>
  <h4>导航</h4>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
</nav>
<aside>
  <h4>侧边栏</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

  <section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

 <div class="content-wrapper">
<article>

  <h2>标签定义独立的内容</h2>
  <xmp><article></xmp>
  <ul>
    <li>
 Forum post
    </li>
       <li>
Blog post
    </li>
       <li>
 Forum post
    </li>
       <li>

News story
    </li>
<li>Commen</li>
  </ul>

</article>
  </div>




<footer>
  <h4>底部栏</h4>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>
</div>
</body>
</html>

文章作者: 以谁为师
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源!

  目录