HTML节点元素、分组元素

演讲者：前端开发课程组

内容提纲

  1. 语义化标签
  2. 节点元素
  3. 分组元素

语义化标签

HTML5之前 缺点：不利于SEO搜索引擎对页面内容的抓取；文档结构定义不明确

HTML5之后 优点：文档结构清晰；对搜索引擎友好

参考资料

body元素

类型取值
分类 Sectioning root
元素上下文 html元素里的第二个元素
内容模型 流内容Flow content
属性 全局属性
onafterprint、onhashchange、onmessage、
ononline、onpageshow、onstorage等行为属性

body元素示例 案例

<!DOCTYPE HTML>
<html>
<head>
    <title>Online or offline?</title>
    <script>
        function update(online) {
            document.getElementById('status').textContent = online ? 'Online' : 'Offline';
        }
    </script>
</head>
<body ononline="update(true)"
      onoffline="update(false)"
      onload="update(navigator.onLine)">
<p>You are: <span id="status">(Unknown)</span></p>
</body>
</html>

header元素

类型取值
分类 流内容-Flow content
可感知内容-Palpable content
元素上下文 需要流内容的地方
内容模型 流内容，但是不能使header、footer和main三个标签。
属性 全局属性

header元素示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <header>
        <h1>Little Green Guys With Guns</h1>
        <nav>
            <ul>
                <li><a href="/games">Games</a>
                <li><a href="/forum">Forum</a>
                <li><a href="/download">Download</a>
            </ul>
        </nav>
        <h2>Important News</h2>
        <p>To play today's games you will need to update your client.</p>
        <h2>Games</h2>
    </header>
    <p>You have three active games:</p>
</body>
</html>

footer元素

类型取值
分类 流内容-Flow content
可感知内容-Palpable content
元素上下文 需要流内容的地方
内容模型 流内容，但是不能使header、footer和main三个标签。
属性 全局属性

footer元素示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <header>some content</header>
    <main>some content</main>
    <footer>
        <nav>
            <p>
                <a href="/credits.html">Credits</a> —
                <a href="/tos.html">Terms of Service</a> —
                <a href="/index.html">Blog Index</a>
            </p>
        </nav>
        <p>Copyright © 2009 Gordon Freeman</p>
    </footer>
</body>
</html>

nav元素

类型取值
分类 流内容-Flow content
节点内容-Sectioning content
可感知内容-Palpable content
元素上下文 需要流内容的地方
内容模型 流内容，但是不能使用main元素
属性 全局属性

nav元素示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <header>some content</header>
    <main>some content</main>
    <footer>
        <nav>
            <p>
                <a href="/credits.html">Credits</a> —
                <a href="/tos.html">Terms of Service</a> —
                <a href="/index.html">Blog Index</a>
            </p>
        </nav>
        <p>Copyright © 2009 Gordon Freeman</p>
    </footer>
</body>
</html>

aside元素

类型取值
分类 流内容-Flow content
节点内容-Sectioning content
可感知内容-Palpable content
元素上下文 需要流内容的地方
内容模型 流内容，但是不能使用main元素
属性 全局属性

aside元素示例

<header>
    <h1>My wonderful blog</h1>
    <p>My tagline</p>
</header>
<aside>
    <nav>
        <h1>My blogroll</h1>
        <ul><li><a href="http://blog.example.com/">Example Blog</a></ul>
    </nav>
    <nav>other nav</nav>
</aside>
<aside>other aside</aside>
<article>
    <h1>My last post</h1>
    <p>This is my last post.</p>
    <footer><p><a href="/last-post" rel=bookmark>Permalink</a></footer>
</article>
<article>other article</article>
<footer>
    <nav>
        <a href="/archives">Archives</a> —
        <a href="/about">About me</a> —
        <a href="/copyright">Copyright</a>
    </nav>
</footer>

article元素

类型取值
分类 流内容-Flow content
节点内容-Sectioning content
可感知内容-Palpable content
元素上下文 需要流内容的地方
内容模型 流内容
属性 全局属性

article元素示例

<article itemscope itemtype="http://schema.org/BlogPosting">
    <header>
        <h1 itemprop="headline">The Very First Rule of Life</h1>
        <p>
            <time itemprop="datePublished" datetime="2009-10-09">3 days ago</time>
        </p>
        <link itemprop="url" href="?comments=0">
    </header>
    <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
    <p>...</p>
    <footer>
        <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
    </footer>
</article>

section元素

类型取值
分类 流内容-Flow content
节点内容-Sectioning content
可感知内容-Palpable content
元素上下文 需要流内容的地方
内容模型 流内容
属性 全局属性

section元素示例

<article class="book">
    <header>
        <h2>My Book</h2>
        <p>A sample with not much content</p>
        <p><small>Published by Dummy Publicorp Ltd.</small></p>
    </header>
    <section class="chapter">
        <h3>My First Chapter</h3>
        <p>This is the first of my chapters. It doesn't say much.</p>
        <p>But it has two paragraphs!</p>
    </section>
    <section class="chapter">
        <h3>It Continutes: The Second Chapter</h3>
        <p>Bla dee bla, dee bla dee bla. Boom.</p>
    </section>
    <section class="appendix">
        <h3>Appendix A: Overview of Examples</h3>
        <p>These are demonstrations.</p>
    </section>
    <footer>footer content</footer>
</article>

address元素

类型取值
分类 流内容-Flow content
可感知内容-Palpable content
元素上下文 需要流内容的地方
内容模型 流内容，但是不能使header、footer、section、address等节点元素
属性 全局属性

address元素示例

<address>
 <a href="../People/Raggett/">Dave Raggett</a>,
 <a href="../People/Arnaud/">Arnaud Le Hors</a>,
 contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>
Dave Raggett, Arnaud Le Hors, contact persons for the W3C HTML Activity

分组元素

  • figure元素用于定义独立的流内容（图像、图表、照片、代码等）
  • figcaption用于为figure元素组添加标题，可以放在figure元素的第一个或者最后一个元素的位置
  • 案例

分组元素

  • hgroup元素：用于将多个标题（主标题、副标题或者子标题）组成一个标题组，通常放在header元素中。
  • 案例

前端开发

旨为前端开发工程师的前端开发基础课程