系列学习前端之第 2 章:一文精通 HTML
全套学习 HTML+CSS+JavaScript 代码和笔记请下载网盘的资料:
链接: https://pan.baidu.com/s/1-vY2anBdrsBSwDZfALZ6FQ 提取码: 6666
HTML 全称:HyperText Markup Language(超文本标记语言)
1、 HTML 标签
1. 标签又称元素,是HTML的基本组成单位。
2. 标签分为:双标签与单标签 (绝大多数都是双标签)。
3. 标签名不区分大小写,但推荐小写,因为小写更规范。
2、HTML 标签属性
1. 用于给标签提供附加信息。
2. 可以写在:起始标签 或 单标签中,形式如下:
3. 有些特殊的属性,没有属性名,只有属性值,例如:<input disabled>
1. 不同的标签,有不同的属性;也有一些通用属性(在任何标签内都能写,后面会详细总结)。
2. 属性名、属性值不能乱写,都是W3C规定好的。
3. 属性名、属性值,都不区分大小写,但推荐小写。
4. 双引号,也可以写成单引号,甚至不写都行,但还是推荐写双引号。
5. 标签中不要出现同名属性,否则 后写的会失效,例如:<input type = "text" type = "password" >
3、HTML 基本结构
【查看网页源代码】看到的是:程序员编写的源代码。【检查】看到的是:经过浏览器 “ 处理 ” 后的源代码。备注:日常开发中,【检查】用的最多。
1. 想要呈现在网页中的内容写在 body 标签中。2. head 标签中的内容不会出现在网页中。3. head 标签中的 title 标签可以指定网页的标题。
<html><head><title>网页标题</title></head><body>......</body>
</html
4、HTML 注释
5、HTML 文档声明
6、HTML 字符编码
1. ASCII :大写字母、小写字母、数字、一些符号,共计 128 个。2. ISO 8859 - 1 :在 ASCII 基础上,扩充了一些希腊字符等,共计是 256 个。3. GB2312 :继续扩充,收录了 6763 个常用汉字、 682 个字符。4. GBK :收录了的汉字和符号达到 20000+ ,支持繁体中文。5. UTF - 8 :包含世界上所有语言的:所有文字与符号。 —— 很常用。
原则 1 :存储时,务必采用合适的字符编码 。否则:无法存储,数据会丢失!原则 2 :存储时采用哪种方式编码 ,读取时就采用哪种方式解码。否则:数据错乱(乱码)!
<head><meta charset = "UTF-8" /></head>
7、HTML 设置语言
8、HTML标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
在 vscode 编辑器中,输入 ! ,随后回车即可快速生成标准结构。
在存放代码的文件夹中,存放一个 favicon.ico 图片,可配置网站图标。
9、HTML 基础
1、开发者文档
W3School: https://www.w3school.com.cn/
MDN: http://developer.mozilla.org/ —— 平时用得最多
2. 排版标签
![](https://img-blog.csdnimg.cn/78db0717f0b44451ae094188273000e2.png)
3. 语义化标签
- 概念:用特定的标签,去表达特定的含义。
- 原则:标签的默认效果不重要(后期可以通过 CSS 随便控制效果),语义最重要!
- 举例:对于 h1 标签,效果是文字很大(不重要),语义是网页主要内容(很重要)。
- 优势:
- 代码结构清晰可读性强。
- 有利于 SEO(搜索引擎优化)。
- 方便设备解析(如屏幕阅读器、盲人阅读器等)。
4. 块级元素 与 行内元素
1. 块级元素:独占一行(排版标签都是块级元素)。
2. 行内元素:不独占一行(目前只学了: input ,稍后会学习更多)。
3. 使用原则:
1. 块级元素 中能写 行内元素 和 块级元素(简单记:块级元素中几乎什么都能写)。
2. 行内元素 中能写 行内元素,但不能写 块级元素。
3. 一些特殊的规则:
h1~h6 不能互相嵌套。
p 中不要写块级元素。
5.文本标签
1. 用于包裹:词汇、短语等。
2. 通常写在排版标签里面。
3. 排版标签更宏观(大段的文字),文本标签更微观(词汇、短语)。
4. 文本标签通常都是行内元素。
6、图片标签
![](https://img-blog.csdnimg.cn/cc14191dd8d54f3996ad0efe56072c87.png)
1. 像素( px )是一种单位,学到 CSS 时,我们会详细讲解。
2. 尽量不同时修改图片的宽和高,可能会造成比例失调。3. 暂且认为 img 是行内元素(学到 CSS 时,会认识一个新的元素分类,目前咱们只知道:块、行内)。4. alt 属性的作用:搜索引擎通过 alt 属性,得知图片的内容。 —— 最主要的作用。当图片无法展示时候,有些浏览器会呈现 alt 属性的值。盲人阅读器会朗读 alt 属性的值。
7、路径的分类
7.1 相对路径:以当前位置作为参考点,去建立路径。
7.2 绝对路径:以根位置作为参考点,去建立路径。
注意点:使用本地绝对路径,一旦更换设备,路径处理起来比较麻烦,所以很少使用。使用网络绝对路径,确实方便,但要注意:若服务器开启了防盗链,会造成图片引入失败
8、 常见图片格式
概述:扩展名为 .jpg 或 .jpeg ,是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。主要特点: 支持的颜色丰富、占用空间较小 、不支持透明背景、不支持动态图。使用场景:对图片细节 没有极高要求 的场景,例如:网站的产品宣传图等 。 —— 该格式网页中很常见。
概述:扩展名为 .png ,是一种无损的压缩格式,能够更高质量的保存图片。主要特点: 支持的颜色丰富 、占用空间略大、 支持透明背景 、不支持动态图。使用场景:①想让图片有透明背景;②想更高质量的呈现图片;例如 :公司 logo 图、重要配图等。
概述:扩展名为 .bmp ,不进行压缩的一种格式,在最大程度上保留图片更多的细节。主要特点: 支持的颜色丰富、保留的细节更多 、占用空间极大、不支持透明背景、不支持动态图。使用场景:对图片细节 要求极高 的场景,例如:一些大型游戏中的图片 。(网页中很少使用)
概述:扩展名为 .gif ,仅支持 256 种颜色,色彩呈现不是很完整。主要特点:支持的颜色较少、 支持 简单 透明背景、支持动态图 。使用场景:网页中的动态图片。
概述:扩展名为 .webp ,谷歌推出的一种格式,专门用来在网页中呈现图片。主要特点:具备上述几种格式的优点,但兼容性不太好,一旦使用务必要解决兼容性问题。使用场景:网页中的各种图片。
1. 本质:一串特殊的文本,要通过浏览器打开,传统看图应用通常无法打开。2. 原理:把图片进行 base64 编码,形成一串文本。3. 如何生成:靠一些工具或网站。4. 如何使用:直接作为 img 标签的 src 属性的值即可,并且不受文件位置的影响。5. 使用场景:一些较小的图片,或者需要和网页一起加载的图片。
9、超链接
9.1. 跳转到页面
<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
注意点:
1. 代码中的多个空格、多个回车,都会被浏览器解析成一个空格!
2. 虽然 a 是行内元素,但 a 元素可以包裹除它自身外的任何元素!
9.2 跳转到文件
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能打开的文件,会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意 1 :若浏览器无法打开文件,则会引导用户下载。注意 2 :若想强制触发下载,请使用 download 属性,属性值即为下载文件的名称。
9.3 跳转到锚点
什么是锚点?—— 网页中的一个标记点。
具体使用方式:
第一步:设置锚点
<!-- 第一种方式:a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式:其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
注意点:1. 具有 href 属性的 a 标签是 超链接 ,具有 name 属性的 a 标签是 锚点 。2. name 和 id 都是区分大小写的,且 id 最好别是数字开头。
第二步:跳转锚点
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么,可以留空,javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
9.4 唤起指定应用
通过 a 标签,可以唤起设备应用程序。
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
10、列表
1. 有序列表
概念:有顺序或侧重顺序的列表。
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
2. 无序列表
概念:无顺序或不侧重顺序的列表
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>深圳</li>
</ul>
3. 列表嵌套
概念:列表中的某项内容,又包含一个列表(注意:嵌套时,请务必把解构写完整)。
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href="https://www.opg.cn/">东方明珠</a>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>西安</li>
<li>武汉</li>
</ul>
注意: li 标签最好写在 ul 或 ol 中,不要单独使用。
4. 自定义列表
1. 概念:所谓自定义列表,就是一个包含术语名称以及术语描述的列表。
2. 一个 dl 就是一个自定义列表,一个 dt 就是一个术语名称,一个 dd 就是术语描述(可以有多
个)。
<h2>如何高效的学习?</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版,也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码,才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常,改正后并记住,就是经验</dd>
</dl>
11、表格
1 基本结构
table :表格caption :表格标题thead :表格头部tbody :表格主体tfoot :表格注脚tr :每一行th 、 td :每一个单元格(备注:表格头部中用 th ,表格主体、表格脚注中用: td )
<table border="1">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
2.常用属性
注意点:
1. <table> 元素的 border 属性可以控制表格边框,但 border 值的大小,并不控制单元格边框的宽度,只能控制表格最外侧边框的宽度,这个问题如何解决? —— 后期靠 CSS 控制。2. 默认情况下,每列的宽度,得看这一列单元格最长的那个文字。3. 给某个 th 或 td 设置了宽度之后,他们所在的那一列的宽度就确定了。4. 给某个 th 或 td 设置了高度之后,他们所在的那一行的高度就确定了。
3. 跨行跨列
![](https://img-blog.csdnimg.cn/direct/77dfd96fbd654670b50f118e1705c904.png)
12、常用标签补充
注意点:1. 不要用 <br> 来增加文本之间的行间隔,应使用 <p> 元素,或后面即将学到的 CSSmargin 属性。2. <hr> 的语义是分隔,如果不想要语义,只是想画一条水平线,那么应当使用 CSS 完成。
13、表单
1. 基本结构
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
2. 常用表单控件
<input type = "text" >
<input type = "password" >
<input type = "radio" name = "sex" value = "female" > 女<input type = "radio" name = "sex" value = "male" > 男
<input type = "checkbox" name = "hobby" value = "smoke" > 抽烟<input type = "checkbox" name = "hobby" value = "drink" > 喝酒<input type = "checkbox" name = "hobby" value = "perm" > 烫头
<input type = "hidden" name = "tag" value = "100" >
<input type = "submit" value = " 点我提交表单 " ><button> 点我提交表单 </button>
<input type = "reset" value = " 点我重置 " ><button type = "reset" > 点我重置 </button>
<input type = "button" value = " 普通按钮 " ><button type = "button" > 普通按钮 </button>
<textarea name = "msg" rows = "22" cols = "3" > 我是文本域 </textarea>
<select name = "from" ><option value = " 黑 " > 黑龙江 </option><option value = " 辽 " > 辽宁 </option><option value = " 吉 " > 吉林 </option><option value = " 粤 " selected > 广东 </option></select>
3.禁用表单控件
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
4.label 标签
5. fieldset 与 legend 的使用(了解)
6.表单总结
![](https://img-blog.csdnimg.cn/direct/f731d02fc6cb438a82acb79174f1c09f.png)
![](https://img-blog.csdnimg.cn/direct/80eeee03beb04975a4047f615164ce47.png)
![](https://img-blog.csdnimg.cn/direct/d9c7dd50a3d34ca18737e94dfac6ea6f.png)
14、框架标签
![](https://img-blog.csdnimg.cn/direct/a19a8f3a0d854b5189354281500d0ea6.png)
15、HTML实体
字符实体 由三部分组成:一个 & 和 一个实体名称(或者一个 # 和 一个实体编号),最后加上一个分号 ; 。
![](https://img-blog.csdnimg.cn/direct/4c9bac6666b7407b85bc7eb2f74b5904.png)
![](https://img-blog.csdnimg.cn/direct/2389399baa314aef9fef5034b36be124.png)
16、HTML全局属性
![](https://img-blog.csdnimg.cn/direct/9a55a00545bf45bbae721c47e2ba0f40.png)
17、meta 元信息
<meta charset = "utf-8" >
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
<meta name = "keywords" content = "8-12 个以英文逗号隔开的单词 / 词语 " >
<meta name = "description" content = "80 字以内的一段话,与网站内容相关 " >
![](https://img-blog.csdnimg.cn/direct/218045f06e814767bfc589e5c4501bcf.png)
<meta name = "author" content = "tony" >
<meta name = "generator" content = "Visual Studio Code" >
<meta name = "copyright" content = "2023-2027© 版权所有 ">
<meta http-equiv = "refresh" content = "10;url=http://www.baidu.com" >
完整的网页元信息,请参考:文档级元数据元素 | MDN
18、HTML5
1. 什么是HTML5
- HTML5 是新一代的 HTML 标准,2014年10月由万维网联盟( W3C )完成标准制定。
- 官网地址:
- W3C 提供:
- https://www.w3.org/TR/html/index.html
- WHATWG 提供:https://whatwg-cn.github.io/html/multipage
- HTML5 在狭义上是指新一代的 HTML 标准,在广义上是指:整个前端。
2. HTML5 优势
3.HTML5兼容性
4、新增语义化标签
1.新增布局标签
2.新增状态标签
3. 新增列表标签
<input type="text" list="mydata">
<datalist id="mydata">
<option value="周冬雨">周冬雨</option>
<option value="周杰伦">周杰伦</option>
<option value="温兆伦">温兆伦</option>
<option value="马冬梅">马冬梅</option>
</datalist>
<details>
<summary>如何走上人生巅峰?</summary>
<p>一步一步走呗</p>
</details>
4.新增文本标签
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
![](https://img-blog.csdnimg.cn/direct/3f59552a2bf24c8a8a56167769635487.png)
5、新增表单功能
2. input 新增属性值
3. form 标签新增属性
6、新增多媒体标签
1. 视频标签
![](https://img-blog.csdnimg.cn/direct/64e5e4c6fb46466e8dbb577d23a6b18c.png)
2.音频标签
![](https://img-blog.csdnimg.cn/direct/44814e746fcc49d8ac86696514213e20.png)
7、新增全局属性(了解)
![](https://img-blog.csdnimg.cn/direct/8b1697b8ce7f48cc976d7c435c55244b.png)
7、HTML5兼容性处理
添加元信息,让浏览器处于最优渲染模式。
<!-- 设置 IE 总是使用最新的文档模式进行渲染 --><meta http-equiv = "X-UA-Compatible" content = "IE=Edge" ><!-- 优先使用 webkit ( Chromium ) 内核进行渲染 , 针对 360 等壳浏览器 --><meta name = "renderer" content = "webkit" >
使用 html5shiv 让低版本浏览器认识 H5 的语义化标签
<!--[if lt ie 9]><script src="../sources/js/html5shiv.js"></script><![endif]-->
<!--[if IE 8]> 仅 IE8 可见 <![endif]--><!--[if gt IE 8]> 仅 IE8 以上可见 <![endif]—><!--[if lt IE 8]> 仅 IE8 以下可见 <![endif]—><!--[if gte IE 8]>IE8 及以上可见 <![endif]—><!--[if lte IE 8]>IE8 及以下可见 <![endif]—><!--[if !IE 8]> 非 IE8 的 IE 可见 <![endif]-->
相关文章:
![](https://img-blog.csdnimg.cn/direct/8b1697b8ce7f48cc976d7c435c55244b.png)
系列学习前端之第 2 章:一文精通 HTML
全套学习 HTMLCSSJavaScript 代码和笔记请下载网盘的资料: 链接: https://pan.baidu.com/s/1-vY2anBdrsBSwDZfALZ6FQ 提取码: 6666 HTML 全称:HyperText Markup Language(超文本标记语言) 1、 HTML 标签 1. 标签又称元素&#…...
![](https://www.ngui.cc/images/no-images.jpg)
SCSS Module 这样处理配置和使用太赞了
SCSS Module 只是Scss和Css Module结合,可以利用SCSS对代码静态处理的能力,使得样式处理更强大一些,并不是什么新的东西,对比css-in-js和scoped,个人偏向喜欢Scss Module做样式隔离,先说一下优点࿱…...
![](https://img-blog.csdnimg.cn/direct/adedc1192e7f4c87ad4ea80f400469d0.png)
【Unity动画】Unity 2D动画创建流程
本文以2D为案例,讲解Unity 播放动画的流程 准备和导入2D动画资源 外部导入序列帧生成的 Unity内部制作的 外部导入的3D动画 2.创建动画过程 打开时间轴Ctrl6 选中场景中的一个未来需要播放动画的物体 回到时间轴点击Create一个新动画片段 拖动2D动画资源放入…...
![](https://img-blog.csdnimg.cn/f68d05a84ef541f595c0886ca4d6a348.png)
【算法每日一练]-图论(保姆级教程篇12 tarjan篇)#POJ3352道路建设 #POJ2553图的底部 #POJ1236校园网络 #缩点
目录: 今天知识点 加边使得无向图图变成双连通图 找出度为0的强连通分量 加边使得有向图变成强连通图 将有向图转成DAG图进行dp POJ3352:道路建设 思路: POJ2553:图的底部 思路: POJ1236校园网络 思路&#x…...
![](https://img-blog.csdnimg.cn/img_convert/1285f4ce98c55042db920957a29f973c.webp?x-oss-process=image/format,png)
Python数据科学视频讲解:数据挖掘与建模的注意事项
1.7 数据挖掘与建模的注意事项 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.7节内容。本书已正式出版上市,当当、京东、淘宝等平台热销中,搜索书名即可。内容涵盖数据科学应用的全流程,包括…...
![](https://img-blog.csdnimg.cn/direct/15eba8d6765048368e25d6c1c9daa60c.png)
unity | 动画模块之循环滚动选项框
一、作者的话 评论区有人问,有没有竖排循环轮播选项框,我就写了一个 二、效果动画 如果不是你们想要的,就省的你们继续往下看了 三、制作思路 把移动分成里面的方块,还有背景(父物体),方块自…...
![](https://img-blog.csdnimg.cn/direct/d75677bbdad14e05a030446412cc8996.png)
TinyMPC - CMU (卡耐基梅隆大学)开源的机器人 MPC 控制器
系列文章目录 CasADi - 最优控制开源 Python/MATLAB 库 文章目录 系列文章目录前言一、机器人硬件对比1.1 Teensy 上的微控制器基准测试1.2 机器人硬件1.3 BibTeX 二、求解器三、功能(预期)3.1 高效3.2 鲁棒3.3 可嵌入式3.4 最小依赖性3.5 高效热启动3.…...
![](https://img-blog.csdnimg.cn/direct/39947d06061047cfb6b48e1a98afc61d.png)
C++ 对象的初始化和清理:构造函数和析构函数
目录 构造函数和析构函数 构造函数 析构函数 构造函数的分类及调用 括号法 显示法 隐式转换法 拷贝构造函数的调用时机 使用一个已经创建完毕的对象来初始化一个新对象 值传递的方式给函数参数传值 以值方式返回局部对象 构造函数调用规则 初始化列表 类对象作…...
![](https://www.ngui.cc/images/no-images.jpg)
Tmux中使用Docker报错 - 解决方案
问题 进入Tmux会话后,在其中使用Docker可能会出现如下报错: Got permission denied while trying to connect to the Docker ……解决方案 退出tmux会话: tmux detach在tmux会话外部杀掉tmux进程: pkill -f tmux重新进入tmux:…...
![](https://img-blog.csdnimg.cn/img_convert/5d5bb159cad2711a7abeedda52d30d72.webp?x-oss-process=image/format,png)
如何在WordPress中批量替换图片路径?
很多站长在使用WordPress博客或者搬家时,需要把WordPress文章中的图片路径进行替换来解决图片不显示的问题。总结一下WordPress图片路径批量替换的过程,方便有此类需求的站长们学习。 什么情况下批量替换图片路径 1、更换了网站域名 有许多网站建设初期…...
![](https://img-blog.csdnimg.cn/direct/2706584a820948e59420fa119e1ed4cf.png)
el-pagination 纯前端分页
需求:后端把所有数据都返给前端,前端进行分页渲染。 实现思路:先把数据存储到一个大数组中,然后调用方法进行切割。主要使用数组的slice方法 所有代码: html <template><div style"padding: 20px&qu…...
![](https://img-blog.csdnimg.cn/direct/084de73562a24de6bc237d1cf8e6fe18.png)
基于springboot的校园二手市场
博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...
![](https://img-blog.csdnimg.cn/3a01dc60e62c415b812015851343f1c0.png#pic_center)
【开源】基于Vue和SpringBoot的在线课程教学系统
项目编号: S 014 ,文末获取源码。 \color{red}{项目编号:S014,文末获取源码。} 项目编号:S014,文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…...
![](https://img-blog.csdnimg.cn/direct/7b804c0c619c49e7a93fc1845a0fd6aa.png)
Mysql分布式集群部署---MySQL集群Cluster将数据分成多个片段,每个片段存储在不同的服务器上
1.1 目的 部署MysqlCluster集群环境 1.2 MySQL集群Cluster原理 1 数据分片 MySQL集群Cluster将数据分成多个片段,每个片段存储在不同的服务器上。这样可以将数据负载分散到多个服务器上,提高系统的性能和可扩展性。 2. 数据同步 MySQL集群Cluster使…...
![](https://www.ngui.cc/images/no-images.jpg)
身份认证技术
身份认证是对系统的用户进行有效性、真实性验证。 1.口令认证方式 使用口令认证方式,用户必须具有一个唯一的系统标识,并且保证口令在系统的使用和存储过程中是安全的,同时口令在传输过程中不能被窃取、替换。另外特别要注意的是在…...
![](https://img-blog.csdnimg.cn/direct/2cae65ff2cb84406921c663887c6eed1.png)
Centos7、Mysql8.0 load_file函数返回为空的终极解决方法--暨selinux的深入理解
零、问题背景 最近想换房,为了方便自己对比感兴趣的房子,因此决定将目标房源的基本信息放在表里,特别是要一目了然的看到众多房子的各种图纸和照片,因此决定要在Mysql8.0.34数据库中以二进制形式保存图片(抛开合理性和…...
![](https://www.ngui.cc/images/no-images.jpg)
基于Spring Boot的水产养殖管理系统
文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring Boot的水产养殖管理系统,jav…...
![](https://img-blog.csdnimg.cn/direct/8d145442827e4660b25a5b4f74486cf7.png)
LCR 090. 打家劫舍 II(leetcode)动态规划
文章目录 前言一、题目分析二、算法原理1.状态表示2.状态转移方程3.初始化4.填表顺序5.返回值是什么 三、代码实现总结 前言 在本文章中,我们将要详细介绍一下LeetcodeLCR 090. 打家劫舍 II。采用动态规划解决,这是一道经典的多状态dp问题 一、题目分析…...
![](https://img-blog.csdnimg.cn/direct/ebdc6973839c48519dc704a1adb91ec1.png)
【小沐学Python】Python实现语音识别(Whisper)
文章目录 1、简介1.1 whisper简介1.2 whisper模型 2、安装2.1 whisper2.2 pytorch2.3 ffmpeg 3、测试3.1 命令测试3.2 代码测试:识别声音文件3.3 代码测试:实时录音识别 结语 1、简介 https://github.com/openai/whisper 1.1 whisper简介 Whisper 是…...
![](https://img-blog.csdnimg.cn/img_convert/ebb9bedd54789df6c5c1f7ab8c1b3a56.png)
Nginx负载均衡实战
🎵负载均衡组件 ngx_http_upstream_module https://nginx.org/en/docs/http/ngx_http_upstream_module.html upstream模块允许Nginx定义一组或多组节点服务器组,使用时可以通过多种方式去定义服务器组 样例: upstream backend {server back…...
![](https://www.ngui.cc/images/no-images.jpg)
Redis skiplist源码解析(支持范围查询)
跳表是一个多层的有序链表,在跳表中进行查询操作时,查询代码可以从最高层开始查询。层数越高,结点数越少,同时高层结点的跨度会比较大。因此,在高层查询结点时,查询一个结点可能就已经查到了链表的中间位置…...
![](https://img-blog.csdnimg.cn/direct/1f40d37f91a04349ad577f37650b8e46.png)
MVSNeRF:多视图立体视觉的快速推广辐射场重建(2021年)
MVSNeRF:多视图立体视觉的快速推广辐射场重建(2021年) 摘要1 引言2 相关工作3 MVSNeRF实现方法3.1 构建代价体3.2 辐射场的重建3.3 体渲染和端到端训练 3.4 优化神经编码体 Anpei Chen and Zexiang Xu and Fuqiang Zhao et al. MVSNeRF: Fast…...
![](https://www.ngui.cc/images/no-images.jpg)
华为OD机试真题-CPU算力分配-2023年OD统一考试(C卷)
题目描述: 现有两组服务器A和B,每组有多个算力不同的CPU,其中A[i]是A组第i个CPU的运算能力,B[i]是B组第i个CPU的运算能力。一组服务器的总算力是各CPU的算力之和。为了让两组服务器的算力相等,允许从每组各选出一个CPU进行一次交换,求两组服务器中,用于交换的CPU的算力,…...
![](https://www.ngui.cc/images/no-images.jpg)
校验数据是否重叠(各种操作符>,<,>=,<=,or,and)
最近接到一个需求,其中部分功能涉及到数据的重叠校验,并且录入的数据需要包含各种操作符。如果只通过java代码来查询并进行循环判断的话,判断情况会很复杂,幸好有同事的帮忙提供了一个用sql查询重叠部分的方法,现在分享…...
![](https://www.ngui.cc/images/no-images.jpg)
大一C语言作业 12.8
1.C 对一维数组初始化时,如果全部元素都赋了初值,可以省略数组长度。 这里没有指定数组长度,编译器会根据初始化列表的元素个数来确定数组长度。 2.C 在C语言中,字符数组是不能用赋值运算符直接赋值的。 3.C 在二维数组a中&#x…...
![](https://img-blog.csdnimg.cn/direct/4a3e5d851d5d4598a9978c577a9e8f05.png)
ELasticsearch:什么是语义搜索?
语义搜索定义 语义搜索是一种解释单词和短语含义的搜索引擎技术。 语义搜索的结果将返回与查询含义匹配的内容,而不是与查询中的单词字面匹配的内容。 语义搜索是一组搜索引擎功能,其中包括根据搜索者的意图及其搜索上下文理解单词。 此类搜索旨在通过…...
![](https://img-blog.csdnimg.cn/img_convert/ed3ce44023e56ec70804a596f979629c.jpeg)
ooTD I 女儿是自己的,尽情打扮尽情可爱
分享女宝的时尚穿搭 奶乎乎的黄色也太好看了 超足充绒量+优质面料 柔软蓬松上身体验感超赞 怎么穿都好看系列 轻轻松松打造时尚造型!!...
![](https://www.ngui.cc/images/no-images.jpg)
第62天:django学习(十一)
cookie和session 发展史 一开始,只有一个页面,没有登录功能,大家看到东西都一样。 时代发展,出现了需要登录注册的网站,要有一门技术存储我们的登录信息,于是cookie诞生了。 cookie: - 存储形式:k:v键值对…...
![](https://img-blog.csdnimg.cn/direct/bfe7fff7a5b843acb053c4de11de02cd.png)
Rust测试字符串的移动,Move
代码创建了一个结构体,结构体有test1 字符串,还有指向字符串的指针。一共创建了两个。 然后我们使用swap 函数 交换两个结构体内存的内容。 最后如上图。相同的地址,变成了另外结构体的内容。注意看指针部分,还是指向原来的地址…...
![](https://img-blog.csdnimg.cn/direct/91e86b399eea481e9d9db91dd215bb9a.png)
vue+electron问题汇总
1. Vue_Bug Failed to fetch extension, trying 4 more times 描述:项目启动时报错 解决:注释图片中内容 2. Module not found: Error: Can’t resolve ‘fs’ in 描述:项目启动报错 解决:vue.config.js中添加图中数据 3.导入…...
![](https://img-blog.csdnimg.cn/direct/941c16d664974fa293e77b0d6ac06280.png)
Linux中的网络时间服务器
本章主要介绍网络时间的服务器 使用chrony配置时间服务器配置chrony客户端服务器同步时间 1.1 时间同步的重要性 一些服务对时间要求非常严格,例如如图所示的由三台服务器搭建的ceph集群 这三台服务器的时间必须保持一致,如果不一致,就会显…...
![](https://img-blog.csdnimg.cn/direct/b2528f63a34b4e51b5a788071a073765.png)
fastadmin打印页面
如下图选中订单号进行打印 html中增加代码 <div id"toolbar" class"toolbar"><a href"javascript:;" class"btn btn-primary btn-refresh" title"{:__(Refresh)}" ><i class"fa fa-refresh">&l…...
![](https://img-blog.csdnimg.cn/direct/300e995470ff451f8d6adf6bee972b27.png)
Java 将word转为PDF的三种方式和处理在服务器上下载后乱码的格式
我这边是因为业务需要将之前导出的word文档转换为PDF文件,然后页面预览下载这样的情况。之前导出word文档又不是我做的,所以为了不影响业务,只是将最后在输出流时转换成了PDF,当时本地调用没什么问题,一切正常…...
![](https://www.ngui.cc/images/no-images.jpg)
C\C++ 获取最值
C C 语言的不同类型的最值可以在 limits.h 头文件里找到定义 #include <limits.h>int main() {printf("%d", INT_MAX); // 整数最大值printf("%d", INT_MIN); // 整数最小值 } C C 有模板,可以通过替换下面的 int 和 doubleÿ…...
![](https://img-blog.csdnimg.cn/img_convert/aa38d260bf42cebc54e6a6b0b02b0b6f.png)
机器学习之无监督学习:九大聚类算法
今天,和大家分享一下机器学习之无监督学习中的常见的聚类方法。 今天,和大家分享一下机器学习之无监督学习中的常见的聚类方法。 在无监督学习中,我们的数据并不带有任何标签,因此在无监督学习中要做的就是将这一系列无标签的数…...
![](https://img-blog.csdnimg.cn/direct/4ff8f55a25a14f078984096bde55e696.png)
Linux高级管理-搭建网站服务
在Ihternet 网络环境中,Web 服务无疑是最为流行的应用系统。有了Web站点,企业可以充分 展示自己的产品,宣传企业形象。Web站点还为企业提供了与客户交流、电子商务交易平台等丰富 的网络应用。部署与维护Web 服务是运维工程师必须掌握的一个技…...
![](https://img-blog.csdnimg.cn/direct/6f38d23174434fbaa1ee75afe2786432.png)
Windows 系统,TortoiseSVN 无法修改 Log 信息解决方法
使用SVN提交版本信息时,注释内容写的不全。通过右键TortoiseSVN的Show log看到提交的的注释,右键看到Edit log message的选项,然而提交后却给出错误提示: Repository has not been enabled to accept revision propchanges; ask …...
![](https://img-blog.csdnimg.cn/direct/ee2877b3790949f28e65b5eaaf363dae.png)
编译 Android gradle-4.6-all.zip 报错问题记录
编译 Android gradle-4.6-all.zip 报错问题记录 方法一:替换资源:方法二:修改源方法三:修改版本 编译时候无法下载 gradle-4.6-all Downloading https://services.gradle.org/distributions/gradle-4.6-all.zip 方法一…...
![](https://img-blog.csdnimg.cn/direct/9d0c25c87f40469e8432f346a9d802e2.png)
Linux系统调试课:Valgrind 内存调试
文章目录 一、为什么要学会Valgrind二、什么是内存泄露三、Valgrind的移植四、Valgrind相关参数沉淀、分享、成长,让自己和他人都能有所收获!😄 📢Valgrind 是一个开源的内存调试和性能分析工具,用于帮助开发者找出程序中的内存错误,如内存泄漏、使用未初始化的内存、非…...
![](https://img-blog.csdnimg.cn/8583a413868641df9456c63b79809d51.png)
python主流开发工具排名,python开发工具有哪些
本篇文章给大家谈谈python的开发工具软件有哪些,以及python主流开发工具排名,希望对各位有所帮助,不要忘了收藏本站喔。 python中用到哪些软件 一、Python代码编辑器1、sublime Textsublime Text是一款非常流行的代码编辑器,支持P…...
![](https://img-blog.csdnimg.cn/img_convert/76ce5b215727f2bce827905db5c60ff2.png)
Spring Boot Async:从入门到精通,原理详解与最佳实践
Spring Boot 的异步功能(Async)允许我们将某些任务异步执行,而不会阻塞主线程。这对于处理耗时的操作非常有用,如发送电子邮件、生成报表、调用外部 API 等。通过异步处理,我们可以释放主线程,让它继续处理…...
![](https://www.ngui.cc/images/no-images.jpg)
oracle 19c创建db_link名称带.com域名问题处理
文章目录 一、修改PDB的global_name二、重启数据库实例三、修改domain后重试 一、修改PDB的global_name SYSorcl1>sho pdbsCON_ID CON_NAME OPEN MODE RESTRICTED ---------- ------------------------------ ---------- ----------2 PDB$SEED …...
![](https://img-blog.csdnimg.cn/img_convert/f6104a54f4f0375f580cb6f8d9b67138.webp?x-oss-process=image/format,png)
银行卡二要素API的应用案例:从在线购物到金融投资
引言 随着互联网技术的不断发展,人们的金融需求也在不断增加。随之而来的是各种新型金融服务的涌现,让用户的金融体验更加便利快捷。其中,银行卡二要素API的应用,则为用户的金融体验和安全性提供了极大的保障。 银行卡二要素API…...
![](https://img-blog.csdnimg.cn/direct/a1fae57d8f6f4a02976e26e7a9301e28.png)
MySQL 忘记root密码后重置密码操作
在忘记 MySQL 密码的情况下,可以通过 --skip-grant-tables 关闭服务器的认证,然后重置 root 的密码,具体操作步骤如下。 步骤 1):关闭正在运行的 MySQL 服务。打开 cmd 进入 MySQL 的 bin 目录。 步骤 2):输入mysqld -…...
![](https://img-blog.csdnimg.cn/direct/c714fec5392c4abaa6228cfb9d65b7f4.png)
开源电子合同签署平台小程序源码/电子文件签字+在线合同签署系统源码/电子合同小程序源码
源码简介: 开源电子合同签署平台小程序源码,它是电子文件签字在线合同签署系统源码/电子合同小程序源码 目前商业端和开源端一致,免费开源状态! 聚合市场上各类电子合同解决方案商,你无需一个一个的对接电子合同厂商…...
![](https://img-blog.csdnimg.cn/direct/a3339cee96e4479ab655d7f716835a1f.png)
J.408之数据结构
J-408之数据结构_北京信息科技大学第十五届程序设计竞赛(同步赛) (nowcoder.com) 思维好题,直接用两个set存没出现的数字就好了 // Problem: 408之数据结构 // Contest: NowCoder // URL: https://ac.nowcoder.com/acm/contest/68572/J // Me…...
![](https://www.ngui.cc/images/no-images.jpg)
前端食堂技术周刊第 107 期:技术播客节、Deno Cron、FEDAY、XState v5、Electron 2023 生态系统回顾
美味值:🌟🌟🌟🌟🌟 口味:烤椰拿铁 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下…...
![](https://img-blog.csdnimg.cn/direct/51bc10cb5a8742a99cf099296eecbfaa.jpeg)
三防平板|手持终端PDA|8寸/10寸工业三防平板电脑主板方案定制
近年来,随着科技的快速发展,三防平板成为了各行各业中不可或缺的工具。三防平板采用IP67级别的防护设计,通过了多项测试标准,如国标和美标,具备防水、防摔、防尘、防撞、防震、防跌落以及防盐雾等多重防护功能。因此&a…...
![](https://img-blog.csdnimg.cn/direct/1148fdd534464e6da1207b977e640456.png)
【C语言】动态内存管理(C语言的难点与精华,数据结构的前置知识,你真的掌握了吗?)
文章目录 引言一、为什么要动态内存分配二、动态内存分配的相关函数2.1 malloc2.2 free2.3 calloc2.4 realloc 三、常见的动态内存的错误3.1 对NULL指针的解引用3.2 对动态内存越界访问3.3 对非动态内存释放3.4 对动态内存部分释放3.5 对动态内存多次释放3.6 未对动态内存释放&…...
![](https://img-blog.csdnimg.cn/direct/95ecaa17f305440382c03870adf81196.png)
最长子序列问题(LCS)--动态规划解法
题目描述: 如果Z既是X的子序列,又是Y的子序列,则称Z为X和Y的公共子序列。 如果给定X、Y,求出Y及其长度。 示例: 输入 ABCPDSFJGODIHJOFDIUSHGD OSDIHGKODGHBLKSJBHKAGHI 输出 SDIHODSHG 9 分析: c…...