html5权威指南学习笔记(1) 之新增的主体结构元素

最新推荐文章于 2024-07-08 09:27:09 发布

散步在操场上

最新推荐文章于 2024-07-08 09:27:09 发布

阅读量631

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/u014086788/article/details/28596417

html5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML5中新增的section、article、aside、header、footer、nav和figure等元素，阐述了它们的用途、应用场景及使用注意事项，帮助读者理解和掌握这些元素在构建网页结构中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

■ section元素

section元素表示页面中的一个内容区块，比如章节、页眉、页脚、或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。

一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。

通常不推荐为那些没有标题的内容使用section元素。section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，请不要与“有着自己的完整的、独立的内容”的article元素混淆。

关于section元素的使用禁忌总结如下：

1) 不要将section元素用作设置样式的页面容器，那是div元素的工作。

2) 如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。

3) 不要为没有标题的内容区块使用section元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>aside元素事例</title>
</head>


<body>
<article>
    <header>
        <h1>苹果</h1>
        <p>发表日期：<time pubdate="2014-06-05">2014年6月5日</time></p>
    </header>
    <p>苹果，植物类水果，多次...(苹果文章正文)</p>
    <section>
        <h2>红富士</h2>
        <p>红富士是从普通富士的芽（枝）变中选育出的着色系富的统称。富士苹果是日本农林水产省果树试验场盛冈分场于1939年以国光为母本，元帅为父本进行杂交，历经20余年，选育出的苹果优良品种，具有晚熟、质优、味美、耐贮等优点，于1962年正式命名，是世界上最著名的晚熟苹果品种。富士果实虽有风味好、晚熟、耐贮等优点，但也存在着果实着色差的缺点。为此，日本各地又从富士当中选出了许多着色好的富士芽变，统称为红富士。</p>
        </section>
        <section>
        <h2>国光</h2>
        <p>国光苹果适应性强、座果率高、丰产、晚熟耐贮、无采前落果、更新易、寿命长等优点， 深受果农欢迎， 曾一度是日本、朝鲜、中国等亚洲国家的主栽品种</p>
    </section>
</article>
</body>
</html>

Firefox运行结果如下：

■ article元素

article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的的一篇文章或报纸中的一篇文章。

除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

现在，让我们以博客为例来看一段关于article元素的代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>aside元素事例</title>
</head>


<body>
<article>
    <header>
        <h1>苹果</h1>
        <p>发表日期：<time pubdate="2014-06-05">2014年6月5日</time></p>
    </header>
    <p>苹果，植物类水果，多次...(苹果文章正文)</p>
    <footer>
    <p>著作权归***公司所有</p>
    </footer>
</article>
</body>
</html>

Firefox运行结果如下：

■ aside元素

aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。

aside元素主要有以下两种使用方法。

1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释，等等。

文章内部的aside事例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>aside元素事例</title>
</head>

<body>
<header>F#入门</header>
<article>
<h1>第四节 词法闭包</h1>
<p>lambda表达式可以创建词闭包...(文章正文)</p>
<aside>
	<!-- 因为这个aside元素被放置在一个article元素内部，
    所以分析器将这个aside元素的内容理解成是和article元素的内容相关的。 -->
    <h1>名词解释</h1>
    <dl>
    	<dt>F#</dt>
        <dd>F#为.Net2010中引入的新型函数编程语言</dd>
    </dl>
    <dl>
    	<dt>词法闭包</dt>
        <dd>词法闭包是指，将创建lambda表达式时的环境保存起来...(详细解释)</dd>
    </dl>
</aside>
</article>
</body>

Firefox运行结果如下：

■ header元素

header元素表示页面中的一个内容区块或整个页面的标题。

■ hgroup元素

hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合。

■ footer元素

footer元素表示整个页面中或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。

■ nav元素

nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。

接着让我们来看一个nav元素的使用示例，在这个事例中，一个页面由几部分组成，每个部分都带有链接，但只将最主要的链接放入了nav元素中。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>aside元素事例</title>
</head>

<body>
<h1>技术资料</h1>
<nav>
	<ul>
    	<li><a href="/">主页</a></li>
        <li><a href="/doc">开发文档</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>版权所有：****</p>
</footer>
</body>
</html>

Firefox运行结果如下：

■ figure元素

figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

html5中的代码示例：

<figure>
<span style="white-space:pre">	</span><figcaption>PRC</figcaption>
<span style="white-space:pre">	</span><p>The People's Republic of China was born in 1949...</p>
</figure>