HTML5新增的非主体结构元素

最新推荐文章于 2025-02-26 15:14:33 发布

原创最新推荐文章于 2025-02-26 15:14:33 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

HTML5/CSS3 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了HTML5中新增的结构元素，包括header、footer、hgroup和address等元素的具体用法。通过实例展示了这些元素如何帮助开发者更好地组织网页内容，并提供了一致的布局结构。

1.header元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <header>
        <h1>IT最新技术</h1>
        <a href="http://www.baidu.com/">宇宙学院</a>
        <nav>
            <ul>
                <li><a href="#">学习</a></li>
                <li><a href="#">技术</a></li>
                <li><a href="#">宇宙</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

这里写图片描述

2.footer元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <footer>
        <ul>
            <li><a href="#">版权信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </footer>
    <article>
        <footer>这是一个文章的底部</footer>
    </article>
    <section>
        <footer>这是section下的footer</footer>
    </section>
</body>
</html>

这里写图片描述

3.hgroup元素

<article>
        <header>
            <hgroup>
                <h1>这是文章标题</h1>
                <h2>这是一个子标题</h2>
            </hgroup>
            <p>
                <time datetime="2015-10-10">2015-10-10</time>
            </p>
        </header>
        <div>
            这是内容
        </div>
        <footer>
            这是底部
        </footer>
    </article>

这里写图片描述

4.address元素和网页编排规则

<address>
        <a href="#">iwen</a>
        <a href="#">ime</a>
    </address>
    <footer>
        <div>
            <address>
                <a href="#">iwen</a>
                宇宙学院，嘉华大厦
            </address>
            <time datetime="2016-14-15">2016-14-15</time>
        </div>
    </footer>

这里写图片描述

<header>
        <h1>网页标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">帮助</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p>文章正文</p>
        <section>
            <div>
                <article>
                    <h1>评论标题</h1>
                    <p>评论正文</p>
                </article>
            </div>
        </section>
    </article>
    <footer>
        <small>版权所有：...</small>
    </footer>

这里写图片描述