【Java Web学习笔记】 1 - HTML入门

项目代码

https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/html

零、网页的组成

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片视频等。

CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的
 

一、HTML介绍

1.HTML是什么

1). HTML ( HyperText Mark-up Language)即超文本标签语言(可以展示的内容类型很多)

2). HTML文本是由HTML标签组成的文本,可以包括文字、图形、动画、声音、表格、链接等

3). HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息.

2.HTML的两种打开方式

本地运行

远程运行

二、HTML快速入门

HTML 教程

1.创建HTML文件

<!--文档类型的说明 注释-->
<!DOCTYPE html>
<!--使用语言的地区 en 表示英国美国 en-us -->
<html lang="en">
<!--html头-->
<head><!--charset文件字符集--><meta charset="UTF-8"><!--文件标题--><title>Title</title>
</head>
<!--body体 主题部分-->
<body><!--内容-->hello,world
</body>
</html>

注意事项和细节

1. HTML文件不需要编译,直接由浏览器进行解析执行

2.可以选择的浏览器,是你电脑安装有的浏览器,如果没有安装这个浏览器,会报错

2.HTML基本结构

三、HTML标签

html的标签/元素说明

1. HTML标签用两个尖括号"<>"括起来

2. HTML标签一般是双标签, 如<b>和</b>前一一个标签是起始标签,后一个标签为结束标签

3.两个标签之间的文本是htmI元素的内容

4.某些标签称为"单标签",因为它只需单独使用就能完整地表达意思,如<br/> <hr/>

5. HTML元素指的是从开始标签到结束标签的所有代码。

<!--文档类型的说明 注释-->
<!DOCTYPE html>
<!--使用语言的地区 en 表示英国美国 en-us -->
<html lang="en">
<!--html头-->
<head><!--charset文件字符集--><meta charset="UTF-8"><!--文件标题--><title>Title</title>
</head>
<!--body体 主题部分-->
<body>
<!--内容-->
hello,world
<!--单标签-->
<hr/>
mary<br/>  <!-- br/ 代表换行 -->
smith
</body>
</html>

htmI标签注意事项和细节

1.创建D:\idea_ java_ projects\hspedutemp200\tag-detail.html 说明标签使用的细节,(html命名规范xx.yy.htmI xx-yy.html xx_ .yy.html 根据公司规范要求即可)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签使用细节</title>
</head>
<body>
<!--标签使用细节:1.标签不能交叉嵌套2.标签必须正确关闭3.注释不能嵌套4. html 语法不严谨。有时候标签不闭合,属性值不带””也不报错
-->
<!--标签不能交叉嵌套-->
<!--<div><span>tom</div></span> 错误用法-->
<div><span>tom</span></div><!--标签必须正确关闭-->
<span>jack</span><!--注释不能嵌套 --><!--html 语法不严谨。有时候标签不闭合,属性值不带””也不报错-->
<font color="red">张飞</font>
<font color=blue>关羽</font>
<br/>
</body>
</html>

1.forn字体标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font标签</title>
</head>
<body>
<!-- 字体标签应用实例 1:在网页上显示 北京 ,并修改字体为 微软雅黑,颜色为蓝色。font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)(1)color 属性修改颜色(2)face 属性修改字体(3)size 属性修改文本大小多说一句,对应标签的属性,顺序不做要求
-->
<font size="40px" face="微软雅黑" color="red">北京</font>
</body>
</html>

2.字符实体

1.在网页上显示一些特殊的符号,称为字符实体(也叫符号实体)。

2.应用实例创建将<hr />标签以文本方式显示在页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字符实体</title>
</head>
<body>
<!-- 特殊字符 应用实例:把 <hr />  变成文本 显示在页面上常用的特殊字符:< : &lt;> : &gt;空格 : &nbsp;
-->
jack
<!--浏览器会将 <hr/>解析成一条线-->
<hr/>
&lt;hr/&gt;
smith smith2        hsp<br/>
smith smith2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hsp
</body>
</html>

3.字符实体一览

4.标题标签

1.标题使用<h1> - <h6>标签进行定义。<h1>定义最大的标题。<h6> 定义最小的标题

