HTML基础篇之第一张网页：从index.html到浏览器里的任务清单

从今天开始，我们沿着HTML、CSS、JavaScript、Vue和React Native的顺序做一款任务清单。第一篇先把页面放进浏览器，让标签页能显示正确名称，让正文能呈现标题和任务。完成以后，你应该能指出文件里的哪一行控制哪个位置，并验证一次修改确实生效。

一、准备一个能看清文件名的目录

新建文件夹task-notes，在里面创建index.html。用文本编辑器保存为UTF-8。在Windows文件资源管理器中打开"文件扩展名"显示，确认完整文件名是index.html。如果保存成index.html.txt，浏览器可能把它当作普通文本。

text 复制代码

task-notes/
└─ index.html

本篇遵循HTML Living Standard的常规文档结构，示例只用现代浏览器支持的基础元素。文件名index.html是常见入口命名，直接打开本地文件时，也可以使用其他.html文件名。服务器访问目录时会选择哪个默认文件，则由服务器配置决定。

二、先复制一份完整页面

把下面的内容保存到文件中，然后用浏览器打开它。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>任务清单 · 我的前端练习</title>
</head>
<body>
  <h1>今天的任务清单</h1>
  <p>先把一件小事做完整，再继续下一件。</p>
  <ul>
    <li>建立index.html文件</li>
    <li>核对标签页标题和页面标题</li>
    <li>修改一个任务并刷新页面</li>
  </ul>
</body>
</html>

页面正文应该依次出现一个大标题、一段介绍和三个带圆点的任务。标签页上显示"任务清单 · 我的前端练习"。字体大小和页边距来自浏览器默认样式，我们稍后会在CSS篇控制它们。

这份任务清单把内容写在HTML文件里。编辑任务的方法是改文件、保存、刷新，后续JavaScript篇会加入在页面内编辑任务的能力。

三、逐层认识这份结构

<!DOCTYPE html>是文档类型声明。把它放在文件开头，可以让常规HTML文档进入标准模式。这里没有HTML版本数字，也不需要填写远程DTD地址。

html是文档根元素。lang="zh-CN"给出了主要语言，语音工具和翻译工具可以据此选择处理方式。语言声明不会自动翻译正文。

head保存描述文档的元信息。meta charset声明字符编码，实际保存文件时也要使用UTF-8。viewport让移动浏览器按设备宽度安排布局视口，后续响应式布局会在此基础上展开。

body承载页面内容。h1表示本页主要标题，p表示一段文字，ul包含一组无序列表项，li表示其中一项。开始标签与结束标签圈定内容，缩进帮助人读清嵌套关系。本例中的meta属于空元素，直接写开始标签即可。HTML文档元素与元信息规范

栗子把head里的title放到浏览器标签页，小橘把body里的h1和列表放到页面区域。两处标题可以表达相关含义，同时拥有各自的位置和职责。

四、用两次修改分清title与h1

先只修改title中的文字，将"我的前端练习"改成"第一课"。保存并刷新，观察标签页名称。正文的大标题仍然来自h1。

接着只把h1改成"周末任务清单"。再保存并刷新，正文的第一行发生变化，标签页继续显示title中的内容。

要改变的位置	应该修改的内容	验证动作
浏览器标签页名称	head中的title	刷新后查看标签页
正文主要标题	body中的h1	刷新后查看正文第一行
第三条任务	第三个li里的文字	查看列表仍有三项
文档主要语言	html上的lang属性	在开发者工具中检查根元素

如果打开了两个同名文件，浏览器地址栏能帮助你确认正在查看哪个路径。刷新只会重新加载当前地址对应的文件，保存到另一个文件夹的修改不会出现在这里。

五、浏览器显示出来以后，怎样检查结构

按F12打开开发者工具，在Elements面板中展开html。检查head和body位于根元素下方，列表项位于ul内部。浏览器会把源代码解析为文档树，某些错误嵌套会触发自动修复。因此验收同时看文件内容和解析后的结构。

还可以在控制台运行以下只读表达式，逐项核对结果。

javascript 复制代码

document.title
document.documentElement.lang
document.characterSet
document.compatMode
document.querySelector("h1").textContent
document.querySelectorAll("ul > li").length

使用最初那份代码时，依次应得到标签页标题、zh-CN、UTF-8、CSS1Compat、正文标题以及数字3。这里的CSS1Compat是标准模式的标识。控制台用于验证浏览器实际读到什么，暂时不需要记住所有查询语法。

正文显示乱码时，先检查文件实际编码。看到源码文本时，先检查扩展名与打开方式。修改后没有变化时，先检查保存状态和地址栏路径。这三项检查能够把文件层的问题和HTML结构的问题分开。

