你的第一个 HTML 页面
每个 HTML 文档都共享相同的基本结构：声明文档类型的一行，包装所有内容的根元素，用于存放页面信息的 head，以及用于存放人们看到的内容的 body。本章逐行分解这个结构，然后将其保存到可以在浏览器中打开的文件。
文档框架
以下是每个页面都从这个框架开始的内容。你可以完全按照它复制，并改变 body 中的部分：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>第一行 <!DOCTYPE html> 告诉浏览器这是一个现代 HTML 页面。之后是 根元素 <html>，它包装了页面上的所有其他内容。在它内部有两个盒子：<head> 用于幕后信息，<body> 用于访问者看到的文字和图片。你的标题和段落应该放在 body 中，因为那是展示的部分。
把整个事物想象成一个标有标签的包裹。doctype 是说明要使用哪个邮政系统的邮票，<html> 是盒子，head 是外面的标签，body 是包装里面的东西。
<!DOCTYPE html>，然后是 <html> 包装一个 <head> 和一个 <body>。按原样复制，并在 body 中放入你自己的文字。现在不需要记住它；你会打字足够多次使它自然地坚持下去。 head 与 body 中放什么
<html> 内的两个盒子有不同的作用。<head> 保存浏览器需要知道但访问者不在页面上阅读的东西。<body> 保存访问者确实看到的所有内容。
<head>
<title>My recipe notes</title>
</head>
<body>
<h1>Banana bread</h1>
<p>Mix, pour, bake for an hour.</p>
</body><title> 位于 head 中，它是页面的名称：它显示在浏览器标签中，而不是在页面中间。标题和段落位于 body 中，所以它们出现在页面本身上。一个简单的开始规则：如果访问者应该阅读它，它就放在 body 中。
<title> 位于 head 中并命名浏览器标签；你的标题和段落位于 body 中，人们在那里阅读它们。如果访问者应该看到它，它就放在 body 中。这个问题几乎排序了所有内容。 字符集和视口
另外两行几乎在每个页面的 head 中。你可以按原样复制它们：
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first page</title>
</head>第一行告诉浏览器如何读取你的文本，这样带重音的字母、花体引号和表情符号就能正确出现，而不是变成奇怪的符号。第二行告诉浏览器将页面适应屏幕宽度，这就是使其在手机上看起来合理而不是桌面页面的微小缩放版本的原因。你现在不需要理解每个单词。把两者都放在 head 的顶部，你的页面就会正常工作。
保存和打开 .html 文件
HTML 页面是一个纯文本文件，所以你可以在任何文本编辑器中创建一个。唯一重要的事情是名称：保存它以 .html 结尾。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>保存为 index.html。然后在你的计算机上找到该文件并双击它：它在你的浏览器中打开并显示你的标题和段落。没有服务器要启动，也没有什么要安装。.html 结尾是告诉你的计算机以网页而不是代码墙打开它的信号。改变一个单词，保存，并刷新浏览器标签以查看更新。
.html 结尾的文本文件。保存你的为 index.html，双击它，浏览器立即打开它，完全不用设置。要查看更改，保存文件并刷新标签。那个保存和刷新循环是构建页面的整个节奏。