H5_Node1_新标签&新属性& 硬件调用

最新推荐文章于 2022-11-04 17:39:23 发布
最新推荐文章于 2022-11-04 17:39:23 发布
阅读量1.6k 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/express_yourself/article/details/52916496
版权
HTML5简介
  ‘ HTML5=HTML+CSS+JS＋APIS '
HTML5新功能
  新增标签
  input新类型及新属性
  硬件调用

一、HTML5简介
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改
目标:HTML5取代HTML4和XHTML成为新标准

1、Html5 时间表
2004年--提出构想
2008年--发布第一份草案
2012年--推广阶段
2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。

2、Html5 新特性
新增标签：语义化更好
多媒体功能：video\audio
表单功能增强
新的属性
本地存储、离线存储
获取拖拽内容信息
地理位置信息
canvas画布      ......


3、浏览器支持情况

新版本的 Safari、Chrome、Firefox 、Opera以及IE10+ 支持大部分HTML5的新特性。IE9 支持部分 HTML5 新特性，IE6 7 8基本都不支持HTML5新特征。



二、HTML5新功能

1、新增标签

新增的结构元素----语义化标签
<header>-----定义页眉
<nav>---------定义导航
<article>------定义外部的内容
<section>-----定义章节、区段
<aside>-------定义当前页面或文章的附属信息部分<footer>------定义页脚
<hgroup>-----定义网页标题元素（h1-h6）的组合
<figure>-------定义媒介内容的分组，以及它们的标题
<figcaption>--定义 figure 元素的标题
新标签带来的是网页布局的改变及提升对搜索引擎的友好

2、新增的其他元素