六、🧠 思维导图

#mermaid-svg-Qmb00nRHMcF1hazz{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Qmb00nRHMcF1hazz .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Qmb00nRHMcF1hazz .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Qmb00nRHMcF1hazz .error-icon{fill:#552222;}#mermaid-svg-Qmb00nRHMcF1hazz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Qmb00nRHMcF1hazz .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Qmb00nRHMcF1hazz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Qmb00nRHMcF1hazz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Qmb00nRHMcF1hazz .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Qmb00nRHMcF1hazz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Qmb00nRHMcF1hazz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Qmb00nRHMcF1hazz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Qmb00nRHMcF1hazz .marker.cross{stroke:#333333;}#mermaid-svg-Qmb00nRHMcF1hazz svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Qmb00nRHMcF1hazz p{margin:0;}#mermaid-svg-Qmb00nRHMcF1hazz .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Qmb00nRHMcF1hazz .cluster-label text{fill:#333;}#mermaid-svg-Qmb00nRHMcF1hazz .cluster-label span{color:#333;}#mermaid-svg-Qmb00nRHMcF1hazz .cluster-label span p{background-color:transparent;}#mermaid-svg-Qmb00nRHMcF1hazz .label text,#mermaid-svg-Qmb00nRHMcF1hazz span{fill:#333;color:#333;}#mermaid-svg-Qmb00nRHMcF1hazz .node rect,#mermaid-svg-Qmb00nRHMcF1hazz .node circle,#mermaid-svg-Qmb00nRHMcF1hazz .node ellipse,#mermaid-svg-Qmb00nRHMcF1hazz .node polygon,#mermaid-svg-Qmb00nRHMcF1hazz .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Qmb00nRHMcF1hazz .rough-node .label text,#mermaid-svg-Qmb00nRHMcF1hazz .node .label text,#mermaid-svg-Qmb00nRHMcF1hazz .image-shape .label,#mermaid-svg-Qmb00nRHMcF1hazz .icon-shape .label{text-anchor:middle;}#mermaid-svg-Qmb00nRHMcF1hazz .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Qmb00nRHMcF1hazz .rough-node .label,#mermaid-svg-Qmb00nRHMcF1hazz .node .label,#mermaid-svg-Qmb00nRHMcF1hazz .image-shape .label,#mermaid-svg-Qmb00nRHMcF1hazz .icon-shape .label{text-align:center;}#mermaid-svg-Qmb00nRHMcF1hazz .node.clickable{cursor:pointer;}#mermaid-svg-Qmb00nRHMcF1hazz .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Qmb00nRHMcF1hazz .arrowheadPath{fill:#333333;}#mermaid-svg-Qmb00nRHMcF1hazz .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Qmb00nRHMcF1hazz .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Qmb00nRHMcF1hazz .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Qmb00nRHMcF1hazz .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Qmb00nRHMcF1hazz .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Qmb00nRHMcF1hazz .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Qmb00nRHMcF1hazz .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Qmb00nRHMcF1hazz .cluster text{fill:#333;}#mermaid-svg-Qmb00nRHMcF1hazz .cluster span{color:#333;}#mermaid-svg-Qmb00nRHMcF1hazz div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Qmb00nRHMcF1hazz .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Qmb00nRHMcF1hazz rect.text{fill:none;stroke-width:0;}#mermaid-svg-Qmb00nRHMcF1hazz .icon-shape,#mermaid-svg-Qmb00nRHMcF1hazz .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Qmb00nRHMcF1hazz .icon-shape p,#mermaid-svg-Qmb00nRHMcF1hazz .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Qmb00nRHMcF1hazz .icon-shape .label rect,#mermaid-svg-Qmb00nRHMcF1hazz .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Qmb00nRHMcF1hazz .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Qmb00nRHMcF1hazz .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Qmb00nRHMcF1hazz :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 第一张HTML页面
文件准备
index.html与UTF-8
保存和刷新
文档结构
doctype与lang
head与title
body与h1
验收
标题与三项任务
文档树与标准模式

七、总结

总结要点

第一张网页从一个UTF-8文件开始。doctype、语言和元信息帮助浏览器理解文档，body里的元素组织读者看到的内容。

title与h1分别控制标签页名称和页面主标题。分别修改它们、保存、刷新，再对照浏览器结果，就能建立代码与页面之间的具体联系。

下一篇进入内容与资源，给任务清单加入说明链接和图片，并用相对路径组织文件。

👉 如果你觉得这篇文章对你有所帮助，欢迎点赞、收藏、分享！😊