MDN Web 文档教程

1. 简介

MDN Web 文档（Mozilla Developer Network Web Documentation）是一个全面且权威的资源，旨在帮助开发者理解和掌握 Web 技术，包括 HTML、CSS、JavaScript 等。本教程将引导你如何有效地使用 MDN Web 文档，并结合实际案例进行学习。

2. 开发环境搭建

2.1 文本编辑器

选择一个适合你的文本编辑器是开发的第一步。推荐使用以下编辑器：

• Visual Studio Code (VS Code): 功能强大且扩展丰富。
• Sublime Text: 轻量级且快速。
• Atom: 由 GitHub 开发，社区活跃。

2.2 浏览器

选择一个现代浏览器，如：

• Google Chrome: 开发者工具强大。
• Mozilla Firefox: 同样拥有强大的开发者工具。
• Microsoft Edge: 基于 Chromium 内核，性能优越。

3. HTML 文档结构

3.1 基本结构

一个基本的 HTML 文档结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

3.2 常用标签和属性

• <h1> 到 <h6>: 标题标签。
• <p>: 段落标签。
• <a>: 链接标签，常用属性 href。
• <img>: 图片标签，常用属性 src 和 alt。

4. HTML5 新特性概览

4.1 语义化标签

HTML5 引入了许多语义化标签，如：

• <header>: 页眉。
• <nav>: 导航栏。
• <article>: 文章。
• <section>: 章节。
• <footer>: 页脚。

4.2 表单和输入元素

HTML5 新增了许多表单元素和属性，如：

• <input type="email">: 电子邮件输入框。
• <input type="date">: 日期选择器。
• <input type="range">: 滑动条。

5. CSS 基础

5.1 选择器

• 元素选择器: p { color: red; }
• 类选择器: .my-class { font-size: 16px; }
• ID 选择器: #my-id { background-color: yellow; }

5.2 属性

• color: 文本颜色。
• font-size: 字体大小。
• background-color: 背景颜色。

5.3 值

• 颜色值: red, #ff0000, rgb(255, 0, 0)
• 长度值: 16px, 1em, 50%

6. 实践练习

6.1 创建一个简单的网页

1. 打开你的文本编辑器，创建一个新的 HTML 文件。
2. 输入基本的 HTML 结构。
3. 添加一些内容，如标题、段落和图片。
4. 使用 CSS 为页面添加样式。

6.2 使用 MDN Web 文档

1. 访问 MDN Web 文档。
2. 搜索你感兴趣的主题，如 CSS Flexbox。
3. 阅读文档并尝试应用到你的项目中。

7. 总结

通过本教程，你已经了解了如何使用 MDN Web 文档来学习和实践 Web 开发。继续探索和实践，你将能够掌握更多的 Web 技术。

8. 下一步

• 学习 JavaScript 基础。
• 探索 CSS 框架如 Bootstrap 和 Tailwind。
• 了解版本控制工具 Git 和协作平台 GitHub。

希望本教程对你有所帮助，祝你在 Web 开发的道路上越走越远！