HTML 基础
上一节我们认识了 HTML，这一节开始动真格：从一个完整的 HTML 文档框架出发，学习文档类型声明、html/head/body 三大区域、标签的写法规则，以及换行空格在浏览器中的"折叠"现象。掌握这些基础，之后的每一个页面都会写得又快又规范。
完整的 HTML 文档结构
一个规范的 HTML 页面长这样，四大部件缺一不可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>页面正文从这里开始</h1>
</body>
</html>
在浏览器中显示为：标签页上出现"页面标题"，正文区显示一行大标题。head 里的内容不会显示在页面上，body 里的内容才是用户看到的正文。
文档类型声明 DOCTYPE
<!DOCTYPE html> 必须写在文档第一行，它告诉浏览器"请按 HTML5 标准来解析我"。别小看这一行：漏掉它，浏览器可能进入"怪异模式"，导致同样的代码在不同浏览器里显示不一致，这是新手最容易踩的坑。
html、head、body 三大区域
<html>：整个文档的根元素，所有内容都装在里面。<head>：放"关于页面的信息"，如标题、编码、样式引用。<body>：放页面真正显示的内容。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>这里写用户能看到的全部内容</body>
</html>
标签的基本写法
HTML 标签通常成对出现：开始标签 + 内容 + 结束标签，结束标签比开始标签多一个斜杠 /：
<p>我是段落内容</p>
<h1>我是标题</h1>
个别标签是"空标签"，没有内容也没有结束标签，例如换行 <br>。注意标签必须正确嵌套：先开的标签要后关，下面的写法是错的：
<p>错误示范：<b>粗体嵌套</p></b>
正确写法是把 <b> 完整包在 <p> 里面，即 先开后关、层层对应。
换行与空格在浏览器中会被折叠
在 HTML 里，无论你在代码中敲多少个回车或空格，浏览器都只当成一个空格显示。想要换行必须用 <br>，想要多空格可以用 ：
<p>第一行<br>第二行</p>
<p>留出 几个空格</p>
在浏览器中显示为："第一行"与"第二行"分两行显示，第二段文字中间有多个真实空格。
小结
一个 HTML 页面由 DOCTYPE、html、head、body 组成；标签成对出现、必须正确嵌套；浏览器会折叠多余空白。记住这些"看不见的规则"，后面的学习就能少走很多弯路。