初入Web网页开发

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. 关键注意事项

  1. 文件路径:确保HTML中引用的CSS和JS文件路径正确(如文件在同一目录直接写文件名)。

  2. 语法规范

    • HTML用标签 <tag> 定义内容。

    • CSS用选择器 h1 { ... } 定义样式。

    • JavaScript用 function() { ... } 实现逻辑。

  3. 浏览器调试:按 F12 打开开发者工具,检查文件是否加载成功或报错。

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

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

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

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

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

2、Web数据流的基本流程

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

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

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

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

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

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

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

  1. 连接设备:使用 Web Bluetooth API 连接目标设备。

  2. 获取服务:选择设备的服务.

    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)));

  3. 发送数据:向设备的特性(Characteristic)写入数据。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/77160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS 符号

在 CSS 中&#xff0c;& 符号是 嵌套语法中的父选择器引用符&#xff0c;主要用于 CSS 预处理器&#xff08;如 Sass、Less、Stylus&#xff09;和 现代 CSS 嵌套语法&#xff08;CSS Nesting&#xff09;。它代表当前选择器的父级&#xff0c;用于简化嵌套规则并生成更精确…

小白入门JVM、字节码、类加载机制图解

前提知识~ JDK 基本介绍 JDK 的全称(Java Development Kit Java 开发工具包)JDK JRE java 的开发工具[java, javac,javadoc,javap 等]JDK 是提供给Java 开发人员使用的&#xff0c;其中包含了java 的开发工具&#xff0c;也包括了JRE。可开发、编译、调试…… JRE 基本介绍…

consul服务注册与发现(go)-学习笔记

