HTML5 布局元素

最新推荐文章于 2025-03-18 19:32:30 发布

苦涩2020

最新推荐文章于 2025-03-18 19:32:30 发布

阅读量542

点赞数

分类专栏： HTML5 前端文章标签： html5

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/106273205

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

HTML5

10 篇文章

订阅专栏

本文介绍了HTML5中的布局元素，包括div、header、footer、nav、aside、section、article、hgroup、address、figure和figcaption。这些元素为网页提供结构化和语义化的布局，使内容更易于理解和定位。例如，header和footer用于定义页面头部和底部，nav和aside用于创建导航和侧边栏，而section和article则帮助组织内容和文章。figure和figcaption则用于插入多媒体并添加标题。

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

元素类型

块级元素

独占一行，不和其他元素待在一起
可以设置宽高
用来对网页进行布局，承载内容

行内元素

不会独占一行，可以和其他元素待在一行
不可以设置宽高，宽高由里面的内容决定

行内块级元素

不会独占一行，可以和其他元素待在一行
可以设置宽高

通过设置元素display属性，元素类型可以相互转换

div标签

定义文档中的区块，可以把文档分割为独立的，不同的部分
可以嵌套任何元素，包括div标签
用来承载内容，相当于一个容易。没有其他任何样式

header和footer标签

header：定义文档的页眉，通常用于设置一个页面的标题部分，通常包含标题，LOGO，导航等；
footer：定义文档的页脚，通常用于设置一个页面的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
header和footer标签属于div标签的变种，功能和div标签一样
header和footer标签有很强的语义，使得网页结构更清晰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新的布局元素header/footer</title>
    <style type="text/css">
        body{height: 1000px}
        header{width: 100%; height:10%; background: green;}
        footer{width: 100%; height:10%; background: blue;}
        #div0{width: 100%; height:80%;}
        #div1{width: 20%; height: 100%; background: bisque; float: left;}
        #div2{width: 80%; height: 100%; background: beige; float: left;}
    </style>
</head>
<body>
    <header>我是头部</header>
    <div id = "div0">
        <div id="div1">我是侧边栏</div>
        <div id="div2">我是主体内容</div>
    </div>
    <footer>我是底部</footer>
</body>
</html>

nav和aside标签

nav：定义导航栏；通常用它给超链接分组用来定义导航栏，包括主导航栏，和侧边导航栏
aside：定义侧边栏；通常用于显示侧边栏或者补充的内容、目录、索引等
nav和aside标签属于div标签的变种，功能和div标签一样
nav和aside标签有很强的语义，使得网页结构更清晰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav标签</title>
    <style type="text/css">
        nav{width: 100%; height: 40px; background: bisque; text-align: center;}
        li{display: inline}
        a{text-decoration: none}
    </style>
</head>
<body>
    <nav>
        <li><a href="">首页</a></li>
        <li><a href="">网页2</a></li>
        <li><a href="">网页3</a></li>
        <li><a href="">网页4</a></li>
    </nav>
    
    <p>My family and I visited The Epcot center this summer.</p> 
	<aside> 
		<h4>Epcot Center</h4> 
		<p>The Epcot Center is a theme park in Disney World, Florida.</p>
	</aside>
</body>
</html>

section和article标签

section：对页面上的内容进行分块，通常由内容及其标题组成；典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分
article：定义独立的，完整的，可以独自被外部引用的内容；比如一篇文章，一篇博客，一个帖子，论坛的一段用户评论，一篇新闻消息等；一般对于完整的内容(有头部，主体，尾部)才使用article标签，如果只是一段内容的话，应该使用section标签
section和article标签属于div标签的变种，功能和div标签一样
section和article标签有很强的语义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article 标签</title>
</head>
<body>
    <article>
        <header>
            <h3>文章标题</h3>
            <h5>作者：JS Boom</h5>
        </header>
        <p>我是正文<br>
            *******************<br>
            *******************<br>
        </p>
            <article>
                <header>
                    <h4>网友A评论</h4>
                </header>
                <p>评论内容*******************</p>
                <footer>发布时间：2020.1.4</footer>
            </article>
        <article>
            <header>
                <h4>网友B评论</h4>
            </header>
            <p>评论内容*******************</p>
            <footer>发布时间：2020.1.4</footer>
        </article>
        <footer>
            <p>我的文章尾部：阅读：399 评论：90</p>
        </footer>
    </article>

	<section>
        <h1>section标签</h1>
        <p>section区块的主体部分</p>
    </section>
</body>
</html>

hgroup 标签

hgroup：通常用来给标题分组；一般放在header中，但是并非强制要求，也不是绝对的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hgroup和address</title>
</head>
<body>
    <hgroup>
        <h1>我是主标题</h1>
        <h2>我是副标题</h2>
    </hgroup>
</body>
</html>

address 标签

address：通常用来说明作者的联系信息，例如名字，email，电话，地址等；标签中的内容会以斜体显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hgroup和address</title>
</head>
<body>
    <address>
        作者：Chasing light
        邮箱：Chasinglight@123.com
    </address>
</body>
</html>

figure 标签

figure：是一个媒体标签，也是对其他媒体标签进行组合，比如：图像、图表等等

figcaption 标签

figcaption：用来给figure标签定义标题；其应该被置于 figure 标签的第一个或最后一个子元素的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure and figcaption</title>
</head>
<body>
    <h2>写真</h2>
    <p>这是一张写真</p>
    <figure>
        <img src="haha.jpg" alt="写真">
        <img src="heiha.jpg" alt="写真">
        <figcaption>收藏的写真</figcaption>
    </figure>
</body>
</html>