HTML+CSS之表格(15个案例+代码+效果图+素材)

目录

1.table标签的border属性

案例:制作一个带边框的表格

1.代码

2.效果

2.table标签的cellspacing属性

案例:制作一个带边距的表格

1.代码

2.效果

3.table标签的cellpadding属性

1.代码

2.效果

4.table标签的width和height属性

案例:指定宽高的表格

1.代码

2.效果

5.table标签的align属性

案例:表格居中

1.代码

2.效果

6.table标签的bgcolor属性

案例:为table添加背景色

1.代码

2.效果

7.table标签的background的属性

案例:为表格添加背景图

1.代码

2.效果

8.tr标签的height属性

案例:设置tr行高为50

1.代码

2.效果

9.tr标签的align属性

案例:使tr标签内容居中

1.代码

2.效果

10.tr标签的valign属性

案例:使表格内容垂居中

1.代码

2.效果

11.tr标签的background的属性

案例：tr标签添加滤镜

1.代码

2.效果

12.tr标签的bgcolor属性

案例:使用bgcolor为tr添加背景色

1.代码

2.效果

13.td标签的width和height属性

案例：鼠标悬浮扩大td宽高

1.代码

2.效果

14.td标签的align属性

案例:控制td文本居中

1.代码

2.效果

15.表结构

案例:编写一个简单的网页

1.代码

2.效果

附录:

1.table标签的border属性

        border 属性 - 定义表格边框的宽度。例如：<table border="1">

