前端页面主要由 HTML、CSS 和 JavaScript 构成。三者分别负责页面的结构、样式和交互，并由浏览器统一解析和执行。

HTML：页面结构

HTML 负责描述页面中包含哪些内容，以及这些内容之间的结构关系。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>
  <h1>前端页面</h1>
  <p id="message">这是页面正文。</p>
  <button id="change-button">修改内容</button>
</body>
</html>

其中：

  • <!DOCTYPE html> 声明当前文档使用 HTML5。
  • <head> 保存字符编码、页面标题和外部资源引用等信息。
  • <body> 保存浏览器中实际显示的页面内容。
  • id 用于唯一标识元素，class 用于标识一组元素。

CSS：页面样式

CSS 负责控制页面的颜色、字体、间距和布局等视觉效果。

1
2
3
4
5
6
7
8
9
10
11
12
body {
  background-color: #f0f4f8;
}

.card {
  padding: 24px;
  background-color: white;
}

#message {
  color: #2c3e50;
}

CSS 通过选择器匹配 HTML 元素：

1
2
3
body        选择 body 标签
.card       选择 class="card" 的元素
#message    选择 id="message" 的元素

JavaScript：页面交互

JavaScript 负责处理点击、输入和数据更新等页面行为。

1
2
3
4
5
6
const button = document.getElementById("change-button");
const message = document.getElementById("message");

button.addEventListener("click", () => {
  message.textContent = "页面内容已经更新。";
});

这段代码先找到按钮和文本元素，再为按钮注册点击事件。用户点击按钮后，JavaScript 修改文本内容，浏览器随即更新页面。

代码注释

HTML、CSS 和 JavaScript 都支持注释，但语法不同。注释用于解释代码或临时停用部分内容，不会作为正常页面内容显示或执行。

HTML 注释：

1
2
<!-- 这是 HTML 注释 -->
<p>页面正文</p>

CSS 注释：

1
2
3
4
/* 这是 CSS 注释 */
.card {
  background-color: white;
}

JavaScript 支持单行和多行注释：

1
2
3
4
5
6
7
// 这是单行注释
const message = "Hello";

/*
  这是多行注释
*/
console.log(message);

需要注意的是，HTML 和 CSS 没有 // 单行注释语法。HTML 注释也不适合存放密码、密钥等敏感信息，因为用户仍然可以通过浏览器查看页面源代码。

三者的关系

HTML、CSS 和 JavaScript 分别承担不同职责：

技术 主要职责
HTML 内容与结构
CSS 样式与布局
JavaScript 行为与交互

它们之间的关系可以概括为：

1
2
3
4
5
6
7
HTML 定义页面元素
        ↓
CSS 设置元素样式
        ↓
JavaScript 处理元素交互
        ↓
浏览器渲染并更新页面

文件组织

简单示例可以把 HTML、CSS 和 JavaScript 写在同一个文件中。实际项目通常将三者拆分：

1
2
3
4
project/
├── index.html
├── style.css
└── script.js

HTML 使用 <link> 引入 CSS：

1
<link rel="stylesheet" href="style.css">

使用 <script> 引入 JavaScript：

1
<script src="script.js"></script>

这里的 style.css 和 script.js 都是相对路径，表示浏览器从 index.html 所在目录中寻找对应文件。

文件分离后，各部分职责更加明确：

1
2
3
index.html    页面内容和结构
style.css     页面样式和布局
script.js     页面行为和交互

这种组织方式便于查找、修改和复用代码。现代前端框架可能将三者组织在同一个组件中，但仍然强调清晰的职责边界。

参考资料