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

初入Web网页开发

news 来源：原创 2025/9/20 16:47:09

1、网页哪些内容

1.1 三个核心文件的作用

index.html：网页的骨架，用HTML编写网页结构和内容。
script.js：网页的行为，用JavaScript实现交互功能（如按钮点击事件）。
styles.css：网页的外观，用CSS控制样式（如颜色、布局）。
（注意：文件名应为 styles.css，"styles.c编辑"可能是输入错误）

1.2 文件协同示例

目录结构

FILE
├── index.html
├── script.js
└── styles.css

1.3. 关键注意事项

文件路径：确保HTML中引用的CSS和JS文件路径正确（如文件在同一目录直接写文件名）。
语法规范：
- HTML用标签 <tag> 定义内容。
- CSS用选择器 h1 { ... } 定义样式。
- JavaScript用 function() { ... } 实现逻辑。
浏览器调试：按 F12 打开开发者工具，检查文件是否加载成功或报错。

1.4web开发只需要开发这些吗

搜索AI 发现远远不止，在复杂的项目里面，包含其他各种各样形式的文件

1.5网页web开发这三个文件是缺一不可的吗

答案是不是，我们要明确的一点就是

每个文件有不同的功能，而功能对应需求。假如你只需要开发一个页面不包含交互，那么可以不需要.js文件

2、Web数据流的基本流程

数据在网页中的流动方式，比如用户输入如何被处理，如何与服务器通信。

我们可以先简单认为我们接触的网页就是一个中间人，我们在这个网页端做的交互就是在和这个中间人进行通信或者对话。

对话完成，JavaScript 对我们输入的信息进行处理，然后输出反应。

3、二、网页如何调用硬件（以蓝牙为例)

浏览器通过 Web APIs 请求蓝牙硬件权限提供硬件访问能力，但需要用户授权。

4、网页如何和实际硬件交互（以蓝牙发送为例）

网页数据如何发送到蓝牙模块，以HC05为例

连接设备：使用 Web Bluetooth API 连接目标设备。

获取服务：选择设备的服务.

device.gatt.connect()
.then(server => server.getPrimaryService("battery_service"))
.then(service => service.getCharacteristic("battery_level"))
.then(characteristic => characteristic.readValue())
.then(value => console.log("当前电量:", value.getUint8(0)));

发送数据：向设备的特性（Characteristic）写入数据。

const data = new Uint8Array([0x01, 0x02]); // 示例数据
characteristic.writeValue(data)
.then(() => console.log("数据发送成功！"));

初入Web网页开发

1、网页哪些内容 1.1 三个核心文件的作用 index.html：网页的骨架，用HTML编写网页结构和内容。 script.js：网页的行为，用JavaScript实现交互功能（如按钮点击事件）。 styles.css：网页的外观&…...

编程日记 2025/9/20 16:47:09

Vue进行前端开发流程

一、创建vue项目创建vue项目：先进入要操作的目录下，注意本项目是用vue2开发的。 vue create vue项目名二、项目开发 1.创建项目结构 2.开发功能模块主入口App.vue <template><div class"boss-app"><Header /><m…...

编程日记 2025/9/11 3:39:02

【深度学习:实战篇】--PyTorch+Transformer谣言检测系统

任务：构建一个多模态谣言检测模型。数据集描述如下： 数据集包含以下模态： 谣言文本：谣言的核心文本信息。2. 配图：与谣言文本相关的图像数据；3. OCR 文本：可以通过 PaddleOCR 从配图中提取的…...

编程日记 2025/9/20 11:04:27

PostGreSQL/openGauss表膨胀处理

如果面试官问你，Oracle与PG/OG最大的区别是什么？你要是没回答出MVCC机制，表膨胀，那你多半挂了。在PG/OG数据库中，命令vacuum full，插件pg_repack用于处理表膨胀，但是别高兴得太早，如…...

编程日记 2025/9/16 9:43:50

视频融合平台EasyCVR搭建智慧粮仓系统：为粮仓管理赋能新优势

一、项目背景当前粮仓管理大多仍处于原始人力监管或初步信息化监管阶段。部分地区虽采用了简单的传感监测设备，仍需大量人力的配合，这不仅难以全面监控粮仓复杂的环境，还容易出现管理 “盲区”，无法实现精细化的管理。而一套先进…...

编程日记 2025/9/18 18:16:07

基于 Node.js 和 Spring Boot 的 RSA 加密登录实践

在当今的互联网应用开发中，用户数据的安全性至关重要。登录功能作为用户进入系统的第一道防线，其安全性更是不容忽视。本文将介绍一种基于 RSA 加密的登录方案，前端使用 Node.js 的 node-forge 库对密码进行公钥加密，后端使用 Spr…...

编程日记 2025/9/20 12:34:24