案例:制作一个带边框的表格

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>制作一个带边框的表格</title><style>table {/*** 表格边框*/border: solid 5px #00ccff;}tr{height: 50px;width: 100%;border: solid 1px #000;background-color: #6e9696a1;}tr:hover{background-color: #ff060670;}td:hover{background-color: chocolate;color: #0eebb3dc;}</style></head><body><table border="1px" width="300px" height="300px"><tr><td>科目</td><td>教师</td><td>年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table></body></html>

2.效果

可以看到我们添加了为表格添加蓝色的边框

2.table标签的cellspacing属性

        cellspacing 属性 - 指定单元格之间的间距。例如：<table cellspacing="20px">

案例:制作一个带边距的表格

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>制作一个带边框的表格</title><style>table {/*** 表格边框*/border: solid 5px #00ccff;}tr{height: 50px;width: 100%;border: solid 1px #000;background-color: #6e9696a1;}tr:hover{background-color: #ff060670;}td:hover{background-color: chocolate;color: #0eebb3dc;}</style></head><body><table border="1px" width="300px" height="300px" cellspacing="20px"><tr><td>科目</td><td>教师</td><td>年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table></body></html>

2.效果

3.table标签的cellpadding属性

        cellpadding 属性 - 指定内容与单元格边框之间的距离。例如：<table cellpadding="20px">

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>控制内边距到内容的距离</title><style>table {/*** 表格边框*/border: solid 5px #00ccff;}tr{height: 50px;width: 100%;border: solid 1px #000;background-color: #6e9696a1;}tr:hover{background-color: #ff060670;}td:hover{background-color: chocolate;color: #0eebb3dc;}</style></head><body><table border="1px" width="300px" height="300px" cellpadding="20px" ><tr><td>科目</td><td>教师</td><td>年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table></body></html>

2.效果

可以看到内容到上下边框都有了相同的内边距

4.table标签的width和height属性

        width 和 height 属性 - 分别指定表格的宽度和高度。可以使用像素或百分比。例如：<table width="100%" height="200px">

案例:指定宽高的表格

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>指定宽高的表格</title><style>table {/*** 表格边框*/border: solid 5px #c4e2e9;/****指定表格的宽度和高度*/width: 800px;height: 600px;}tr{height: 50px;width: 100%;border: solid 1px #000;background-color: #03f7f7fb;}tr:hover{background-color: #00fd2a;}td:hover{background-color: rgb(116, 235, 215);color: #94ecd6dc;}</style></head><body><table border="1px" width="300px" height="300px" ><tr><td>科目</td><td>教师</td><td>年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table></body></html>

2.效果

5.table标签的align属性

        align 属性 - 控制表格在页面中的水平对齐方式（左、中、右）。例如：<table align="center">。不过，在现代网页设计中更推荐使用CSS来设置对齐方式

案例:表格居中

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>指定宽高的表格</title><style>table {/*** 表格边框*/border: solid 5px #c4e2e9;/****指定表格的宽度和高度*/width: 800px;height: 600px;}tr{height: 50px;width: 100%;border: solid 1px #000;background-color: #5eee7dfb;}tr:hover{background-color: #c1e7c7;}td:hover{background-color: rgb(116, 235, 215);color: #fa1100dc;}</style></head><body><table border="1px" width="300px" height="300px" align="center" ><tr><td>科目</td><td>教师</td><td>年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table></body></html>

2.效果

6.table标签的bgcolor属性

        bgcolor 属性 - 设置表格背景颜色。例如：<table bgcolor="#FFCC99">。同样地，用CSS来设置背景色是更好的做法

案例:为table添加背景色

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{/*** 表格边框*/border: solid 5px #00ccff;/*** */}td{border: 3px double #000;}</style>
</head>
<body><!-- 添加背景色 --><table border="1px" width="300px" height="300px"  bgcolor="orange"><tr><td>科目</td><td>教师</td><td>年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table>
</body>
</html>

2.效果

7.table标签的background的属性

        background 属性 - 为表格设置背景图片。例如：<table background="image.jpg">。推荐使用CSS的background-image属性.

案例:为表格添加背景图

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{/*** 表格边框*/border: solid 5px #00ccff;/*** 为表格添加背景色*/background-image: url("./aImg.png");background-size: cover;color: chartreuse;}td{border: 3px double #000;}</style>
</head>
<body><!-- 添加背景色 --><table border="1px" width="512px" height="512px"  ><tr><td>科目</td><td>教师</td><td>年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table>
</body>
</html>

2.效果

8.tr标签的height属性

        height 属性 (对于 <tr>) - 设置行的高度。例如：<tr height="50">。

案例:设置tr行高为50

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{/*** 表格边框*/border: solid 5px #00ccff;/*** 为表格添加背景色*/background-image: url("./aImg.png");background-size: cover;color: chartreuse;}td{border: 3px double #000;}</style>
</head>
<body><!-- 添加背景色 --><table border="1px" width="512px" height="512px"  ><!-- 设置行高为50 --><tr height="50"><td>科目</td><td>教师</td><td>年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table>
</body>
</html>

2.效果

9.tr标签的align属性

        align 属性 (对于 <tr>) - 控制该行内所有单元格的内容水平对齐方式。例如：<tr align="right">。

案例:使tr标签内容居中

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{/*** 表格边框*/border: solid 5px #00ccff;/*** 为表格添加背景色*/background-image: url("./aImg.png");background-size: cover;color: chartreuse;}td{border: 3px double #000;}</style>
</head>
<body><!-- 添加背景色 --><table border="1px" width="512px"  ><tr align="center" ><td>科目</td><td>教师</td><td>年龄</td></tr><tr align="center" ><td>java</td><td>张三</td><td>18</td></tr><tr align="center" ><td>HTML</td><td>李四</td><td>22</td></tr><tr align="center" ><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr align="center" ><td>JavaScript</td><td>小久</td><td>24</td></tr></table>
</body>
</html>

2.效果

可以看到行内的元素都居中了,包括文字的显示

10.tr标签的valign属性

        valign 属性 (对于 <tr>) - 设置行内所有单元格内容的垂直对齐方式（顶部、中部、底部）。例如：<tr valign="middle">。

案例:使表格内容垂居中

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{/*** 表格边框*/border: solid 5px #00ccff;/*** 为表格添加背景色*/background-image: url("./aImg.png");background-size: cover;color: chartreuse;}td{border: 3px double #000;}tr{width: 200px;height: 80px;}</style>
</head>
<body><!-- 添加背景色 --><table border="1px" width="512px"  ><tr valign="middle" ><td>科目</td><td>教师</td><td>年龄</td></tr><tr valign="middle" ><td>java</td><td>张三</td><td>18</td></tr><tr valign="middle" ><td>HTML</td><td>李四</td><td>22</td></tr><tr valign="middle" ><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr valign="middle" ><td>JavaScript</td><td>小久</td><td>24</td></tr></table>
</body>
</html>

2.效果

11.tr标签的background的属性

        background 属性 (对于 <tr>) - 设置行的背景图像。例如：<tr background="row_bg.gif">。

案例：tr标签添加滤镜

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{/*** 表格边框*/border: solid 5px #00ccff;/*** 为表格添加背景色*/background-image: url("./aImg.png");background-size: cover;color: chartreuse;}td{border: 3px double #9901ff;}tr{width: 200px;height: 80px;background-color: rgba(236, 129, 129, 0.3);}</style>
</head>
<body><!-- 添加背景色 --><table border="1px" width="512px"  ><tr valign="middle" ><td>科目</td><td>教师</td><td>年龄</td></tr><tr valign="middle" ><td>java</td><td>张三</td><td>18</td></tr><tr valign="middle" ><td>HTML</td><td>李四</td><td>22</td></tr><tr valign="middle" ><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr valign="middle" ><td>JavaScript</td><td>小久</td><td>24</td></tr></table>
</body>
</html>

2.效果

12.tr标签的bgcolor属性

        bgcolor 属性 (对于 <tr>) - 设置整行的背景颜色。例如：<tr bgcolor="#FFFFCC">。

案例:使用bgcolor为tr添加背景色

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{/*** 表格边框*/border: solid 5px #3f4a4d;/*** 为表格添加背景色*/background-image: url("./aImg.png");background-size: cover;color: chartreuse;}td{border: 3px double #9901ff;}tr{width: 200px;height: 80px;}</style>
</head>
<body><!-- 添加背景色 --><table border="1px" width="512px"  ><tr valign="middle" bgcolor="#3f4a4d" ><td>科目</td><td>教师</td><td>年龄</td></tr><tr valign="middle" ><td>java</td><td>张三</td><td>18</td></tr><tr valign="middle" ><td>HTML</td><td>李四</td><td>22</td></tr><tr valign="middle" ><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr valign="middle" bgcolor="#3f4a4d" ><td>JavaScript</td><td>小久</td><td>24</td></tr></table>
</body>
</html>

2.效果

13.td标签的width和height属性

        width 和 height 属性 (对于 <td>) - 分别定义单元格的宽度和高度。例如：<td width="100" height="50">。

案例：鼠标悬浮扩大td宽高

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{/*** 表格边框*/border: solid 5px #3f4a4d;/*** 为表格添加背景色*/background-image: url("./aImg.png");background-size: cover;color: chartreuse;}td{border: 3px double #9901ff;}tr{width: 200px;height: 80px;}td:hover{background: rgba(243, 207, 0, 0.151);width: 200px;height: 80px;color: #9901ff;font-size: 30px;}</style>
</head>
<body><!-- 添加背景色 --><table border="1px" width="512px"  ><tr valign="middle" bgcolor="#3f4a4d" ><td>科目</td><td>教师</td><td>年龄</td></tr><tr valign="middle" ><td>java</td><td>张三</td><td>18</td></tr><tr valign="middle" ><td>HTML</td><td>李四</td><td>22</td></tr><tr valign="middle" ><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr valign="middle" bgcolor="#3f4a4d" ><td>JavaScript</td><td>小久</td><td>24</td></tr></table>
</body>
</html>

2.效果

14.td标签的align属性

        align 属性 (对于 <td>) - 控制单元格内文本的水平对齐方式。例如：<td align="left">。

案例:控制td文本居中

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>控制内边距到内容的距离</title><style>table {/*** 表格边框*/border: solid 5px #00ccff;}tr{height: 50px;width: 100%;border: solid 1px #000;background-color: #6e9696a1;}tr:hover{background-color: #ff060670;}td:hover{background-color: chocolate;color: #0eebb3dc;}</style></head><body><table border="1px" width="300px" height="300px" cellpadding="20px" ><tr><!-- 标题居中 --><td align="center">科目</td><td align="center">教师</td><td align="center">年龄</td></tr><tr><td>java</td><td>张三</td><td>18</td></tr><tr><td>HTML</td><td>李四</td><td>22</td></tr><tr><td>汇编语言</td><td>惜己</td><td>23</td></tr><tr><td>JavaScript</td><td>小久</td><td>24</td></tr></table></body></html>

2.效果

可以看到标题居中了

15.表结构

  • caption标签定义表名
  • thead定义表格的头部
  • tfoot定义页脚
  • tbody定义表格的主题部分

案例:编写一个简单的网页

注:这个是动态的简单的网页

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 100%;/* 设置表格宽度 */border-collapse: collapse;/* 合并边框 */text-align: center;/* 居中文本 */}th,td {padding: 10px;/* 内边距 */}.theadTdStyle {background-color: #00ccff;color: #fff;width: 25%;height: 50px;}img {display: block;/* 居中图片 */margin: auto;/* 居中图片 */border-radius: 50%;}.myImgStyle {border: 2px solid #f8f403fd;}.myImgStyle:hover {background-color: darkorange;}.myDivStyle {width: 100%;height: 300px;background-color: linear-gradient(to right, #85e7eb, #e71414);display: grid;grid-template-columns: repeat(2, 1fr);}.myBarStyle:hover {background-color: #da2626;width: 512px;height: 512px;border-radius: 0px;}.myTdStyle{width: 100%;height: 100px;background-color: #f57f7f;}/***添加阴影效果*/.myShadowStyle{box-shadow: 5px 5px  10px rgba(29, 112, 196, 0.5);}.myShadowStyleTwo{box-shadow: 5px 5px  10px rgba(72, 253, 1, 0.911);}/***添加简单的动画效果*/.myEasyAnimation{animation: myAnimation 5s linear 2s infinite alternate;}@keyframes myAnimation{0%{transform: scale(0.5);}50%{transform: scale(1);}100%{transform: scale(1.5);}}</style>
</head><body><table><thead><tr> <!-- 使用 tr 包含 th --><th class="theadTdStyle myShadowStyle">网站首页</th><th class="theadTdStyle myShadowStyle">登录页面</th><th class="theadTdStyle myShadowStyle">信息页</th><th class="theadTdStyle myShadowStyle">关于我们</th></tr></thead><tbody><tr><td colspan="4"><div class="myImgStyle myDivStyle myShadowStyleTwo"><img src="./aImg.png" alt="" class="myBarStyle myShadowStyleTwo"style="background-size: cover;width: 300px;height: 300px;"></img><img src="./aMouse.png" class="myBarStyle myShadowStyleTwo"style="background-size: cover;width: 300px;height: 300px;"></img></div></td></tr><tr><td class="myImgStyle myEasyAnimation"><img src="./aImg.png"></td><td class="myImgStyle myEasyAnimation"><img src="./aImg.png"></td><td class="myImgStyle myEasyAnimation"><img src="./aImg.png"></td><td class="myImgStyle myEasyAnimation"><img src="./aImg.png"></td></tr></tbody><tfoot><tr><td class="myTdStyle" colspan="4">&copy; 版权惜.己所有</td></tr></tfoot></table>
</body></html>

2.效果

附录:

所用素材下载

aMouse.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘

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

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

相关文章

全新芒果YOLOv10改进135:最新注意力机制EMA:即插即用,具有跨空间学习的高效多尺度注意力模块，ICCASSP 2023

全新芒果YOLOv10改进135:最新注意力机制EMA:即插即用,具有跨空间学习的高效多尺度注意力模块，ICCASSP 2023

💡本篇内容：芒果YOLOv10改进135:最新注意力机制EMA:即插即用,具有跨空间学习的高效多尺度注意力模块，ICCASSP 2023 **具有跨空间学习的高效多尺度注意力模块EMA | 即插即用 该模块通常包括多个并行的注意力子模块，每个子模块关注于输入数据的不同尺度或分辨率。这些子模块…
阅读更多...
HTML+CSS表单控件（11个案例+代码+效果图）

HTML+CSS表单控件（11个案例+代码+效果图）

目录 单行文本框 (text) 案例:制作一个单行文本框 1.代码 2.效果 密码输入框 (password) 案例:制作密码输入框 1.代码 2.效果 单选按钮 (radio) 案例:制作单选按钮 1.代码 2.效果 复选框 (checkbox) 案例:制作一个复选框 1.代码 2.效果 普通按钮 (button) 案例:制作一个普通按钮…
阅读更多...
Java毕业设计实战项目之基于SSM框架的民宿预定系统

Java毕业设计实战项目之基于SSM框架的民宿预定系统

项目技术架构&#xff1a; 该SSMVue的民宿预定系统&#xff0c;后端采用SSM架构&#xff0c;前端采用VueElementUI实现页面的快速开发&#xff0c;并使用关系型数据库MySQL存储系统运行数据。本系统分为三种角色&#xff0c;分别是系统管理员&#xff0c;用户&#xff0c;房主…
阅读更多...
RD-Agent Windows安装教程

RD-Agent Windows安装教程

RD-Agent Windows安装教程 QuantML QuantML 2024年09月23日 18:30 Content RD-Agent 是微软亚洲研究院推出的一款自动化研究与开发工具&#xff0c;能够通过LLMs自动构建因子和策略&#xff0c;相关介绍见我们之前的文章&#xff1a;RD-Agent &#xff1a;自动化Quant工厂 然…
阅读更多...
10.5二分专练,二分边界情况,+1不加1的判断,方向判断,各种DEBUG

10.5二分专练,二分边界情况,+1不加1的判断,方向判断,各种DEBUG

5 https://leetcode.cn/problems/minimum-speed-to-arrive-on-time/submissions/570242512/ 就是说总时间是 前n-1量汽车的运行时间&#xff0c;向上取整&#xff0c;然后再加上最后一辆列车的运行时间 最快的话是需要n-1个小时 搜索空间就是时速&#xff0c;左边界是1&#x…
阅读更多...
windows中下载、安装、配置JDK/JDK环境配置/Java配置环境变量/Linux中安装配置JDK环境

windows中下载、安装、配置JDK/JDK环境配置/Java配置环境变量/Linux中安装配置JDK环境

JDK下载(官网)、安装、配置(包括系统、idea、eclipse)一篇就够了 1、问题概述？ Java开发者必须掌握的JDK下载、安装、配置过程。 包括在Eclipse及IDEA中的配置使用 2、下载JDK 【注册Oracle官网账号】 下载的前天是注册orcle官网账号，作为开发者，这个必须有，随时关注…
阅读更多...
VBA信息获取与处理第三个专题第三节：工作薄在空闲后自动关闭

VBA信息获取与处理第三个专题第三节：工作薄在空闲后自动关闭

《VBA信息获取与处理》教程(版权10178984)是我推出第六套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。这部教程给大家讲解的内容有&#xff1a;跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互…
阅读更多...
Web安全 - 路径穿越（Path Traversal）

Web安全 - 路径穿越（Path Traversal）

文章目录 OWASP 2023 TOP 10导图定义路径穿越的原理常见攻击目标防御措施输入验证和清理避免直接拼接用户输入最小化权限日志监控 ExampleCode漏洞代码&#xff1a;路径穿越攻击案例漏洞说明修复后的安全代码代码分析 其他不同文件系统下的路径穿越特性Windows系统类Unix系统&a…
阅读更多...
记录｜Modbus-TCP产品使用记录【摩通传动】

记录｜Modbus-TCP产品使用记录【摩通传动】

目录 前言一、摩通传动实验图1.1 配置软件 IO_Studio1.2 测试软件Modbus Poll1.2.1 读写设置测试1.2.2 AI信号的读取 1.3 对应的C#连接Modbus的测试代码如下【自制&#xff0c;仅供参考】1.4 最终实验图 更新时间 前言 参考文章&#xff1a; 自己需要了解和对比某些产品的Modbu…
阅读更多...
【MySQL】服务器管理与配置

【MySQL】服务器管理与配置

MySQL服务器 服务器默认配置 查看服务器默认选项和系统变量 mysqld --verbose --help 查看运行时的系统变量&#xff0c;可以通过like去指定自己要查询的内容 状态变量的查看 系统变量和状态变量的作用域 全局作用域&#xff1a; 对于每个会话都会生效当前会话&#xff1a;只…
阅读更多...
初识算法 · 滑动窗口(1)

初识算法 · 滑动窗口(1)

目录 前言&#xff1a; 长度最小的子数组 题目解析 算法原理 算法编写 无重复长度的最小字符串 题目解析 算法原理 算法编写 前言&#xff1a; 本文开始&#xff0c;介绍的是滑动窗口算法类型的题目&#xff0c;滑动窗口本质上其实也是双指针&#xff0c;但是呢&#…
阅读更多...
异常处理【C++提升】（基本思想，重要概念，异常处理的函数机制、异常机制，栈解旋......你想要的全都有）

异常处理【C++提升】（基本思想，重要概念，异常处理的函数机制、异常机制，栈解旋......你想要的全都有）

更多精彩内容..... &#x1f389;❤️播主の主页✨&#x1f618; Stark、-CSDN博客 本文所在专栏&#xff1a; C系列语法知识_Stark、的博客-CSDN博客 座右铭&#xff1a;梦想是一盏明灯&#xff0c;照亮我们前行的路&#xff0c;无论风雨多大&#xff0c;我们都要坚持不懈。 异…
阅读更多...
828华为云征文｜华为云Flexus云服务器X实例搭建部署H5美妆护肤分销商城、前端uniapp

828华为云征文｜华为云Flexus云服务器X实例搭建部署H5美妆护肤分销商城、前端uniapp

准备国庆之际&#xff0c;客户要搭个 H5 商城系统&#xff0c;这系统好不容易开发好啦&#xff0c;就差选个合适的服务器上线。那可真是挑花了眼&#xff0c;不知道哪款性价比高呀&#xff01;就像在琳琅满目的选择前。最终慧眼识珠&#xff0c;选择了华为云 Flexus X。至于为什…
阅读更多...
redis高级篇 抢红包案例的设计以及分布式锁

redis高级篇 抢红包案例的设计以及分布式锁

一 抢红包案例 1.1 抢红包 二倍均值算法&#xff1a; M为剩余金额&#xff1b;N为剩余人数&#xff0c;公式如下&#xff1a; 每次抢到金额随机区间&#xff08;0&#xff0c;&#xff08;M/N&#xff09;*2&#xff09; 这个公式&#xff0c;保证了每次获取的金额平均值…
阅读更多...
TX-LCN框架 分布式事务

TX-LCN框架 分布式事务

一、三种事务模式 1&#xff09;LCN 基于XA协议&#xff0c;事务提交或回滚的操作由事务管理服务器统一告诉它管理的多个项目&#xff0c;也就是说在A事务&#xff0c;B事务的事务提交操作或回滚操作都是在同一时刻发生&#xff0c;并且要么都提交&#xff0c;要么都回滚。 LCN…
阅读更多...
低代码可视化-UniApp二维码可视化-代码生成器

低代码可视化-UniApp二维码可视化-代码生成器

市面上提供了各种各样的二维码组件&#xff0c;做了一简单的uniapp二维码组件&#xff0c;二维码实现依赖davidshimjs/qrcodejs。 组件特点 跨浏览器支持&#xff1a;利用Canvas元素实现二维码的跨浏览器兼容性&#xff0c;兼容微信小程序、h5、app。 无依赖性&#xff1a;QR…
阅读更多...
数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（一）.创建基础表

数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（一）.创建基础表

一. 使用工具和命令 1.1 使用的工具 Navicat Premium 17 &#xff1a;“Navicat”是一套可创建多个连接的数据库管理工具。 MySQL版本8.0.39 。 1.2 使用的命令 Navicat中使用的命令 命令命令解释SHOW DATABASES&#xff1b;展示所有的数据库CREATE DATABASE 数据库名称; 创…
阅读更多...
震动传感器介绍及实战

震动传感器介绍及实战

目录 前言 震动传感器 1.震动传感器配图 2.震动传感器原理图 3.震动传感器使用 1-震动传感器的意义 2-震动传感器的应用场景 3- SW-18010P震动传感器使用方法 震动传感器控制灯 操作 增加延时 使用SPC-ISP生成演示函数 总结 前言 我们上节已经简单了解了LED的使用…
阅读更多...
【机器学习】音乐生成——AI如何创作个性化音乐与配乐

【机器学习】音乐生成——AI如何创作个性化音乐与配乐

我的主页&#xff1a;2的n次方_ 音乐是人类文化的重要组成部分&#xff0c;它具有极强的情感表达和艺术价值。近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;AI已经能够自动生成音乐&#xff0c;甚至根据用户需求创作个性化配乐。AI生成音乐的应用场景广泛&…
阅读更多...
redis中的数据类型(Set与ZSet)

redis中的数据类型(Set与ZSet)

&#xff08;一&#xff09;set set在我们目前有两个意思&#xff0c;首先就是这里使用的集合&#xff0c;第二个是我们的set和get方法 因为set是一个集合&#xff0c;所以他具有集合的一些特点&#xff1a; 1.集合中的元素无序 2.集合中的元素是不可重复的 3.集合间是可…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023