四，细说 HTML5 之新增的非主题结构元素

r囧r小猫 2022-07-30 14:55 128阅读 0赞

> 这是一个HTML5系列，主要是零基础的宝宝们快速认识与学习HTML5.

#### **非主题结构元素：header** ####

定义和用法  
header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面的一个内容区块的标题，但是也可以包括其他内容，例如数据表格、搜索表单或相关的Logo 图片。

<header>
    <h1>Welcome to my homepage</h1>
    <p>My name is Donald Duck</p>
    </header>
    <p>The rest of my home page...</p>

相关实例

**代码分析：**

<header class="main-header" style="background-image: url(http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg)""> <div class="container">
            <div class="row">
                <div class="col-sm-12">
    
                    
                    <a class="branding" href="http://www.ghostchina.com" title="Ghost 开源博客平台"><img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png" alt="Ghost 开源博客平台"></a>
                    
                    <h2 class="text-hide">Ghost 是一个简洁、强大的写作平台。你只须专注于用文字表达你的想法就好，其余的事情就让 Ghost 来帮你处理吧。</h2>
    
                    <img src="http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg" alt="Ghost 博客系统" class="hide">
                </div>
            </div>
        </div>
    </header>
    
    
    
    <nav class="main-navigation">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar-header">
                        <span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars"></i>
                        </span>
                    </div>
                    <div class="collapse navbar-collapse" id="main-menu">
                        <ul class="menu">
        <li class="nav-current" role="presentation"><a href="/">首页</a></li>
        <li role="presentation"><a href="http://wenda.ghostchina.com">论坛</a></li>
        <li role="presentation"><a href="/ghost-cheat-sheet/">快捷手册</a></li>
        <li role="presentation"><a href="http://docs.ghostchina.com/zh/">中文文档</a></li>
        <li role="presentation"><a href="/download/">下载</a></li>
        <li role="presentation"><a href="/about/">关于</a></li>
    </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

**显示结果：**

![这里写图片描述][20160419115308976]

#### **非主题结构元素：footer** ####

footer 元素可以作为其上层父级内容区块是一个区块的脚注。  
footer 元素通常包括其相关区块的，如作者、相关阅读链接及版权等。  
文档中的页脚部分：

<footer>
      <p>Posted by: wenteryan</p>
      <p>Contact information: <a href="http://blog.csdn.net/wenteryan">wenteryan 的博客</a></p>
    </footer>

相关实例

**代码分析：**