参考博客 1、服务实例接口与默认实现 type ServiceInstance interface {// 获取服务实例的唯一IDGetInstanceId() string// 获取服务IDGetServiceId() string// 获取服务实例的主机名或IP地址GetHost() string// 获取服务实例的端口号GetPort() int// 判断服务实例是否使用HT…

【AI】prompt engineering

prompt engineering ## prompt engineering ## prompt engineering ## prompt engineering 一、定义 Prompt 工程&#xff08;Prompt Engineering&#xff09;是指在使用语言模型&#xff08;如 ChatGPT、文心一言等&#xff09;等人工智能工具时&#xff0c;设计和优化输入提…

Python 字典和集合(常见的映射方法)

本章内容的大纲如下&#xff1a; 常见的字典方法 如何处理查找不到的键 标准库中 dict 类型的变种set 和 frozenset 类型 散列表的工作原理 散列表带来的潜在影响&#xff08;什么样的数据类型可作为键、不可预知的 顺序&#xff0c;等等&#xff09; 常见的映射方法 映射类型…

对抗Prompt工程:构建AI安全护栏的攻防实践

大语言模型的开放性与自然语言交互特性使其面临前所未有的Prompt工程攻击威胁。本文通过分析2021-2023年间157个真实越狱案例&#xff0c;揭示语义混淆、上下文劫持、多模态组合三重攻击路径的技术原理&#xff0c;提出融合动态意图拓扑分析&#xff08;DITA&#xff09;、对抗…

STL c++ list——模拟实现

结点类的模拟实现 list是一个带头双向循环链表 因需要实现一个节点类&#xff0c;其中包含哨兵位&#xff08;用来标识位置&#xff09;&#xff0c;节点信息&#xff08;val数据&#xff0c;prev后指针&#xff0c;next后指针&#xff09; template<class T> struct …

ORM、Mybatis和Hibernate、Mybatis使用教程、parameterType、resultType、级联查询案例、resultMap映射

DAY21.1 Java核心基础 ORM Object Relationship Mapping 对象关系映射 面向对象的程序到—关系型数据库的映射 比如java – MySQL的映射 ORM框架就是实现这个映射的框架 Hibernate、Mybatis、MybatisPlus、Spring Data JPA、Spring JDBC Spring Data JPA的底层就是Hiber…

【学习自用】配置文件中的配置项

server.port服务器端口&#xff0c;常被用于指定应用程序运行时所监听的端口号spring.datasource.url用于配置数据源的数据库连接URLspring.datasource.username用于指定连接数据库的用户名spring.datasource.password用于配置数据源时设置数据库连接密码的属性mybatis.mapper-…

使用protobuf编译提示无法打开包括文件: ‘absl/log/absl_log.h’: No such file or directory

问题原因 Protobuf 依赖 Abseil&#xff1a; Protobuf 3.20 版本开始依赖 Abseil&#xff0c;但你的系统未正确安装或配置 Abseil。 头文件路径未包含&#xff1a; 编译器找不到 absl/log/absl_log.h&#xff0c;可能是因为 Abseil 未正确安装或未在项目中设置包含路径。 …

Spring AI Alibaba 文档检索使用

一、文档检索 (Document Retriever)简介 1、核心概念 文档检索&#xff08;DocumentRetriever&#xff09;是一种信息检索技术&#xff0c;旨在从大量未结构化或半结构化文档中快速找到与特定查询相关的文档或信息。文档检索通常以在线(online)方式运行。 DocumentRetriever通…

前端面试核心知识点整理:从 JavaScript 到 Vue 全解析

一、JavaScript 异步编程核心:Promise 与 async/await 1. Promise 深度解析 定义:Promise 是处理异步操作的对象,代表一个异步操作的最终状态(成功 / 失败)。三种状态: pending(进行中):初始状态,异步操作未完成。fulfilled(已成功):异步操作成功,调用 resolve …

音视频(四)android编译

前言 前面已经讲了在windows上应用了&#xff0c;这章主要讲述android上编译 1&#xff1a;环境 git 如果失败 直接跑到相应网站 手动下载 ubuntu22.* android ndk r21e download:https://developer.android.google.cn/ndk/downloads/index.html?hluk 为什么用这个&#xff0…

【kind管理脚本-3】脚本函数说明文档 —— 便捷使用 kind 创建、删除、管理集群脚本

下面是一份详细的说明文档&#xff0c;介绍该脚本的功能、用法及各部分的含义&#xff0c;供您参考和使用&#xff1a; Kind 集群管理脚本说明文档 此脚本主要用于管理 Kind&#xff08;Kubernetes IN Docker&#xff09;集群&#xff0c;提供创建、删除、导出 kubeconfig、加…

【计算机行业发展与重塑】

计算机行业正经历前所未有的变革&#xff0c;AI技术的爆发式发展与产业升级的深度融合&#xff0c;正在重塑行业格局与就业市场。以下从行业趋势、AI的核心价值、就业需求三个维度展开分析。 一、行业趋势&#xff1a;AI驱动下的多极增长 AI成为核心引擎 生成式AI的突破&#…

(高频SQL50题)1667. 修复表中的名字

问题 表&#xff1a; Users ------------------------- | Column Name | Type | ------------------------- | user_id | int | | name | varchar | ------------------------- user_id 是该表的主键(具有唯一值的列)。 该表包含用户的 ID 和名字…

基于人工智能的医学影像关联分析:利用潜在空间几何混杂因素校正法|文献速递-深度学习医疗AI最新文献

Title 题目 AI-based association analysis for medical imaging using latent-spacegeometric confounder correction 基于人工智能的医学影像关联分析&#xff1a;利用潜在空间几何混杂因素校正法 01 文献速递介绍 人工智能&#xff08;AI&#xff09;已成为各个领域的…

开源免费虚拟化软件PVE功能介绍

Proxmox VE&#xff08;PVE&#xff09;提供了一个基于 Web UI&#xff08;管理界面&#xff09;的虚拟化管理平台&#xff0c;用户可以通过浏览器管理 虚拟机&#xff08;VM&#xff09;、容器&#xff08;LXC&#xff09;、存储、网络、备份、用户权限等。 一、PVE Web 界面…

新球体育比分状态监控

文章目录 目标分析监控逻辑代码目标分析 网页监控地址:aHR0cHM6Ly9saXZlLnRpdGFuMDA3LmNvbS9pbmRleDJpbjEuYXNweD9pZD0x 监控逻辑 比分等数据主要是依赖JS加载得到,通过ajax后端进行渲染 代码 # -*- coding: utf-8 -*-import warnings warnings.filterwarnings(ignore) f…

【lodash的omit函数详解 - 从入门到精通】

lodash的omit函数详解 - 从入门到精通 小白视角&#xff1a;什么是omit&#xff1f; omit在英文中意为"忽略"或"省略"。在编程中&#xff0c;它就是从一个对象中删除不需要的属性&#xff0c;返回一个新对象。 // 原始对象 const person {name: "…