2.应用实例创建title.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题标签</title>
</head>
<body>
<!-- 标题标签
应用实例:演示标题 1 到 标题 6 的
h1 - h6 都是标题标签 h1 : 最大 h6 : 最小
align: 属性是对齐属性
left: 左对齐(默认)
center :居中
right : 右对齐
-->
<h1>标签1</h1>
<h2>标签2</h2>
<h3 align="center">标签3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6 align="right">标签6</h6>
</body>
</html>

5.超链接标签

1.超链接是指从一个网页指向一个目标的链接关系,这个目标可以是另一一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一一个文件,甚至是一一个应用程序。

2.应用实例创建link.html;链接到搜狐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接标签</title>
</head>
<body>
<!--老韩说明:a 标签是 超链接href 属性设置连接的地址target 属性设置哪个目标进行跳转_self : 表示当前页面(默认值), 即使用当前替换目标页_blank :  表示打开新页面来进行跳转点击超链接,打开邮件
-->
<a href="http://www.sohu.com">搜狐</a><br/>
<a href="http://www.sohu.com" target="_blank">搜狐2</a><br/>
<a href="mailto:tom@sohu.com">联系管理员</a>
</body>
</html>

6.无序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ul li标签</title>
</head>
<body>
<!--ul :  表示无序列表li :  列表项type属性:指定列表项前的符号
-->
<h1>五虎将</h1>
<ul type="circle"><li>jack</li><li>tom</li><li>smith</li><li>mary</li><li>milan</li>
</ul>
</body>
</html>

7.有序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>有序列表ol-li</title>
</head>
<body>
<!--ol :  表示有序列表li :  列表项type属性:指定列表项前排序方式type 设定数目款式,其值有五种,默认为 start="1"。i可以取以下值中的任意一个:1 阿拉伯数字 1, 2, 3, ...a 小写字母 a, b, c, ...A 大写字母 A, B, C, ...i 小写罗马数字 i, ii, iii, ...I 大写罗马数字 I, II, III, ... 。
-->
<h1>五虎将</h1>
<ol type="I" start="3"><li>jack</li><li>tom</li><li>smith</li><li>mary</li><li>milan</li>
</ol>
</body>
</html>

8.图像标签

1.img标签可以在html页面上显示图片

2.应用实例:创建img.html:如图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签</title>
</head>
<body>
<!--应用实例:使用 img 标签显示一张美女的照片。img:  标签是图片标签,用来显示图片src:  属性可以设置图片的路径width:  属性设置图片的宽度height: 属性设置图片的高度border:  属性设置图片边框大小alt:  属性设置当指定路径找不到图片时,用来代替显示的文本内容相对路径:从工程名开始算绝对路径:盘符:/目录/文件名路径:在 web 中路径分为相对路径和绝对路径两种相对路径: . 表示当前文件所在的目录.. 表示当前文件所在的上一级目录文件名 : 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略绝对路径: 正确格式是: http://IP地址:port/工程名/资源路径 , 即使用url方式定位资源错误格式是: 盘符:/目录/文件名
-->
<h1>图片标签的演示</h1>
<!-- ./imgs/1.png 表示当前路径下的 imgs文件夹下的 1.png-->
<!-- 在进行图片缩放时,建议指定 width 或者 height 即可,浏览器会按照比例显示-->
<img src="./imgs/1.png" height="150"  width="400" > <br/>
<img src="./imgs/1.png" height="150"  border="10px"><br/>
<img src="./imgs/2.png" alt="美女找不到"><br/>
</body>
</html>


9.表格(table)标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title>
</head>
<body>
<!-- 说明:table: 标签是表格标签 border: 设置表格边框width: 设置表格宽度  height: 设置表格高度align: 设置表格相对于页面的对齐方式cellspacing: 设置单元格间距tr :是行标签 th :是表头标签  td :是单元格标签align: 设置单元格文本对齐方式  b :是加粗标签px:表示像素 - java 坦克大战ctrl +shift + 下光标--><table width="500" border="6" align="center"><h1 align="center">表格标签的使用</h1><tr><th>名字</th><th>住址</th><th>邮件</th></tr><tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td></tr>
</table>
</body>
</html>

