1- HTML 和 CSS 入门教程：构建你的第一个网页

大家好！欢迎来到前端开发的世界！本教程将带你了解前端开发的基础知识，特别是 HTML 和 CSS，它们是构建网页的基石。

1.1- 什么是前端？

简单来说，前端就是用户可以直接与之交互的界面。无论是手机、电脑、平板上的界面，还是网页、PC 软件、手机 APP、小程序，甚至是游戏界面，只要是用户能直接看到并操作的部分，都可以称为前端。

1.2- 前端与后端的区别

• 前端 (Frontend)：负责呈现用户交互的界面。用户看到的一切，以及与页面的交互，都属于前端的范畴。
• 后端 (Backend)：负责处理前端的请求，执行业务逻辑，并与数据库进行交互，进行数据的查询、修改、增加或删除。后端通常是用户看不到的，它在服务器端运行。

前端和后端协同工作，共同构成了一个完整的网站或应用程序。

1.3- HTML：超文本标记语言 (HyperText Markup Language)

1.3.1- HTML 是什么？

HTML 是一种用于描述网页结构的语言。它定义了网页中有什么内容，例如文字、图片、视频等。

1.3.2- 超文本 (Hypertext)

超文本指的是比普通文本更强大的文本，它可以通过超链接（Hyperlink）跳转到其他文本或资源。例如，你点击一个链接跳转到另一个网页，这就是超文本的应用。

1.3.3- 标记 (Markup)

标记是指给内容添加标签（Tag），用来表示这段内容是什么。例如，我们可以给一段文字添加标题标签，使其成为标题；也可以给一段文字添加链接标签，使其成为一个超链接。

1.3.3.1- 举例：Markdown 中的标记

在 Markdown 中，# 表示一级标题，## 表示二级标题。这里的 # 和 ## 就是标记。

1.3.3.2- 举例：HTML 中的标记

在 HTML 中，我们使用 <h1> 标签来标记一级标题，使用 <h2> 标签来标记二级标题。例如：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>

1.3.4- HTML 的作用

HTML 的主要作用是定义网页的结构和内容。例如，一个网页可能包含标题、段落、图片、列表、表格等等，这些内容都可以通过 HTML 来定义。

1.3.5- W3C 标准

HTML 是由万维网联盟 (World Wide Web Consortium, W3C) 制定的语言标准。W3C 是一个非盈利性组织，制定了许多互联网领域的标准。只要你的 HTML 代码符合 W3C 标准，就可以被浏览器正确解析并渲染。

1.4- CSS：层叠样式表 (Cascading Style Sheets)

1.4.1- CSS 是什么？

CSS 也是由 W3C 制定的语言标准，用于定义网页内容的外观和样式。简单来说，CSS 负责网页的 " 美化 " 工作。

1.4.2- CSS 的作用

CSS 控制网页元素的外观和布局，例如：

• 文字的颜色、字体、大小
• 元素的背景颜色、边框
• 元素的位置、大小、排列方式

1.4.3- HTML 与 CSS 的关系

如果把 HTML 比作一个人的骨架和器官，那么 CSS 就是这个人的皮肤、发型和穿着。HTML 定义了网页的结构，而 CSS 则负责美化这个结构。

1.4.4- 没有 CSS 的网页

没有 CSS 的网页就像没有化妆的素颜，虽然内容都在，但是缺乏美感和布局。例如，文字可能都是默认的黑色，元素都堆叠在一起，没有合理的排版。

1.5- 总结

• HTML 定义网页的内容和结构，就像一个房子的框架。
• CSS 控制网页的样式和布局，就像房子的装修。

学习 HTML 和 CSS 是前端开发的基础。掌握了这两门语言，你就能构建出属于自己的网页！

1.6- 课后思考

尝试思考一下，你平时浏览的网页中，哪些部分是由 HTML 定义的，哪些部分是由 CSS 控制的？

提示: 你可以使用浏览器的开发者工具 (通常按 F12 键打开) 来查看网页的 HTML 和 CSS 代码。

希望这个教程能够帮助你入门 HTML 和 CSS！ 祝你学习愉快！