怎么用记事本创建html超文本网页

发布时间：2022-01-24 09:55:55 作者：iii
来源：亿速云阅读：465

# 怎么用记事本创建HTML超文本网页

## 前言
在数字化时代，掌握基础的网页制作技能已成为必备能力。本文将详细介绍如何仅用Windows系统自带的记事本（Notepad）创建一个完整的HTML网页，从基础概念到实际代码编写，适合零基础学习者。

## 一、准备工作
### 1.1 工具准备
- **记事本**：Windows系统内置文本编辑器
  - 路径：开始菜单 > Windows附件 > 记事本
- **浏览器**：Chrome/Firefox/Edge等（用于预览效果）

### 1.2 基础概念
- **HTML**：超文本标记语言（HyperText Markup Language）
- **标签**：`<tag>`形式，如`<html>`、`<body>`
- **元素**：开始标签+内容+结束标签（例：`<p>文字</p>`）

## 二、创建第一个HTML文件
### 2.1 新建文件
1. 右键桌面 → 新建 → 文本文档
2. 重命名为`index.html`（注意修改文件扩展名）

> ⚠️ 若看不到文件扩展名：
> 1. 打开任意文件夹 → 查看 → 勾选"文件扩展名"
> 2. 确认修改时选择"是"

### 2.2 基础结构代码
在记事本中输入以下代码：

```html
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是用记事本创建的HTML网页</p>
</body>
</html>

2.3 保存与查看

按Ctrl+S保存文件
双击文件即可在默认浏览器中打开

三、HTML标签详解

3.1 文档结构标签

标签	说明
`<!DOCTYPE>`	声明文档类型（HTML5标准）
`<html>`	根元素
`<head>`	包含元信息（标题/样式表/脚本）
`<body>`	可见页面内容

3.2 常用内容标签

文本类

<h1>一级标题</h1>  <!-- 共6级(h1-h6) -->
<p>段落文本</p>
<strong>加粗文本</strong>
<em>斜体文本</em>
<br>  <!-- 换行（空标签） -->

多媒体

<img src="图片路径.jpg" alt="描述文本">
<audio controls>
  <source src="音频.mp3" type="audio/mpeg">
</audio>

超链接

<a href="https://example.com">点击访问</a>
<!-- 本地文件链接 -->
<a href="about.html">关于页面</a>

四、进阶功能实现

4.1 创建表格

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

4.2 表单制作

<form action="/submit" method="post">
    用户名: <input type="text" name="username"><br>
    密码: <input type="password" name="pwd"><br>
    <input type="submit" value="登录">
</form>

4.3 添加简单样式

虽然专业开发推荐使用CSS，但记事本中也可直接添加样式：

<body style="background-color: #f0f0f0;">
    <h1 style="color: blue; text-align: center;">居中蓝色标题</h1>
</body>

五、调试与优化

5.1 常见错误排查

标签未闭合：确保每个<tag>都有对应的</tag>
特殊符号处理：使用<表示<，&表示&
中文乱码：在<head>中添加：
```
<meta charset="UTF-8">
```

5.2 代码格式化技巧

虽然记事本无自动缩进功能，但建议： - 子元素比父元素缩进4个空格 - 相关标签组之间空一行

示例：

<body>
    <header>
        <h1>网站标题</h1>
    </header>

    <main>
        <article>
            <h2>文章标题</h2>
            <p>正文内容...</p>
        </article>
    </main>
</body>

六、发布你的网页

6.1 本地测试

按F12打开开发者工具
查看Console面板是否有错误提示

6.2 网络发布

购买域名和主机空间
通过FTP工具上传HTML文件
访问你的公网URL测试

七、后续学习建议

CSS：学习样式控制（推荐《CSS权威指南》）
JavaScript：实现交互功能（MDN文档）
响应式设计：适配不同设备
框架学习：Vue/React等现代框架

结语

通过记事本编写HTML是理解网页基础的最佳方式。虽然现代开发多使用专业编辑器（如VSCode），但掌握原生HTML编写能力将为你打下坚实基础。现在就开始创建你的第二个网页吧！

附录：完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
</head>
<body style="font-family: Arial;">
    <header style="background: #333; color: white; padding: 20px;">
        <h1>李明的主页</h1>
        <nav>
            <a href="#about" style="color: white;">关于我</a> |
            <a href="#works" style="color: white;">作品集</a>
        </nav>
    </header>

    <main style="margin: 15px;">
        <section id="about">
            <h2>自我介绍</h2>
            <p>我是网页开发初学者，正在学习HTML...</p>
            <img src="photo.jpg" width="200" alt="个人照片">
        </section>
    </main>

    <footer style="text-align: center; margin-top: 50px;">
        <p>© 2023 版权所有</p>
    </footer>
</body>
</html>

”`