1. 首页
  2. HTML 菜鸟教程
  3. HTML - 布局元素

HTML - 布局元素

HTML 布局元素是各种语义元素，用于定义网页的不同部分，使其具有视觉吸引力和用户友好性。

布局结构的可视化表示

下图说明了典型的网页布局是如何设计的。大多数网页都有标题部分、导航栏、索引部分、内容部分和页脚部分，可以分别使用 <header>、<nav>、<section>、<article> 和 <footer> 标签进行定义。

布局结构的可视化表示

每个元素都有特定的含义和功能，可以使用属性和样式进行自定义。它们描述的是它们包含的内容，而不仅仅是网页的外观。

HTML 布局的 <Header>标签元素

<header> 标签用于在 HTML 网页中添加标题部分。它用作页面的介绍和导航部分的容器。此标签内的所有内容都将位于网页顶部。为您的网页提供标题部分有助于搜索引擎轻松理解您的内容并相应地对页面进行排名。

下面是一个简单的代码，演示如何在网页中使用 header 元素。

<!DOCTYPE html>
<html lang="en">

<head>
			<title>qikepu.com</title>
</head>

<body>
	 <header>
	 <div>
			<h1>qikepu</h1>
			<h3>Simply easy learning!</h3>
	 </div>
	 </header>
</body>

</html>

 

HTML 布局的 <Nav>标签元素

HTML <nav> 标签表示网页中页面的一部分，其中它具有指向页面中其他页面或部分的超链接（就像菜单栏一样）。它通常包含在<header>标签或<section>标签中。以下代码在<header>标签中定义导航部分。

<!DOCTYPE html>
<html lang="en">

<head>
			<title>qikepu</title>
</head>

<body>
	 <header>
	 <div>
			<h1>qikepu</h1>
			<h3>Simply easy learning!</h3>
	 </div>
	 <div>
			<nav>
				 <ul>
						<li>
							 <a href="#">
									Home
							 </a>
						</li>
						<li>
							 <a href="#">
									HTML
							 </a>
						</li>
						<li>
							 <a href="#">
									CSS
							 </a>
						</li>
						<li>
							 <a href="#">
									Python
							 </a></li>
						<li>
							 <a href="#">
									JavaScript
							 </a>
						</li>
				 </ul>
			</nav>
	 </div>
</header>
</body>

</html>

HTML 布局的 <Section>标签元素

HTML <section>定义了网页的主要部分，其中将显示所有重要内容。一个页面中可以有多个部分。

<!DOCTYPE html>
<html lang="en">

<head>
			<title>qikepu</title>
</head>

<body>
			<header>
				 <h1>qikepu</h1>
				 <h3>Simply easy learning!</h3>
				 <nav>navigation bar</nav>
			</header>
			<section>Section 1</section>
			<section>Section 2</section>
			<section>Section 2</section>
</body>

</html>

HTML 布局的<footer>标签元素

<footer> 标签定义网页的页脚部分。本节包含版权信息、社交媒体链接和其他重要细节。它始终位于网页的底部。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>Footer Example</title>
	 <style>
			body {
				 display: flex;
				 flex-direction: column;
				 min-height: 100vh;
				 margin: 0;
			}
			.content {
				 flex: 1;
			}
			footer {
				 background-color: #333;
				 color: #fff;
				 text-align: center;
				 padding: 20px 0;
			}
			footer .social-media a {
				 color: #fff;
				 margin: 0 10px;
				 text-decoration: none;
			}
			footer .social-media a:hover {
				 color: #ddd;
			}
	 </style>
</head>

<body>
	 <div class="content">
			<h2>Footer Element of HTML Layout</h2>
			<p>
				 The footer tag defines the footer section of 
				 the webpage. This section contains copyright 
				 information, social media links, and other 
				 important details. It will be always at the 
				 bottom of the webpage.
			</p>
	 </div>
	 <footer>
			<p>© 
				 2024 qikepu. All rights reserved.
			</p>
			<div class="social-media">
				 <a href="#">Facebook</a>
				 <a href="#">Twitter</a>
				 <a href="#">Instagram</a>
				 <a href="#">LinkedIn</a>
			</div>
	 </footer>
</body>

</html>

HTML 布局的 <article>标签元素

HTML <article> 标签指定一个独立的自包含内容，例如论坛帖子、杂志、任何博客文章等。当 HTML 文章元素嵌套时，内部元素表示与外部元素相关的文章。例如，对社交媒体帖子的评论可以是嵌套在表示社交媒体帖子的文章中的文章元素。它主要用于论坛帖子、杂志或报纸文章、博客条目、产品卡等

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>Article Example</title>
	 <style>
			article {
				 background: #fff;
				 margin: 20px 0;
				 padding: 20px;
			}
	 </style>
</head>