10.表格标签 - 跨行跨列表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格(跨行跨列)</title>
</head>
<body>
<!--column列合并列 : colspan="列数"合并行 : rowspan="行数"cellspacing : 指定单元格间的空隙大小 :0 表示没有空隙bordercolor: 指定表格边框的演示border: 表格边框width: 表格的宽度思路:1. 先把整个表格的完整的行和列,展示出来5*32. 在使用合并的技术,来处理3. 如果是16进制的颜色,前面#
-->
<table border="1" height="250" bordercolor="#E87EFA" cellspacing="0" width="500"><tr><!--合并了3列--><td align="center" colspan="3">第1行第1列</td></tr><tr><!-- 合并行,跨行 row行--><td rowspan="2">第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第2列</td><td>第3行第3列</td></tr><tr><!--合并行,跨行 row行--><td rowspan="2">第4行第1列</td><td>第4行第2列</td><td>第4行第3列</td></tr><tr><td>第5行第2列<img src="imgs/2.png" width="100"></td><td>第5行第3列</td></tr>
</table>
</body>
</html>

11.form表单标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单登录</title>
</head>
<body>
<!--1. form 表示表单2. action: 提交到哪个页面3. method: 提交方式 ,常用 get 和 post4. input type=text 输入框5. input type=password 密码框6. input type=submit 提交按钮7. input type=reset 重置按钮老韩小技巧: 为了个汉字对齐,输入全角的空格即可多说一句: method 不写默认是get
-->
<h1>登录系统</h1>
<form action="ok.html" method="get">用户名:<input type="text" name="username"><br/>密 码:<input type="password" name="username"><br/><input type="submit" value="登录"> <input type="reset" value="重新填写">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录成功</title>
</head>
<body><h1>恭喜你,登录OK</h1>
</body>
</html>
1.input标签/元素

2.select/option/textarea标签

value是提交的 用户看不到

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单综合案例</title>
</head>
<body>
<!--form 标签就是表单input type=text : 是文件输入框  value 设置默认显示内容input type=password 是密码输入框 value 设置默认显示内容input type=radio 是单选框 name 属性可以对其进行分组checked="checked"表示默认选中inputtype=checkbox 是复选框 checked="checked"表示默认选中input type=reset 是重置按钮 value 属性修改按钮上的文本input type=submit 是提交按钮 value 属性修改按钮上的文本input type=button 是按钮 value 属性修改按钮上的文本input type=file 是文件上传域input type=hidden 是隐藏域当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)select 标签是下拉列表框option 标签是下拉列表框中的选项selected="selected"设置默认选中textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)rows 属性设置可以显示几行的高度cols 属性设置每行可以显示几个字符宽度老师提醒,一定一定使用form 标签将input元素包起来一定一定要给input元素设置 name属性,否则,数据提交不到服务器注意:checkbox是复选框,如果希望是同一组 保证name属性一致注意:在checkbox  select radio 提交数据的时候是value属性的值
-->
<form>用户注册信息<br/>用户名称: <input type="text" name="username"><br/>用户密码: <input type="password" name="pwd1"><br/>确认密码: <input type="password" name="pwd2"><br/>选择你喜欢的运动项目:<input type="checkbox" name="sport" value="lq">篮球<br/><input type="checkbox" name="sport" value="zq" checked>足球<br/><input type="checkbox" name="sport" value="sq" checked>手球<br/>请选择性别 :<input type="radio" name="gender" value="male">男<br/><input type="radio" name="gender" value="female">女<br/>请选择城市:<select name="city"><option>--选择--</option><option value="cd">成都</option><option value="bj">北京</option><option value="sh">上海</option></select><br/>自我介绍:<textarea rows="6" cols="20"></textarea><br/>选择你的文件(头像)<input type="file" name="myfile"><br/><input type="submit" value="提交"/> <input type="reset" value="重置"/>
</form>
</body>
</html>
3.表单格式化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单格式化</title>
</head>
<body>
<!--form 标签就是表单input type=text : 是文件输入框  value 设置默认显示内容input type=password 是密码输入框 value 设置默认显示内容input type=radio 是单选框 name 属性可以对其进行分组checked="checked"表示默认选中inputtype=checkbox 是复选框 checked="checked"表示默认选中input type=reset 是重置按钮 value 属性修改按钮上的文本input type=submit 是提交按钮 value 属性修改按钮上的文本input type=button 是按钮 value 属性修改按钮上的文本input type=file 是文件上传域input type=hidden 是隐藏域当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)select 标签是下拉列表框option 标签是下拉列表框中的选项selected="selected"设置默认选中textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)rows 属性设置可以显示几行的高度cols 属性设置每行可以显示几个字符宽度老师提醒,一定一定使用form 标签将input元素包起来一定一定要给input元素设置 name属性,否则,数据提交不到服务器注意:checkbox是复选框,如果希望是同一组 保证name属性一致注意:在checkbox  select radio 提交数据的时候是value属性的值
-->
<form><h1>用户注册信息</h1><table width="400"><tr><td>用户名称: </td><td><input type="text" name="username"></td></tr><tr><td>用户密码: </td><td><input type="password" name="pwd1"></td></tr><tr><td>确认密码: </td><td><input type="password" name="pwd2"></td></tr><tr><td>选择你喜欢的运动项目:</td><td><input type="checkbox" name="sport" value="lq">篮球 <input type="checkbox" name="sport" value="zq" checked>足球 <input type="checkbox" name="sport" value="sq" checked>手球</td></tr><tr><td>请选择性别 :</td><td><input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女</td></tr><tr><td>请选择城市:</td><td><select name="city"><option>--选择--</option><option value="cd">成都</option><option value="bj">北京</option><option value="sh">上海</option></select></td></tr><tr><td>自我介绍:</td><td><textarea rows="6" cols="20"></textarea></td></tr><tr><td>选择你的文件(头像)</td><td><input type="file" name="myfile"></td></tr><tr><td><input type="submit" value="提交"/></td><td><input type="reset" value="重置"/></td></tr></table>
</form>
</body>
</html>
4.表单的细节

