前端基础·HTML 总结笔记

课程笔记 · 前端基础

HTML：网页的骨架
从"能看懂"到"会用"

一个完整的HTML文件包含结构与内容，再辅以CSS和JavaScript，就能从白纸黑字变成真正"活"的网页。
本节用一个真实文件，带你读懂网页的底层逻辑。

模块三 · 前端约39分钟

✦

核心收获

HTML CSS JavaScript 标签属性 Markdown

网页三要素

个完整HTML结构

种可学格式

HTML 结构：麻雀虽小，五脏俱全

HTML是什么？

HTML（超文本标记语言）是一种用于网页展示的文件格式。它定义了网页的内容和结构。HTML文件由一对对尖括号构成的标签（Tag）组成，这些标签通常成对出现。

基础结构拆解

将代码收起后，一个HTML文件的核心骨架共三部分：

<!DOCTYPE html>   ← 声明文件类型
<html lang="zh-CN">   ← 根标签 + 语言属性
  <head>         ← 头部：不直接展示
    <meta>      字符集设定
    <title>     浏览器标签页标题
    <style>     CSS样式（本节添加）
  </head>
  <body>         ← 身体：页面可视内容
    <h1>       页面主标题
    <p>        正文段落
  </body>
</html>

两个关键概念

标签（Tag）：尖括号包裹的部分，成对出现，如 <head> 与 </head>，定义内容区块。

属性（Attribute）：写在标签内部，形式为"属性名=值"，如 lang="zh-CN" 表示页面语言为简体中文。

从静态到动态：网页三件套

第一步：CSS改变外观

在 <head> 中放入 <style> 标签，即定义一套样式表，可以控制颜色、字号、边框、圆角等外观属性。

实操做法：

将课件中写好的CSS代码复制到 <style> 中

将 h1 和 p 用 <div class="card"> 包裹，成为一个"卡片"

刷新浏览器，白纸黑字立刻变为有层次感的卡片

第二步：JavaScript实现交互

先给需要变化的内容加一个 id，例如 id="message"；再添加一个 <button> 按钮；最后在 <body> 末尾加入 <script> 标签，定义点击按钮后要执行的逻辑。

核心代码示例

<h1 id="message">你好，互联网</h1>
<button onclick="changeText()">点击按钮</button>

<script>
  function changeText() {
    // 找id为message的元素，修改其内容
    document.getElementById("message").textContent = "你刚刚触发了一段JavaScript";
  }
</script>

通俗理解：HTML是房子的结构，CSS是装修风格，JavaScript是水电与电梯——让它真正"动"起来，能为居住者响应指令。

第三步：浏览器如何工作？

代码只是"定义"，真正的执行者是浏览器。当点击按钮时：

浏览器监听 click 事件

找到对应 JS 脚本，执行其中定义的动作

按 CSS 规则重新渲染页面外观

在浏览器中按 F12 或右键"检查"，即可实时查看任何网页的 HTML 结构、调试样式，还能提取图片资源链接，这是数据采集者的常用技巧。

HTML 在 AI 时代的新生命

为什么说 HTML 是 AI 最友好的格式？

AI 训练数据主要来源于互联网，而互联网的信息主力是 HTML。AI 天然更擅长理解和生成 HTML。因此，让 AI 写 HTML 格式的文档（如课件、幻灯片）效率极高，修改只需用自然语言给出指令。

三大理由值得掌握

表现力强：苹果官网级别的精美页面，HTML 完全能胜任。

真正开放：开源免费，任何设备只要有浏览器就能打开，不分平台。

AI 协作利器：用 HTML 写幻灯片，请求 AI 修改某个段落、某处样式，响应快速且自然。

回顾：一个 HTML 文件包含什么？

HTML（<html>）：定义内容和页面结构

CSS（<style>）：定义样式与外观，控制表现

JavaScript（<script>）：定义行为与交互逻辑

附：值得学的 Markdown 格式

HTML 对 AI 和浏览器友好，但对人类而言代码感太强。写博客或文档时，Markdown 是更自然的选择。

示例对比

# 一级标题
## 二级标题

- 列表项 1
- 列表项 2

**加粗文字**

Markdown 是一种极简的标记语言，几分钟能上手。用短横线、井号就能组织清晰的段落与列表。它同样对 AI 友好，适合向 AI 布置复杂任务、编写提示词（Prompt）。

→

行动建议

给学完这一节的你

用VS Code 打开你的 index.html，尝试动手修改一行文字或一个颜色，刷新观察变化。
任意打开一个常用网站（如 Apple 官网），按 F12 查看它的 HTML 结构，找找 body、div、img 标签。
网上搜索"Markdown 教程"，挑一个网站用 10 分钟学完基本语法，尝试用 Markdown 写一份笔记。
让 AI（如 Claude 或 GPT）用 HTML 帮你做一页漂亮的简历或小型页面，体验 AI 协作的力量。

"HTML 是互联网的通用语言——它足够强大，足够开放，在 AI 时代反而焕发出新的生命力。我们不必成为代码专家，但理解它，就是理解了数字世界的底层逻辑。"

下一节预告

将 HTML、CSS、JavaScript 拆分为独立文件，进入工程化管理方式。

HTML：网页的骨架从"能看懂"到"会用"