目录导航

section标记用于表示HTML文档的通用部分。

1. HTML section标签示例

以下HTML代码片段显示了section标签的示例:

<section>
    <h1>HTML教程</h1>
    <p>section标签示例</p>
</section>

section标签中,还将了解以下标签:

  • nav
  • article
  • aside
  • header
  • footer
  • address

接下来,我们来看看上述所有标签。

2. HTML nav标签

nav标签用于从一个HTML页面导航到另一HTML页面。此标记在HTML页面上显示一组链接。

示例
以下HTML代码片段是一个nav标签的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML导航示例</h2>            
    <NAV>
    <H1>导航</H1>
    <UL>
        <LI><a href="index.html">首页</a></LI>
        <LI><a href="news.html">新闻</a></LI>
        <LI><a href="product.html">产品</a></LI>
    </UL>
    </NAV>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML nav标签

下面是HTML中的nav标签的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML导航示例</h2>            
    <section>
        <h1>HTML标签</h1>
        <p>下面是HTML标签</p>
    </section>
    <nav>
        <h1>导航</h1>
        <ul>
            <li><a href="/html/root-elements.html">HTML根标签</a></li>
            <li><a href="/html/metadata-elements.html">HTML Metadata标签</a></li>
            <li><a href="/html/section-elements.html">HTML Section标签</a></li>
        </ul>
    </nav>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML nav标签

如果单击“HTML根标签”超链接,则会将重定向到“HTML根标签”页面。

3. HTML article标签

article标记用于表示一个部分,其中包含有关HTML页面的信息,例如标题和创建日期。可以以各种格式在此标记中显示信息,例如新文章,博客文章或用户评论部分。

示例
以下HTML代码片段显示了使用article标签的示例:

<article>
<header>
    文章标题
</header>
    <p>文章内容</p>
</article>

4. HTML aside标签

aside标签用于创建一个部分,用于显示有关其他标签内容的信息,例如时间和日期,当前新闻和天气预报。 该标签还可以用于在文档中插入印刷效果,例如广告,注释,链接和提示的侧边栏。

示例
以下HTML代码片段显示了aside标签的示例:

<body>
<header>
    <h1>文章标题</h1>
    <p>文章内容</p>
</header>
<aside>
    一些与旁注相关的内容
</aside>
</body>

6. HTML header标签

header标记用于在HTML页面上提供介绍性内容。 header标记可以包含标题,段落,链接和其他内容。

示例
以下HTML代码片段显示header标签的示例:

<header>
<h1>主标题</h1>
<a href="http://www.xntutor.com/html/section-elements.html">HTML Section标签</a></dd>
<nav>
    <ul>
        <li><a href="/index.html">首页</a>
        <li><a href="/news.html">新闻</a>
        <li><a href="/article.html">文章</a>
    </ul>
</nav>
</header>

footer标记用于表示页脚,页脚包含各种类型的信息,例如与文档或文档部分有关的链接和版权数据。

示例
以下HTML代码片段显示了footer标记的示例:

<footer>
<ul>
    <li>首页</li>
    <li>新闻</li>
    <li>链接</li>
    <li>文章</li>
    <li>关于我们</li>
</ul>
</footer>

8. HTML address标签

address标记通常在HTML页面的页眉或页脚处定义,用于显示文档的联系信息,例如文档所有者的姓名,维护者,用于反馈的电子邮件地址,邮政地址和电话号码。address标记的内容在Web浏览器上以斜体显示。

示例
以下HTML代码片段显示了address标记的示例:

<address>
    <a href="codes.html">代码</a>
    <a href="tututor.html">教程</a>
    <a href="help.html">联系客服</a>
</address>

下面是HTML address标记的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML导航示例</h2>            
    <p>HTML address标签定义文档或文章的联系信息(作者/所有者)。</p>
    <address>
    Written by xntutor.com<br> 
    访问网址:<br>
    http://www.xntutor.com
</address>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML address标签

9. HTML section标签示例

以下是HTML section标签的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML导航示例</h2>            
    <aside style="float:right;width:200px;">
    <p>还可以通过 nav 到此标签来了解标题标签
    <a href="http://www.xntutor.com/html/heading-elements.html">HTML标题标签</a>
    </aside>
    <article>
        <header>
        <h1>文章标题</h1>
        <a href="http://www.xntutor.com/html/html-styles.html">HTML样式</a>
        </header>
        <p>这是section元素的使用</p>
    </article>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML section标签示例

现在,让我们来看以下另一个示例,以了解address标记的用法:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML section示例</h2>            
    <aside style="float:right;width:200px;">
        <p>还可以通过 nav 到此标签来了解标题标签
        <a href="http://www.xntutor.com/html/heading-elements.html">HTML标题标签</a>
    </aside>
    <article>
        <header>
        <h1>文章标题</h1>
        <a href="http://www.xntutor.com/html/html-styles.html">HTML样式</a>
        </header>
        <p>此内容在ARTICLE元素中定义。</p>
    </article>
    <address>
    <p>本文由:
    <a href="http://www.xntutor.com">xntutor.com</a>编写</p>
</address>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML section标签示例

现在,下面是HTML中的Section标签(headerfooter标签)的另一个示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML section示例</h2>            
<header>
    <h1>标题</h1>
    <a href="http://www.xntutor.com/html/section-elements.html">HTML Section标签</a></dd>
    <nav>
        <ul>
            <li><a href="articles.html">文章</a></li>
            <li><a href="news.html">新闻</a></li>
            <li><a href="discussion.html">讨论</a></li>
            <li><a href="download.html">下载</a></li>
        </ul>
    </nav>
</header>
HTML文档的正文内容
<footer>
    <nav>
        <p><a href="credits.html">信用</a> - 
        <a href="terms.html">服务条款</a> - 
        <a href="contact.html">联系我们</a></p>
    </nav>
    <p>Copyright xntutor @ 2019</p>
</footer>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下: