HTML5的结构

最新推荐文章于 2024-05-20 11:13:43 发布

洛神赋在csdn

最新推荐文章于 2024-05-20 11:13:43 发布

阅读量1.2k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_23143555/article/details/78341525

版权

HTML5的结构
1.主体结构元素
2.非主体结构元素
3.HTML5的结构

HTML5相对于HTML4的最大改进在于文档的结构。
通过添加一些结构元素，在结构上，HTML5比HTML4更加清晰明确。

学习内容：
①新增的主体结构元素的定义，使用方法，使用场合。article, section, nav, aside.
②新增的非主体结构元素的定义，使用方法，使用场合。header, hgroup, footer, address.
③综合应用这些结构元素来编排页面以及整体布局。

/*=================================article元素===============================================*/
article元素：代表可以独立被外部引用的内容。article有标题，正文和注脚。
示例：

<article>
    <header>
        <h1>header</h1>
    </header>
    <p><b>苹果</b>，亚当的苹果，牛顿的苹果</p>
    <footer>
    <p><small>罪恶而甜蜜</small></p>
    </footer>
</article>

/*=================================section元素=============================================*/
定义：对页面上的内容进行分区。通常由内容和标题构成。
如果需要对一个容器直接定义，推荐使用div而非section。
区分article和section:以一篇文章为例，整篇文章就是article而文章中的一个段落就是section。
显然，从article和section的字面意思就可以看出两者的关系。但是这这是表面上的区分。

示例1：

<article>
    <h1>苹果</h1>
    <p><b>苹果</b>，植物类水果，多次花果。</p>
    <section>
        <h2>红富士</h2>
        <p>红富士不是绿富士</p>
    </section>
    <section>
        <h2>国光</h2>
        <p>万寿苹果</p>
    </section>
</article>

示例2：

<section>
    <header>
        <h1>苹果</h1>
        <p>发表日期：<time pubdate datetime = "2010-10-10T19:10-08:00">一小时前</time></p>
    </header>
    <p><b>苹果</b>，植物类水果，多次花果。</p>
    <section>
        <h2>评论</h2>
        <article>
            <header>
                <h3>发表者：绿林牛</h3>
                <p>
                    <time pubdate datetime = "2010-10-10T19:10-08:00">一小时前</time>
                </p>
            </header>
        </article>
        <article>
            <header>
                <h3>发表者：张玉</h3>
                <p>
                    <time pubdate datetime = "2010-10-10T19:10-08:00">一小时前</time>
                </p>
            </header>
        </article>
    </section>
</section>

疑惑：article中可以包含section，section中也可以包含article。如何区分？
section强调对内容进行分段或者分块，article强调独立性。具体来说，
一块内容相对独立完整应该使用article，如果你只想对一块内容可进行分段，应该使用section。
sectio元素的禁忌总结:
①不要将section元素用作设置样式的页面容器，那是div的工作。
②如果aside, nav, article元素更符合条件，不要使用section元素。
③不要为没有标题的内容区域使用section元素。

/*=================================nav元素===========================================*/
定义：是用作页面导航的链接组，导航的元素链接到其它页面或者当前页面的其它部分。

使用方法：

<body>
    <h1>技术资料</h1>
    <nav>
        <ul>
            <li><a href = "/">主页</a></li>
            <li><a href = "/events">开发文档</a></li>
        </ul>
    </nav>
    <article>
        <header>
            <h1>HTML5与CSS3的历史</h1>
            <nav>
                <ul>
                    <li><a href = "#HTML5">HTML5的历史</a></li>
                    <li><a href = "#CSS3">CSS3的历史</a></li>
                </ul>
            </nav>
        </header>
        <section id = "HTML5">
            <h1>HTML5的历史</h1>
            <p>讲述HTML5的历史的正文</p>
        </section>
        <section id = "CSS3">
            <h1>CSS3的历史</h1>
            <p>讲述CSS3的历史</p>
        </section>
        <footer>
            <p>
                <a href = "?edit">编辑</a>
                <a href = "?delete">删除</a>
                <a href = "?rename">重命名</a>
            </p>
        </footer>
    </article>
    <footer>
        <p><small>出版所有：绿林牛</small></p>
    </footer>
</body>

