超文本标记语言和层叠样式表简介

在开发网络时，理解超文本标记语言 (HTML) 和层叠样式表 (CSS) 之间的联系至关重要。HTML 构成了网站的框架和内容，而 CSS 变换 内容。当您在设计师画布上制作/构建时，Webflow 会创建此代码。

在此课程中，您将发现：

1. 浏览器中代码渲染的过程
2. 如何检查网站代码
3. HTML 和 CSS
4. 创建设计，同时 Webflow 为您生成整洁的代码

浏览器中的渲染过程

在浏览网站时，您的浏览器会解释代码以在您的屏幕上显示网站的内容和结构。

探索网站代码

您可以通过检查后台来深入了解网站的代码。大多数浏览器都允许您检查和临时编辑源代码。

要在 Chrome 上检查网站的代码，您有两种选择：

• 右键单击并选择 检查 从上下文菜单
• 按 控制 + 转移 + 我 （在 Windows 上）或 命令 + 选项 + 我 （在 Mac 上）

您可以修改检查器中的代码，以暂时更改浏览器中显示的内容。这些更改是本地的（即仅限于 你的 浏览器）并会在刷新页面时消失，其他网站访问者将看不到。

HTML 和 CSS

HTML 定义网站的内容和结构，而 CSS 决定内容的外观。将网站想象成一个住所：HTML 代表结构和基础，而 CSS 代表配色方案。

超文本标记语言 (HTML)

HTML 控制网站的内容并告知浏览器有关页面元素的信息，包括标题、段落、链接和图像。

过去，网页设计师必须使用内联样式逐行设置 HTML 内容的样式，这给更新网站整体样式（如字体系列或大小）带来了挑战。不过，现在可以使用 CSS。

层叠样式表 (CSS)

CSS 管理网站内容的外观（例如颜色、边框、大小、定位、排版等）。它将以前内联应用的样式信息整合到单独的样式 document 中，从而可以通过类进行分组样式设置。对 CSS 文件中的类或 HTML 标签所做的更改将反映在任何相关元素上。

挑战：代码复杂性不断增加

在早期的互联网时代，设计师专注于基本的标签和属性。随着技术的进步，互联网的复杂性不断增加，随之而来的是个性化的在线体验。

适应这些变化需要持续学习。随着网页设计和开发可能性的不断扩大，幕后情况也变得更加复杂。

如今，Web 开发人员使用多种语言和工具（例如 HTML、CSS、JS、Java、代码库、GitHub 等版本控制），同时解决各种问题，例如浏览器不一致、设备变化、性能增强、SEO 等。这个不断扩展的列表有时会使 Web 开发变得令人生畏，但这正是 Webflow 介入的地方。

设计概念，同时 Webflow 实现整洁编码的自动化

了解 HTML 和 CSS 原则至关重要，因为它们构成了网页设计的核心框架。不过，多亏了 Webflow，手动 HTML 和 CSS 编码已成为过去。

Webflow 使网页设计师和开发人员能够更有效地创建网站，方法是在 Webflow 画布上操作内容，直接影响网站的生产就绪代码（HTML 和 CSS）。了解有关在 Webflow Designer 中进行设计的更多信息。