当前位置：首页 > article >正文

✨1.HTML、CSS 和 JavaScript 是什么？

article 2026/4/12 19:00:37

✨✨ HTML、CSS 和 JavaScript 是构建网页的三大核心技术，它们相互协作，让网页呈现出丰富的内容、精美的样式和交互功能。以下为你详细介绍：

🦋1. HTML（超文本标记语言）

定义：HTML 是一种用于描述网页结构的标记语言，它通过各种标签来标识不同类型的内容，就像搭建房屋的框架，决定了网页上各个元素的位置和层次关系。
作用：
- 🪭构建页面结构：使用如<html>、<body>、<div>、<p>、<h1> - <h6>等标签，将网页划分为不同的部分，如标题、段落、导航栏、文章区域等。例如，<h1>网页标题</h1>定义了一级标题，<p>这是一段文字内容。</p>定义了段落。
- 🪭添加多媒体元素：通过<img>标签插入图片，<audio>标签添加音频，<video>标签嵌入视频。比如<img src="image.jpg" alt="描述图片">可在页面中显示一张图片。
- 🪭创建链接和表单：<a>标签创建超链接，<form>标签及其内部的各种表单元素（如<input>、<select>等）用于创建用户输入信息的表单，实现与服务器的数据交互。例如，<a href="https://www.example.com">点击跳转</a>创建了一个指向指定网址的链接。
示例代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>简单HTML示例</title>
</head><body><h1>欢迎来到我的页面</h1><p>这是一段简单的文本介绍。</p><img src="example.jpg" alt="示例图片">
</body></html>

🦋2. CSS（层叠样式表）

定义：CSS 用于控制网页的外观和样式，包括颜色、字体、布局、背景等，如同给房屋进行装修，使其变得美观且符合设计需求。
作用：
- 🪭设置文本样式：可以改变文字的字体、大小、颜色、粗细、对齐方式等。例如，p { color: blue; font-size: 16px; text-align: center; } 使段落文字颜色为蓝色，字体大小为 16 像素，居中对齐。
- 🪭控制布局：通过盒模型（包括元素的宽度、高度、内边距、边框和外边距）以及定位属性（如position: relative、position: absolute等）来控制网页元素的位置和排列方式。比如，使用display: flex可以轻松创建灵活的弹性布局。
- 🪭添加动画效果：借助 CSS3 的过渡（transition）和动画（animation）属性，为网页元素添加动态效果，如淡入淡出、滑动、旋转等，提升用户体验。
示例代码：

/* 选择所有段落元素并设置样式 */
p {color: green;font-family: Arial, sans-serif;line-height: 1.5;
}/* 选择id为header的元素并设置样式 */
#header {background-color: lightblue;padding: 20px;
}

在 HTML 中使用 CSS 有三种方式：内联样式（在 HTML 标签内使用style属性）、内部样式表（在 HTML 的<head>标签内使用<style>标签）和外部样式表（创建单独的 CSS 文件，通过<link>标签引入到 HTML 中）。例如，使用外部样式表：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS示例</title><link rel="stylesheet" href="styles.css">
</head><body><h1 id="header">欢迎</h1><p>这是应用了CSS样式的文本。</p>
</body></html>

🦋3. JavaScript

定义：JavaScript 是一种高级的、动态的、弱类型的编程语言，主要用于为网页添加交互性和动态功能，就像赋予房屋居住者各种行为能力，使网页能够响应用户操作。
作用：
🪭响应用户事件：可以监听用户的操作，如点击按钮、鼠标移动、表单提交等，并执行相应的代码。例如，为按钮添加点击事件：
const button = document.querySelector('button');
button.addEventListener('click', function () {alert('按钮被点击了！');
});
🪭操作 DOM（文档对象模型）：通过 JavaScript 可以访问和修改 HTML 文档中的元素，动态改变网页的内容、结构和样式。比如，修改段落文字：
const para = document.querySelector('p');
para.textContent = '新的段落内容';
🪭实现数据交互：与服务器进行数据交换，通过 AJAX（异步 JavaScript 和 XML）技术在不重新加载整个页面的情况下，从服务器获取数据或向服务器发送数据，实现动态更新网页内容。例如，使用fetch API 获取数据：
fetch('data.json').then(response => response.json()).then(data => {console.log(data);});

示例代码：通常在 HTML 页面中通过<script>标签嵌入 JavaScript 代码，或者引入外部 JavaScript 文件。例如：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JavaScript示例</title>
</head><body><button id="myButton">点击我</button><script>const myButton = document.getElementById('myButton');myButton.addEventListener('click', function () {alert('你点击了按钮');});</script>
</body></html>

👑总结： HTML、CSS 和 JavaScript 各自承担不同的职责，HTML 负责搭建网页结构，CSS 负责美化页面，JavaScript 负责添加交互和动态功能，三者结合构成了丰富多彩的现代网页。

👑网页是由什么组成的（通俗易懂）

HTML—— 网页的骨架：