<body>
	 <header>
			<h1>My Blog</h1>
	 </header>

	 <main>
			<article>
				 <h2>Understanding the HTML Article Tag</h2>
				 <p>
						Posted on <time datetime="2024-06-20">
						June 20, 2024</time> by Farhan
				 </p>
				 <p>
						The article tag is commonly used for content 
						such as blog posts, news articles, and user 
						comments.
				 </p>
				 <p>
						Lorem ipsum dolor sit amet, consectetuer a
						cing elit. Aenean commodo ligula eget dolor. 
						Aenean massa. Cum sociis natoque penatib
						magnis dis parturient montes, nascet
						mus. Donec quam felis, ultric
			</article>
	 </main>
	 
</body>
</html>

HTML 布局的 <Aside>标签元素

HTML <aside> 标签指定与主要内容直接或间接相关的内容部分（如侧边栏）。如果从网页中删除旁白内容，则主要内容不会受到影响，因为旁白内容是页面的单独可选组件。此标签通常用于广告。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>Aside Tag Example</title>
	 <style>
			body {
				 display: flex;
				 flex-direction: column;
				 background-color: #f4f4f4;
			}

			main {
				 display: flex;
				 flex: 1;
				 padding: 20px;
			}
			article {
				 flex: 3;
				 background: #fff;
				 padding: 20px;
				 margin-right: 20px;
			}
			aside {
				 flex: 1;
				 background: #fff;
				 padding: 20px;
				 border-radius: 8px;
			}

	 </style>
</head>

<body>
	 <header>
			<h1>My Blog</h1>
	 </header>
	 <main>
			<article>
				 <h3>Articles...</h3>
			</article>

			<aside>
				 <h2>Related Articles</h2>
				 <ul>
						<li>
							 <a href="/html/index.htm">
									HTML qikepu
							 </a></li>
						<li>
							 <a href="/css/index.htm">
									CSS qikepu
							 </a></li>
						<li>
							 <a href="/python/index.htm">
									Python Tutorial
							 </a></li>
				 </ul>
			</aside>
	 </main>
</body>

</html>

语义元素创建 HTML 布局例子

语义元素有助于提高网页的可读性和可访问性，以及其 SEO（搜索引擎优化）性能。在下面的 HTML 代码中，我们将借助上述语义元素创建网页的简单布局。

<!DOCTYPE html>
<html>

<head>
	 <title>Layout structure of HTML</title>
	 <style>
			* {
				 box-sizing: border-box;
			}
			header {
				 font-size: 25px;
				 color: whitesmoke;
				 padding: 1px;
				 text-align: center;
				 background-color: lightslategray;
			}
			nav {
				 float: left;
				 width: 20%;
				 height: 350px;
				 background: lightgray;
				 padding: 20px;
			}
			nav ul {
				 padding: 1px;
			}
			article {
				 float: left;
				 padding: 20px;
				 width: 80%;
				 background-color: lightyellow;
				 height: 350px;
			}
			footer {
				 background-color: lightslategray;
				 padding: 10px;
				 text-align: center;
				 color: white;
				 padding-top: 20px;
				 padding-bottom: 10px;
			}
			footer a {
				 margin: 10px;
			}
			footer p {
				 margin-top: 30px;
			}
	 </style>
</head>

<body>
	 <!--header segment-->
	 <header>
			<div>
				 <p>qikepu</p>
				 <p>Simply easy learning!</p>
			</div>
	 </header>
	 <section>
			<!--Menu Navigation segment-->
			<nav>
				 <ul>
						<li>
							 <a href="#">Home</a>
						</li>
						<li>
							 <a href="#">Jobs</a>
						</li>
						<li>
							 <a href="#">Library</a>
						</li>
						<li>
							 <a href="#">Articles</a>
						</li>
						<li>
							 <a href="#">Certification</a>
						</li>
				 </ul>
			</nav>
			<!--Content segment-->
			<article>
				 <h1>Welcome to qikepu</h1>
				 <p> 
						qikepu.com is a dedicated page 
						to provide quality online education in 
						domains of Computer Science and other
						Technology, Programming Languages, and 
						other Engineering subjects. 
				 </p>
			</article>
	 </section>
	 <!--Footer segment-->
	 <footer>
			<h2>qikepu</h2>
			<div>
				 <a href="#"> About us </a>
				 <a href="#"> Refund policy </a>
				 <a href="#"> Terms of use </a>
				 <a href="#"> Privacy policy </a>
				 <a href="#"> FAQ's </a>
				 <a href="#"> Affiliates </a>
				 <a href="#"> Contact </a>
			</div>
			<div>
				 <p>
						Copyrights © qikepu.com 
						PRIVATE LIMITED. All rights reserved.
				 </p>
			</div>
	 </footer>
</body>

</html>

要了解有关 HTML 布局的更多信息，请查看随附的链接文章。

<< HTML - 布局 HTML - CSS布局 >>