)
网页制作是前端学习的第一步，也是入门必掌握的基础技能。本文从零开始带大家制作静态网页，并依次讲解：添加文字、css样式美化、div标签布局、插入图片、响应式布局的内容，全程附带完整可运行代码，步骤清晰，通俗易懂，适合前端零基础小白学习~
一、基础 HTML 结构搭建 + 添加文字内容
对于前端网页来说，HTML 是搭建页面的基础骨架，我们先从最核心的 HTML 基础结构入手，完成页面文字内容的添加。
首先新建一个.html后缀的文件，写入基础 HTML 骨架，同时添加标题、段落等文字内容，完整代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我是一个网页表头名</title> </head> <body> <h1>网页主标题，也是最大的标题</h1> <h2>副标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>网页最小的标题</h6> </body> </html>核心知识点
h1~h6：标题标签，数字越小字号越大，用于划分页面标题层级 (h1是最大的标题，h6是最小的标题）- <p>：段落标签，用于编写网页段落文本，独占一行
- <span>：行内文本标签，不会自动换行，适合修饰小段文字
运行这段代码，就能在浏览器中看到纯文字的基础页面结构，效果如下，这是网页最核心的内容基础。
二、添加 CSS 样式美化页面
只有 HTML 的页面样式过于简陋，我们需要通过CSS来美化页面，实现颜色、字体、布局、间距等样式设置。CSS 有两种常用引入方式，新手建议先掌握内部样式，后期再用外部样式实现代码分离。
CSS 是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
1. 内部 CSS 样式（直接写在 HTML 文件中）
在<head>标签中添加<style>标签，所有 CSS 样式代码写入其中，对页面元素进行美化：
<style> body { background-color: #f5f5f5; font-size: 16px; color: #333; / 清除页面默认边距 / margin: 0; padding: 0; font-family: "微软雅黑", sans-serif; } /*主标题样式*/ h1{ color: #0066cc; text-align: center; margin-top: 30px; } /*副标题样式*/ h2{ color: steelblue; text-align: center; } /* 其他标题样式 */ h3,h4,h5,h6{ color:lightblue; text-align: center; } /*段落样式*/ p{ color:darkblue; line-height: 1.8; padding: 0 20px; text-indent: 2em; } </style>2. 外部 CSS 样式
项目开发中更推荐使用外部 CSS，方便代码维护和复用：
- 在同级目录下新建
style.css文件，<style>`标签里的所有代码剪切进去 - 在 HTML 的<head>`标签中，引入外部 CSS 文件：
<link rel="stylesheet" href="style.css">
3.css选择器
想要精准给页面元素加样式，就必须学会使用 CSS 选择器，常用五大选择器如下：
1、id 选择器
- 标签使用：
<div id="box"></div> - 特点：页面内唯一不重复
- CSS 写法：
css
#box { color: red; }2、class 类选择器
- 标签使用：
<div class="con"></div> - 特点：可以重复复用，一个标签可加多个类名
- CSS 写法：
css
.con { font-size: 16px; }3、标签选择器
直接以 HTML 标签名作为选择器，统一修改所有同类标签样式：
css
p { line-height: 2; }4、派生（后代）选择器
只选中父元素里面的子标签：
css
.main p { color: #666; }5、群组选择器
多个选择器共用同一套样式，逗号分隔：
css
h1, h2, p { margin: 10px 0; }4 .CSS 样式优先级
权重从高到低：行内 style 样式 > id 选择器 > class 类选择器 > 标签选择器
5. 常用文字排版样式
css
/* 文字颜色 */ color: #333; /* 文字大小 */ font-size: 16px; /* 文字加粗 */ font-weight: bold; /* 斜体 */ font-style: italic; /* 文字装饰：下划线/删除线/取消线条 */ text-decoration: none; /* 水平居中对齐 */ text-align: center; /* 首行缩进两个字符 */ text-indent: 2em; /* 行高 */ line-height: 1.8;核心知识点
通过 CSS 可以设置背景色、字体颜色、文字对齐、行高、内外边距、字体等样式，让原本单调的页面变得美观整洁。
三、使用 Div 标签划分布局
<div>是网页中最常用的块级布局容器，没有默认样式，主要用来对页面进行分区，比如头部、主体、底部、侧边栏等，让页面结构更清晰。而CSS 盒子模型是 div 布局的核心，包含背景、边框、内边距、外边距、宽高五大核心要素。
1. HTML 结构分区
<!-- 页面头部区域 --> <div class="header">网页头部导航栏</div> <!-- 页面主体内容区域 --> <div class="main"> <!-- 左侧内容区 --> <div class="left">左侧内容板块</div> <!-- 右侧内容区 --> <div class="right">右侧内容板块</div> </div> <!-- 页面底部区域 --> <div class="footer">网页底部版权信息 © 2025</div>2. 盒子模型核心属性详解
（1）宽高相关属性
表格
| 属性 | 描述 |
|---|---|
width | 设置标签宽度 |
height | 设置标签高度 |
min-width/min-height | 最小宽度 / 高度 |
max-width/max-height | 最大宽度 / 高度 |
补充：用百分比设置宽高时，是以父标签为参照的。标签居中技巧：
margin: 0 auto;（左右外边距设为 auto）
（2）边框属性
/* 边框基础设置 */ border-style: solid; /* 可选：none、solid、dashed、dotted、double */ border-width: 3px; /* 边框粗细 */ border-color: #333; /* 边框颜色 */ border-radius: 8px; /* 圆角 */ /* 单独设置某一边边框 */ border-top: 2px dashed #666; /* 上边框 */ border-right: 2px dotted #666; /* 右边框 */ border-bottom: 2px solid #666; /* 下边框 */ border-left: 2px double #666; /* 左边框 */（3）内边距（padding）
设置标签内容与边框之间的距离，不会影响其他元素的位置：
css
/* 简写方式：上 右 下 左（顺时针） */ padding: 10px 20px 15px 5px; /* 上下10px，左右20px */ padding: 10px 20px; /* 上下左右都为20px */ padding: 20px; /* 分方向设置 */ padding-top: 10px; /* 顶部内边距 */ padding-right: 15px; /* 右侧内边距 */ padding-bottom: 10px; /* 底部内边距 */ padding-left: 15px; /* 左侧内边距 */（4）外边距（margin）
设置标签与其他元素之间的距离，常用于元素之间的间距控制：
css
/* 简写方式：上 右 下 左（顺时针） */ margin: 30px auto; /* 上下30px，左右auto实现水平居中 */ margin: 10px 20px 30px 40px; margin: 15px 20px; /* 上下15px，左右20px */ margin: 0; /* 上下左右都为0 */ /* 分方向设置 */ margin-top: 20px; /* 顶部外边距 */ margin-right: auto; /* 右侧外边距 */ margin-bottom: 20px; /* 底部外边距 */ margin-left: auto; /* 左侧外边距 */3. 其他常用辅助属性
（1）背景与行高
background-color: #f0f8ff; /* 设置标签背景颜色 */ line-height: 1.8; /* 设置标签内文字的行高 */（2）溢出处理（overflow）
当标签内容超出标签大小后的显示效果：
/* 隐藏超出标签的内容 */ overflow: hidden; /* 超出部分添加滚动条 */ overflow: scroll;（3）盒子阴影（box-shadow）
为标签添加阴影效果，增强立体感：
- 语法：
box-shadow: 水平偏移值 垂直偏移值 模糊值 外延值 阴影颜色; - 示例：
<div style="box-shadow: 0px 0px 4px 4px #EDEDED;">带阴影的div</div>4. 配套 CSS 布局样式
在style.css中添加布局样式，实现分区排版：
/* 头部样式 */ .header { height: 80px; background: #222; color: #fff; line-height: 80px; text-align: center; font-size: 20px; } /* 主体区域样式 */ .main { /* 固定宽度 */ width: 1200px; /* 上下边距20px，左右自动居中 */ margin: 20px auto; /* 弹性布局，让左右板块并排显示 */ display: flex; /* 左右板块之间的间距 */ gap: 20px; } /* 左侧区域 */ .left { width: 800px; height: 400px; background: #fff; padding: 20px; box-sizing: border-box; /* 超出内容隐藏 */ overflow: hidden; /* 添加盒子阴影 */ box-shadow: 0 0 5px rgba(0,0,0,0.1); } /* 右侧区域 */ .right { width: 380px; height: 400px; background: #fff; padding: 20px; box-sizing: border-box; /* 添加盒子阴影 */ box-shadow: 0 0 5px rgba(0,0,0,0.1); } /* 底部样式 */ .footer { height: 60px; background: #222; color: #fff; text-align: center; line-height: 60px; font-size: 14px; }此时页面已经实现了清晰的分区布局，不再是杂乱的文字排列，整体结构更规整。
四、在网页中添加图片<img> 标签引入图片，让页面内容更丰富，具体用法如下：
图片是网页中传递信息、提升美观度的重要元素，这里我们分「img标签图片」和「CSS 背景图片」两种方式来讲解。
1. img 标签（直接插入图片）
img标签是 HTML 中专门用来插入图片的标签，核心属性如下：
基础语法
<img src="图片路径" width="" height="" title="鼠标悬停提示文字" />核心属性说明
表格
| 属性 | 作用 | 补充说明 |
|---|---|---|
src | 设置图片文件的路径 | 可以是本地路径，也可以是网络地址 |
width | 设置图片显示宽度 | 可以不用写单位px，默认单位就是px |
height | 设置图片显示高度 | 只设置其中一个时，另一个会自动按比例缩放 |
title | 设置鼠标悬停时的提示信息 | 鼠标移到图片上会显示文字 |
示例代码
<!-- 本地图片示例 --> <img src="images/demo.jpg" width="300" height="200" title="示例图片" alt="示例风景图"> <!-- 网络图片示例 --> <img src="https://picsum.photos/300/200" width="300" title="随机图片" alt="随机风景图">用 CSS 给图片设置样式
也可以通过 CSS 来控制图片的外观，更方便批量修改：
img { /* 宽度自适应父容器 */ width: 100%; /* 高度自适应，保持图片比例 */ height: auto; /* 图片圆角 */ border-radius: 8px; /* 图片阴影 */ box-shadow: 0 0 5px rgba(0,0,0,0.1); /* 鼠标悬停变成手型 */ cursor: pointer; /* 图片透明度（0-1之间，0为完全透明） */ opacity: 0.9; } img:hover { opacity: 1; }2. CSS 背景图片（background-image）
背景图片是给标签添加背景的常用方式，适合给 div、按钮等元素设置背景，常用属性如下：
核心属性详解
/* 1. 设置背景图片路径 */ background-image: url("图片路径"); /* 2. 设置背景图片是否平铺显示 */ background-repeat: repeat; /* 默认值，水平+垂直都平铺 */ background-repeat: repeat-x; /* 只水平平铺 */ background-repeat: repeat-y; /* 只垂直平铺 */ background-repeat: no-repeat; /* 不平铺，只显示一次 */ /* 3. 设置背景图片的显示位置 */ background-position: center; /* 居中显示 */ background-position: left top; /* 左上 */ background-position: right bottom; /* 右下 */ background-position: 20px 50px; /* 距离左边20px，距离上边50px */ /* 4. 设置背景图片大小 */ background-size: cover; /* 铺满整个容器，图片可能被裁剪 */ background-size: contain; /* 完整显示图片，容器可能留白 */ background-size: 100px 50px; /* 固定宽高 */ background-size: auto 100%; /* 宽度自动，高度铺满容器 */完整示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我是一个网页表头名</title> </head> <style> body { background-color: #f5f5f5; font-size: 16px; color: #333; / 清除页面默认边距 / margin: 0; padding: 0; font-family: "微软雅黑", sans-serif; } /*主标题样式*/ h1{ color: #0066cc; text-align: center; margin-top: 30px; } /*副标题样式*/ h2{ color: steelblue; text-align: center; } /* 其他标题样式 */ h3,h4,h5,h6{ color:lightblue; text-align: center; } /*段落样式*/ p{ color:darkblue; line-height: 1.8; padding: 0 20px; text-indent: 2em; } .bg-demo { width: 500px; height: 300px; /* 背景图 */ background-image: url("img/1.jpg"); /* 不平铺 */ background-repeat: no-repeat; /* 居中显示 */ background-position: center; /* 铺满容器 */ background-size: cover; /* 文字居中 */ display: flex; align-items: center; justify-content: center; color: black; font-size: 20px; } </style> <body> <h1>网页主标题，也是最大的标题</h1> <h2>副标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>网页最小的标题</h6> <p>这是使用HTML段落标签编写的页面内容，用来展示网页正文信息，是网页中最常用的</p><!-- 行内文字标签，不会独占一行<span>这是行内文本内容 --> <div class="bg-demo"> 这是带背景图的div </div> </body> </html>3. 注意事项与常见问题
- 路径问题：
- 本地图片路径要写对，建议用相对路径，比如
images/demo.jpg（和 html 文件同级的 images 文件夹里的图片） - 网络图片要确保能正常访问，避免使用防盗链图片
- 本地图片路径要写对，建议用相对路径，比如
- 宽高设置：
- 只给图片设置宽度，高度会自动按比例缩放，避免图片变形
- 背景图设置
background-size: cover时，图片会自动拉伸铺满容器，适合做 banner 背景
- 图片优化：
- 网页图片建议压缩后再使用，避免文件过大影响加载速度
- 小图标可以用
background-image，大图展示用img标签
五、响应式布局适配（适配手机 / 平板）
响应式布局的核心，是让网页在不同屏幕尺寸（手机 / 平板 / 电脑）下都能正常显示，而display样式和弹性布局（Flex）是实现响应式的两大核心工具。
1. 核心：display 样式控制元素显示方式
display属性决定了网页元素的布局方式，是实现响应式的基础：
| 属性值 | 作用 | 适用场景 |
|---|---|---|
display: block; | 将元素转为块级元素，独占一行，宽高默认撑满父容器 | 用于 div、p、h1-h6 等，适合做页面分区 |
display: inline; | 将元素转为行内元素，不独占一行，宽高由内容决定 | 用于 span、a 标签等，不适合设置宽高 |
display: inline-block; | 行内块元素，不独占一行，同时支持设置宽高 | 用于图片、按钮等，适合横向排列且需要设置尺寸的元素 |
display: none; | 隐藏元素，元素不占页面空间 | 响应式中常用，比如手机端隐藏部分内容 |
display: flex; | 将元素作为弹性伸缩盒容器，开启弹性布局 | 现代网页布局的首选，适合实现灵活的响应式排列 |
示例代码
/* 块级元素 */ .block-demo { display: block; width: 200px; height: 100px; background: #eee; } /* 行内块元素 */ .inline-block-demo { display: inline-block; width: 100px; height: 50px; background: #ddd; margin: 5px; } /* 隐藏元素 */ @media screen and (max-width: 768px) { .desktop-only { display: none; /* 手机端隐藏电脑端显示的内容 */ } }2. 弹性布局（Flex）：响应式布局神器
弹性布局（Flex）以盒子的方式对页面进行排列，是实现响应式的核心方案，下面是常用属性详解：
（1）开启弹性布局
/* 给父容器设置，开启弹性布局 */ .container { display: flex; }（2）排列方向：flex-direction
设置弹性盒子中子元素的排列方向：
.container { /* 默认值：水平从左到右排列 */ flex-direction: row; /* 水平从右到左排列 */ flex-direction: row-reverse; /* 垂直从上到下排列 */ flex-direction: column; /* 垂直从下到上排列 */ flex-direction: column-reverse; }（3）水平对齐方式：justify-content
设置子元素在主轴上的对齐方式：
.container { /* 左对齐 */ justify-content: flex-start; /* 右对齐 */ justify-content: flex-end; /* 居中对齐 */ justify-content: center; /* 元素间均匀分布，两端无空隙 */ justify-content: space-between; /* 元素间均匀分布，两端也有空隙 */ justify-content: space-around; }（4）垂直对齐方式：align-items
设置子元素在交叉轴上的对齐方式：
.container { /* 顶部对齐 */ align-items: flex-start; /* 底部对齐 */ align-items: flex-end; /* 居中对齐 */ align-items: center; /* 拉伸对齐（默认值，子元素高度撑满父容器） */ align-items: stretch; }（5）多行对齐方式：align-content
当子元素换行显示时，设置多行元素在交叉轴上的对齐方式：
.container { align-content: flex-start | flex-end | center | space-around | space-between; }（6）换行控制：flex-wrap
设置子元素是否换行显示：
.container { /* 不换行（默认值，子元素会被压缩） */ flex-wrap: nowrap; /* 自动换行，超出父容器宽度时自动换行 */ flex-wrap: wrap; }（7）子元素占比：flex-grow
设置子元素在剩余空间中的分配比例：
.item1 { flex-grow: 1; /* 占1份 */ } .item2 { flex-grow: 2; /* 占2份 */ } /* 父容器剩余空间会按1:2的比例分配给两个子元素 */3. 完整响应式弹性布局示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式弹性布局示例</title> <style> .container { display: flex; flex-wrap: wrap; /* 自动换行 */ justify-content: space-between; width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; } .item { width: 30%; height: 150px; background: #fff; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 0 0 5px rgba(0,0,0,0.1); } /* 平板适配：一行显示2个 */ @media screen and (max-width: 1200px) { .container { width: 95%; } .item { width: 48%; } } /* 手机适配：一行显示1个 */ @media screen and (max-width: 768px) { .item { width: 100%; } } </style> </head> <body> <div class="container"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目4</div> </div> </body> </html>六、完整效果总结
通过以上步骤，我们从零完成了：
- HTML 基础结构搭建与文字内容添加
- CSS 样式美化页面
- Div 标签实现页面布局分区
- 网页图片引入与样式优化
- 响应式布局适配多设备
全程都是前端入门核心知识点，代码简单易懂，新手直接复制修改就能运行，非常适合夯实前端基础～
结尾
本篇是前端网页制作入门实操内容，后续会持续更新前端进阶知识，欢迎点赞、收藏、关注，一起学习前端开发！
