基本的HTML5的文档格式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body>
</html>
基本文档中的 5 对标记关系
<html>与</html><head>与</head><meta>自闭合标签<title>与</title><body>与</body>
HTML、CSS、JS 三者的关系
1. 通过外部样式文件，设置网页的背景颜色为红色
-
应用场景：定义项目中 80% 以上的通用样式
-
语法：
html
<link rel="stylesheet" type="text/css" href="css/xxx.css">
2. 通过内部样式文件定义
-
应用场景：定义本文件内部使用的样式
-
语法：
html
<style type="text/css">/* 样式内容 */ </style>
3. 行内样式（内联样式）
-
应用场景：针对单个元素的特殊样式，优先级最高
-
语法：
html
<h1 style="color: #fff;">我是使用行内样式定义的标题一</h1>
三种 CSS 样式引入方式对比
| 类型 | 语法 | 作用范围 | 优先级 | 适用场景 |
|---|---|---|---|---|
| 外部样式 | <link rel="stylesheet" href="xxx.css"> |
多个页面共享 | 低 | 全局通用样式 |
| 内部样式 | <style>...</style> |
当前页面 | 中 | 页面独有样式 |
| 行内样式 | style="..." |
单个元素 | 高 | 临时调试或特殊覆盖 |
优先级规则（由低到高）：外部样式 < 内部样式 < 行内样式（前提是选择器权重相同）。
HTML、CSS、JavaScript 三者关系总结
| 技术 | 作用 | 示例 |
|---|---|---|
| HTML | 网页的结构层，负责内容与语义 | <h1>标题</h1> |
| CSS | 网页的表现层，负责样式与布局 | h1 { color: red; } |
| JavaScript | 网页的行为层，负责交互与动态效果 | document.querySelector('h1').style.color = 'blue'; |
三者相互配合，共同构成网页的结构、表现、行为三层分离的设计模式，利于维护与协作。