1. 文档声明 <!DOCTYPE html>
是什么？：这是HTML文档的第一行代码。它不是HTML标签，而是一个给浏览器的“指令”或“说明”。
有什么用？：它告诉浏览器，“请用最新的、标准的HTML5规则来解析和显示我这个网页”。如果没有它，浏览器可能会进入一种叫“怪异模式”的状态，用一些旧的、不标准的规则来解析你的页面，导致你的网页样式和布局出现各种奇怪的错误。
怎么写？：非常简单，就一行：
<!DOCTYPE html>。记住它，并在每个HTML文件的开头写上它就对了。
2. <html> 标签和 lang 属性
<html>元素：这是整个HTML文档的根容器，所有其他元素（除了文档声明）都必须放在它的里面。
它标志着HTML代码的开始和结束。
lang属性：它是
<html>标签的一个属性，用来声明网页的主要语言。有什么用？：
无障碍访问：帮助屏幕阅读器为视障用户选择正确的发音规则。
搜索引擎优化：帮助搜索引擎识别语言，以便在相应语言的搜索结果中更好地展示。
怎么写？：
常见的值：
en（英语），en-US（美式英语），ja（日语）等。
3. <head> 元素和网页编码 <meta charset>
<head>元素：这是一个容器，里面包含了所有关于网页本身的元信息（meta data）。这里的内容不会直接显示在网页正文中。
它就像是网页的“身份证”和“说明书”。
<head>里常见的设置：<meta charset="UTF-8">：这是极其重要的一条！ 它定义了网页的字符编码。为什么重要？：如果不设置，浏览器可能无法正确显示中文，导致出现乱码（比如
ææ¯这种）。UTF-8是一种包含了几乎所有字符的编码，一定要用它。
<title>：定义网页的标题，会显示在浏览器的标签页上。<meta name="viewport" ...>：用于移动端适配，让网页在手机上好用。<meta name="description" ...>：网页的描述，搜索引擎可能会在搜索结果中显示它。<link>：最常用于引入外部CSS文件，给网页添加样式。<style>：用于在HTML文件内部写CSS样式。<script>：用于引入或编写JavaScript代码。
4. <body> 元素
是什么？：
<body>元素包含了所有你希望在浏览器窗口中显示的内容。我们写的文本、图片、链接、视频等，全都放在这里面。和
<head>的关系：可以把一个网页想象成一个人。<head>是这个人的大脑、身份证信息（别人看不见）。<body>是这个人的身体、衣服、外貌（大家能直接看到的部分）。
5. 常用元素及常见属性
| 元素 | 说明 | 常见属性 | 示例 |
|---|---|---|---|
<p> | 段落。用于表示一段文字。 | (暂无特别常见的独有属性) | <p>这是一个段落。</p> |
<h1> - <h6> | 标题。h1级别最高（最大），h6级别最低（最小）。 | (暂无特别常见的独有属性) | <h1>主标题</h1><h2>二级标题</h2> |
<img> | 图片。它是一个空元素（单标签），不需要闭合标签。 | src：必填，图片的路径。 alt：必填，图片无法显示时的替代文本。对无障碍和SEO很重要。 width/height：宽和高。 | <img src="cat.jpg" alt="一只可爱的猫"> |
<a> | 超链接。用于跳转到其他页面或位置。 | href：必填，指定要跳转到的URL。 target：规定如何打开链接。_blank表示在新标签页打开。 | <a href="https://www.baidu.com" target="_blank">去百度</a> |
<iframe> | 内联框架。用于在当前网页中“嵌入”另一个网页。 | src：要嵌入的网页URL。 width/height：框架的宽和高。 frameborder：是否显示边框（通常用CSS代替）。 | <iframe src="https://map.baidu.com" width="400"></iframe> |
<div> | ** division（分区）**。一个通用的块级容器，本身无特殊含义。主要用于CSS布局和样式化。 | (通常与全局属性如class, id配合使用) | <div class="header">这是头部</div> |
<span> | 范围。一个通用的行内容器，本身无特殊含义。用于对一小段文字进行样式化或操作。 | (通常与全局属性如class, id配合使用) | <p>这是一段<span class="red">红色</span>的文字。</p> |
6. 浏览器是怎么区分 h1 到 h6 的？（怎么呈现）
浏览器内置了一个默认的样式表（User Agent Stylesheet）。这个样式表预先为 h1 到 h6 定义了不同的样式规则，主要是：
字体大小（font-size）：
h1最大，h6最小。字体粗细（font-weight）：通常是加粗的（
bold）。外边距（margin）：标题上下会有一定的空白间距，使其与周围内容分开。
这些默认样式可以被CSS覆盖。你可以用CSS把 h6 的样式改得比 h1 还大。但从语义上讲，h1 始终应该代表最重要的标题。
7. 可替换元素
定义：其外观和尺寸由外部资源决定的元素，而不是由HTML文档本身的内容决定。
通俗理解：浏览器需要加载一个“外部文件”才能知道这个元素长什么样。
常见例子：
<img>：它的显示取决于src属性指向的图片文件。<iframe>：它的内容取决于src属性指向的网页。<video>,<audio>,<input type="image">等。
不可替换元素：像
<div>、<p>、<span>这些，它们的内容和外观完全由HTML和CSS决定。
8. 绝对路径和相对路径
这是在 src 或 href 属性中指定资源位置的两种方式。
绝对路径：从根目录开始的完整路径。
完整的URL：
https://www.example.com/images/pic.jpg从网站根目录开始：
/images/pic.jpg（假设你的网站域名是http://my-site.com，那么它就代表http://my-site.com/images/pic.jpg）
相对路径：从当前HTML文件所在的位置开始找。
pic.jpg：图片和HTML文件在同一个文件夹里。images/pic.jpg：图片在HTML文件所在文件夹的images子文件夹里。../pic.jpg：图片在HTML文件所在文件夹的上一级文件夹里。../代表“上一级目录”。
如何选择？ 链接到外部网站（如百度）必须用绝对路径。自己网站内部的资源，通常用相对路径，这样代码搬家（换域名）也不会出错。
9. a 元素本页面的锚点跳转
也叫“锚链接”，用于在同一个页面内跳转到指定的位置。
两步走：
定义锚点（目标点）：给目标元素的
id属性起一个名字。<h2 id="chapter3">第三章</h2>创建链接：在
a标签的href属性值前加上#，后面跟上锚点的名字。<a href="#chapter3">跳转到第三章</a>
点击链接后，页面会自动滚动到
id="chapter3"的那个h2元素所在的位置。
10. iframe 和 a 元素的配合使用 (parent 和 top)
这是一个经典的组合用法：在一个iframe中点击链接，让链接页面在父窗口（而不是iframe内部）打开。
target属性的特殊值：target="_parent"：在直接父窗口中打开。如果这个iframe本身又被嵌套了，它就只跳出第一层。target="_top"：在最顶层的窗口中打开。无论嵌套了多少层iframe，它都会跳出所有框架，在整个浏览器窗口打开。
示例：
在父窗口打开百度 在顶层窗口打开百度
12. “不常用”但有用的语义化元素
说它们“不常用”是指在现代CSS布局中，它们不再是首选，但它们有明确的语义，能让代码含义更清晰。
<strong>：表示重要性严重的文本。浏览器默认渲染为加粗。（语义是重点，不是样式）<em>：表示强调的文本。浏览器默认渲染为斜体。（语义是重点，不是样式）<code>：表示一小段计算机代码。浏览器默认用等宽字体显示。显示多行代码通常用<pre><code>...</code></pre>。<br>：换行符。它是一个空元素。慎用！通常段落应该用<p>，间距应该用CSS的margin来控制。<br>只应在确实需要换行但又不新起一段时使用（比如写诗或地址）。
13. 常见的全局属性
这些属性可以用于几乎所有的HTML元素。
id：给元素一个全页面唯一的标识符。像一个人的身份证号。class：给元素一个或多个类名。像给一个人打上标签（如“男生”、“大学生”）。多个元素可以共享同一个class，一个元素也可以有多个class（用空格分隔）。style：用于直接给元素添加CSS样式（内联样式）。不推荐大量使用，应该优先使用外部CSS文件。title：提供元素的额外提示信息。当鼠标悬停在元素上时，会显示一个小提示框。
14. HTML 字符实体
HTML中有些字符是保留字，比如 < 和 >，浏览器会把它们当成标签的开始和结束。如果你想在页面上显示它们，就必须用字符实体。
是什么？：一种用来表示特殊字符的代码。
格式：以
&开头，以;结尾。常见字符实体：
<：表示<(less than)>：表示>(greater than)&：表示&(ampersand) ：表示一个不换行空格（non-breaking space）。浏览器不会在这个空格处换行。©：表示版权符号 ©
![P3959 [NOIP 2017 提高组] 宝藏 题解](http://pic.xiahunao.cn/P3959 [NOIP 2017 提高组] 宝藏 题解)
