Web开发基础学习系列文章目录
第一章 基础知识学习之HTML, CSS, JavaScript 的区别和联系
文章目录
- Web开发基础学习系列文章目录
- 前言
- 一、定义
- 说白了，就是HTML负责网页的内容，CSS负责网页的格式，JS负责网页的交互。
- 二、 功能
- 三、联系
- 四、示例
- 总结
前言
对于没做过网页开发的人员来说，这三个概念是比较基础的概念，同时也是比较容易混淆，今天就来扒一扒这三部分之前的区别和联系。
一、定义
- HTML (超文本标记语言)：
- HTML 是用于创建网页内容的标记语言。它提供网页的基本结构，包括文本、图像、链接等元素。
- CSS (层叠样式表)：
- CSS 是一种样式表语言，用于描述 HTML 文档的外观和格式。它控制网页的布局、颜色、字体等视觉效果。
- JavaScript：
- JavaScript 是一种编程语言，用于为网页添加交互性和动态效果。它允许开发者在客户端执行代码，实现用户交互、数据处理等功能。
说白了，就是HTML负责网页的内容，CSS负责网页的格式，JS负责网页的交互。
二、 功能
| 特性 | HTML | CSS | JavaScript |
|---|---|---|---|
| 结构定义 | 用于定义网页的结构 | 用于定义网页的样式 | 用于定义网页的行为 |
| 内容展示 | 显示文本、图像、链接等 | 控制颜色、字体、排版等 | 处理用户输入、动态更新内容 |
| 交互性 | 无 | 无 | 提供动态交互 |
| 语法类型 | 标记语言 | 样式表语言 | 脚本语言 |
三、联系
- 协作工作：
- HTML、CSS 和 JavaScript 通常一起使用来构建现代网页。HTML 提供结构，CSS 提供样式，JavaScript 增强交互性。
- 加载顺序：
- 通常，在 HTML 文档中，CSS 会在 <head> 标签中引入，而 JavaScript 通常在文档的底部或通过 <script> 标签引入，以确保页面在加载时先呈现结构和样式。
- DOM 操作：
- JavaScript 可以通过 Document Object Model (DOM) 访问和操作 HTML 元素和 CSS 样式，实现动态内容更新和交互效果。
四、示例
- HTML 示例
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>示例网页</title><link rel="stylesheet" href="styles.css"> <!-- 引入 CSS -->
</head>
<body><h1>欢迎来到我的网页</h1><button id="myButton">点击我</button><script src="script.js"></script> <!-- 引入 JavaScript -->
</body>
</html>
- CSS 示例
body {background-color: lightblue;
}h1 {color: white;text-align: center;
}
- JavaScript示例
document.getElementById("myButton").addEventListener("click", function() {alert("按钮被点击了！");
});
注意，在html中，开头引入了CSS，用于展示网页格式，在最后引入.js文件用来与网页进行交互。示例代码中，这三个文件放在同一个目录下即可。
总结
- HTML 提供网页的结构和内容。
- CSS 控制网页的外观和样式。
- JavaScript 为网页添加动态交互和功能。
这三者相辅相成，共同构建出丰富多彩的网页体验。