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

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

news 2025/9/27 2:28:00

✨✨ 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 是构建网页的三大核心技术&#xff0c;它们相互协作&#xff0c;让网页呈现出丰富的内容、精美的样式和交互功能。以下为你详细介绍&#xff1a; &#x1f98b;1. HTML&#xff08;超文本标记语言&#xff09; 定义&#xff1a;HTML 是一种用于描…...

编程日记 2025/2/20 4:23:13

QT--常用对话框

文章目录 前言一、颜色对话框颜色对话框代码解析 二、文本对话框文本对话框代码解析 三、输入对话框1.整型输入对话框2.浮点数输入对话框3.条目对话框 四、提示对话框1.提问对话框2.消息对话框3.警告对话框4.关键对话框 五、进度对话框六、向导对话框总结 前言 今天介绍几种标…...

编程日记 2025/2/20 4:17:01

基于 Ollama 工具的 LLM 大语言模型如何部署，以 DeepSeek 14B 本地部署为例

简简单单 Online zuozuo ：本心、输入输出、结果 文章目录 基于 Ollama 工具的 LLM 大语言模型如何部署，以 DeepSeek 14B 本地部署为例前言下载 Ollama实际部署所需的硬件要求设置 LLM 使用 GPU ，发挥 100% GPU 性能Ollama 大模型管理命令大模型的实际运行资源消耗基于 Ollam…...

编程日记 2025/2/20 4:12:56

图的最小生成树算法: Prim算法和Kruskal算法(C++)

上一节我们学习了最短路径算法, 这一节来学习最小生成树. 最小生成树(Minimum Spanning Tree, MST)算法是图论中的一种重要算法, 主要用于在加权无向图中找到一棵生成树, 使得这棵树包含图中的所有顶点, 并且所有边的权重之和最小. 这样的树被称为最小生成树. 最小生成树广泛应…...

编程日记 2025/2/20 4:08:49

WPS的AI助手进化跟踪(灵犀+插件)

Ver V0.0 250216: 如何给WPS安装插件用以支持其他大模型LLM V0.1 250217: WPS的灵犀AI现在是DeepSeek R1(可能是全参数671B) 前言 WPS也有内置的AI&#xff0c;叫灵犀&#xff0c;之前应是自已的LLM模型&#xff0c;只能说是属于“能用&#xff0c;有好过无”&#xff0c;所…...

编程日记 2025/2/20 4:07:48

我用AI做数据分析之数据清洗

我用AI做数据分析之数据清洗 AI与数据分析的融合效果怎样&#xff1f; 这里描述自己在使用AI进行数据分析&#xff08;数据清洗&#xff09;过程中的几个小故事&#xff1a; 1. 变量名的翻译 有一个项目是某医生自己收集的数据&#xff0c;变量名使用的是中文&#xff0c;分…...

编程日记 2025/2/20 4:03:44

一周学会Flask3 Python Web开发-request请求对象与url传参

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili request请求对象封装了从客户端发来的请求报文信息&#xff0c;我们可以从中获取所有数据。 request对象包含的常用属性&…...

编程日记 2025/2/20 3:59:38

【ISO 14229-1:2023 UDS诊断（ECU复位0x11服务）测试用例CAPL代码全解析④】

ISO 14229-1:2023 UDS诊断【ECU复位0x11服务】_TestCase04 作者&#xff1a;车端域控测试工程师 更新日期&#xff1a;2025年02月17日 关键词&#xff1a;UDS诊断协议、ECU复位服务、0x11服务、ISO 14229-1:2023 TC11-004测试用例 用例ID测试场景验证要点参考条款预期结果TC…...

编程日记 2025/2/20 3:58:36

网络技术变迁：从IPv4走向IPv6

目录 前言 旧时代产物&#xff1a;IPv4 什么是IPv4&#xff1f; IPv4的工作方式 IPv4的缺点 为什么要从IPv4过渡到IPv6&#xff1f; 走向IPv6&#xff1a;新一代互联网协议 IPv6的技术特性 我们需要过渡技术 双栈&#xff08;Dual Stack&#xff09; 隧道技术&#…...

编程日记 2025/2/20 3:56:34

DeepSeek教unity------事件管理

1. 定义事件类型 定义一个枚举来表示不同类型的事件。组织和识别不同的事件。 2. 创建事件参数类 为了让事件携带数据&#xff0c;创建一个通用的事件参数类或者为每个事件类型创建特定的参数类。 3. 实现事件管理器 创建一个EventManager类&#xff0c;用于管理事件的注册…...

