初入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用标签  定义内容。

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

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

     • 浏览器调试：按 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("数据发送成功！"));