了解 HTML 是什么以及如何构建网页的基本框架
HTML (HyperText Markup Language，超文本标记语言) 是构建网页的基础语言。它不是编程语言，而是一种标记语言，用于定义网页的结构和内容。
超文本（Hypertext）指的是包含链接的文本，可以通过点击链接跳转到其他页面或位置。这是 HTML 相对于普通文档的核心优势。
| 版本 | 发布时间 | 主要特性 |
|---|---|---|
| HTML 1.0 | 1991年 | 最基本的标签，如标题、段落、链接 |
| HTML 2.0 | 1995年 | 增加了表单、表格等交互元素 |
| HTML 4.01 | 1999年 | 标准化了 CSS 和 JavaScript 的使用 |
| XHTML 1.0 | 2000年 | 更严格的 XML 语法规则 |
| HTML5 | 2014年 | 语义化标签、多媒体支持、本地存储等 |
每个 HTML 文档都有一个标准的结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容写在这里 -->
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
</body>
</html><!DOCTYPE html> 声明告诉浏览器使用 HTML5 标准解析页面。没有这个声明，浏览器可能会使用兼容模式（怪异模式），导致页面显示不一致。
| 标签 | 说明 | 重要性 |
|---|---|---|
| <!DOCTYPE html> | 声明文档类型为 HTML5 | 必需 |
| <html> | HTML 文档的根元素 | 必需 |
| <head> | 包含元数据（如标题、字符集、样式等） | 必需 |
| <meta charset="UTF-8"> | 设置字符编码为 UTF-8 | 重要 |
| <meta name="viewport"> | 设置移动端视口 | 重要 |
| <title> | 定义浏览器标签页上显示的标题 | 必需 |
| <body> | 包含页面的可见内容 | 必需 |
<!DOCTYPE html> 声明<head> 中放置可见内容让我们分析一个真实的网页结构，理解 HTML 在实际项目中的应用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABC 科技公司 - 创新引领未来</title>
<meta name="description" content="ABC 科技公司专注于人工智能和大数据解决方案">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<h1>ABC 科技</h1>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#products">产品</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>欢迎来到 ABC 科技</h2>
<p>我们致力于为企业提供最先进的技术解决方案...</p>
</section>
<section id="products">
<h2>我们的产品</h2>
<article>
<h3>AI 分析平台</h3>
<p>基于深度学习的智能分析系统...</p>
</article>
</section>
</main>
<footer>
<p>© 2024 ABC 科技公司. 保留所有权利.</p>
</footer>
</body>
</html>下面是一个最简单的 HTML 页面示例：
这是一个段落，展示了 HTML 的基本结构。
HTML 使用标签来定义内容的结构和含义。
大多数 HTML 标签都是成对出现的：
<p>这是一个段落</p>
<h1>这是一级标题</h1>有些标签不需要结束标签，称为自闭合标签：
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<img src="image.jpg" alt="图片"> <!-- 图片 -->
<input type="text"> <!-- 输入框 -->
<link rel="stylesheet" href="style.css"> <!-- 样式表 -->标签可以嵌套使用，但必须正确嵌套：
<!-- 正确 ✓ -->
<div>
<p>段落内容</p>
</div>
<!-- 错误 ✗ -->
<div>
<p>段落内容</div>
</p>在浏览器中，你可以右键点击页面，选择"查看网页源代码"来查看当前页面的 HTML 代码。
完成以下练习题，巩固本章知识：
请创建一个包含以下内容的 HTML 页面：
1. HTML 是一种编程语言。
2. <head> 标签中的内容会显示在浏览器窗口中。
3. HTML 标签必须小写。
下面的 HTML 代码有什么问题？
<!DOCTYPE html>
<html>
<head>
<title>测试页面
</head>
<body>
<h1>标题</h2>
<p>段落内容</p>
</body>
</html>
在开始编写 HTML 之前，你需要准备合适的开发工具：
| 编辑器 | 特点 | 适用人群 |
|---|---|---|
| VS Code | 免费、插件丰富、智能提示 | 所有开发者 |
| Sublime Text | 轻量、启动快、多选编辑 | 前端开发者 |
| WebStorm | 功能强大、智能重构 | 专业开发者 |
| Atom | 开源、可定制性强 | 喜欢定制化的开发者 |
index.html