HTML与CSS通过link标签连接，浏览器解析后呈现网页。创建index.html和style.css文件并保存至同目录，HTML中用<link>引入CSS，双击HTML文件在浏览器中打开，可见标题居中蓝色、段落绿色18px，说明样式已生效。使用开发者工具可调试，配合Live Server实现热更新，提升开发效率。
HTML 和 CSS 是构建网页的两大基础技术。HTML 负责页面的结构，CSS 负责页面的样式和外观。它们配合使用，才能呈现出美观、结构清晰的网页。下面详细介绍如何运行 HTML 与 CSS，以及它们是如何协同工作的。
1. 创建基本的 HTML 文件
首先需要创建一个 HTML 文件，作为网页的骨架。
打开任意文本编辑器（如 VS Code、Notepad++ 或记事本），输入以下代码：
<!DOCTYPE html><html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎学习 HTML 和 CSS</h1>
<p class="intro">这是一个段落示例。</p>
</body>
</html>
将文件保存为 index.html，注意选择“所有文件”类型，编码为 UTF-8。
立即学习“前端免费学习笔记（深入）”；
2. 创建对应的 CSS 文件
CSS 文件用来定义 HTML 元素的样式。新建一个文件，内容如下：
h1 {color: blue;
text-align: center;
}
.intro {
font-size: 18px;
color: green;
}
将该文件保存为 style.css，并确保它与 index.html 在同一个文件夹中。
3. 连接 HTML 与 CSS
在 HTML 的 <head> 部分，使用 <link> 标签引入 CSS 文件：
<link rel="stylesheet" href="style.css">
这行代码告诉浏览器：加载当前页面时，同时加载 style.css 文件中的样式规则。
确保 href 中的路径正确。如果 CSS 文件在子文件夹中（如 css/style.css），则路径应写为：href="css/style.css"。
4. 在浏览器中运行查看效果
双击打开 index.html 文件，系统会默认用浏览器打开它。
此时你会看到：
- 标题居中且为蓝色
- 段落文字为绿色，字号 18px
这说明 HTML 已成功加载并应用了 CSS 样式。
也可以右键 HTML 文件，选择“在浏览器中打开”，或拖拽到 Chrome、Edge 等浏览器窗口中预览。
5. 实时调试与修改
在浏览器中按 F12 打开开发者工具，可以实时查看元素应用的样式。
修改 CSS 文件后，保存并刷新页面，即可看到更新效果。
推荐使用 VS Code 搭配 Live Server 插件，实现保存即自动刷新，提升开发效率。
基本上就这些。HTML 提供内容结构，CSS 控制视觉表现，两者通过 link 标签连接，由浏览器解析运行。只要文件路径正确、语法无误，就能顺利展示出设计好的网页效果。
