HTML5 语义元素

文章目录

  • HTML5 语义元素
    • 什么是语义元素?
    • 浏览器支持
    • HTML5中新的语义元素
    • HTML5 \
      元素
    • HTML5 \
      元素
    • HTML5 \
    • HTML5 \
    • HTML5 \
      元素
    • HTML5 \
      元素
    • HTML5 \
      和 \
      元素
    • 我们可以开始使用这些语义元素吗?
    • Internet Explorer 8 及更早IE版本中的问题


HTML5 语义元素

HTML5 语义元素_第1张图片

语义= 意义。

语义元素 = 元素的意义。

什么是语义元素?

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

无语义 元素实例:

- 无需考虑内容。

语义元素实例:

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

浏览器支持

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

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

HTML5中新的语义元素

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

,
, 或者
, 来指明导航链接, 头部, 以及尾部。

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

HTML5 语义元素_第2张图片

HTML5
元素

标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档: section 包含了一组内容及其标题。

实例

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

HTML5
元素

标签定义独立的内容。
元素使用实例:
  • Forum post
  • Blog post
  • News story
  • Comment

实例

<article>
  <h1>Internet Explorer 9h1>
  <p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。p>
article>

HTML5

你可能感兴趣的:(HTML,前端基础,html5,javascript,前端,语义元素)