表单细节

1. action表示将form表单的数据提交给哪个url,即服务器的哪个资源(servlet)

2. method 表示提交的方式 主要是get / post, 默认是get

3. 如果form表单的元素,没有写name属性,则数据不会提交

4. 对应select checkbox radio 标签,提交的数据是value指定的值

5. 对应checkbox 复选框,可以提交多个字,但是name是统一的,都是sport sprot=xx&sport=yy

6. 提交的数据,一定要放在 form标签内,否则数据不会提交

Get 和 Post 的区别简述

1. Get 请求数据是显示在浏览器地址栏http://localhost:63342/html/ok.htmlusername=jack&pwd1=111&pwd2=11&sport=lq&sport=sq&gender=male&city=bj&myfile=

2. Get 请求不安全的,而且数据是有长度限制的, 建议有重要信息,不要使用Get

3. Post 请求数据是和http传输的,在http体中,相对安全

4. Post 传输的数据长度理论上没有限制,但是在实际的应用中,也不能太大 , 即合理即可

12.div标签

1. <div>标签可以把文档分割为独立的、不同的部分

2. <div>是一个块级元素。它的内容自动地开始一一个新行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div 标签</title>
</head>
<body>
<!--1. <div> 标签可以把文档分割为独立的、不同的部分2. <div> 是一个块级元素。它的内容自动地开始一个新行, 不需要写<br/>style : 样式-> CSS 详细介绍, 先简单的使用,混个眼熟
-->
hello,world
<div><h3 style="color: blue">this is a h3</h3><a href="http://www.baidu.com">goto 百度</a>
</div>
</body>
</html>

13.p标签

1. <p>标签定义段落

2.p元素会自动在其前后创建一些空白。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>段落标签</title>
</head>
<body>
<!--1. <p> 标签定义段落2. p 元素会自动在其前后创建一些空白
-->
hello,world
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>

14.span标签

1.span标签是内联元素,不像块级元素(如: div标签、p标签等)有换行的效果。

2.如果不对span应用样式,span标签没有任何的显示效果

3.语法: <span>内容</span>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>span标签</title>
</head>
<body>
<!--1. span标签是内联元素,不像块级元素(如:div标签、p标签等)有换行的效果。2. 如果不对span应用样式,span标签没有任何的显示效果3. 语法:<span>内容</span>老韩说明:(1) span标签是内联元素(内嵌元素, 行内元素), 没有换行效果(2) 如果不对span应用样式,span标签没有任何的显示效果(3) 往往是为了单独的去控制某个关键的内容
-->
您的购物车有<sapn style="color: red;font-size: 40px">10</sapn>个商品
</body>
</html>

四、课堂测试

HTML 测验

五、课后作业

