HTML 布局的概念
HTML（HyperText Markup Language）创建网页的标准标记语言，通过元素的相互配合，共同构建出层次分明的网页布局。
一个结构简约清晰的网页布局，主要由头部、导航栏、内容区域以及页脚这几个部分构成 。
HTML 布局的结构
一个基本的 HTML 文档结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 网页内容将放在这里 -->
</body>
</html>- <!DOCTYPE html>：声明文档类型为HTML5。
- <html>：HTML文档的根元素。
- <head>：包含网页的元信息，比如标题、字符编码等。
- <title>：定义网页的标题，显示在浏览器的标签页上。
- <body>：网页的主体内容，所有可见的内容都放在这里。
创建网页布局
我们创建一个简单的布局，包含内容：头部（Header）、导航栏（Navigation）、内容区域（Main Content）、页脚（Footer）。
1. 头部（Header）
头部通常包含网站的标题或Logo。
<header>
<h1>欢迎来到我的网站</h1>
</header>2. 导航栏（Navigation）
导航栏包含链接到网站其他页面的菜单。
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>3. 内容区域（Main Content）
内容区域是网页的主要部分，可以包含文本、图片、视频等。
<main>
<section>
<h2>关于我们</h2>
<p>这里是关于我们的一些信息。</p>
</section>
<section>
<h2>我们的服务</h2>
<p>我们提供各种服务，包括网页设计、开发和维护。</p>
</section>
</main>4. 页脚（Footer）
页脚通常包含版权信息、联系方式等。
<footer>
<p>© 2023 我的公司. 保留所有权利。</p>
</footer>完整的 HTML 布局
将以上部分组合起来，完整的 HTML 布局，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<section>
<h2>关于我们</h2>
<p>这里是关于我们的一些信息。</p>
</section>
<section>
<h2>我们的服务</h2>
<p>我们提供各种服务，包括网页设计、开发和维护。</p>
</section>
</main>
<footer>
<p>© 2023 我的公司. 保留所有权利。</p>
</footer>
</body>
</html>添加 CSS 样式
为了让网页看起来更美观，我们可以添加一些基本的 CSS 样式。
创建一个名为 styles.css 的文件，并在 HTML 文件中通过<link>标签引入。
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
183
阅读
0
评论