前两节主要修改页面里的内容。现在我们把这些内容放进一个完整文件，理解浏览器需要读取的外层结构。HTML 文件是纯文本文件，通常以 .html 结尾。下面是可以直接保存和打开的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>读书社首页</title>
</head>
<body>
<h1>欢迎来到读书社</h1>
<p>我们每周六见面。</p>
</body>
</html>先看最外层
第一行 <!DOCTYPE html> 是文档类型声明，告诉浏览器采用现代 HTML 的标准模式来解析页面。它不是正文元素，也不需要结束标签。紧接着的 html 是根元素：文档的其他元素都在它里面。
lang="zh-CN" 说明页面主要使用简体中文，英语页面可以使用 lang="en"。这可以帮助朗读软件选择合适的发音，也给翻译工具提供线索。它不会自动翻译正文，也不控制文字编码。
head 是文档信息，body 是页面内容
head 保存关于文档的信息。这里的 meta 是空元素；charset="UTF-8" 声明字符编码，让浏览器按 UTF-8 理解文件中的文字。编辑器实际保存文件时也要选择 UTF-8，两者应保持一致。把编码声明放在 head 前面的位置是良好习惯。
title 元素设置文档标题，通常出现在浏览器标签页和收藏名称中。注意它与上一节的 title 属性不同：这里是一个有开始和结束标签的独立元素，不是写在其他元素里的附加属性。
body 则保存页面正文，例如 h1 和 p。title 不会自动生成正文标题；如果希望页面里出现“欢迎来到读书社”，需要在 body 中写 h1。一个入门文档保留一个 head 和一个 body，不要把它们写进段落内部。
用修改验证理解
在 Lab 中先修改 title，观察预览顶部的“标签页标题”；然后只修改 h1，观察白色页面区域。两处内容可以相同，也可以不同。接着将完整代码复制到 index.html，保存并打开。源码缩进帮助我们看层级，但不决定页面的布局。
本章之后的简短代码块有时只展示 body 内的一部分；这些片段需要放在完整文档的 body 中。每个 Lab 和练习参考代码都会提供完整文件，方便复制运行。
页面实验：HTML 文档结构
先切换对照示例，再按照观察提示修改一处 HTML，比较源码与真实页面。示例中的英文短句可以替换成自己的文字。
上方标签页显示 title，页面中的大标题来自 h1。分别修改两处。
预览保留浏览器默认的标题、段落和表单外观。示例切换会替换编辑内容；重置实验可恢复初始状态。可点击页内链接、输入文字和选择选项；此练习预览不提交数据、不运行脚本。要在本机尝试，将完整代码保存为 index.html 后用浏览器打开。
知识测验
动手编写：HTML 文档结构
新建 index.html，按照下面的要求编写完整页面；保存并用浏览器打开，边操作边检查结果。参考答案是一种实现，文字内容可以不同。
- 创建完整中文 HTML 文档，包含 doctype、html、head、body 和 UTF-8 声明。
- 把 title 设为“我的学习记录”，h1 设为“第一天”，再用 p 写一句学习感受。