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

最新推荐文章于 2024-05-21 21:13:33 发布

散步在操场上

最新推荐文章于 2024-05-21 21:13:33 发布

阅读量580

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/u014086788/article/details/28596417

版权

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

摘要由CSDN通过智能技术生成

■ 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>