本文介绍了HTML的基本结构、常用标签、列表、链接、图像和表格，以及CSS的基础结构、选择器、样式属性和布局技巧。通过实例演示如何结合HTML和CSS创建一个静态网页。
目录
HTML（HyperText Markup Language）
HTML（HyperText Markup Language）
HTML是一种标记语言，用于构建网页的结构。它由一系列的元素（标签）组成，每个元素都有特定的含义和作用。HTML不负责网页的外观和样式，而是定义了页面的结构和内容。以下是HTML的一些基本概念和常用标签：
1. HTML基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<!-- 页面内容在这里 -->
</body>
</html>
<!DOCTYPE html>: 声明文档类型，告诉浏览器使用HTML5标准解析文档。<html>: 整个HTML文档的根元素。<head>: 包含元信息（如字符集、视口设置）和引用外部资源。<body>: 包含页面的主要内容。
2. HTML常用标签：
2.1 文本标签：
<h1>to<h6>: 定义标题，<h1>是最大的标题，<h6>是最小的标题。<p>: 定义段落。<strong>和<em>: 分别表示加粗和斜体文本。
2.2 列表标签：
<ul>: 无序列表。<ol>: 有序列表。<li>: 列表项。
2.3 链接和图像：
<a href="URL">: 创建链接。<img src="image.jpg" alt="Description">: 插入图像。
2.4 表格：
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
3. HTML注释：
<!-- 这是一个注释 -->
- 注释对于文档的维护和团队协作非常重要。
CSS（Cascading Style Sheets）
CSS用于样式设计，它负责控制HTML元素的外观和布局。通过为HTML元素应用样式，我们可以实现页面的美观和一致性。以下是CSS的一些基本概念和常用属性：
1. CSS基本结构：
/* 这是一个CSS注释 */
selector {
property: value;
}
selector: 选择器，用于选中HTML元素。property: 样式属性，控制元素的外观。value: 样式属性的值，定义了元素外观的具体特征。
2. CSS选择器：
- 标签选择器：
p { color: red; }，选择所有<p>元素。 - 类选择器：
.class { font-size: 16px; }，选择所有带有class="class"属性的元素。 - ID 选择器：
#id { border: 1px solid black; }，选择具有id="id"属性的元素。
3. 常用样式属性：
3.1 文本样式：
color: 文本颜色。font-size: 字体大小。font-family: 字体系列。
3.2 盒模型：
width和height: 元素的宽度和高度。margin: 外边距，控制元素与周围元素的距离。padding: 内边距，控制元素内容与边框之间的距离。border: 边框样式，控制元素的边框。
3.3 定位和布局：
position: 元素的定位方式（relative, absolute, fixed）。display: 元素的显示方式（block, inline, flex）。float: 元素的浮动方式。
4. CSS盒模型：
- 盒模型由内容、内边距、边框和外边距组成，影响元素的布局和外观。
5. 层叠和继承：
- CSS样式按照一定的优先级层叠，同时样式可以从父元素继承。
- 通过选择器的特殊性、重要性和源代码顺序来确定优先级。
实际演练：
接下来，我们通过一个简单的例子来应用HTML和CSS，创建一个基本的静态网页。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>About Me</h2>
<p>This is a brief introduction about myself...</p>
</section>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
解释：
-
<!DOCTYPE html>: 声明文档类型，告诉浏览器使用HTML5标准解析文档。 -
<html lang="en">: HTML文档的根元素，指定语言为英语。 -
<head>: 包含文档的元信息，如字符集、视口设置和页面标题。 -
<meta charset="UTF-8">: 设置字符编码为UTF-8，确保正确解析文本内容。 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口，使网页在不同设备上有良好的显示。 -
<title>: 设置页面标题，将显示在浏览器标签页上。 -
<link rel="stylesheet" href="styles.css">: 引用外部样式表，将样式从HTML中分离出来，提高代码的可维护性。 -
<body>: 包含页面的主要内容。 -
<header>: 页面的头部部分，包含网站的欢迎标题。 -
<nav>: 导航栏，包含一个无序列表（<ul>）和三个列表项（<li>），每个列表项包含一个链接（<a>）。 -
<section>: 页面的主要内容区域，包含一个标题（<h2>）和一个段落（<p>）。 -
<footer>: 页面的底部部分，包含一个版权信息段落。
CSS部分（styles.css）：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
nav ul {
list-style: none;
padding: 0;
background-color: #444;
text-align: center;
}
nav li {
display: inline;
margin: 0 10px;
}
nav a {
text-decoration: none;
color: white;
}
section {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
解释：
body: 设置全局字体为Arial和sans-serif，同时将页面的外边距（margin）和内边距（padding）设为0。header: 设置头部的背景颜色为深灰色（#333），文字颜色为白色，居中显示，带有一定的内边距。nav ul: 设置导航栏的无序列表样式，将列表项去除默认样式，设置背景颜色为深灰色（#444），居中显示。nav li: 设置导航栏列表项为行内显示，同时在每个列表项之间留有一定的间距。nav a: 设置导航栏链接的样式，去除下划线，文字颜色为白色。section: 设置主要内容区域的最大宽度为800px，居中显示，带有一定的内边距和边框。footer: 设置底部的背景颜色为深灰色（#333），文字颜色为白色，居中显示，固定在页面底部，占据整个宽度。
这个简单的例子包含了一个带有导航、头部、内容和页脚的网页结构。通过 HTML 和 CSS 的基本知识，我们可以定义页面的外观和布局，以创建一个整洁的静态网页。
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
