我的第一行 HTML 代码：从零开始构建网页结构
前端 前端 60

一、 引言：你也能创造网页！

  • 开头引入：
    • “你是否曾惊叹于那些精美、信息丰富的网页？它们是如何诞生的呢？”
    • “想不想亲手搭建属于自己的小小网页，哪怕只是简单的一句话？”
    • 点出本文主旨：这篇教程将带你迈出第一步，写下你的第一行 HTML 代码，感受创造的乐趣。
  • 消除恐惧：
    • 强调 HTML 并非高深莫测的编程语言，更像是一种描述性的“标记语言”。
    • 告诉读者不需要任何编程基础，只需要一台电脑和一个文本编辑器。

二、 HTML 是什么？网页的“骨架”

  • 通俗解释：
    • HyperText Markup Language (超文本标记语言) —— 拆解词义，简单解释“超文本”（可以点击跳转的链接）和“标记语言”（用标签来赋予内容意义）。
    • 核心比喻： 将 HTML 比作房子的骨架/结构。它定义了网页上有哪些内容（文字、图片、标题、段落等）以及这些内容是如何组织的。
    • 区分： 简单提及 CSS（装修，负责美观）和 JavaScript（水电/智能家居，负责交互），但强调本篇只关注 HTML 这个“骨架”。
  • 它的作用：
    • 告诉浏览器如何展示网页的内容。
    • 为搜索引擎提供关于网页内容的线索。

三、 准备工作：你的“建筑材料”和“施工场地”

  • 1. 文本编辑器 (Text Editor)：
    • 解释：就是一个能输入和保存文本的软件。
    • 推荐：
      • 操作系统自带： Windows 的记事本 (Notepad)，Mac 的文本编辑 (TextEdit) —— 对于第一行代码完全够用，降低入门门槛。
      • 进阶提示（可选，一句话带过）： 之后可以考虑更专业的代码编辑器，如 VS Code、Sublime Text 等，它们有更多辅助功能。
  • 2. 网页浏览器 (Web Browser)：
    • 解释：用来查看你写的网页最终效果的软件。
    • 举例：Google Chrome, Firefox, Edge, Safari 等，读者电脑上肯定有。

四、 HTML 的基本构成：认识“砖块”和“钢筋”

  • 1. 标签 (Tags)：
    • 核心概念： HTML 的基础，用尖括号 < > 包裹起来的指令。
    • 成对出现： 大多数标签是成对的，有一个开始标签 <tagname> 和一个结束标签 </tagname> (结束标签多一个斜杠 /)。
    • 举例：<p> (段落开始) 和 </p> (段落结束)。
    • （可选，简单提一下）单标签/自闭合标签： 如 <br> (换行)，<img> (图片)。但为了第一次简单，可以先不深入。
  • 2. 元素 (Elements)：
    • 定义： 一个完整的 HTML 元素通常由开始标签、内容、结束标签组成。
    • 示例：<p>这是一段文字。</p> 就是一个完整的段落元素。
  • 3. 属性 (Attributes)：
    • 定义： 为 HTML 元素提供附加信息，写在开始标签内。
    • 格式：属性名="属性值"。
    • 简单举例（可选）：<p title="这是一个提示">鼠标放上来看看</p>。对于第一行代码，可以不涉及复杂属性。

五、 动手实践：搭建你的第一个“小房子”！

  • 1. 最基础的 HTML 结构（“地基和框架”）：

    • <!DOCTYPE html>：文档类型声明，告诉浏览器这是一个 HTML5 页面。（简单解释，不用深究）
    • <html>: 根元素，所有 HTML 内容都包裹在它里面。
    • <head>: 头部元素，包含一些元信息（meta-information），比如网页标题，这些信息通常不会直接显示在页面正文中。
      • <title>: 定义网页在浏览器标签页上显示的标题。这是第一个能让新手看到“效果”的地方！
    • <body>: 主体元素，包含所有用户在浏览器中能看到的内容，如文本、图片、链接等。

  • 2. 编写你的第一行“内容”：

    • 在 <body> 标签内，我们可以写下：
      • <h1>我的第一个网页标题</h1> (h1 代表一级标题，最大号的标题)
      • <p>你好，世界！我成功创建了我的第一个网页！</p> (p 代表段落)

  • 3. 完整代码示例：
    HTML

    <!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>我的第一个网页标题</h1>
    <p>你好，世界！我成功创建了我的第一个网页！</p>
</body>
</html>

  • 4. 保存你的“设计图”：

    • 打开你的文本编辑器（如记事本）。
    • 将上面的代码复制粘贴进去，或者自己敲一遍（推荐！）。
    • 点击“文件” -> “另存为”。
    • 关键步骤：
      • 文件名： 可以取名为 myfirstpage.html 或者 index.html (index.html 通常是网站的首页)。后缀名必须是 .html 或 .htm！
      • 保存类型/编码： 如果有选项，选择“所有文件”，编码建议选择 UTF-8 (避免中文乱码)。

  • 5. 在浏览器中预览你的“小房子”：

    • 找到你刚刚保存的 .html 文件。
    • 双击它，或者右键点击选择用你的浏览器打开。
    • 见证奇迹的时刻！ 你会看到浏览器标签页上显示“我的第一个网页”，页面上显示着你写的大标题和段落。

六、 代码解释：回顾你的“建筑蓝图”

  • 逐行解释上面示例代码中每个标签的作用：
    • <!DOCTYPE html>: 声明文档类型。
    • <html>: 根元素。
    • <head>: 包含元数据，里面的 <title> 定义了浏览器标签页的标题。
    • <body>: 包含所有可见的页面内容。
    • <h1>: 一级标题。
    • <p>: 段落。
我的第一行 HTML 代码：从零开始构建网页结构
https://blog.moxuan.xin/archives/wo-de-di-yi-xing-html-dai-ma-cong-ling-kai-shi-gou-jian-wang-ye-jie-gou
作者
moxuan
发布于
更新于
许可
前端 前端