如何编写最简单的网页

2025-12-21

Web开发

HTML

/

CSS

/

Web开发

/

前端基础

/

入门教程

如何编写最简单的网页#

网页开发是进入编程世界的绝佳起点。本文将教你如何从零开始创建一个简单的网页。

🎯 准备工作#

你只需要两样东西：

文本编辑器：记事本、VSCode、Sublime Text等任意一款
浏览器：Chrome、Firefox、Edge等

📝 第一个HTML文件#

创建一个名为 index.html 的文件，输入以下代码：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>我的第一个网页</title>
5
</head>
6
<body>
7
    <h1>欢迎来到我的网页</h1>
8
    <p>这是我创建的第一个网页！</p>
9
</body>
10
</html>

保存后，双击文件在浏览器中打开，你就能看到你的第一个网页了！

🔍 理解HTML结构#

让我们分析一下这段代码：

<!DOCTYPE html>：告诉浏览器这是HTML5文档
<html>：HTML文档的根元素
<head>：包含网页的元数据（标题、样式等）
<title>：浏览器标签页显示的标题
<body>：网页的可见内容
<h1>：一级标题
<p>：段落文本

📚 常用HTML标签#

标题标签#

1
<h1>一级标题</h1>
2
<h2>二级标题</h2>
3
<h3>三级标题</h3>

文本格式化#

1
<p>这是一个段落</p>
2
<strong>粗体文本</strong>
3
<em>斜体文本</em>
4
<br>  <!-- 换行 -->

链接和图片#

1
<a href="https://www.example.com">点击访问网站</a>
2
<img src="image.jpg" alt="图片描述">

列表#

1
<!-- 无序列表 -->
2
<ul>
3
    <li>项目1</li>
4
    <li>项目2</li>
5
</ul>
6

7
<!-- 有序列表 -->
8
<ol>
9
    <li>第一步</li>
10
    <li>第二步</li>
11
</ol>

🎨 添加CSS样式#

在 <head> 标签中添加样式：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>带样式的网页</title>
5
    <style>
6
        body {
7
            font-family: Arial, sans-serif;
8
            max-width: 800px;
9
            margin: 0 auto;
10
            padding: 20px;
11
            background-color: #f5f5f5;
12
        }
13
        h1 {
14
            color: #333;
15
            text-align: center;
16
        }
17
        p {
18
            line-height: 1.6;
19
            color: #666;
20
        }
21
    </style>
22
</head>
23
<body>
24
    <h1>欢迎来到我的网页</h1>
25
    <p>这是一个带有样式的网页！</p>
26
</body>
27
</html>

💡 完整示例#

这是一个包含多种元素的完整网页：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>我的个人主页</title>
5
    <style>
6
        body {
7
            font-family: Arial, sans-serif;
8
            max-width: 800px;
9
            margin: 0 auto;
10
            padding: 20px;
11
            background-color: #f0f0f0;
12
        }
13
        h1 {
14
            color: #2c3e50;
15
            border-bottom: 3px solid #3498db;
16
            padding-bottom: 10px;
17
        }
18
        .section {
19
            background: white;
20
            padding: 20px;
21
            margin: 20px 0;
22
            border-radius: 5px;
23
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
24
        }
25
    </style>
26
</head>
27
<body>
28
    <h1>关于我</h1>
29

30
    <div class="section">
31
        <h2>个人简介</h2>
32
        <p>我是一名编程爱好者，正在学习Web开发。</p>
33
    </div>
34

35
    <div class="section">
36
        <h2>我的技能</h2>
37
        <ul>
38
            <li>HTML</li>
39
            <li>CSS</li>
40
            <li>JavaScript（学习中）</li>
41
        </ul>
42
    </div>
43

44
    <div class="section">
45
        <h2>联系方式</h2>
46
        <p>邮箱：<a href="mailto:example@email.com">example@email.com</a></p>
47
    </div>
48
</body>
49
</html>