1. 标记语言
是什么？ 标记语言不是"编程"语言，它不会像 Python 或 JavaScript 那样去执行逻辑（比如循环、判断）。它更像是一种**"标注"语言**。
怎么理解？ 想象一下你在阅读一本书：
-
你拿一支笔，圈出了标题。
-
在重要的句子下面画线。
-
把一段文字用括号括起来，表示这是一个引用的部分。
你所做的这些"圈、画线、加括号"就是"标记"。你是在告诉未来的自己或其他读者："这部分内容是标题，那部分是重点"。
在电脑世界中 ，标记语言（如 HTML）做的就是同样的事。我们用一套预先定义好的"标记"（在 HTML 里也叫"标签"），来告诉浏览器："这是一段文字"、"那是一张图片"、"这里是个标题"，从而让浏览器能正确地组织和呈现网页内容。
常见的标记语言有：HTML （用于网页）、XML （用于数据传输和存储）、Markdown（用于简单写作）等。
2. 超文本
"超" 这个字在这里意味着"超出"或"超越"。
"超文本" 就是指超越了普通文本限制的文本 。普通文本就像一本纸质书，你只能一页一页按顺序读。而超文本最大的特点就是包含了超链接。
核心是链接： 通过点击超链接，你可以：
-
跳转到同一网站的另一页。
-
跳转到完全不同的另一个网站。
-
跳转到同一页面的另一个位置。
-
打开一个图片或视频等资源。
正是这种"链接"能力，将全世界的文档（网页）连接成了一个巨大的、互相关联的网络，这就是我们所说的 万维网。所以，HTML（超文本标记语言）就是用来创建这种"超文本"文档的语言。
3. HTML 结构和特点
一个最基础、完整的 HTML 文档结构如下：
<!DOCTYPE html> <!-- 1. 文档类型声明 -->
<html lang="zh-CN"> <!-- 2. 根元素，包裹所有内容 -->
<head> <!-- 3. 头部：包含页面的元信息（不会直接显示在页面上） -->
<meta charset="UTF-8"> <!-- 定义字符编码，防止中文乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title> <!-- 浏览器标签页上显示的标题 -->
</head>
<body> <!-- 4. 身体：包含所有会在页面上显示的内容 -->
<h1>这是一个大标题</h1>
<p>这是一个段落。</p>
<img src="image.jpg" alt="一张图片">
</body>
</html>结构拆解：
-
<!DOCTYPE html>：告诉浏览器"请用最新的 HTML5 标准来解析这个文档"。 -
<html>：整个页面的根元素，所有其他元素都包裹在它里面。 -
<head>：大脑。包含了对页面的设置，如标题、字符编码、引用的CSS/JS文件等。这里的内容用户看不见。 -
<body>：身体。所有你能在浏览器里看到的内容，都在这里。
特点：
-
标签包围 ：内容被
<tag>和</tag>包围。 -
树状结构：元素之间层层嵌套，像一棵家族树（DOM树）。
-
平台无关：只要有浏览器，无论在什么操作系统上都能查看。
-
易于学习：标签直观，容易理解和上手。
4. 什么是元素
在 HTML 中，元素 是构建网页的基石。我们平时说的"标签"通常就是指元素。
一个元素通常由三部分组成：开始标签 、内容 、结束标签。
<开始标签> + 内容 + </结束标签> = 一个完整的元素
例如：
-
<p>这是一个段落</p>：这是一个段落元素。 -
<h1>我是标题</h1>：这是一个一级标题元素。
也有一些元素是空元素 ，它们没有内容，因此也不需要结束标签。例如 <img>（图片）、<br>（换行）。
5. 元素的属性（应该包括什么）
属性 为元素提供了额外的信息，这些信息不会显示在内容中，但会改变元素的行为或提供关于元素的元数据。
属性总是写在开始标签里 ，由属性名 和属性值 组成，格式为：属性名="属性值"。
一个元素应该包括什么属性？ 这完全取决于这个元素本身和你想让它做什么。最常见的属性是 class, id, style, src, href 等。
例子：
<!--
<a> 是超链接元素。
href 是属性名，"https://www.example.com" 是属性值。
这个属性告诉浏览器：这个链接要跳转到哪个网址。
-->
<a href="https://www.example.com">点击访问示例网站</a>
<!--
<img> 是图片元素。
src 属性告诉浏览器图片文件的位置。
alt 属性提供图片无法显示时的替代文本（对无障碍访问非常重要）。
-->
<img src="cat.jpg" alt="一只可爱的猫咪">6. 元素属性的分类
属性可以大致分为以下几类：
-
全局属性 ：几乎所有HTML元素都可以使用的属性。
-
class：为元素定义一个或多个类名（用于CSS和JS）。 -
id：定义元素的唯一标识符（全页面唯一）。 -
style：直接给元素添加内联CSS样式。 -
title：提供元素的额外提示信息（鼠标悬停时显示）。
-
-
专有属性 ：特定元素才拥有的属性，用来实现该元素特有的功能。
-
<a>的href：定义链接地址。 -
<img>的src和alt：定义图片源和替代文本。 -
<input>的type：定义输入框类型（文本、密码、按钮等）。
-
7. 元素的嵌套
嵌套 就是指把一个或多个元素放在另一个元素的内部。
规则：
-
必须正确嵌套。先开始的后结束，后开始的先结束，就像套娃一样。
-
错误嵌套 ：
<p>我是<strong>粗体</p></strong>（<strong>的开始在<p>之后，却结束在<p>之前，这是错误的） -
正确嵌套 ：
<p>我是<strong>粗体</strong></p>（<strong>完全被包裹在<p>内部）
例子：
<div>
<h1>文章标题</h1>
<p>这是一段文字，里面有一个<strong>非常重要的</strong>词。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>在这个例子中，<h1>, <p>, <ul> 是 <div> 的子元素。<strong> 是 <p> 的子元素。<li> 是 <ul> 的子元素。
8. HTML注释
注释是写给人（开发者）看的代码说明，浏览器会完全忽略它们。
语法： <!-- 这里是注释内容 -->
作用：
-
解释代码的功能，方便自己和他人日后阅读。
-
临时"注释掉"一段代码，使其不生效，用于调试。
-
在代码中做标记。
例子：
<!-- 这是导航栏的开始 -->
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<!-- <li><a href="#contact">联系我们</a></li> 这个链接暂时不上线，先注释掉 -->
</ul>
</nav>
<!-- 这是导航栏的结束 -->9. URL 的规则和 URI 的区别
这是一个容易混淆的概念，但对于前端非常重要。
URI
-
全称 ：Uniform Resource Identifier (统一资源标识符)
-
是什么 ：是一个用于标识某一互联网资源的字符串。它是一个更 broad（宽泛）的概念。
-
类比 ：你的身份证号。它的作用是唯一地"标识"你这个人。
URL
-
全称 ：Uniform Resource Locator (统一资源定位符)
-
是什么 ：是 URI 最常见的一种形式。它不仅标识了资源，还提供了找到该资源的"地址"和"方式"。
-
类比 ：你的家庭住址。它不仅标识了你的家，还提供了如何找到你家的具体位置和路径（哪个城市、哪条路、门牌号是多少）。
结论：
-
所有的 URL 都是 URI，但并非所有的 URI 都是 URL。
-
还有一个概念叫 URN（统一资源名称），比如一本书的 ISBN 号，它标识了资源但不说去哪找它。它也是 URI 的一种。
-
在前端日常开发中，我们几乎总是在和 URL 打交道 （比如
href="...",src="..."），所以你可以暂时把它们当作一回事，但理解细微差别有助于你更专业。
URL 的规则（组成部分）： 一个标准的 URL 通常包含以下几个部分： scheme://domain:port/path?query_string#fragment
-
协议 ：
https://(告诉浏览器使用何种协议通信) -
域名 ：
www.example.com(网站服务器的地址) -
端口 ：
:443(通常省略，HTTP默认80，HTTPS默认443) -
路径 ：
/products/index.html(资源在服务器上的具体位置) -
查询参数 ：
?category=shoes&color=red(提供给服务器的额外参数) -
锚点 ：
#section2(页面内的一个具体位置) -