编程日记 2025/2/20 3:53:30

确保设备始终处于最佳运行状态，延长设备的使用寿命，保障系统的稳定运行的智慧地产开源了

智慧地产视觉监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。通过计算机视觉和…...

编程日记 2025/2/20 3:52:29

RedisTemplate存储含有特殊字符解决

ERROR信息: 案发时间: 2025-02-18 01:01 案发现场: UserServiceImpl.java 嫌疑人: stringRedisTemplate.opsForValue().set(SystemConstants.LOGIN_CODE_PREFIX phone, code, Duration.ofMinutes(3L)); // 3分钟过期作案动机: stringRedisTemplate继承了Redistemplate 使用的…...

编程日记 2025/2/20 3:51:28

28、深度学习-自学之路-NLP自然语言处理-做一个完形填空，让机器学习更多的内容程序展示

import sys,random,math from collections import Counter import numpy as npnp.random.seed(1) random.seed(1) f open(reviews.txt) raw_reviews f.readlines() f.close()tokens list(map(lambda x:(x.split(" ")),raw_reviews))#wordcnt Counter() 这行代码的…...

编程日记 2025/2/20 3:44:19

【NLP 22、语言模型 language model】

有时候我也想听听&#xff0c;我在你心里&#xff0c;是什么样子 —— 25.1.12 一、什么是语言模型 语言是灵活的&#xff0c;也是有规律的 了解一门语言的人可以判断一句话是否“合理” 通俗来讲&#xff0c;语言模型用来评价一句话(句子可以看作是字的组合)是否“合理”或…...

编程日记 2025/2/20 3:43:18

刚性平衡机建模

这两个公式是动平衡机中用于描述旋转部件振动行为的动力学方程。它们分别描述了旋转部件在平移振动和扭转振动中的运动规律&#xff0c;用于分析不平衡量对系统的影响。以下是详细解释&#xff1a; 1. 第一个公式&#xff1a;平移振动的动力学方程 M d 2 y d t 2 2 K y 0 m 1…...

编程日记 2025/2/20 3:42:16

【算法】双指针(上)

目录 双指针 左右指针(对撞指针) 快慢指针 移动零 双指针解题 复写零 暴力解题 双指针解题(快慢指针) 快乐数 双指针解题(快慢指针) 盛最多水的容器 暴力解题(会超时) 双指针解题(左右指针) 有效三角形的个数 暴力解题 双指针解题(左右指针) 双指针 常见的双指…...

编程日记 2025/2/20 3:36:07

【Linux Redis】关于用docker拉取Redis后，让虚拟机运行起来redis，并使得其可以连接到虚拟机外的navicat。

步骤一&#xff1a;拉取Redis镜像 docker pull redis 这个命令会下载最新版本的Redis镜像到你的本地Docker仓库中。你也可以指定一个具体的版本号&#xff0c;例如docker pull redis:6.2.6&#xff0c;来拉取特定版本的Redis镜像。 如果拉取遇到问题请参考【Linux AnolisOS】关…...

编程日记 2025/2/20 3:35:06

用deepseek学大模型04-模型可视化与数据可视化

deepseek.com: pytorch可视化工具 生成神经网络图 在 PyTorch 中&#xff0c;可视化神经网络结构的常用工具和方法有以下几种&#xff0c;以下将详细介绍它们的用法&#xff1a; 1. TensorBoard (PyTorch 官方集成) PyTorch 通过 torch.utils.tensorboard 支持 TensorBoard&a…...

编程日记 2025/2/20 3:31:02

一周学会Flask3 Python Web开发-post请求与参数获取

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili app.route 装饰器默认只支持get请求。假如我们要让绑定的视图函数支持其他请求方式&#xff0c;我们可以在methods属性里配置…...

编程日记 2025/2/20 3:26:58

第3章 .NETCore核心基础组件：3.1 .NET Core依赖注入

3.1.1 什么是控制反转、依赖注入 杨老师在书中进行了一系列的文字阐述&#xff0c;总结一下就是&#xff1a;软件设计模式中有一种叫做【控制反转】的设计模式&#xff0c;而依赖注入是实现这种设计模式的一个很重要的方式。也就是说学习依赖注入&#xff0c;是学习怎样实现控…...

编程日记 2025/2/20 3:25:57

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/9/25 21:38:07

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/9/25 23:05:15

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/9/26 2:21:17

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/7/23 10:55:13

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/7/15 0:42:05

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/20 13:23:05

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/6/16 8:33:33

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/9/22 22:14:42

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/9/22 22:13:34