<time>--------定义日期/时间(语义化标签)
<mark>-------定义有记号的文本
<progress>---定义任务的进度
<progress min=“" max=“" value=“”progress>
<datalist>-----定义输入域的选项列表
   <option value=“红色1”></option>
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增标签</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{font-size: 40px;text-align: center;color:#333;}
.wrap{width:1020px;margin:0 auto;overflow:hidden;color:#fff;background: #e3e3e3;font-family: '微软雅黑';margin-bottom: 10px;}
.header{
	height:60px;
	line-height: 60px;
	background: #666;
}
.nv{
	height:40px;
	line-height: 40px;
	font-size: 28px;
	margin:10px 0;
	background: #666;
}
.article{
	overflow: hidden;
}
.section{
	width:700px;
	height:450px;
	float: left;
	background: #333;
}
.aside{width:300px;height:450px;float: left;background: #666;margin-left: 20px;}
.footer{height:60px;line-height: 60px;background: #666;margin-top:10px;}
.pic{border:1px solid #333;}
.pic img{width:200px;height:200px;}
progress{width:800px;height:40px;}
input{width:600px;height:40px;}
</style>
</head>
<body>
<div class="wrap">
	<div class="header">header</div>
	<div class="nv">nav</div>
	<div class="article">
		<div class="section">section</div>
		<div class="aside">aside</div>
	</div>
	<div class="footer">footer</div>
</div>

<div class="wrap">
	<header class="header">header</header>
	<nav class="nv">nav</nav>
	<article class="article">
		<section class="section">section</section>
		<aside class="aside">aside</aside>
	</article>
	<footer class="footer">footer</footer>
</div>

<!-- <hgroup>-定义网页标题元素（h1-h6）的组合 -->
<hgroup>
	<h1>我是h1标签</h1>
	<h2>我是h2标签</h2>
	<h3>我是h3标签</h3>
</hgroup>

<div class="pic">
	<h3>标题</h3>
	<img src="01.jpeg" alt="">
	<p>内容内容呢哦</p>
</div>

<!-- <figure>-定义媒介内容的分组，以及它们的标题 -->
<figure class="pic">
<!-- <figcaption>-定义 figure 元素的标题 -->
	<figcaption>标题</figcaption>
	<img src="01.jpeg" alt="">
	<p>内容内容呢哦</p>
</figure>


<!-- <time>-定义日期/时间(语义化标签)
<mark>-定义有记号的文本 -->
<h1><time>2016年10月19日</time>：今天有雾霾，注意<mark>戴口罩</mark>！</h1>


<!-- <progress>-定义任务的进度 -->
<progress id="progress" min="0" max="100" value="0"></progress>
<button id="btn">下载</button><br>



<!-- list->连接选项列表 -->
<!-- list: 指定一个datalist，作为下拉提示单   list值为datalist标签的id -->
<input type="text" list="val">
<!-- <datalist>-定义输入域的选项列表 -->
<datalist id="val">
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广州">广州</option>
	<option value="深圳">深圳</option>
</datalist>
</body>
<script>
	var pro=document.getElementById('progress');
	var btn=document.getElementById('btn');
	var x=0,timer=null;
	btn.οnclick=function(){
		timer=setInterval(function(){
			x++;
			if(x>pro.max){
				clearInterval(timer);
				btn.innerHTML='已下载完成';
			}else{
				btn.innerHTML='已下载'+x+'%';
			}
			pro.value=x;
		},100)
	}
</script>
</html>


<embed>----定义外部交互内容或插件
<audio>------定义声音内容
<video>------定义视频
<source>-----定义媒介源
<canvas>-----定义图形


新增的其他标签
<bdi>    <command>    <wbr>
<details>    <dialog>    <keygen>    <meter>    <output>    <summary>
<ruby>    <rp>    <rt>    <track>
被弃用的标签：
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、 <s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。



3、input的新属性
placeholder: 占位符，输入框提示信息
required: 该input为必填项
autofocus: 在页面加载时，域自动地获得焦点
pattern: 正则验证  如:  pattern="[0-9]{7,12}"
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型，每次递增step的值
list: 指定一个datalist，作为下拉提示单
          list值为datalist标签的id 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input新属性</title>
<style>
*{margin:0;padding:0;list-style: none;}
input{
	font-size:30px;
	color:#333;
}
/*伪元素*/
input::-webkit-input-placeholder{
	color:#ccc;
}
/*火狐*/
input::-moz-placeholder{
	color:#ccc;
}
/*IE*/
input::-ms-input-placeholder{
	color:#ccc;
}
</style>
</head>
<body>

<form action="https://www.baidu.com/">
	<!-- placeholder: 占位符，输入框提示信息 -->
	<!-- autofocus: 在页面加载时，域自动地获得焦点 -->
	<input type="text" placeholder="请输入用户名" autofocus><br>
	<!-- pattern: 正则验证  如:  pattern="[0-9]{7,12}" -->
	<input type="text" placeholder="请输入电话号码" pattern="[0-9]{7,12}"><br>
	<!-- required: 该input为必填项 -->
	<input type="text" placeholder="请输入身份证" required pattern="[0-9]{12,18}"><br>
	<input type="submit" value="提交">
</form>
</body>
</html>

4、input的新类型
email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件（UTC时间）
datetime-local: 年-月-日 时:分 格式的控件（本地时间）
month: 年-月格式的控件
week: 年-周数格式的控件

number: 数字输入框
range: 选择区域
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器
 浏览器兼容
opera对新属性的支持性最好，ie10以下不支持，其他主流浏览器部分支持 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>placeholder</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{
	font-size:30px;
}
input{
	font-size:30px;
	color:#333;
	padding:5px;
}
/*伪元素*/
input::-webkit-input-placeholder{
	color:#ccc;
}
.range{
	padding:0;
}
</style>
</head>
<body>

<form method="get" action="https://www.baidu.com/">
	<!-- email: 提交表单时检测值是否是一个电子邮件格式 -->
	email:<input type="email" placeholder="请输入email" required>
	<input type="submit" value="提交">
</form><br>
<form method="get" action="https://www.baidu.com/">
	<!-- url: 提交表单时检测值是否是一个url格式 -->
	url:<input type="url" placeholder="请输入网址" required>
	<input type="submit" value="提交">
</form><br>

	<!-- date: 年-月-日格式的控件 -->
	date:<input type="date"  required><br>

	<!-- time: 时:分格式的控件 -->
	time:<input type="time" required><br>


<!-- datetime不支持 -->
	<!-- datetime: 年-月-日 时:分 格式的控件（UTC时间）-->
	datetime:<input type="datetime" required><br>


	<!-- datetime-local: 年-月-日 时:分 格式的控件（本地时间）-->
	datetime-local:<input type="datetime-local" required><br>

	<!-- month: 年-月格式的控件-->
	month:<input type="month" required><br>

	<!-- week: 年-周数格式的控件-->
	week:<input type="week" required><br>

	<!-- number: 数字输入框-->
	<!-- min/max: input能输入的最小/最大字节的长度 -->
	<!-- step:针对number和range类型，每次递增step的值-->
	number:<input type="number" min="0" max="100" step="10" required><br>

	<!-- range: 选择区域-->
	<!-- min/max: input能输入的最小/最大字节的长度 -->
	<!-- step:针对number和range类型，每次递增step的值 -->
	range:<input class="range" type="range" max="100" step="10"  step="10" value="20"><br>

<form method="get" action="https://www.baidu.com/">
	<!-- 无效 -->
	<!--tel: 电话输入框-->
	tel:<input type="tel" required>
	<input type="submit" value="提交">
</form><br>

	<!-- 无效 -->
	<!-- search: 用于搜索 叉号清空内容-->
	search:<input type="search" required><br>
	

<div>
	<!-- color: 调用系统选色器-->
	color:<input type="color" id="col">
	<span id="txt">您选择的颜色</span>
</div>
</body>
<script>
	var col=document.getElementById('col');
	var txt=document.getElementById('txt');
	txt.innerHTML='您选择的颜色'+col.value;
	// input有输入值时触发事件
	col.οninput=function(){
		txt.innerHTML='您选择的颜色'+col.value;
		txt.style.color=col.value;
	}
</script>
</html>


5、调用本地硬件
调用本地摄像头
<input type="file" accept="image/*" capture="camera">
调用本地相册
<input type="file" capture="photo">
拨打电话
<a href="tel:110" mce_href="tel:110">报警请使劲戳</a>
发送短信
<a href="sms:13520559717">发短信</a> 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>硬件调用</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,initial-scale=1,user-scalable=no"/>
<style>
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 20px;
    left: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>
</head>
<body>
<!-- 拨打电话 -->
<a href="tel:110" mce_href="tel:110">报警请使劲戳</a>
<br/>
<!-- 发送短信 -->
<a href="sms:13520559717">发短信</a>
<br/>
<!-- 调用本地摄像头 -->
<a href="javascript:;" class="file">摄像头
    <input type="file" accept="image/*" capture="camera">
</a>
<br/>
<!-- 调用本地相册 -->
<a href="javascript:;" class="file">相册
    <input type="file" capture="photo">
</a>
</body>
</html>
loushumei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Device:通过NodeJS驱动硬件
05-15
oneDevice.js 用NodeJS驱动硬件。 心塞塞的，device被占用了，只能叫onedevice了。这感觉。。。。。。:face_with_rolling_eyes: 这是什么？ 这是一个旨在用NodeJS驱动硬件的驱动包。开箱即用、完善的文档、持续更新、友好的API。用树莓派打造自己的智能家居。 最近更新 v0.0.3 @ 2018-06-02 22:56 使用RxJS，更抽象更简单易用的API 报告bug QQ交流群: 230948257 email: issue: 后续主要更新 增加更多型号硬件驱动 更抽象的API，一句话完成条件监控、动作触发 更容易阅读的文档 test文件夹下面有测试例子，这些都在我的Linux raspberrypi 4.4.34-v7+ Raspbian GNU/Linux 8.0 (jessie)下面测试通过。 必看 0. 树莓派需要先安装BCM2835 1. 该软件在树莓派3B (Rasp
h5学习之调用手机底层硬件----加速度传感器和震动
u010020921的专栏
07-28 1万+
最近在开发微信公众平台时，有一个需求是通过摇一摇进行互动活动，刚开始以为要用微信内的摇一摇功能，但是微信根本没有提供接口（摇一摇是调用手机硬件，根本不能调用），所以只能换一种思路，微信可以跟我们的服务器端对接，所以只能通过一些前端的脚本语言去解决。幸运的是：H5 + 提供了对手机硬件资源访问的封装API，这样的话，实现摇一摇和震动就有了途径，不止这些，通过这些ＡＰＩ的调用对系统其他功能也可以访问
H5 调用 手机设备的功能
weixin_30952103的博客
11-20 831
1、调用 邮件 ：参考https://blog.csdn.net/github_38516987/article/details/77637546（亲测有效） <a href="mailto:johndoe@sample.com">发送邮件</a> 2、调用拨打手机 <a href="tel:400-888-9999">400...
nodejs操作arduino入门（javascript操作底层硬件）
weixin_30699465的博客
09-24 414
用Javascript来操作硬件早就不是一件稀奇的事情了。 所以作为一名电子专业出身的FE，我也打算尝试一下用js来驱动arduino； 要想操作这些底层硬件，肯定是需要一些工具的，我这里介绍的工具主要是cylonjs和 gort cylonjs其实就是一个操作"机器"的js框架，官网的介绍是这样的： Cylon.js is a JavaScript framework for rob...
介绍Node.js+Electron框架下和常用（HID 串口 BLE）硬件通信方法
GUMU12345的专栏
11-04 2813
可以让我们使用纯 JavaScript 调用丰富的原生 API 来创建桌面应用。可以内嵌react vue等前端框架，直接将web页面转换成桌面客户端程序。Node.js® 是一个开源的、跨平台的 JavaScript 运行时环境。能通过node插件直接js调用c++（内置v8）Node.js提供的napi，实现快速开发原生node插件的且面向对象的Api。我想说这个CSDN的编辑器，太烂了，写了10多次。实现Node.js访问USB HID设备。实现Node.js访问串口设备。
node_weixin_payment.zip
04-20
《微信H5支付在Node.js后端与H5前端的实现》 微信H5支付是一种便捷的在线支付方式，尤其适用于移动端用户。本资源“node_weixin_payment.zip”提供了使用Node.js后端与H5前端实现微信H5支付的详细方案，旨在帮助...
cordova 和原生交互 调用h5页面
04-03
为了加载H5页面，你可能需要添加`<allow-navigation>`标签来允许应用访问H5页面。 6. **添加H5页面**：将你的H5文件放入`www`目录下，这是Cordova默认的资源目录。有两个H5页面，你可以分别命名为`page1.html`和`...
微信支付H5调用支付详解（java版）
09-01
params.put("total_fee", "1"); // 单位为分 params.put("spbill_create_ip", getLocalIP(request)); params.put("notify_url", "你的通知回调URL"); params.put("trade_type", "MWEB"); params.put("openid", ...
Huzhubei_h5:H5项目
05-10
【标题】"Huzhubei_h5:H5项目"所指的，是一个基于H5技术的项目。H5是HTML5的简称，是超文本标记语言（HTML）的第五次重大修订，它极大地扩展了HTML的功能，提升了网页的交互性和多媒体支持能力，成为现代网页开发的...
2022最新uniapp的云购商城源码
04-18
1. **uniapp框架介绍** - uniapp是由DCloud（即海马云）开发的开源项目，其核心特性是使用一套代码，可以同时发布到多个平台。 - 基于Vue.js，uniapp具有Vue的易用性和灵活性，同时也集成了原生功能，提高了性能和...
html5封装webapp调用手机蓝牙连接蓝牙设备并实现收发数据
04-29
从晚上下载的例子，发现不能自动获取设备、服务和特征值，这就导致了程序通用性大大降低，在通过自己的摸索后，将这部分功能调试通过，现在已经是一个通用的webapp调用ble的程序了，功能包括搜索、连接蓝牙，选取服务、特征值，写入、接收数据
h5调用Android、ios的方法
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
10-28 1508
调用Android，ios方法
基于Electron-vue框架使用node-modbus采集硬件设备数据
super_大楼的博客
05-02 1万+
什么是Electron？Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。额，其实就是用前端的技术去写一个桌面应用程序，因为公司项目需求所以需要用electron-vue来开发，...
js怎样和硬件交互_Node.js与JavaScript
weixin_28871097的博客
01-30 1837
有很多介绍nodejs的文章，也有很多教程，覆盖了服务器开发、桌面开发、移动端等等，但是鲜有文章明确的回答过一个问题：Node是什么？这看起来是一个再简单过的问题了，真要答起来可不容易，不去深入研究的话可能会认为Node就是javascript，javascript就是Node，笔者最初也是这么认为的，但这种想法并不正确。要寻求正确的答案首先要弄明白Node与JavaScript的关系，在Node...
oneDevice.js - 用NodeJS驱动硬件的驱动包
weixin_33816300的博客
06-01 884
用NodeJS驱动硬件。 心塞塞的，device被占用了，只能叫onedevice了。这感觉。。。。。。
H5调用手机振动实现
zhangwenwu2的博客
10-09 1万+
最近在开发微信公众平台时，有一个需求是通过摇一摇进行互动活动，刚开始以为要用微信内的摇一摇功能，但是微信根本没有提供接口（摇一摇是调用手机硬件，根本不能调用），所以只能换一种思路，微信可以跟我们的服务器端对接，所以只能通过一些前端的脚本语言去解决。幸运的是：H5 + 提供了对手机硬件资源访问的封装API，这样的话，实现摇一摇和震动就有了途径，不止这些，通过这些ＡＰＩ的调用对系统其他功能也可以访
NodeJs串口通信
热门推荐
kylvia的专栏
05-23 3万+
前言：最近这两天在研究如何实现web页面和串口间通信，在网上也查了各种资料，electron、nw或者chrome serial，发现对于我来说都太难实现了，一来可用的资料太少，二来安装东西老是出问题，算了还是放弃吧，自己用常用且最熟悉的方式来实现吧，作为一名前端码农，选用的肯定是node作为服务器了，然后网页请求方式用ajax或websocket都可以，实现方式下文都有。 先说说基本需求：硬件...
node.js使用（二）：获取电脑CPU和内存
07-05 1万+
1、新建demo.js，输入const os = require('os'); console.log('你的剩余内存/M'+os.freemem()/1024/1024); console.log('你的CPU'+os.arch());2、命令行输入：>>node demo.js >>你的剩余内存1455.751168 >你的CPUx643、更多使用请看文档（http://nodejs.cn/a
如用H5写一个响应式页面、Nodeis操作数据库
最新发布
09-26
### 回答1： 如果要使用 H5 写一个响应式页面，可以使用 Bootstrap、 Foundation 等 CSS 框架来实现。这些框架都提供了一系列的 CSS 类，可以让页面在不同尺寸的设备上得到优秀的展示效果。 如果要使用 Node.js 操作数据库，可以使用一些数据库驱动，如 MySQL、 MongoDB、Redis等。这些驱动都提供了一些 API，可以在 Node.js 中方便地操作数据库。 ### 回答2： 响应式页面是一种能够自动适应不同设备和屏幕尺寸的网页设计技术。使用H5（HTML5）语言可以轻松实现响应式页面。以下是一个简单的示例： 首先，我们需要在HTML文件的`<head>`标签中引入一个 H5 的 `<meta>` 标签，指定viewport 的宽度和初始缩放比例，从而使页面能根据设备自动适应。 接下来，在页面的结构中，我们使用CSS媒体查询（media query）来定义不同尺寸的布局和样式。例如，我们可以创建三个不同的CSS样式表：`mobile.css`、`tablet.css` 和 `desktop.css`，分别对应移动端、平板和桌面设备的布局样式。然后在 HTML 文件中，使用`<link>`标签将不同的样式表与媒体查询关联起来。 通过媒体查询，我们可以使用CSS的`@media`规则，在不同的屏幕尺寸下应用相应的样式和布局。例如，使用`@media screen and (max-width: 480px)`表示在视口宽度不超过480px时应用的样式。 在H5的语法和标签上，一般与之前的HTML4相比较少的，但可以使用一些新的元素和属性来增强用户体验，如`<canvas>`用于绘制图形、`<video>`用于播放视频等。另外，H5还增加了一些新的JavaScript API，如地理位置、离线存储等，通过这些API能够实现更丰富的功能和交互效果。 至于Node.js操作数据库，可以使用Node.js提供的模块来轻松实现。首先，我们需要使用npm（Node包管理器）来安装适当的数据库驱动程序，如`mysql`、`mongodb`等。 安装完驱动程序后，我们可以使用`require`函数在Node.js应用程序中引入相应的驱动程序。然后，创建数据库连接，并执行相关的数据库操作，如查询、插入、更新和删除等。具体的操作语法和方法根据所选的数据库驱动程序而异。 在操作数据库过程中，我们通常会使用回调函数或Promise来处理异步操作。通过回调函数，可以在数据库结果返回后执行特定的动作。而Promise则提供了一种更简洁和可读性更高的方式来处理异步操作。可以使用async/await语法糖来进一步简化异步操作的处理流程。 总而言之，通过合理利用H5和Node.js提供的各种功能和模块，我们可以轻松实现响应式页面设计和数据库操作。 ### 回答3： 用H5写一个响应式页面可以通过以下步骤完成： 1. 结构布局：使用HTML5语义化标签进行页面结构布局，如<header>、<nav>、<main>、<footer>等。通过媒体查询设置不同分辨率下的样式，并使用Flexbox或Grid来实现页面的自适应布局。 2. 图片和多媒体：使用<img>标签来插入图片，并使用CSS属性设置图片的宽度和高度，以适应不同设备的屏幕尺寸。为了提高页面加载速度，可以使用响应式图片技术，根据设备屏幕尺寸提供不同大小和分辨率的图片。 3. 文本内容：使用<p>、<h1>到<h6>等标签来进行文本内容的标记。使用CSS控制字体大小，行间距和对齐方式以适应不同屏幕。 4. 响应式导航：使用CSS实现响应式导航菜单，可以采用弹出式菜单、折叠式菜单或者水平菜单，根据屏幕尺寸进行切换。 5. 表单：使用<input>、<select>等标签创建表单，并使用CSS设置不同设备上的表单样式，确保用户输入的可见性和易用性。 Node.js操作数据库可以通过以下步骤完成： 1. 安装依赖：使用npm或yarn安装适当的Node.js模块，如mysql、mongodb或sequelize，这些模块帮助连接和操作不同类型的数据库。 2. 连接数据库：使用数据库模块提供的API，通过提供数据库主机、用户名、密码和数据库名等信息来建立与数据库的连接。 3. 执行数据库操作：使用数据库模块提供的API，执行查询、插入、更新或删除等操作。例如，通过调用适当的函数来执行SQL语句，或者使用ORM框架（如sequelize）提供的方法来操作数据库。 4. 处理结果：根据数据库操作的返回结果，进行适当的错误处理和数据处理。例如，可以通过回调函数或Promise来处理异步操作的结果，使用条件语句来处理错误情况，并将查询结果展示给用户。 5. 断开连接：当数据库操作结束后，使用数据库模块提供的API断开与数据库的连接，释放资源并保持数据库的安全性。 以上是使用H5写一个响应式页面和Node.js操作数据库的基本步骤，具体实现取决于项目需求和所使用的具体技术。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值