1.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 align="center">雇员列表</h1>
<table bordercolor = "blue" align="center" width = "800" border="10"><h1 ><tr align="center"><th>编号</th><th>名字</th><th>性别</th><th>薪水</th><th>职位</th><th>email</th></tr><tr align="center"><td>111</td><td>松江</td><td>男</td><td>1000</td><td>总裁</td><td>643013242@qq.com</td></tr><tr align="center"><td>111</td><td>松江</td><td>男</td><td>1000</td><td>总裁</td><td>643013242@qq.com</td></tr><tr align="center"><td>111</td><td>松江</td><td>男</td><td>1000</td><td>总裁</td><td>643013242@qq.com</td></tr></h1>
</table>
</body>
</html>

 2.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h4 align="center">课表</h4>
<table bordercolor = "blue" align="center" width = "800" border="10"><h1 ><tr align="center"><th>项目</th><th colspan="5" align="center">上课</th><th colspan="2" align="center">休息</th></tr><tr align="center"><th>星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期天</th></tr><tr ><td rowspan="4" align="center">上午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td rowspan="4" align="center">休息</td></tr><tr ><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr><tr ><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr><tr ><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr><tr cellspacing = "2"><td rowspan="2" align="center">下午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td rowspan="2" align="center">休息</td></tr><tr ><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr></h1>
</table>
</body>
</html>

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

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

相关文章

类,封装,包

类&#xff0c;封装&#xff0c;包 一级目录1&#xff1a;下面代码的运行结果是&#xff08;&#xff09;2&#xff1a;以下哪项说法是正确的&#xff1f;3&#xff1a;以下代码在编译和运行过程中会出现什么情况4&#xff1a;在JAVA中&#xff0c;假设A有构造方法A(int a)&…

树基本概念+前中后序遍历二叉树

&#x1f308;一、树的基本概念 ☀️1.树的定义&#xff1a;树是一种非线性结构&#xff0c;看起来像一棵倒挂的树&#xff0c;根朝上&#xff0c;而叶朝下。 ☀️2.相关术语 1.根节点&#xff1a;图中的A&#xff0c;无前驱结点 2.叶节点&#xff08;终端节点&#xff09;&a…

代码随想录 738. 单调递增的数字

题目 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 示例 1: 输入: n 10 输出: 9 示例 2: 输入: n 1234 输出: 1234 示例 3: 输…

第九节HarmonyOS 常用基础组件4-Button

一、Button Button组件主要用来响应点击操作&#xff0c;可以包含子组件。 示例代码&#xff1a; Entry Component struct Index {build() {Row() {Column() {Button(确定, { type: ButtonType.Capsule, stateEffect: true }).width(90%).height(40).fontSize(16).fontWeigh…

Python多线程使用(二)

使用多个线程的时候容易遇到一个场景&#xff1a;多个线程处理一份数据 使用多线程的时候同时处理一份数据&#xff0c;在threading中提供了一个方法&#xff1a;线程锁 Demo&#xff1a;下订单 现在有多笔订单下单&#xff0c;库存减少 from threading import Thread from t…

Java类的初始化顺序

类初始化顺序遵循以下三个原则&#xff08;优先级依次递减&#xff09; 1、静态对象&#xff08;变量&#xff09;优先于非静态对象&#xff08;变量&#xff09;初始化&#xff0c;其中静态对象&#xff08;变量&#xff09;只初始化一次&#xff0c;而非静态对象&…

【海思SS528 | VO】MPP媒体处理软件V5.0 | 视频输出模块——学习笔记

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

谈谈MYSQL索引

基本介绍 索引是帮助MySQL高效获取数据的数据结构&#xff0c;主要是用来提高数据检索的效率&#xff0c;降低数据库的IO成本&#xff0c;同时通过索引列对数据进行排序&#xff0c;降低数据排序的成本&#xff0c;也能降低了CPU的消耗。 通俗来说, 索引就相当于一本书的目录,…

WebGL笔记:图形缩放的原理和实现

缩放 1 &#xff09;原理 缩放可以理解为对向量长度的改变&#xff0c;或者对向量坐标分量的同步缩放 如下图&#xff0c;比如让向量OA 收缩到点B的位置&#xff0c;也就是从OA变成OB&#xff0c;缩放了一半 2 &#xff09;公式 已知 点A的位置是(ax,ay,az)点A基于原点內缩了…

CTF特训日记day2

day2打了一个叫NBCTF的比赛 做了四个题&#xff0c;剩下五道arm的题不会做了&#xff0c;关注一下wp&#xff0c;也许可以靠这个比赛提升一波异架构能力。 heapnotes 2.31简单堆题&#xff0c;没啥好说的&#xff0c;直接改got就行了 from re import L from pwn import * f…

