正心全栈编程

HTML 页面骨架与路径 ​

浏览器需要先读懂页面结构，才能显示标题、图片、表格和表单。HTML（HyperText Markup Language，超文本标记语言）使用标签描述这些内容及其关系，它负责页面结构，不负责业务计算。

本节从一个能直接打开的学员登记页面开始，解决四个问题：

  1. 一个 HTML 页面至少包含哪些结构。
  2. head 和 body 分别负责什么。
  3. 注释怎样帮助我们整理页面。
  4. ./ 和 ../ 表示什么路径。

搭建第一个 HTML 页面 ​

浏览器要显示页面，第一步不是写表单，而是先准备一个结构完整的 HTML 文件。本节先搭好页面骨架，再讲清后面反复使用的文件路径。

新建 student.html，输入下面的代码：

html
<!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>
</body>
</html>

保存后用浏览器打开文件，页面会显示“学员登记”，浏览器标签页显示同名标题。

页面骨架说明 ​

结构作用
<!doctype html>告诉浏览器按现代 HTML 规则解析页面
<html lang="zh-CN">HTML 文档根元素，并声明页面主要语言
<head>保存编码、视口、标题等页面信息
<body>保存用户在页面中看到的主要内容

doctype 是文档声明，不是普通 HTML 标签。现代页面统一使用简短写法：

html
<!doctype html>

head 中的必要信息 ​

入门阶段先掌握三个常用设置：

html

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>学员登记</title>
</head>
  • charset="UTF-8"：使用 UTF-8 编码，避免中文乱码。
  • viewport：让页面宽度适应手机、平板和电脑屏幕。
  • title：设置浏览器标签页标题。

后面还会在 head 中引入 CSS 和 JavaScript 文件。当前先认识位置，不展开具体语法：

html

<link rel="stylesheet" href="./css/student.css"/>
<script src="./js/student.js" defer></script>

CSS 在 p02 学习，JavaScript 在 p03 和 p04 学习。

这里先只认识脚本文件的加载位置，不提前学习 JavaScript。进入 p03 后，入口脚本还可以进一步使用 ES Module，通过 import 和 export 明确拆分文件之间的依赖。

body 中的页面内容 ​

页面标题、段落、图片、表格和表单都放在 body 中：

html

<body>
<header>
    <h1>学员信息管理</h1>
</header>

<main>
    <p>请填写学员的基本信息。</p>
</main>
</body>

HTML 标签通常成对出现：

html
<p>请填写学员信息</p>

meta、link、img、input 等元素没有内部内容，属于空元素。HTML 中可以写成 <meta charset="UTF-8">，课程示例统一保留结尾 /，便于识别，但不要把 / 理解成让普通元素自动闭合。

用注释标记页面区域 ​

注释不会显示在页面中，适合标记页面区域：

html
<!-- 页面顶部 -->
<header>
    <h1>学员信息管理</h1>
</header>

<!-- 学员登记区域 -->
<main>
    <p>请填写学员信息。</p>
</main>

快捷键通常是 Ctrl + /，macOS 常用 Command + /。

注意：浏览器用户可以查看 HTML 源码，所以不要在注释中保存密码、密钥和隐私数据。

组织项目目录与路径 ​

假设项目结构如下：

text
student-page/
├── index.html
├── pages/
│   └── register.html
├── images/
│   └── avatar.svg
├── css/
│   └── student.css
└── js/
    └── student.js

同级路径 ​

index.html 与 images 目录同级：

html
<img src="./images/avatar.svg" alt="默认学员头像"/>

./ 表示当前文件所在目录，可以省略，但课程示例保留它来强调路径起点。

进入下级目录 ​

从 index.html 进入 pages：

html
<a href="./pages/register.html">打开登记页面</a>

返回上级目录 ​

register.html 位于 pages 中，需要先返回上一级，再进入 images：

html
<img src="../images/avatar.svg" alt="默认学员头像"/>

../ 表示上一级目录。返回两级就是 ../../。

排查资源路径 ​

资源没有显示时，按下面的顺序检查：

  1. 确认文件是否真的存在。
  2. 确认当前 HTML 文件位于哪个目录。
  3. 从当前 HTML 出发，一层一层推导路径。
  4. 检查文件名大小写和扩展名。
  5. 在浏览器开发者工具的 Network 中查看是否出现 404。

小结 ​

本节最核心的是掌握四件事：

  1. HTML 页面由文档声明、html、head 和 body 组成。
  2. head 保存页面信息，body 保存主要可见内容。
  3. 注释用于整理结构，不能保存敏感信息。
  4. ./ 表示当前目录，../ 表示上一级目录。