静态网页创建教程：步骤详解，一看就会！

发布日期：2025-04-26 19:22浏览次数：

今天心血来潮，想搞个简单的静态网页，记录一下我的小日常。说干就干，整个过程还挺有意思的，现在就来跟大伙儿分享一下。

准备工作

我得先准备点工具。家里有台旧电脑，Windows 系统的，正好拿来用。然后，我下载一个叫 Sublime Text 的编辑器，听说这玩意儿写代码挺方便的。再来就是 Chrome 浏览器，平时我就用它上网，调试网页也方便。我还从手机里翻出一张风景照，打算放到网页上。

我在 D 盘建个新的文件夹，取名叫 "myWebsite"，以后跟网页相关的东西都放这里头。然后，我打开 Sublime Text，新建一个文件，保存到 "myWebsite" 文件夹里，文件名就叫 "*"。这就是我网页的主文件。

我开始往 "*" 文件里头写东西。先写个基本的 HTML 结构，就像搭房子的骨架一样：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的静态网页</title>
</head>
<body>
<!-- 这里是网页的内容 -->
</body>
</html>

这些代码，大家一看就明白，<title>标签里写的是网页的标题，会显示在浏览器的标签页上。<body>标签里头就是网页的主要内容。

有骨架，接下来就是填充内容。我先在 <body> 标签里头写一段话：

<body>
<p>这是我的第一个静态网页，记录一下今天的成果！</p>
</body>

<p>标签就是段落标签，用来放一段文字。保存文件后，我用 Chrome 浏览器打开 "*" 文件，网页上就显示出我刚写的那段话！

光秃秃的文字有点单调，我得给网页打扮打扮。我在"myWebsite"文件夹里新建一个"css"文件夹，专门用来放样式文件。然后，在"css"文件夹里新建一个"*"文件，用来写CSS样式。

在"*"文件里，我写点简单的样式：

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;

p {
font-size: 18px;
color: #333;

这些样式，就是设置网页的字体、背景颜色、文字居中对齐，还有段落的字体大小和颜色。

然后，我回到 "*" 文件，在 <head> 标签里头加一行代码，把 CSS 样式文件链接进来：

<head>
<meta charset="UTF-8">
<title>我的静态网页</title>
<link rel="stylesheet" href="css/*">
</head>

保存后，再刷新浏览器，网页就变得漂亮多！

我把我准备好的那张风景照放到"myWebsite"文件夹里，然后在 "*" 文件里加一行代码，把图片显示到网页上：

<body>
<p>这是我的第一个静态网页，记录一下今天的成果！</p>
<img src="风景照.jpg" alt="风景照">
</body>

<img> 标签就是用来显示图片的，"src" 属性写的是图片的文件名，"alt" 属性是图片的描述文字，以防图片加载不出来的时候，可以显示这段文字。

保存刷新，我的网页就大功告成！有文字，有样式，还有图片，看起来还不错？

这回尝试挺有意思的，虽然只是个简单的静态网页，但也让我学到不少东西。以后有空，我再继续折腾，给网页加点更丰富的内容！