/*====================================aside元素============================================*/
定义：表示当前页面的附属信息部分。
用法：
①被包含在article内作为主要内容的附属信息。

  <!DOCTYPE html>
    <head>
    <title>元素示例</title>
    </head>
    <body>
        <header>
            <h1>F#入门</h1>
        </header>
        <article>
            <h1>第四节 词法闭包</h1>
            <p>lambda表达式可以创建词法闭包（文章正文）</p>
            <aside>
                <h1>名词解释</h1>
                <dl>
                    <dt>F#</dt>
                    <dd>F#是.Net2010引入的新型函数式编程语言</dd>
                </dl>
                <dl>
                    <dt>词法闭包</dt>
                    <dd>词法闭包是指将创建lambda表达式时的环境保存起来。</dd>
                </dl>
            </aside>
        </article>
    </body>

②在article外使用，作为页面的附属信息部分。

<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li>
                <a href = "http://blog.sina.com.cn/1683">erway</a>
            </li>
            <li>
                <a href = "http://blog.sina.com.cn/u/1345">太阳雨</a>
                10-22 23:48<br/>
                <a href = "http://blog.sina.com.cn/s/blog_6a9kv8f.html#comment">拜读老牛的文章</a>
            </li>
            <li>
                <a href = "http://blog.sina.com.cn/u/1259295385">新浪官博</a>
                08-12 08:50<br/>
                <a href = "#">恭喜，你已经开通了博客</a>
            </li>
        </ul>
    </nav>
</aside>

/*=======================================header元素=============================================*/
定义：一种引导和导航作用的元素。用做标题。可以包含表格，表单和logo图片。

用法：

<header>
        <hgroup>
        <h1>IT新技术</h1>
        <a href = "http://blog.sina.com.cn/itnewtech">http://blog.sina.com.cn/itnewtech</a>
        <a href = "#">[订阅]</a>
        <a href = "#">[手机订阅]</a>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li><a href = "#">博文目录</a></li>
                <li><a href = "#">图    片</a></li>
                <li><a href = "#">关 于 我</a></li>
            </ul>
        </nav>
     </header>

注意事项：一个header元素至少包含一个heading元素。

/*=======================================hgroup元素=============================================*/
定义：将主标题和子标题进行分组的元素。
用法：

  <article>
        <header>
            <hgroup>
                <h1>文章主标题</h1>
                <h2>文章子标题</h2>
            </hgroup>
        </header>
        <p>文章正文</p>
    </article>

/*=====================================footer元素===============================================*/
定义：区域的注脚信息。

<footer>
    <ul>
        <li>版本信息</li>
        <li>站点信息</li>
        <li>联系方式</li>
    </ul>
</footer>

/*=====================================address元素===============================================*/
定义：用来在文档中呈现联系信息。

<footer>
    <div>
        <address>
            <a title = "文章作者：绿林牛" href = "http://blog.sina.com.cn/itnewtech">绿林牛</a>
        </address>
        发表于<time datetime = "2017-10-25">2017/10/25</time>
    </div>
</footer>

/*=====================================HTML5大纲===============================================*/
显示编排：使用section创建文档结构的编排方式。

<body>
    <h1>网页级内容区块标题</h1>
    <p>网页级内容区块正文</p>
    <section>
        <h2>section级内容区块的标题</h2>
        <p>section级内容区块的内容</p>
    </section>
</body>

隐式编排：不使用section而使用h1-h6和hgroup编排文档结构。

<body>
<h1>网页级内容区块标题</h1>
<p>网页级内容区块正文</p>
<h2>section级内容区块的标题</h2>
<p>section级内容区块的内容</p>
</body>

推荐使用显示编排，因为结构更为清晰。

/*====================================页面编排示例=====================================*/

<!DOCTYPE>
<head>
    <title>页面编排示例</title>
    <meta charset = "UTF-8">
</head>
<body>
<header>
    <h1>网页标题</h1>
    <!-- 网站导航链接 -->
    <nav>
        <ul>
            <li><a href = "index.html">首页</a></li>
            <li><a href = "help.html">帮助</a></li>
        </ul>
    </nav>
</header>
<article>
    <hgroup>
        <h1>文章主标题</h1>
        <h2>文章子标题</h2>
    </hgroup>
    <p>文章正文</p>
    <section>
        <article>
            <h1>评论标题</h1>
            <p>评论正文</p>
        </article>
    </section>
<article
<footer>
    <small>版权所有：绿林牛</small>
</footer>
</body>