在当今数字化时代，网页已成为信息传播和展示的重要窗口。静态网页作为网页开发的基石，以其结构清晰、加载快速和易于维护的特点，在展示型网站、个人博客和产品介绍页中广泛应用。本文将详细介绍如何使用HTML和CSS结合图片来制作一个基础的静态网页。
一、HTML：构建网页骨架
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="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>图片展示区</h2>
<img src="images/example.jpg" alt="示例图片" width="400">
<p>这是一张示例图片，展示了网页中的图片插入方法。</p>
</section>
</main>
<footer>
<p>© 2023 我的网页. 保留所有权利。</p>
</footer>
</body>
</html>在这个例子中，我们使用了<img>标签来插入图片，其中src属性指定图片路径，alt属性提供替代文本，这对可访问性和SEO至关重要。
二、CSS：美化网页外观
CSS（层叠样式表）负责网页的视觉呈现，包括布局、颜色、字体和图片样式等。通过CSS，我们可以让网页更加美观和专业。以下是一个简单的CSS示例：
`css
/ style.css /
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #35424a;
color: white;
padding: 20px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav a {
color: white;
text-decoration: none;
}
img {
border: 5px solid #ddd;
border-radius: 10px;
display: block;
margin: 20px auto;
max-width: 100%;
height: auto;
}
footer {
text-align: center;
padding: 10px;
background: #35424a;
color: white;
}`
CSS中的img选择器设置了图片的边框、圆角、居中和响应式尺寸（max-width: 100%确保图片在不同设备上自适应）。
三、图片处理与优化技巧
- 格式选择：根据图片内容选择合适的格式。JPEG适合照片，PNG适合透明背景，WebP是现代的高效格式。
- 尺寸调整：使用图像编辑工具（如Photoshop或在线工具）提前调整图片尺寸，避免在网页中缩放过大图片。
- 懒加载：对于长页面，可以使用
loading="lazy"属性延迟加载图片，提升初始加载速度。
四、实战：创建一个图片画廊
结合HTML和CSS，我们可以轻松创建一个简单的图片画廊：
<div class="gallery">
<img src="images/photo1.jpg" alt="风景1">
<img src="images/photo2.jpg" alt="风景2">
<img src="images/photo3.jpg" alt="风景3">
</div>`css
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.gallery img {
width: 300px;
height: 200px;
object-fit: cover;
transition: transform 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
}`
这个画廊使用Flexbox布局，图片悬停时有轻微放大效果，增强了交互性。
五、与进阶
通过HTML和CSS的结合，我们可以创建出既美观又功能完整的静态网页。掌握图片的插入、样式化和优化是提升网页质量的关键步骤。随着技能的提升，你可以进一步学习响应式设计（使用媒体查询）、CSS Grid布局以及JavaScript交互，以制作更加动态和复杂的网页项目。
记住，实践是最好的老师。尝试修改代码、添加新元素，并利用浏览器开发者工具调试，你将迅速成长为一名熟练的网页制作者。
