何雨果的知识库

Appearance

HTML 文档结构 ​

BeginnerHTML Structure

每个 HTML 文件都遵循固定的 样板结构（Boilerplate），理解它是构建规范网页的前提。

一、📄 HTML 样板（Boilerplate） ​

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>Hello World</h1>
  </body>
</html>

逐行解析 ​

行代码作用
1<!DOCTYPE html>声明文档类型为 HTML5
2<html lang="zh-CN">根元素，lang 属性声明页面语言（影响屏幕阅读器发音）
3-7<head>...</head>元数据区域，不显示在页面上
4<meta charset="UTF-8" />设置字符编码，确保中文、Emoji 等正确显示
5<meta name="viewport" ...>定义视口，控制页面在不同设备上的初始显示方式
6<title>我的网站</title>页面标题，显示在浏览器 标签栏
8-10<body>...</body>页面内容区域，所有可见元素都写在这里

嵌套结构可视化 ​

html（根元素）
├── head（元数据，不可见）
│   ├── meta charset
│   ├── meta viewport
│   └── title
└── body（页面内容，可见）
    ├── h1
    ├── p
    └── img

VS Code 快捷方式

在 .html 文件中输入 ! 然后按 Enter，VS Code 会自动生成完整的 HTML 样板代码。

head 区域补充说明 ​

<meta charset="UTF-8">：UTF-8 是最通用的字符编码，支持几乎所有语言的字符和 Emoji。如果不设置或设置错误，中文、特殊符号可能显示为乱码。

<meta name="viewport" ...>：告诉浏览器页面宽度应与设备屏幕宽度一致，这是 响应式设计 的基础。没有这行代码，移动端会把页面缩小到桌面页面的宽度。

已弃用的 meta 标签：VS Code 自动生成的样板中可能包含 <meta http-equiv="X-UA-Compatible" content="IE=edge">，这是为兼容 Internet Explorer 的。由于 IE 已停止支持，此标签可以安全删除。

调试技巧：Diff Checker ​

当代码出现问题时，可以使用 diffchecker.com 将你的代码与正确代码进行对比，快速定位差异：

  1. 将正确代码粘贴到左侧
  2. 将你的代码粘贴到右侧
  3. 点击"Find Difference"，高亮显示所有不同之处

二、📂 文件路径（File Paths） ​

文件路径是定位计算机中文件或文件夹的 唯一地址。

2.1 绝对路径 vs 相对路径 ​

类型起点示例特点
绝对路径硬盘根目录/Users/hugo/project/images/cat.png完整路径，不受当前位置影响
相对路径当前文件位置./images/cat.png更短，移动文件夹后仍然有效

Web 开发中，几乎总是使用相对路径。

2.2 特殊字符 ​

字符含义示例
./当前目录（当前文件所在的文件夹）./images/cat.png
../上一级目录（向上走一层）../dog.png

2.3 路径导航示例 ​

假设文件结构如下：

project/
├── index.html        ← 当前文件
├── dog.png
├── images/
│   └── cat.png
└── assets/
    └── photos/
        └── bird.png

从 index.html 出发：

目标文件相对路径说明
cat.png./images/cat.png进入 images 子目录
dog.png./dog.png同级文件，当前目录下
bird.png./assets/photos/bird.png多层子目录

2.4 向上导航 ​

假设 index.html 在子目录中：

root/
├── readme.txt
└── project/
    └── index.html    ← 当前文件

从 index.html 访问 readme.txt：

../readme.txt

../ 将位置从 project/ 上移到 root/，然后访问 readme.txt。

注意

./ 可以省略（直接写 images/cat.png），但推荐始终使用 ./ 前缀，确保路径解析的可靠性。

三、📑 多页面网站（Multi-Page Websites） ​

3.1 文件组织结构 ​

my-website/
├── index.html          ← 首页（必须叫 index.html）
├── public/
│   ├── about.html      ← 关于页
│   └── contact.html    ← 联系页
└── assets/
    └── images/
        └── photo.png
文件说明
index.html网站的 首页入口，命名不可更改
public/存放其他 HTML 页面
assets/存放图片、样式等静态资源

3.2 页面间导航 ​

使用 <a> 标签 + 相对路径实现页面跳转：

html
<!-- 在 index.html 中链接到其他页面 -->
<a href="./public/about.html">关于我</a>
<a href="./public/contact.html">联系方式</a>

3.3 Web 托管（Web Hosting） ​

将本地网站部署到互联网的过程：

本地开发 → 上传文件到 Web 服务器 → 全球可访问

GitHub Pages 免费托管流程：

  1. 在 GitHub 创建公开仓库
  2. 上传网站文件（确保 index.html 在根目录）
  3. 在 Settings → Pages 中启用 GitHub Pages
  4. 获得 https://username.github.io/repo-name 公开链接

重要

上传时要上传文件夹的 内容，而非整个文件夹本身。index.html 必须位于仓库根目录。

四、📚 参考资源 ​

← 返回 Web 开发研究