介绍HTML5语义元素实例-Tutorial H5-php.cn

什么是语义元素?

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

无语义元素实例:

和 - 无需考虑内容.

语义元素实例:

, , and - 清楚的定义了它的内容.

浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

注意: Internet Explorer 8及更早版本不支持该元素. 但是文章底部提供了兼容的解决方法.

HTML5中新的语义元素

许多现有网站都包含以下HTML代码：

, 或者

, 来指明导航链接, 头部, 以及尾部.

HTML5提供了新的语义元素来明确一个Web页面的

HTML5

元素

标签定义独立的内容。.

元素使用实例:

Forum post

Blog post

News story

Comment

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Salin selepas log masuk

HTML5

元素

标签定义导航链接的部分。

元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在

元素中!

实例

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Salin selepas log masuk

HTML5

元素

标签定义页面主区域内容之外的内容（比如侧边栏）。

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>

Salin selepas log masuk

HTML5

元素

元素描述了文档的头部区域

元素注意用于定义内容的介绍展示区域.

在页面中你可以使用多个

元素.

以下实例定义了文章的头部:

实例

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Salin selepas log masuk

HTML5

Label berkaitan：

HTML5，语义元素，实例

sumber：php.cn

Artikel sebelumnya：HTML5表单元素实例讲解 Artikel seterusnya：HTML5Canvas的讲解以及实例教程

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang