HTML节点元素-Sections elements

演讲者：whqet

内容提纲

  1. body元素
  2. header元素
  3. footer元素
  4. nav元素
  5. aside元素
  6. article元素
  7. section元素
  8. address元素
  9. h1~h6元素

元素分类 w3school

类型标签
根元素
The root element		 html
文档元数据
Document metadata		 head, title, base, meta, link, style
节点 Sections body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address
组合内容
Grouping content		 div, p, main, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption
文本级
Text-level semantics		 span, a, em, strong, q, cite, mark, i, b, u, s, sup, sub, big, small, var, code, samp, kbd, data, time, ruby, rb, rp, rt, rtc, bdi, bdo, dfn, br, wbr
编辑 Edits ins, del
嵌入内容
Embedded content		 img, iframe, embed, object, param, vedio, audio, surce, track, map, area
表格 Tabular data table, caption, tr, th, td, thead, tbody, tfoot, col, colgroup
表单 Forms form, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter, fieldset, legend
脚本 Scripting script, noscript, template, canvas

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三个标签。 流内容，但是不能使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

h1~h6元素

类型取值
分类 流内容-Flow content
标题内容-Heading content
可感知内容-Palpable content
元素上下文 需要短句内容的地方
内容模型 短句内容-Phrasing content
属性 全局属性

{:.flexbox.vleft}

h1~h6元素示例

<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

一号标题

二号标题

三号标题

四号标题

五号标题

六号标题

前端开发

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