一、HTML：超文本标记语言
什么是“超文本”？
超文本（HyperText）的核心是“链接”。传统文本是线性的（像一本书，一页接一页），而超文本通过可点击的链接，让信息能够非线性地相互连接，形成一个信息网络。这正是万维网（Web）的基础——网页之间通过超链接跳转，创造出一个无限延展的知识空间。
什么是“标记语言”？
标记语言（Markup Language）不是编程语言，而是一种用标签来描述内容结构和语义的系统。想象一下阅读纸质书时用荧光笔和高亮贴纸做笔记：红色标签标出重点，蓝色标签标出疑问，绿色标签标出例子。HTML就是用电子标签给内容做类似标注。
HTML = 超文本 + 标记语言
HTML（HyperText Markup Language）就是用一套标准化的标签系统，来创建可以互相链接的文档。它不关心内容“看起来”怎么样（那是CSS的工作），只关心内容“是什么”以及“如何组织”。
<!-- HTML示例：描述内容是什么 --> <h1>这是主标题</h1> <!-- 标记为一级标题 --> <p>这是一个段落。</p> <!-- 标记为段落 --> <a href="page2.html">点击这里</a> <!-- 标记为超链接 --> <img src="photo.jpg" alt="一张图片"> <!-- 标记为图像 -->二、CSS：层叠样式表
CSS是什么？
如果HTML是网页的骨架和内容，CSS就是网页的皮肤和服装。CSS（Cascading Style Sheets）专门负责网页的视觉表现和布局。
核心特点：
分离内容与样式：HTML只管结构，CSS只管外观，各司其职
层叠性：多条样式规则可以应用到同一元素，按特定优先级生效
继承性：某些样式属性会从父元素传递给子元素
CSS如何工作？
/* 选择器 { 属性: 值; } */ h1 { color: blue; /* 文字颜色 */ font-size: 32px; /* 字体大小 */ text-align: center; /* 对齐方式 */ } p { line-height: 1.6; /* 行高 */ margin-bottom: 20px; /* 底部外边距 */ }CSS通过选择器精确选中HTML元素，然后用属性-值对来定义这些元素的外观。这种分离设计让网页维护变得简单——改颜色不需要动HTML，只需修改CSS文件。
三、MDN：前端开发者的官方宝典
MDN是什么？
MDN（Mozilla Developer Network）是前端领域最权威、最全面的开放网络文档资源。由Mozilla基金会维护，但内容覆盖所有现代浏览器技术。
为什么MDN如此重要？
权威准确：文档由各浏览器厂商工程师和领域专家共同维护
全面详尽：每个API、属性、方法都有详细说明和示例
实时更新：紧跟最新Web标准和技术发展
开发者友好：清晰的兼容性表格、生动的代码示例、互动演示
如何使用MDN？
查语法：忘记某个HTML标签或CSS属性时，直接搜索“MDN + 关键词”
看兼容性：了解某个特性在不同浏览器的支持情况
学新特性：跟进最新的Web API和CSS功能
找示例：复制可运行的代码片段快速上手
访问地址：developer.mozilla.org
四、HTML的语法特点
1. 基于标签的语法结构
HTML使用尖括号<>定义标签，通常成对出现：
<开始标签>内容</结束标签> <!-- 例如： --> <p>这是一个段落</p> <strong>强调文本</strong>2. 标签嵌套与树状结构
HTML元素可以相互嵌套，形成清晰的父子关系和树状结构：
<!-- 正确的嵌套 --> <div> <h2>章节标题</h2> <p>段落文本</p> </div> <!-- 错误的嵌套（不符合逻辑） --> <p>文本 <div>这里不应该有div</div> 继续</p>这种嵌套结构形成了DOM（文档对象模型）树，是JavaScript操作网页的基础。
3. 元素的三种类型
双标签元素：有开始标签和结束标签，包含内容
<p>内容</p> <div>内容</div>单标签元素：自闭合，不包含文本内容
<img src="image.jpg" alt="图片"> <br> <!-- 换行 --> <input type="text">空元素：某些元素理论上可以有内容，但实践中通常为空
<script></script> <!-- 通常包含JS代码，但也可以为空 -->4. 不区分大小写（但推荐小写）
浏览器能识别大写或小写标签，但行业标准约定全部使用小写：
<!-- 可行但不推荐 --> <DIV CLASS="container">内容</DIV> <!-- 推荐写法 --> <div class="container">内容</div>5. 容错性较强
浏览器会尝试修复一些语法错误（如未闭合的标签），但不应依赖此特性：
<!-- 浏览器会尝试修复 --> <p>第一个段落 <p>第二个段落 <!-- 浏览器会自动闭合第一个<p> --> <!-- 但仍应写正确的代码 --> <p>第一个段落</p> <p>第二个段落</p>HTML的语法设计充分体现了它的使命：简单直观地标记内容，而不是控制外观。这种专注让HTML保持了长久的生命力和广泛的适用性，而将样式和交互的复杂性交给了CSS和JavaScript。
记住，好的HTML代码应该是语义清晰、结构合理、便于访问的。当你编写HTML时，不妨问问自己：如果不看CSS样式，这段代码的结构和含义是否依然清晰？如果是，那么你就掌握了HTML的精髓。
