Html 简明教程
HTML - Layout Elements
HTML 布局元素各式各样的 semantic 元素，用于定义网页的不同部分，使其在视觉上具有吸引力且对用户友好。
Visual Representation of a Layout Structure
下图说明了一个典型的网页布局是如何设计的。大多数网页都有标题部分、导航栏、索引部分、内容部分和页脚部分，可以使用 <header>、<nav>、<section>、<article> 和 <footer> 标签分别定义。
每个元素都有一个特定的含义和功能，并且可以通过属性和样式进行自定义。它们描述了它们包含的内容，而不仅仅是网页的外观。
Header Element of HTML Layout
-
<header>* 元素用于在 HTML 网页中添加页眉部分。它用作页面介绍和导航部分的容器。此标签内的所有内容都将位于网页顶部。为您的网页提供页眉部分有助于搜索引擎轻松理解您的内容并相应地对页面进行排名。
以下是一个简单的代码，演示如何在你的网页中使用页眉元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorialspoint</title>
</head>
<body>
<header>
<div>
<h1>Tutorialspoint</h1>
<h3>Simply easy learning!</h3>
</div>
</header>
</body>
</html>Nav Element of HTML Layout
HTML * <nav>* 元素表示网页中的页面的一个部分，它具有指向页面中其他页面或部分的超链接（就像菜单栏一样）。它通常包含在 <header> 元素或 <section> 元素中。以下代码在页眉标签中定义一个导航部分。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorialspoint</title>
</head>
<body>
<header>
<div>
<h1>Tutorialspoint</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>Section Element of HTML Layout
HTML * <section>* 定义了网页的主要部分，其中将显示所有重要内容。一个页面中可以有多个部分。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorialspoint</title>
</head>
<body>
<header>
<h1>Tutorialspoint</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>Footer Element of HTML Layout
-
<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 Tutorialspoint. 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>Article Element of HTML Layout
HTML * <article>* 标签指定独立的自包含内容，例如论坛帖子、杂志、任何博客帖子等等。当 HTML article 元素嵌套时，内部元素表示与外部元素相关的文章。例如，社交媒体帖子的评论可以是 article 元素，嵌套在表示社交媒体帖子的 article 中。它主要用于论坛帖子、杂志或报纸文章、博客条目、产品卡等。
<!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>Aside Element in HTML Layout
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 Tutorial
</a></li>
<li>
<a href="/css/index.htm">
CSS Tutorial
</a></li>
<li>
<a href="/python/index.htm">
Python Tutorial
</a></li>
</ul>
</aside>
</main>
</body>
</html>Create HTML Layout - Using layout Elements
语义元素有助于提高网页的可读性和可访问性，以及它的 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>Tutorialspoint</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 Tutorials point</h1>
<p>
Tutorialspoint.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>Tutorialspoint</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 © TUTORIALS POINT (INDIA)
PRIVATE LIMITED. All rights reserved.
</p>
</div>
</footer>
</body>
</html>