课程介绍：零基础入门HTML，制作你的第一个网页

课程目标： 在本课程中，你将学习HTML（超文本标记语言）的基础知识，并最终能够独立创建一个包含标题、段落、图片、链接和列表的简单个人介绍网页。

网页制作视频教程html基础
（图片来源网络，侵删）

你将学到什么：

  • 什么是HTML以及它在网页中的作用。
  • HTML文档的基本结构。
  • 常用的HTML标签,如 <h1>, <p>, <img>, <a>, <ul> 等。
  • 如何使用属性来为标签添加额外信息。
  • 如何在浏览器中查看和修改你的网页。

准备工作：

  1. 一个文本编辑器： 不需要复杂的软件，Windows系统自带的 记事本 或 Mac 自带的 文本编辑 就可以，但更推荐使用免费且功能强大的代码编辑器，如 Visual Studio Code (VS Code)，安装它非常简单，直接去官网下载安装即可。
  2. 一个现代浏览器： 如 Chrome, Firefox, Edge 或 Safari。
  3. 一颗学习的心！

课时 1：初识HTML与第一个网页

学习目标：

  • 理解HTML是什么。
  • 创建一个完整的HTML文件。
  • 在浏览器中打开它,看到你的第一个网页。

什么是HTML？

想象一下,你盖房子，HTML就是房子的钢筋骨架和砖块，它定义了网页的结构和内容，比如哪里是标题，哪里是段落，哪里该放图片，它只负责结构，不负责装修（那是CSS的工作）。

网页制作视频教程html基础
（图片来源网络，侵删）

HTML的全称是 Hyper Text Markup Language，即“超文本标记语言”。

  • 超文本：意味着它不仅仅是普通文本，还可以包含链接、图片等。
  • 标记语言：它使用“标签”（Tags）来“标记”内容的含义。

动手实践：创建你的第一个HTML文件

  1. 打开文本编辑器（推荐使用VS Code）。

  2. 输入以下代码：

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>欢迎来到我的网页，这是我的第一个段落。</p>
</body>
</html>

  3. 保存文件：

    网页制作视频教程html基础
    （图片来源网络，侵删）
    • 按 Ctrl + S (Windows) 或 Cmd + S (Mac)。
    • 在弹出的窗口中,选择一个你容易找到的位置（比如桌面）。
    • 最重要的一步： 将文件名保存为 index.html，注意，后缀名必须是 .html，而不是 .txt。

  4. 在浏览器中查看：

    • 找到你刚刚保存的 index.html 文件。
    • 右键点击它,选择“用 Chrome 打开”或“用 Firefox 打开”。
    • 或者,直接用浏览器打开这个文件（在Chrome中，按 Ctrl + O 选择文件）。

恭喜你！ 你现在应该看到一个有“你好，世界！”大标题和一个段落的网页了！

代码解析

  • <!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档，必须放在最上面。
  • <html>：根元素，所有其他HTML元素都包裹在这个标签内。
  • <lang="zh-CN">：属性，告诉网页的语言是中文（中国）。
  • <head>：头部，包含网页的元数据（metadata），即关于网页的信息，这些信息不会直接显示在页面上。
    • <meta charset="UTF-8">：设置字符编码为UTF-8，可以正确显示中文、英文等。
    • <title>：，会显示在浏览器标签页上。
  • <body>：主体，包含所有在网页上可见的内容，比如标题、段落、图片等。
    • <h1>：标题标签。h1 是最重要的标题，h2 到 h6 重要性依次降低。
    • <p>：段落标签，用于定义文本段落。

课时 2：添加文本与列表

学习目标：

  • 学习更多标题和文本格式化标签。
  • 创建有序列表和无序列表。

动手实践：编辑 index.html

打开你的 index.html 文件，在 <body> 标签内添加以下内容：

<body>
    <h1>你好，世界！</h1>
    <p>欢迎来到我的网页，这是我的第一个段落。</p>
    <h2>关于我</h2>
    <p>我是一名前端开发初学者，正在学习HTML。</p>
    <h2>我的爱好</h2>
    <p>我的爱好包括：</p>
    <ul>
        <li>编程</li>
        <li>阅读</li>
        <li>看电影</li>
    </ul>
    <h2>学习计划</h2>
    <p>我的学习计划如下：</p>
    <ol>
        <li>掌握HTML基础</li>
        <li>学习CSS样式</li>
        <li>入门JavaScript</li>
    </ol>
</body>

保存文件,然后刷新浏览器，你应该能看到新的标题、段落和列表了。

新标签解析

  • <h2>，比 <h1> 小。
  • <ul>：无序列表 (Unordered List)，前面会有项目符号（如小圆点）。
  • <ol>：有序列表 (Ordered List)，前面会有数字或字母。
  • <li>：列表项 (List Item)，放在 <ul> 或 <ol> 内部，代表列表中的一个项目。