jupyter在Pycharm中遇到的一个问题

jupyter比较简洁，可以分块执行，下面显示结果，还能用Markdown写注释，总体来说来还是比较好用的。但是遇到了一个奇怪的问题，从一个py文件中导入一个函数，结果输出为None。但是如果直接把这个函数的内容复制…...

编程日记 2025/9/14 11:56:44

十二、buildroot系统 adb登录权限设置

4.6.4、adb权限设置 android-adbd 是 ADB（Android Debug Bridge）的守护进程，允许开发者远程访问和调试设备。它通常用于 Android 设备，但在嵌入式 Linux上，也可以用来提供远程 shell、文件传输和应用调试功能。 …...

编程日记 2025/9/18 12:22:31

MySQL、Oracle 和 PostgreSQL 是三种主流的关系型数据库的主要原理性差异分析

MySQL、Oracle 和 PostgreSQL 是三种主流的关系型数据库，它们在底层原理和设计哲学上存在显著差异，尤其在存储引擎、事务处理、并发控制、索引结构、复制机制等方面。以下是它们的主要原理性差异分析： 1. 存储引擎与架构设计 MySQL 多存储引…...

编程日记 2025/9/11 1:16:13

【AI开源大模型工具链ModelEngine】【01】应用框架-源码编译运行

ModelEngine提供从数据处理、知识生成，到模型微调和部署，以及RAG（Retrieval Augmented Generation）应用开发的AI训推全流程工具链。 GitCode开源地址：https://gitcode.com/ModelEngineGitee开源地址：https…...

编程日记 2025/9/18 20:26:18

一文掌握 google浏览器插件爬虫的制作

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、技术栈1. 前端技术（浏览器插件开发）2. 爬虫技术3. 后端（可选）4. 整体技术栈组成二、开发步骤1. 创建 Chrome 插件基础结构（1）`manifest.json` 配置（2）前端页面（`popup.html`）（3）前端逻辑（`popup.js`）…...

编程日记 2025/9/9 17:39:46

【leetcode 100】贪心Java版本

划分字母区间题目我的思路：第一次没有一点思路，第二次看了官网思路后，写的以下答案，没有搞明白循环遍历， //是不对的以下： class Solution {public List<Integer> partitionLabels(String s) {Li…...

编程日记 2025/9/12 19:46:10

Linux用Wireshark进行Thread网络抓包关键步骤

用Nordic nRF52840 Dongle作为RCP配合Wireshark进行Thread网络抓包是debug Thread网络的有效工具之一，主要流程在这里，不再赘述：官方流程但是按官方流程会卡在一个地方，第一次费劲解决后，今天在另一台机器重新配的时…...

编程日记 2025/9/10 4:59:23

项目管理中客户拒绝签字验收？如何处理和预防

客户拒绝签字验收？如何处理和预防？核心在于：正面沟通、证据留存、灵活应对、合同条款明确、阶段验收机制。其中正面沟通格外关键，如果在发现客户迟迟不愿签字时能够主动沟通，了解其顾虑或不满并迅速针对性解决&#xf…...

编程日记 2025/9/19 12:11:11

当在拉取镜像时报以下错误时，可以通过更换镜像源解决 rootlocalhost:/etc/docker# docker pull mysql Using default tag: latest Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for …...

编程日记 2025/9/18 11:34:30

【JAVA】十、基础知识“类和对象”干货分享~（三）

目录 1. 封装 1.1 封装的概念 1.2 访问限定符 public（公开访问） private（私有访问） 1.3 包 1.3.1 包的概念 1.3.2 导入包中的类 1.3.3 自定义包 2. static成员 2.1 static变量（类变量） 2.1.1 sta…...

编程日记 2025/9/12 21:54:11

Open GL ES -＞ SurfaceView + 自定义EGL实现OpenGL渲染框架

SurfaceView 自定义EGL实现OpenGL渲染在Android开发中，当需要灵活控制OpenGL渲染或在多个Surface间共享EGL上下文时，自定义EGL环境是必要的选择核心实现流程 -------------------- -------------------- -------------------- | 1. 创建Su…...

编程日记 2025/9/9 20:36:04

Solidity入门实战—web3

项目介绍在这个项目中，我们建立一个小型智能合约应用，他允许用户向合约地址捐赠，允许合约所有者从合约中提取余额；并且还设定了捐赠的金额门槛；针对直接对地址进行的捐赠行为，我们也予以记录源代码 ht…...

编程日记 2025/9/10 1:05:51

Open Scene Graph动画系统

OSG 提供了强大的动画功能，支持多种动画实现方式，从简单的变换动画到复杂的骨骼动画。以下是 OSG 动画系统的全面介绍： 1. 基本动画类型 1.1 变换动画 (Transform Animation) // 创建动画路径 osg::AnimationPath* createAnimationPath(co…...