想象一下，你要盖一栋房子，得先有个框架，HTML 就好比这个框架。它用来搭建网页的基本结构，像房子里的房间布局一样，决定了网页上哪里是标题，哪里是段落，哪里该放表格。比如说你在网页上看到的文章标题、正文，都是靠 HTML 来安排位置的。

CSS—— 网页的化妆师：

当房子框架搭好了，就要装修得好看点，这就是 CSS 的工作。它负责给网页穿上漂亮的外衣，决定文字是什么颜色，各个元素怎么布局，甚至还能添加一些动画效果。比如，你看到有些网页上的图片会缓缓滑动，文字会淡入淡出，这些视觉上的精彩呈现都离不开 CSS。

JavaScript—— 网页的互动精灵：

现在房子装修好了，得有点互动功能才有趣。JavaScript 就像一个小精灵，让网页能和你 “交流”。当你点击网页上的按钮，或者页面自动加载一些新的数据，这些交互逻辑都是 JavaScript 在背后起作用。比如你点一个 “点赞” 按钮，数字就会马上加一，这就是 JavaScript 处理点击事件的结果。

✨1.HTML、CSS 和 JavaScript 是什么？

✨✨ HTML、CSS 和 JavaScript 是构建网页的三大核心技术，它们相互协作，让网页呈现出丰富的内容、精美的样式和交互功能。以下为你详细介绍： 🦋1. HTML（超文本标记语言） 定义：HTML 是一种用于描…...

编程日记 2026/4/5 0:38:09

机器学习的数学基础(三)——概率与信息论

目录 1. 随机变量2. 概率分布2.1 离散型变量和概率质量函数2.2 连续型变量和概率密度函数 3. 边缘概率4. 条件概率5. 条件概率的链式法则6. 独立性和条件独立性7. 期望、方差和协方差7.1 期望7.2 方差7.3 协方差 8. 常用概率分布8.1 均匀分布 U ( a , b ) U(a, b) U(a,b)8.2 Be…...

编程日记 2026/4/11 2:38:59

flutter将utf-8编码的字节序列转换为中英文字符串

这里遇到的问题是，我通过某种方式拿到了utf-8编码的字节序列，我只知道他们对应的是中英文字符。怎么将其转成中英文，并打印，让我对utf-8编码有了些许许的了解。这里记录一下转换代码： String wifiName \xE9\xA1\xB…...

编程日记 2026/4/10 20:27:59

IM聊天系统架构实现

一、IM系统整体架构二、企业级IM系统如何实现心跳与断线重连机制； 1、重连机制（服务端下线） 服务端下线，客户端netty可以感知到，在感知的方法中进行重连的操作，注意重连可能连接到旧的服务器继续报错&…...

编程日记 2026/4/11 14:53:25

基于腾讯云大模型知识引擎×DeepSeek构建八字、六爻赛博算卦娱乐应用

引言随着DeepSeek的火爆，其强大的思维链让不少人越用越香，由于其缜密的思维和推理能力，不少人开发出了不少花里胡哨的玩法，其中一种就是以八字、六爻为代表的玄学文化正以“赛博玄学”的新形态席卷年轻群体。针对于八字、六爻…...

编程日记 2026/4/6 3:18:18

k8s ssl 漏洞修复

针对Kubernetes集群中SSL/TLS协议信息泄露漏洞（CVE-2016-2183）的修复，需重点修改涉及弱加密算法的组件配置。以下是具体修复步骤及验证方法： 一、漏洞修复步骤 1. 修复etcd服务修改配置文件 ： 编辑 /etc/kubernetes/…...

编程日记 2026/3/4 21:59:49

linux文件管理命令ln

linux文件管理命令ln 1、软链接2、硬链接3、命令参数3.1、必要参数3.2、选择参数 4、应用示例4.1、创建硬链接4.2、创建软链接（符号链接）4.3、对目录创建软链接4.4、强制覆盖目标文件 5、应用场景它的功能是为某一个文件在另外一个位置建立一个同步的链…...

编程日记 2026/4/4 1:14:39

CT dicom 去除床板去除床位，检查床去除

1. 前言医院拍摄患者CT与MRI 图像， 但是CT图像中就会出现检查床的区域，来看CT扫描设备是什么样子的，红色标出区域可以在图中看到，在头部位置安装有固定头部的类似支架的东西，这个东西拍摄出来时什么样子呢&#xff…...

编程日记 2026/3/25 16:13:41

扩散模型中，Flow Matching的训练方式相比于 DDPM 训练方法有何优势？

在扩散模型中，Flow Matching（FM）相比DDPM（Denoising Diffusion Probabilistic Models）的训练方法具有以下核心优势： 1. 更简单的训练目标 DDPM：通过逐步预测噪声来间接优化数据分布的变分下界（ELBO），需要设计多步的噪声调度策略，训练目标依赖马尔可夫链的分解。Flow…...

编程日记 2026/3/23 20:20:41

【用deepseek和chatgpt做算法竞赛】——还得DeepSeek来 -Minimum Cost Trees_5

