Day 02 HTML的基础

1. 文档声明 `<!DOCTYPE html>`

是什么？：这是HTML文档的第一行代码。它不是HTML标签，而是一个给浏览器的"指令"或"说明"。
有什么用？：它告诉浏览器，"请用最新的、标准的HTML5规则来解析和显示我这个网页"。如果没有它，浏览器可能会进入一种叫"怪异模式"的状态，用一些旧的、不标准的规则来解析你的页面，导致你的网页样式和布局出现各种奇怪的错误。
怎么写？ ：非常简单，就一行：<!DOCTYPE html>。记住它，并在每个HTML文件的开头写上它就对了。

2. `<html>` 标签和 `lang` 属性

<html> 元素：
- 这是整个HTML文档的根容器，所有其他元素（除了文档声明）都必须放在它的里面。
- 它标志着HTML代码的开始和结束。
lang 属性：
- 它是 <html> 标签的一个属性，用来声明网页的主要语言。
- 有什么用？：
  1. 无障碍访问：帮助屏幕阅读器为视障用户选择正确的发音规则。
  2. 搜索引擎优化：帮助搜索引擎识别语言，以便在相应语言的搜索结果中更好地展示。
- 怎么写？：
  复制代码
```
<html lang="zh-CN"> 
```
  常见的值：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 元素本页面的锚点跳转

也叫"锚链接"，用于在同一个页面内跳转到指定的位置。

两步走：
1. 定义锚点（目标点） ：给目标元素的 id 属性起一个名字。<h2 id="chapter3">第三章</h2>
2. 创建链接 ：在 a 标签的 href 属性值前加上 #，后面跟上锚点的名字。<a href="#chapter3">跳转到第三章</a>
点击链接后 ，页面会自动滚动到 id="chapter3" 的那个 h2 元素所在的位置。

10. iframe 和 a 元素的配合使用 (parent 和 top)

这是一个经典的组合用法：在一个iframe中点击链接，让链接页面在父窗口（而不是iframe内部）打开。

target 属性的特殊值：
- target="_parent"：在直接父窗口中打开。如果这个iframe本身又被嵌套了，它就只跳出第一层。
- target="_top"：在最顶层的窗口中打开。无论嵌套了多少层iframe，它都会跳出所有框架，在整个浏览器窗口打开。

示例：

复制代码

<!-- 这个链接在iframe中 -->
<a href="https://www.baidu.com" target="_parent">在父窗口打开百度</a>
<a href="https://www.baidu.com" target="_top">在顶层窗口打开百度</a>

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）。浏览器不会在这个空格处换行。
- ©：表示版权符号 ©