编程日记 2025/9/20 10:56:21

无需libpacp库，BPF指令高效捕获指定数据包

【环境】无libpacp库的Linux服务器【要求】高效率读取数据包，并过滤指定端口和ip 目前遇到两个问题一是手写BPF，难以兼容，有些无法正常过滤二是性能消耗问题，尽可能控制到1% 大方向：过滤数据包要在内核层处理&…...

编程日记 2025/9/10 12:38:36

重回全面发展亲自操刀

项目场景： 今年工作变动，优化后在一家做国有项目的私人公司安顿下来了。公司环境不如以前，但是好在瑞欣依然可以每天方便的买到。人文氛围挺好，就是工时感觉有点紧，可能长期从事产品迭代开发，一下子转变做项…...

编程日记 2025/9/9 17:47:48

DimensionX

旨在通过可控的视频扩散模型从单张图像生成高质量的3D和4D场景。 1. 背景与问题 3D和4D生成的目标 3D生成：从单张或多张2D图像中重建出三维场景或物体，包含空间信息（长、宽、高）。4D生成：在3D的基础上加入时间维度&a…...

编程日记 2025/9/7 9:11:47

2025年04月08日Github流行趋势

项目名称：markitdown 项目地址url：https://github.com/microsoft/markitdown项目语言：Python历史star数：44895今日star数：1039项目维护者：afourney, gagb, sugatoray, PetrAPConsulting, l-lumin项目简介&a…...

编程日记 2025/9/5 22:15:36

数据结构与算法-数学-容斥原理，高斯消元解线性方程组

容斥原理容斥原理用于计算多个集合的并集元素个数，公式为 ∣A1∪A2∪⋯∪An∣∑i1n∣Ai∣−∑1≤i<j≤n∣Ai∩Aj∣∑1≤i<j<k≤n∣Ai∩Aj∩Ak∣−⋯(−1)n−1∣A1∩A2∩⋯∩An∣ 举一个例题： 给定一个整数 nn 和 mm 个不同的质数 p1,p2,…,p…...

编程日记 2025/9/12 6:54:36

告别运动控制不同步：某车企用异构PLC实现99.98%焊接合格率

在长三角某新能源汽车电池工厂，工程师们正面临棘手的生产难题：随着产线速度提升到每分钟12个电芯，原有PLC系统开始频繁出现运动控制不同步现象。这直接导致极片焊接合格率从99.2%骤降至94.7%，每条产线日均损失超23万元。这个场景折…...

编程日记 2025/9/19 9:44:57

BetaFlight参数配置解读

BetaFlight参数配置解读 📌相关篇《Betaflight固件编译和烧录说明》🥕各型号已编译好的配置文件资源（.config）：https://github.com/betaflight/unified-targets/tree/master/configs/default🌿各型号配置头…...

编程日记 2025/9/18 15:11:02

PowerBI累计分析

累计分析累计分析主要有三种：年初至今（YTD）、季初至今（QTD）、月初至今（MTD）。DAX中计算累计的函数有两类：一类是datesytd、datesqtd、datesmtd，该类返回一个单列日期表…...

编程日记 2025/9/10 22:31:41

多模态大语言模型arxiv论文略读（七）

MLLM-DataEngine: An Iterative Refinement Approach for MLLM ➡️ 论文标题：MLLM-DataEngine: An Iterative Refinement Approach for MLLM ➡️ 论文作者：Zhiyuan Zhao, Linke Ouyang, Bin Wang, Siyuan Huang, Pan Zhang, Xiaoyi Dong, Jiaqi Wang,…...

编程日记 2025/9/17 16:44:52

STM32单片机入门学习——第27节: [9-3] USART串口发送串口发送+接收

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难，但我还是想去做！ 本文写于：2025.04.08 STM32开发板学习——第27节: [9-3] USART串口发送&串口发送接收前言开发板说…...

编程日记 2025/9/19 5:35:19

【元表 vs 元方法】

元表 vs 元方法 —— 就像“魔法书”和“咒语”的关系 1. 元表（Metatable）：魔法书是什么？ 元表是一本**“规则说明书”**，它本身是一个普通的 Lua 表，但可以绑定到其他表上，用来定义这个表应该…...

编程日记 2025/9/18 22:27:26

小型园区网实验

划分VLAN SW3 [sw3]vlan batch 2 3 20 30 [sw3]interface GigabitEthernet 0/0/1 [sw3-GigabitEthernet0/0/1]port link-type access [sw3-GigabitEthernet0/0/1]port default vlan 2 [sw3-GigabitEthernet0/0/1]int g0/0/2 [sw3-GigabitEthernet0/0/2]port link-type acces…...

编程日记 2025/9/13 6:28:39