「MDN web 入门」学习笔记

目录

写在前面

1. MDN 简介

1.1 MDN 的主要特点

1.2 MDN 的主要功能

1.3 MDN 网页开发的指南

2. 安装基础软件

2.1 专业人士工具

2.2 初学者基本工具

3. 设计网站外观

3.1 计划

3.2 绘制草图

3.3 选定素材

3.4 文本

3.5 主题颜色

3.6 图像

3.7 字体

4. 处理文件

4.1 网站文件位置

4.2 文件命名规范

4.3 网站文件结构

4.5 文件路径

5. HTML 基础

5.1 什么是 HTML

5.2 HTML 元素详解

5.3 嵌套元素

5.4 空元素

5.5 HTML 文档详解

5.6 图像

5.7 标记文本

5.8 小结?

6. CSS 基础

6.1 什么是 CSS

6.2 CSS 规则集详解?

6.3 选择多个元素

6.4 不同类型的选择器

6.5 字体和文本

6.6 一切皆盒子

6.7 更改页面颜色

6.8 文档体样式

6.9?定位页面主标题并添加样式

6.10 图像居中

6.11 小结

7. JavaScript 基础

7.1 什么是 JavaScript

7.2 “Hello World!” 示例

7.3?JavaScript 如何修改页面内容

7.4 JavaScript 快速入门

7.5 完善示例网页

7.6 小结

8. 发布网站

8.1 获取主机服务和域名

8.2 使用在线工具

8.3 使用基于 Web 的集成开发环境

8.4 GitHub 发布网站

9. 万维网工作原理

9.1 客户端和服务器

9.2 网络连接

9.3 TCP/IP

9.4 DNS

9.5 HTTP?

9.6 组成文件?

9.7 工作流程?

9.8 解析组成文件的顺序

9.9 客户端访问网页的流程

9.10 浏览器优化访问网页的策略

9.11 浏览器访问网页时可能遇到的错误

10. 总结?

---

写在前面

这篇文章主要参考了MDN的文档教程，但并非完全相同。有些方面是根据我的理解以及面向ChatGPT学习进行整理改动。

在发表这篇博客时，我曾担忧过是否有抄袭之嫌，因为在CSDN上看到不少抄袭的文章。但我学识有限，对于版权这方面的了解甚微。按照我的理解，“MDN Web 文档是免费使用的，且允许我们记录开放 web 平台的资源。”，这也是官方的介绍。

如果这篇文章仅仅作为个人学习笔记来看是没有什么不妥的。这个担忧是基于如果这篇文章的传阅范围很广泛，很有可能造成不必要的争端，所以在此声明。也有可能是多虑了，或许就没有那么多人看。

1. MDN 简介

MDN（Mozilla Developer Network）是 Mozilla 基金会运营的综合性 Web 开发者信息平台。它提供大量关于 Web 开发各个方面的文档、教程、示例和参考，涵盖从 HTML、CSS、JavaScript 等基础知识到更高级的 API、Web 安全、性能优化等内容。

1.1 MDN 的主要特点

• 全面性：涵盖 Web 开发的方方面面，几乎所有与 Web 开发相关的知识都能在 MDN 找到。
• 权威性：由 Mozilla 基金会运营，内容由来自世界各地的 Web 开发专家和社区贡献者共同维护。
• 易用性：界面简洁明了，易于使用。强大的搜索功能可以帮助初学者快速找到所需信息。
• 多语言支持：支持多种语言，方便全球开发者使用。

1.2 MDN 的主要功能

• 文档：提供大量关于 Web 开发各个方面的文档。
• 教程：提供针对不同水平的 Web 开发教程。
• 示例：提供大量代码示例，帮助初学者理解和学习 Web 开发技术。
• 参考：提供各种 Web 开发相关的参考信息。
• 社区：拥有一个活跃的社区，初学者可以在这里与其他开发者交流和学习。

1.3 MDN 网页开发的指南

学习 Web 开发 | MDN (mozilla.org)[这里是图片001]https://developer.mozilla.org/zh-CN/docs/Learn

2. 安装基础软件

2.1 专业人士工具

1. 计算机。