课时 3：添加图片与链接

学习目标：

  • 学习如何在网页中插入图片。
  • 创建指向其他网页或本地文件的链接。

动手实践：准备图片和编辑 index.html

  1. 准备一张图片：

    • 在网上找一张你喜欢的图片（比如风景照、你的照片等）。
    • 将它下载到你的电脑上,最好也和 index.html 文件放在同一个文件夹里，这样方便管理，给图片起一个简单的名字，my-photo.jpg。

  2. 编辑 index.html：

    • 在 <body> 的末尾添加图片和链接。
    <body>
    <!-- ... 前面的内容保持不变 ... -->
    <h2>一张我的照片</h2>
    <img src="my-photo.jpg" alt="我的照片">
    <h2>了解更多</h2>
    <p>如果你想了解更多关于HTML的知识，可以访问：</p>
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN Web文档</a>
</body>

  3. 保存并刷新浏览器。 你应该能看到你的图片和可点击的链接了。

新标签和属性解析

  • <img>：图片标签，它是一个自闭合标签，没有结束标签。
    • src 属性：源 (source)，指定图片文件的路径，因为图片和HTML文件在同一个文件夹，所以直接写文件名即可，如果在不同文件夹，需要写相对路径，如 images/my-photo.jpg。
    • alt 属性：替代文本 (alternative text)，当图片无法显示时（比如加载失败或用户使用屏幕阅读器），会显示这段文字。这是一个非常重要的属性，必须写！
  • <a>：锚点标签，用于创建链接。
    • href 属性：超文本引用 (hypertext reference)，指定链接的目标URL，可以是一个网址（如 https://...），也可以是一个本地文件（如 index.html）。
    • target="_blank"：属性。_blank 表示在新标签页中打开链接，这样用户就不会离开你的当前页面。

课时 4：综合练习与页面结构

学习目标：

  • 使用 <div> 和 <span> 对内容进行分组和标记。
  • 完善你的个人介绍网页,让它更有条理。

动手实践：构建一个更完整的网页

让我们把之前学的所有知识组合起来,创建一个结构更清晰的个人介绍页面，用下面的代码完全替换你 index.html 文件中的 <body> 

<body>
    <div id="header">
        <h1>张三的个人主页</h1>
    </div>
    <div id="main-content">
        <div id="about-me">
            <h2>关于我</h2>
            <p>大家好，我叫张三，是一名充满热情的Web开发初学者，我喜欢创造美观且实用的东西，并致力于通过技术解决问题。</p>
        </div>
        <div id="my-hobbies">
            <h2>我的爱好</h2>
            <ul>
                <li>编程</li>
                <li>阅读科幻小说</li>
                <li>探索新的咖啡馆</li>
            </ul>
        </div>
        <div id="my-photo">
            <h2>一张我的照片</h2>
            <img src="my-photo.jpg" alt="张三在公园里微笑">
        </div>
    </div>
    <div id="footer">
        <p>© 2025 张三的个人主页. <a href="https://www.google.com" target="_blank">Google</a></p>
    </div>
</body>

保存并刷新浏览器,虽然页面看起来和之前差不多，但它的结构已经变得非常清晰了。

新标签解析

  • <div>： division 的缩写，意为“分区”或“分块”，它是一个块级容器，没有任何特定的含义，纯粹用来组织和分组其他HTML元素，以便后续用CSS进行样式设计。
    • id 属性：为元素提供一个唯一的名称，在上面的例子中，header, main-content, footer 都是唯一的ID，方便我们通过CSS精确地控制每个部分。
  • <span>：与 <div> 类似，但它是一个器，通常用于对一小段文本进行标记或分组，而不会像 <div> 那样换行。

总结与下一步

恭喜你！你已经完成了HTML基础的学习，并成功制作了你的第一个结构完整的网页。

你已掌握的核心技能：

  • HTML文档结构 (<!DOCTYPE>, <html>, <head>, <body>)。
  • (<h1>-<h6>, <p>)。
  • 列表 (<ul>, <ol>, <li>)。
  • 媒体 (<img>)。
  • 链接 (<a>)。
  • 结构化元素 (<div>)。

下一步该学什么？

你的网页现在有“骨架”了，但看起来可能有点“朴素”，下一步，你应该学习 CSS (层叠样式表)，它将给你的网页穿上漂亮的“衣服”，让你可以控制：

  • 颜色（文字颜色、背景色）
  • 字体（大小、类型）
  • 布局（元素的位置、间距）
  • 外观（边框、阴影、圆角）

继续加油,Web开发的大门已经为你打开！