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

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

news 2025/11/29 21:02:54

✨✨ 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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/28 14:10:24

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2025/11/27 6:42:46

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/11/29 16:36:12

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/11/27 14:48:19

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/11/28 11:51:25

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/11/29 12:45:00

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/10/8 5:48:25

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/10/4 3:01:43