2. 文本编辑器：用于编写代码的工具，如 Visual Studio Code、Sublime Text、Atom、GNU Emacs 或 VIM。这些工具提供了代码高亮显示、自动补全和其他功能，有助于提高编码效率。

3. 网络浏览器：用于测试网站代码和布局的工具。常见的浏览器如 Chrome、Firefox、Safari 和 Edge，可帮助开发者查看网站在不同浏览器中的表现。

4. 图形编辑器：如 GIMP、Figma、Photoshop、Sketch 或 XD，用于创建和编辑网站所需的图像和图形。

5. 版本控制系统：如 Git，用于管理代码版本、协作开发和避免冲突。GitHub 或 GitLab等托管服务也可用于共享代码和资产。

6. FTP 工具：用于管理服务器上的文件，尽管 Git 越来越多地取代了 FTP。常见的 (S)FTP 程序包括 Cyberduck、FileZilla 等。

7. 自动化构建工具：如 Webpack、Grunt 或 Gulp，用于自动化执行重复性任务，如代码压缩和测试运行。

8. 库、框架等：用于加速开发常用功能的工具。库提供现成的功能供使用，而框架则提供完整的系统和自定义语法，帮助开发 Web 应用。

2.2 初学者基本工具

1. 计算机。
2. 文本编辑:Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.? Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.[这里是图片002]https://code.visualstudio.com/
3. 网络浏览器:下载 Firefox 桌面版、移动版或企业版 - Mozilla从桌面版、iOS 版和 Android 版中选取一个，或者让我们通过电子邮件发送给您移动端下载链接。[这里是图片003]https://www.mozilla.org/zh-CN/firefox/

3. 设计网站外观

3.1 计划

• 确定网站目标和受众：明确网站的用途和目标用户，以便设计符合其需求的界面和功能。
• 列出网站功能：规划网站需要包含的功能，例如产品展示、联系方式、博客等。
• 制定网站结构：确定网站的整体布局，包括页面之间的导航和层次结构。

3.2 绘制草图

• 使用简单的图形和文字绘制网站的草图，展现网站的主要功能和布局。
• 可以使用纸笔或在线工具进行绘制，重点关注页面元素的排列和用户体验。

3.3 选定素材

• 选择与网站主题和风格相符的素材，例如图片、视频、图标等。
• 确保素材的版权问题，避免侵权。
• 可以从免费素材网站或付费素材库中选择合适的素材。

3.4 文本

• 撰写简洁易懂的网站文案，清晰地传达网站信息。
• 使用合适的关键词，方便用户搜索和理解。
• 确保文本内容的准确性和原创性。

3.5 主题颜色

• 选择与网站主题和风格相符的主题颜色，并确保颜色搭配和谐。
• 可以使用颜色搭配工具或参考其他网站的设计。
• 主题颜色应与网站的整体风格相一致。

3.6 图像

• 选择高质量的图像，并确保图像尺寸和格式符合网站要求。
• 可以使用图片编辑软件对图像进行调整，例如裁剪、调整亮度和对比度等。
• 图像应与网站内容相关，并能吸引用户的注意力。

3.7 字体

• 选择与网站主题和风格相符的字体，并确保字体清晰易读。
• 可以使用不同的字体来突出标题和正文内容。
• 字体大小和颜色应与网站整体风格相一致。

4. 处理文件

4.1 网站文件位置

1. 对于本地网站，建议将所有相关文件放在一个单独的文件夹中，以便映射出服务器端站点文件结构。这个文件夹可以放在你喜欢的任何地方，但建议将其放在你容易找到的地方，例如桌面、主页文件夹或硬盘根目录下。

2. 选择一个地方来存储你的网站项目。在你选择的地方，创建一个名为 “web-projects”（或类似）的新文件夹，用于存放所有网站项目。

3. 在 “web-projects” 文件夹中，创建另一个文件夹来存放你的第一个网站。你可以将其命名为 “test-site”（或者取一个更有创意的名称）。

4.2 文件命名规范

1. 许多计算机，特别是网络服务器，是区分大小写的。因此，在命名文件时应注意大小写的一致性，以免出现调用错误的情况。

2. 浏览器、网络服务器和编程语言对空格的处理方式不同。建议避免在文件