Redis 入门、基础。(五种基本类型使用场景)

文章目录 1. 概况1.1 认识 NoSQL1.1.1 查询方式1.1.2 事务1.1.3 总结 2. 认识 Redis4. Redis 常见命令4.1 Redis 数据结构介绍4.2 Redis 通用命令4.3 Redis 命令之 String 命令4.4 Redis 命令的层级结构4.5 Redis 命令之 Hash 命令4.6 Redis 命令之 List 命令4.7 set 唯一不排序…

SparkSQL远程调试(IDEA)

启动Intellij IDEA&#xff0c;打开spark源码项目&#xff0c;配置远程调试 Run->Edit Configuration 启动远程spark-sql spark-sql --verbose --driver-java-options "-Xdebug -Xrunjdwp:transportdt_socket,servery,suspendy,address5005"参数说明&#xff1a;…

css实现简单的抽奖动画效果和旋转效果,还有春联效果

使用css的animation和transform和transition可以实现简单的图片放大缩小&#xff0c;旋转&#xff0c;位移的效果&#xff0c;由此可以延伸的动画效果还是挺多的&#xff0c;比如图片慢慢放大&#xff0c;图片慢慢旋转并放大&#xff0c;图片慢慢变化位置等等&#xff0c; 抽奖…

重新认识Word——样式

重新认识Word Word样式给所有一级标题加上一级标题样式修改标题一样式&#xff0c;符合要求 正文样式标题前的小黑点导航窗格样式的相互复制Word一键转PPT 话说回来&#xff0c;一个程序员平时可能还看不起office全家桶的软件&#xff0c;但是&#xff0c;在实际的生活运用中&a…

苍穹外卖面试题-下

17. 项目参与人员角色 项目经理&#xff08;1人&#xff09;&#xff1a;对整个项目负责&#xff0c;任务分配、把控进度 产品经理&#xff08;1人&#xff09;&#xff1a;进行需求调研&#xff0c;输出需求调研文档、产品原型等 UI设计师&#xff08;1人&#xff09;&#…

电商产品经理常用的ChatGPT通用提示词模板

电商产品规划和策略&#xff1a;请帮助我规划和制定电商产品的策略和计划&#xff0c;包括市场调研、用户需求分析、产品定位、竞争对手分析等方面的内容&#xff0c;以便我能够更好地把握市场机会并制定相应的发展策略。 电商产品设计和开发&#xff1a;请帮助我进行电商产品…

Canvas和SVG有什么区别?a元素除了用于导航外,还有什么作用?如何在页面上实现一个圆形的可点击区域?

Canvas和SVG有什么区别? svg 绘制出来的每一个图形的元素都是独立的 DOM 节点&#xff0c; 能够方便的绑定事件或用来修改。 canvas输出的是一整幅画布。 svg 输出的图形是矢量图形&#xff0c;后期可以修改参数来自由放大缩小&#xff0c;不会失真和锯齿 。而canvas 输出标量…

springboot 整合 RocketMQ 可用于物联网,电商高并发场景下削峰,保证系统的高可用

本文根据阿里云 RocketMQ产品文档整理&#xff0c;地址:https://help.aliyun.com/document_detail/29532.html?userCodeqtldtin2 RocketMQ是由阿里捐赠给Apache的一款低延迟、高并发、高可用、高可靠的分布式消息中间件。经历了淘宝双十一的洗礼。RocketMQ既可为分布式应用系统…

内部培训平台的系统 PlayEdu搭建私有化内部培训平台

PlayEdu是由白书科技团队多年经营的线上教育系统&#xff0c;专为企业提供的全新企业培训方案 我们的目标是为更多的企业机构搭建私有化内部培训平台&#xff0c;以满足不断增长的培训需求 通过PlayEdu&#xff0c;企业可以有效地组织和管理培训资源&#xff0c;提供高质量的…

PriorityQueue类

PriorityQueue类 Java中的PriorityQueue是一个基于优先级堆的无界优先级队列。它是一个队列&#xff0c;可以按照元素的优先级顺序对元素进行排序&#xff0c;并且允许快速访问具有最高优先级的元素。它实现了Queue接口&#xff0c;继承了AbstractQueue类。 主要函数和方法&a…