HTML结构元素

码农六六

于 2022-07-07 20:38:01 发布

阅读量1k

点赞数

分类专栏： html+css3 文章标签：大数据

本文链接：https://blog.csdn.net/six6de6/article/details/125666556

版权

html+css3 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

html5结构性元素简单介绍

一、结构性元素主要负责web上下文结构的定义

1、<section>：区段类似于段落；在 web 页面应用中，该元素也可以用于区域的章节描述。

2、<header>：页面主体上的头部， header 元素往往在一对 body 元素中。

3、<footer>：页面的底部（页脚），通常会标出网站的相关信息。

4、<nav>：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

5、<article>：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

6、<asider>：用来定义当前页面或文章的附属信息部分

section元素：

section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section元素表示文档或应用的一个部分。所谓“部分”，这里是指按照主题分组的内容区域，通常会带有标题。

<!DOCTYPE html>

<html>

<body>

<section>

<h1>php.cn</h1>

<p>

PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！

</p>

</section>

</body>

</html>

header元素：

header元素时一种具有引导和导航作用的结构元素

header元素通常用来放置整个页面或页面的一个内容区块的标题也可以包含网站logo图片，搜索表单，或者其它内容

header元素并非是head元素。在HTML网页中，并不限制header元素的一个数，一个网页中可以使用多个header元素，也可以为每一个内容块添加header元素

<header>
    <h1>你好，世界</h1>
    <h3>你好世界</h3>
</header>

footer元素：

HTML Footer 元素 (<footer>)用来表示整个文档或与其相应的某个区域内容的页脚。一个footer通常包含的内容有：作者信息，版权信息或相关连接

使用注意事项：

<footer>元素中的作者信息信息应该放到一个<address>元素里。
<footer>元素自己不能成为一个段落内容，因此它不应在文档目录里体现出来。

<footer>
  版权信息，或文章的作者信息。
</footer>

nav元素

nav可以在多个场合使用比如：

1.传统导航条

2.侧边栏导航

3.页内导航

4.翻页导航

article元素：

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。

<header>
<article>
    <header>
        <h2>第一章</h2>
    </header>
    <section>
        <header>
            <h2>第1节</h2>
        </header>
    </section>
    <section>
        <header>
            <h2>第2节</h2>
        </header>
    </section>
</article>
<article>
    <header>
        <h2>第二章</h2>
    </header>
</article>
</header>

aside元素：

aside元素用来定义当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用，侧边框，广告，导航条。

<article>
    <header>
        <h1>标题</h1>
    </header>
    <section>文章主要内容</section>
</article>
<aside>右侧菜单</aside>

注意

1、article与section的区别：

1、section和article可以互相嵌套，它们没有上下级关系，section可以包含article，article也可以包含section；
2、article是文章，文章就是一段完整的独立的内容；
3、section就是块，某种意义上可以理解为div，但是比div的意思更加明确一点。

2、section与div的区别：

1、section和div都可以对内容进行分块，但是section是进行有意义的分块，无意义的分块应该由div来做，例如用作设置样式的页面容器。
2、section内部必须有标题，标题也代表了section的意义所在。

3、使用<section>标签需注意：

1、不要将<section>当成<div>乱用。
2、如果<article>、<aside>或<nav>更符合状况，不要使用<section>。
3、尽量不要为没有标题的内容区块使用<section>