<footer class="main-footer">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="widget">
                            <h4 class="title">最新文章</h4>
                            <div class="content recent-post">
                                    <div class="recent-single-post">
                                        <a href="/install-nodejs-of-latest-version-in-ubuntu-and-debian/" class="post-title">为 Ubuntu 和 Debian 安装最新版本的 Node.js</a>
                                        <div class="date">2016年3月23日</div>
                                    </div>
                                    <div class="recent-single-post">
                                        <a href="/ghost-0-7-4-released/" class="post-title">Ghost 0.7.4 正式发布</a>
                                        <div class="date">2015年12月29日</div>
                                    </div>
                                    <div class="recent-single-post">
                                        <a href="/ghost-0-7-0-released/" class="post-title">Ghost 0.7.0 正式发布</a>
                                        <div class="date">2015年9月7日</div>
                                    </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-sm-4">
                        <div class="widget">
                            <h4 class="title">标签云</h4>
                            <div class="content tag-cloud">
                                    <a href="/tag/about-ghost/">Ghost</a>
                                    <a href="/tag/release/">新版本发布</a>
                                    <a href="/tag/javascript/">JavaScript</a>
                                    <a href="/tag/promise/">Promise</a>
                                    <a href="/tag/zhuti/">主题</a>
                                    <a href="/tag/nodejs/">Node.js</a>
                                    <a href="/tag/mysql/">MySQL</a>
                                    <a href="/tag/nginx/">Nginx</a>
                                    <a href="/tag/aliyun-ecs/">阿里云服务器</a>
                                    <a href="/tag/ubuntu/">Ubuntu</a>
                                    <a href="/tag/ghost-in-depth/">深度玩转 Ghost</a>
                                    <a href="/tag/theme/">Theme</a>
                                    <a href="/tag/markdown/">Markdown</a>
                                    <a href="/tag/proxy/">反向代理</a>
                                    <a href="/tag/apache/">Apache</a>
    
                                <a href="/tag-cloud/">...</a>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-sm-4">
                        <div class="widget">
                            <h4 class="title">合作伙伴</h4>
                            <div class="content tag-cloud friend-links">
                                <a href="http://www.bootcss.com" title="Bootstrap中文网" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'bootcsscom'])" target="_blank">Bootstrap中文网</a>
                                <a href="http://www.bootcdn.cn" title="开放CDN服务" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'bootcdncn'])" target="_blank">开放CDN服务</a>
                                <a href="http://www.gruntjs.net" title="Grunt中文网" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'gruntjsnet'])" target="_blank">Grunt中文网</a>
                                <a href="http://www.gulpjs.com.cn/" title="Gulp中文网" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'gulpjscomcn'])" target="_blank">Gulp中文网</a>
                                <hr>
                                <a href="http://lodashjs.com/" title="Lodash中文文档" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'lodashjscom'])" target="_blank">Lodash中文文档</a>
                                <a href="http://www.jquery123.com/" title="jQuery中文文档" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'jquery123com'])" target="_blank">jQuery中文文档</a>
                                <hr>
                                <a href="http://www.aliyun.com/" title="阿里云" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'aliyun'])" target="_blank">阿里云</a>
                                <hr>
                                <a href="https://www.upyun.com/" title="又拍云" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'upyun'])" target="_blank">又拍云</a>
                                <a href="http://www.ucloud.cn/" title="UCloud" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'ucloud'])" target="_blank">UCloud</a>
                                <a href="http://www.qiniu.com/" title="七牛云存储" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'qiniu'])" target="_blank">七牛云存储</a>
                            </div>
                    </div></div>
                </div>
            </div>
        </footer>
    
        <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <span>Copyright © <a href="http://www.ghostchina.com/">Ghost中文网</a></span> | 
                        <span><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></span> | 
                        <span>京公网安备11010802014853</span>
                    </div>
                </div>
            </div>
        </div>

**显示结果：**

![这里写图片描述][20160419120127581]

#### **非主题结构元素：address** ####

定义和用法  
`<address>` 标签定义文档或文章的作者/拥有者的联系信息。  
如果 `<address>` 元素位于 `<body>` 元素内，则它表示文档联系信息。  
如果 `<address>` 元素位于 `<article>` 元素内，则它表示文章的联系信息。  
`<address>` 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

提示：  
`<address>` 标签不应该用于描述通讯地址，除非它是联系信息的一部分。  
`<address>` 元素通常连同其他信息被包含在 `<footer>` 元素中。

**代码分析：**

<address>
    wenteryan ：  <a href="http://blog.csdn.net/wenteryan">wenteryan 的博客</a><br> 
    一，细说 HTML5 之 HTML5 基础讲解<br>
    二，细说 HTML5 之 HTML5 基础讲解 2<br>
    三，细说 HTML5 之 新增的主题结构元素<br>
    </address>

**显示结果：**

![这里写图片描述][20160419120755256]

#### **网页排编示例** ####

网页排编是对新增的结构元素的一个实例。针对零基础的一个整体布局。

**代码分析：**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>网页排编示例</title>
    </head>
    <body>
      <header>
        <h1>网页标题</h1>
        <nav>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">帮助</a></li>
          </ul>
        </nav>
      </header>
      <article>
        <hgroup>
          <h1>文章主标题</h1>
          <h1>文章子标题</h1>
        </hgroup>
        <p>文章正文</p>
        <section>
          <div>
            <article>
              <h1>评论标题</h1>
              <p>评论正文</p>
            </article>
          </div>
        </section>
      </article>
      <footer>
        <small>版权所有。。。</small>
      </footer>
    </body>
    </html>

**显示结果：**

![这里写图片描述][20160419121634523]

[20160419115308976]: /images/20220724/092ab7ec09294991aca101336bd2457d.png
[20160419120127581]: /images/20220724/b3379da6f17346f4a9699e7ab2d89ccd.png
[20160419120755256]: /images/20220724/ca59bb6d63854e5fbfd04641a3c008d4.png
[20160419121634523]: /images/20220724/359e8193788d4df49a5ee9fc72baac17.png