往期【用deepseek和chatgpt做算法竞赛】——华为算法精英实战营第十九期-Minimum Cost Trees_0：介绍了题目和背景【用deepseek和chatgpt做算法竞赛】——华为算法精英实战营第十九期-Minimum Cost Trees_1：题目输入的格式说明，选择了邻接表…...

编程日记 2026/4/8 13:08:10

Python实现GO鹅优化算法优化随机森林分类模型项目实战

说明：这是一个机器学习实战项目（附带数据代码文档视频讲解），如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景在当今数据驱动的世界中，机器学习技术被广泛应用于各种领域，如金融、医疗、…...

编程日记 2026/3/26 1:23:50

【目标检测】【YOLOv4】YOLOv4：目标检测的最佳速度与精度

YOLOv4：目标检测的最佳速度与精度 0.论文摘要有许多特征被认为可以提高卷积神经网络（CNN）的准确性。需要在大规模数据集上对这些特征的组合进行实际测试，并对结果进行理论上的验证。某些特征仅适用于特定模型和特定问题&#…...

编程日记 2026/4/2 15:37:59

常用电脑，护眼软件推荐 f.lux 3400K | 撰写论文 paper

常用电脑？平均每天用 5 个小时？你就要考虑用一个护眼软件了，对皮肤也好。因为电脑屏幕有辐射，比如蓝光。 f.lux 作为一款专业护眼软件，值得使用。之前用了三年的 Iris Pro，现在 f.lux 做的更好了。使用…...

编程日记 2026/3/22 17:31:24

算法模板（二分法开区间模板，二分法闭区间模板）

二分法闭区间模板： class Solution {// lower_bound 返回最小的满足 nums[i] > target 的 i// 如果数组为空，或者所有数都 < target，则返回 nums.size()// 要求 nums 是非递减的，即 nums[i] < nums[i 1]// 闭区间写法i…...

编程日记 2026/2/14 5:08:09

新手小白如何挖掘cnvd通用漏洞之存储xss漏洞（利用xss钓鱼）

视频教程和更多福利在我主页简介或专栏里 （不懂都可以来问我专栏找我哦） 如果对你有帮助你可以来专栏找我，我可以无偿分享给你对你更有帮助的一些经验和资料哦目录： 一、XSS的三种类型： 二、XSS攻击的危害&#x…...

编程日记 2026/3/22 6:43:11

一、ros topic通信流程参考资料: 一个ros节点至少有几个线程(1058): https://zhuanlan.zhihu.com/p/680188065 鱼香rostopic底层流程(1005~1008): https://zhuanlan.zhihu.com/p/656716718 王方浩-ROS发布订阅实现(二): https://zhuanlan.zhihu.com/p/439208597 基础的topic…...

编程日记 2026/4/6 0:27:01

【蓝桥杯集训·每日一题2025】 AcWing 6134. 哞叫时间II python

6134. 哞叫时间II Week 1 2月20日农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛，但她很难理解为什么他这么喜欢它。他说「竞赛中我最喜欢的部分是贝茜说『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。埃尔茜仍然不理解，所以农夫约翰将竞赛…...

编程日记 2025/11/27 22:38:36

【CXX】5 桥接模块参考

1 CXX主要概念概览已经涵盖了CXX用来表示语言边界的高级模型。本章在此基础上详细介绍#[cxx::bridge]的语法和功能。 extern “Rust” ——将不透明的Rust类型、Rust函数、Rust方法暴露给C；具有生命周期的函数。extern“C”——绑定不透明的C类型、C函数、C成员函数…...

编程日记 2026/3/10 21:14:28

open62541,有点问题

要运行 open62541 提供的示例服务端程序，您需要确保以下几点： 代码已正确编译。了解如何启动服务端示例。确认服务端是否正常运行。以下是详细的步骤和说明： 1. 确保代码已正确编译在运行任何示例之前，您需要先完成项目的构建…...

编程日记 2026/3/10 3:25:51

智能交通系统（Intelligent Transportation Systems）：智慧城市中的交通革新

智能交通系统（Intelligent Transportation Systems, ITS）是利用先进的信息技术、通信技术、传感技术、计算机技术以及自动化技术等，来提升交通系统效率和安全性的一种交通管理方式。ITS通过收集和分析交通数据，智能化地调度、控制…...

编程日记 2026/4/6 5:35:19

【TOT】Tree-of-Thought Prompting

Tree-of-Thought Prompting Tree-of-Thought Prompting In one example, a ToT prompt improves ChatGPT 3.5’s reasoning ability to answer a question that could previously only be answered by ChatGPT 4. 赋予了gpt3 推理能力，这能力只有gpt4才有。增强、反馈和贡献 …...

编程日记 2026/3/13 16:24:56

内置函数用法

目录 1. 概述 2. 数学运算 2.1 求绝对值函数 abs( ) 2.2 取近似值 round（ ） 2.3 求次方 pow( ) 2.4 求商和余数 divmod( ) 2.5 求最大值 max( ) 2.6 求最小值 min( ) 2.7 求累加和 sum( ) 2.8 eval( ) 3. 类型转换 3.1 #ord( )：字…...

编程日记 2026/3/4 7:23:25