HTML、JavaScript、CSS的关系（前端开发学习笔记1）
HTML、JavaScript、CSS的关系
1 HTML是什么？
HTML（HyperText Markup Language，超文本标记语言）是用于创建和设计网页的标准标记语言。它通过标签（tags）定义网页的结构和内容，如文本、图像、链接等，浏览器通过解析HTML代码来渲染网页。
其核心功能是：
- 制定结构化内容：就像WPS里面制定一级标题，二级标题，三级标题一样。(如<h1>、<p>、<div>）
- 嵌入多媒体：支持插入图片（<img>）、视频（<video>）、音频（<audio>）等资源。使得网页内容丰富多样化。
- 超链接导航：通过<a>标签实现页面跳转或锚点定位。
- 表单交互：提供<form>、<input>等标签收集用户输入数据.
以下是HTML代码示例：
<!DOCTYPE html><!-- 声明文档类型为 HTML5，告知浏览器使用 HTML5 标准解析页面。-->
<html><!--HTML 文档的根元素，包含整个页面的内容。-->
<head><!--文档头部区域，用于定义元数据、标题、引入外部资源等不直接显示在页面上的内容。-->
<title>页面标题</title><!--定义浏览器标签页显示的标题内容，对 SEO 和用户体验很重要。-->
<meta charset="UTF-8"><!--指定文档字符编码为 UTF-8，确保多语言字符能正确显示。-->
</head><!--头部区域结束标签-->
<body><!--文档主体区域，包含所有可见内容（文本、图片、链接等）。-->
<h1>这是一个标题</h1><!--一级标题标签，通常用于页面主标题，默认字号最大。-->
<p>这是一个段落。</p><!--段落标签，用于包裹文本段落，浏览器会自动添加段落间距。-->
</body><!--主体区域结束标签。-->
</html><!--HTML 文档结束标签，与根元素 <html> 对应。-->
学习建议
- 使用代码编辑器（如VS Code）直接编写HTML文件，浏览器打开即可预览效果。
- 结合W3C或MDN文档查阅标签属性及用法。
- 通过开发者工具（F12）查看其他网页的HTML结构作为参考
2 JavaScript是什么？
JavaScript 是一种轻量级、解释型或即时编译的编程语言，主要用于为网页添加交互功能。它支持事件驱动、函数式和面向对象的编程风格，是 Web 开发的三大核心技术之一（HTML、CSS、JavaScript）。
（说白了，JavaScript差不多是能让静态网页动起来的语言，从而实现网页交互作用，并且不需要安装任何软件，能直接在浏览器内运行，相当于同声传译）
// 变量声明
let message = "Hello, World!";
const PI = 3.14;
// 函数定义
function greet(name) {
return `Hello, ${name}!`;
}
// 条件语句
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
// 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
3 CSS是什么？
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档样式的语言。它定义了网页元素的布局、颜色、字体、间距等视觉表现，实现内容与样式的分离。其基本语法如下：
选择器 {
属性: 值;
属性: 值;
}
示例：
p {
color: blue;
font-size: 16px;
}
CSS的引入方式
内联样式：直接在HTML标签中使用style属性。
<p style="color: red;">文本</p>
内部样式表：
<style>
body { background-color: #f0f0f0; }
</style>
外部样式表：
<link rel="stylesheet" href="styles.css">
4 三者之间的关系
HTML如同房屋的框架和建材
它决定了网页有哪些基础组成部分，比如标题、段落、图片或按钮，就像房屋的墙壁、门窗和家具的位置。没有HTML，网页就没有内容结构。
CSS类似装修和设计
负责让网页变得美观，控制颜色、字体大小、间距和布局。如同给房屋刷漆、铺地板、选择灯具，CSS让HTML构建的“毛坯房”变成视觉上舒适的页面。
JavaScript是房屋的智能系统
它让网页能“动起来”并响应用户操作。比如点击按钮弹出提示、表单输入验证、数据实时更新，就像房屋的自动灯光、智能门锁或空调温控系统，提供交互功能。
总而言之：用户打开网页时，浏览器先加载HTML构建基础结构。CSS随后修饰这些结构，使其呈现设计好的样式。JavaScript在用户交互时动态修改HTML或CSS，例如点击按钮后隐藏某个元素或发送数据。
以下是代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三者关系示例</title>
<style>
/* CSS部分：控制样式 */
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
#message {
margin: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<!-- HTML部分：提供结构 -->
<h1>交互示例</h1>
<div id="message">点击下方按钮查看效果</div>
<button id="myButton">点击我</button>
<script>
// JavaScript部分：实现交互
document.getElementById('myButton').addEventListener('click', function() {
document.getElementById('message').textContent = '你好！欢迎学习前端开发！';
this.textContent = '已点击';
this.style.backgroundColor = '#ff9800';
});
</script>
</body>
</html>
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
24
0- 0
已为社区贡献1条内容
所有评论(0)