[JavaWeb玩耍日记]HTML+CSS+JS快速使用
目录
一.标签
二.指定css
三.css选择器
四.超链接
五.视频与排版
六.布局测试
七.布局居中
八.表格
九.表单
十.表单项
十一.JS引入与输出
十二.JS变量，循环，函数
十三.Array与字符串方法
十四.自定义对象与JSON
十五.BOM对象
十六.获取DOM对象
十七.使用DOM对象
十八.监听事件绑定方法
十九.常见监听事件
二十. 表单处理案例
实验项目目录：
必要文件new.css:
h1 {color:black;
}
span{color: #968D92;;
}
a {color: #000;text-decoration: none;
}
p {text-indent: 50px;line-height: 40px;
}
#pLast {text-align: right;
}一.标签
该文件中的标签/元素：
标题：h1~6
图片：img
分割线：hr
换行：br
空格：
有序列表：ol+li
无序列表：ul+li
1.如何设置图片的相对路径？
./ 代表当前目录，平级可省略
../ 代表上一级目录。。
2.width与height常用单位有哪些？分别表示什么意思？
px：像素
%：相对于父元素的百分比
3.图片的width与height，如果只设置一个会发生什么？
图片将会根据其中一个将会等比例缩放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题内容</title>
</head>
<body><img src='img/news_logo.png' width="150px"> 新浪政务 > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr>2023年03月02日 21:50 央视网<br><ol type="1"><li>妙蛙种子</li><li>小火龙</li><li>杰尼龟</li></ol><ul><li>妙蛙种子</li><li>小火龙</li><li>杰尼龟</li></ul>
</body>
</html>
二.指定css
1.没有任何语义的标签：span
2.指定css的有哪三种方式？
1.写在.css文件当中,使用link标签导入
2.写在head标签的style标签中,格式与.css文件中的一样
3.在标签中用style属性指定
3.指定颜色的三种方式：
1.#968D92
2.rgb(99, 255, 255)
3.black
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/new.css">
</head>
<body><h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr><span style="color:#968D92;">2023年03月02日 21:50 央视网</span>
</body>
</html> 
三.css选择器
1.css属性设置
字体颜色：color: black;
字体大小：font-size 14px;
2.css的三个选择器是哪些？优先级如何？
元素选择器：指定某标签使用某样式
class选择器： 使用.xxx作为标识，在标签中使用class属性引用，多个标签可以有相同的class
id选择器： 使用#id作为标识，id属性不要重复
css生效优先级：id>class>标签
<!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>h1 {color: rgb(80, 80, 80);}.cls{color: #968D92;font-size: 14px;}#id{color: black;}</style>
</head>
<body><img src='img/news_logo.png' width="150px"> 新浪政务 > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr><span class="cls">2023年03月02日 21:50</span><span id="id"> 央视网 </span>
</body>
</html>
四.超链接
1.超链接标签：a
2.css属性-去掉超链接的下划线：：text-decoration: none
3.超链接标签属性：
指定链接网址：href="https://www.baidu.com/"
设置新建页面打开:target="_blank"
<!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>a{color: #000;text-decoration: none;}</style><link rel="stylesheet" href="css/new.css">
</head><body><img src='img/news_logo.png' width="150px"> <a href="https://www.baidu.com/"> 新浪政务 </a> <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr><span>2023年03月02日 21:50</span><a href="https://www.baidu.com/" target="_blank"> 百度一下 </a>
</body>
</html> 
五.视频与排版
1.html标签：
定义段落：p
文本加粗：b
视频标签:video
音频:audio
2.css属性：
首行缩进：text-indent: 50px;
设置行高：line-height: 40px;
设置对齐方式靠右：text-align: right;
3.video标签属性：
点击可播放控件：controls（如果标签属性名和属性值一样，可以只写一个）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HoneyWorks</title><style>a {color: #000;text-decoration: none;}p{text-indent: 50px;line-height: 40px;}#right{text-align: right;}</style><link type="stylesheet" rel="css/new.css">
</head>
<body><h1>新歌发布:いつだって戦ってる</h1><p><b>HoneyWorks</b>(日語:ハニーワークス),簡稱Haniwa(ハニワ)或HW,是日本音樂組織及動畫、漫畫和小說社團。</p><h2>可憐なアイボリー</h2><p>徵選活動的10位合格者,分別為土屋玲実、寺本理绘、高泽百合爱、小坂ねね、永尾梨央、福田阳菜、柴笑あかり、名切翠杏、波左间美晴、ななさ,所屬於TWINPLANET旗下,組成「突破偶像常識」般的偶像團體。由HoneyWorks擔任音樂製作。</p><video src="video/haniwa.mp4" controls width="500px"></video><br><p id="right">信息来源于萌娘百科</p>
</body>
</html>
六.布局测试
1.css属性：
背景颜色:background-color: rgb(151, 109, 235);
内边距：padding: 20px;
边框：border: 10px solid skyblue;
外边距：margin: 30px;
2.布局标签对比：
div（独占一行，宽度为父内容元素，可以设置宽高）
span（宽高完全由内容撑开）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HoneyWorks</title><style>.cls{width: 120px;height: 120px;background-color: rgb(151, 109, 235);padding: 20px;border: 20px solid skyblue;margin: 20px;}</style>
</head>
<body><div class="cls">AAAAAAAAAAAAAAAA</div><div class="cls">AAAAAAAAAAAAAAAA</div><span class="cls">AAAAAAAAAAAAAAAA</span><span class="cls">AAAAAAAAAAAAAAAA</span>
</body>
</html> 
七.布局居中
css属性：margin: 0 auto;
相当于设置值为：0 15% 0 15%;(上右下左)
设置两个即为同时设置上下和左右，一个则代表四周
auto代表自动计算（居中）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HoneyWorks</title><style>#center {width: 70%;margin: 0 auto;}</style><link rel="stylesheet" href="css/new.css">
</head>
<body><div id="center"><h1>新歌发布:いつだって戦ってる</h1><hr><span>2023年10月29日 21:50</span><a href="https://www.baidu.com/"> Gom </a><br><br><video src="video/haniwa.mp4" controls width="50%"></video><br><p><b>HoneyWorks</b>(日語:ハニーワークス),簡稱Haniwa(ハニワ)或HW,是日本音樂組織及動畫、漫畫和小說社團。</p><h2>可憐なアイボリー</h2><p>徵選活動的10位合格者,分別為土屋玲実、寺本理绘、高泽百合爱、小坂ねね、永尾梨央、福田阳菜、柴笑あかり、名切翠杏、波左间美晴、ななさ,所屬於TWINPLANET旗下,組成「突破偶像常識」般的偶像團體。由HoneyWorks擔任音樂製作。</p><p id="pLast">信息来源于萌娘百科</p></div>
</body>
</html>
八.表格
1.html标签：
表格标签：table
表格行标签：tr
表格第一行单元标签：th（表头单元格，字体加粗与居中）
表格普通行单元标签：td
2.table属性：
表格宽度与表格边框宽度：width，border
表格单元间隔：cellspacing="0"(默认有间隔，设置为0表示表格之间无间隙)
3.th/td属性：
规定占有的行数与列数：colspan="2",rowspan="2"
<!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>img {width: 100px;}td {text-align: center;}</style>
</head>
<body><table border="1" cellspacing="0" width="500"><tr><th>序号</th><th>LOGO</th><th>品牌名称</th></tr><tr><td>010</td><td><img src="三只松鼠.png" width="60" height="50"></td><td>三只</td></tr><tr><td>009</td><td><img src="优衣库.png" width="60" height="50"></td><td>优衣库</td></tr><tr><td>008</td><td><img src="小米.png" width="60" height="50"></td><td>小米</td></tr></table><br><table border="1" cellspacing="0" width="500"><tr><th colspan="2">LOGO</th><th>品牌名称</th></tr><tr><td>010</td><td><img src="三只松鼠.png" width="60" height="50"></td><td>三只</td></tr><tr><td rowspan="2">009</td><td><img src="优衣库.png" width="60" height="50"></td><td>优衣库</td></tr><tr align="center"><td><img src="小米.png" width="60" height="50"></td><td>小米</td></tr></table>
</body>
</html>
九.表单
1.表单标签：form（负责输入数据）
表单属性：
提交数据方向：action=""（默认提交到当前页面）
发送表单数据的方式：method="post"
get（默认值，在url后面新接表单数据）
post(浏览器检查network，Headers里面显示传输方式，payload显示传输数据)
2.表单项目标签：input
决定输入类型：type="submit"（是输入框/选择框/提交按钮/重置按钮）
指定提交数据的键：name="username"
在该input标签的按钮标签上显示数据：value="提交"
<!DOCTYPE html>
<html lang="en">
<head><title>Document</title>
</head>
<body><form action="" method="post">用户名：<input type="text" name="username">年龄：<input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>
十.表单项
1.表单项input的type属性的值：
普通输入框：text
密码输入框：password
单选框：radio（input标签中的name需要保持一致 ）
数字|邮箱：number，email
文件夹 ：file
日期|时间|日期时间：date|time|datetime-local
隐藏：hidden
提交|重置|按钮：submit|reset|button
2.表单中的下拉列表：select标签+option标签
下拉列表项：select标签中使用option标签
设置下拉列表的键：
select标签的属性：name="degree"
设置下拉列表的列表项的值：
option标签的属性：value="1"（没有设置value就提交标签中的文字数据数据）
3.表单中的文本域：textarea
表单项text area标签的属性：
设置宽高：cols="30" rows="3"
4.绑定文字与输入选项的标签：label（label包含input标签）
<!DOCTYPE html>
<html lang="en"><head><title>Document</title>
</head>
<body><form action="" method="post">姓名：<input type="text" name="username"><br><br>密码：<input type="password" name="password"><br><br>性别：<label><input type="radio" name="gender" value="1"> 男 </label><label><input type="radio" name="gender" value="2"> 女 </label><br><br>爱好： <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="c++"> c++ </label><label><input type="checkbox" name="hobby" value="python"> python </label><br><br>手机号：<input type="number" name="phoneNumber">邮箱： <input type="email" name="email"><br><br>文件上传：<input type="file" name="image"><br><br>日期： <input type="date" name="date">时间： <input type="time" name="time">日期时间： <input type="datetime-local" name="datetime-local"><br><br>隐藏：<input type="hidden" name="id" value="1"><br><br>学历：<select name="degree"><option value="">请选择</option><option value="1">高中</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select><br><br>自我介绍：<textarea name="textarea" cols="30" rows="3"></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="按钮"></form>
</body>
</html> 
十一.JS引入与输出
JS直接由浏览器解释，可控制网页动态行为。
1.引用js的位置
可以用script标签放在任意html页面的位置、
一般放在body下面，改善显示速度。
2.js写在哪里
可以写在标签中
也能写在外部.js文件。
3.js的分号与字符串
js可不写分号
字符串也可使用单引号
4.js输出的三种方式
a.js：
alert('js文件的输出')<!DOCTYPE html>
<html lang="en">
<head><title></title>
</head>
<body>
</body><script src="js/a.js"></script><script>console.log("输出到浏览器控制台")window.alert('警告框(window可省略)')document.write("输出到html文档")</script>
</html> 
十二.JS变量，循环，函数
定义变量的三种方式
1.获取变量类型的方法：通过typeof
2.==与===对比：前者类型转换，后者不做类型转换
3.类型转换成数字：使用parseInt，不能转就变成NAN
4.if语句中也能使用其他类型，数字类型0和NAN为false，空字符串为false,对象undefined为false
5.定义函数
<!DOCTYPE html>
<html lang="en">
<head><title></title>
</head>
<body>
</body>
<script>var a = '全局变量'let b = '局部变量'const c = '常量'console.log("1.获取变量类型的方法")console.log(typeof(true))console.log("2.==与===对比")console.log((true=='1')+' '+(true==='1'))console.log('3.类型转换成数字')console.log(parseInt("1")+' '+parseInt("A"))if("0")console.log("4.if语句输出")var myFunction = function(a,b){console.log('5.定义函数并传参：'+a+' '+b+' '+c)}myFunction(a,b)
</script>
</html> 
十三.Array与字符串方法
1.Array对象
定义使用：[]
长度：length可变
内部元素类型：任意
2.遍历array：foreach
3.添加数据到array：push
4.根据下标删除某范围内的元素：splice
5.获取字符串下标：indexOf
6.截取字符串：substring
7.去除字符串前后空格：trim
<!DOCTYPE html>
<html lang="en">
<head><title></title>
</head>
<body>
</body>
<script>console.log("")array = [false,"1",2]array[4] = 4console.log(array)console.log("长度为："+array.length)console.log("2.遍历非空元素，可lambda")array.forEach(e=>console.log(e))console.log("3.添加多个元素")array.push(5,6);console.log(array)console.log("4.根据下标删除多个元素")array.splice(2,6);console.log(array)str = " 石头人 "console.log("5.获取字符串下标:"+str.indexOf("石头人"))console.log('6.截取字符串:'+str.substring(1,4))console.log('7.去除字符串前后空格:'+str.trim())
</script>
</html> 
十四.自定义对象与JSON
1.自定义对象的特点
1.最外围包裹：大括号
2.属性与值之间：用冒号隔开
3.属性之间：用逗号隔开
4.方法可以简写
2.JSON：JS Object Notation（对象标记法)
json与自定义对象的不同：
所有的key必须用双引号包裹
3.json字符串与js对象的相互转换
<!DOCTYPE html>
<html lang="en">
<head><title></title>
</head>
<body>
</body>
<script>person = {id:1 ,name:"Jack",eat(){console.log("吃")}}console.log("3.把字符串转换成对象：利用JSON.parse")user = JSON.parse('{"id":1,"name":"Jack","addr":["Beijing","Shanghai"]}')console.log(user)console.log("4.把对象转换成字符串:利用JSON.stringify")console.log(JSON.stringify(user))
</script>
</html>
十五.BOM对象
BOM：Browser Object Model 浏览器对象模型，允许JS操作浏览器
window：浏览器窗口对象，window.可以省略
Location：地址栏对象，只需掌握href属性
1.弹出确认框：confirm("内容")
2.周期性执行函数：setInterval(函数，时间)
3.一次性执行函数，setTimeout（函数，时间）
4.跳转地址：location.href = "https://www.baidu.com"
<!DOCTYPE html>
<html lang="en">
<head><title></title>
</head>
<body>
</body>
<script>alert(confirm("1.弹出确认框 确认返回true 取消返回false"))i = 1setInterval(function () {console.log("2.周期性执行" + i)i++;}, 2000)setTimeout(function () {console.log("3.延迟时间执行")}, 4000)document.write("4.设置跳转地址，十秒后跳转到百度")setTimeout(function () {location.href = "https://www.baidu.com"}, 10000)
</script></html>
十六.获取DOM对象
DOM:Document Object Model:文档对象模型：将标记语言的各个组成部分封装成对应的对象
获取文档对象的方法：
1.通过id返回单个对象
2.class,属性名，标签名获取返回对象集合
<!DOCTYPE html>
<html lang="en">
<head><title></title>
</head>
<body><h1 id="h1">Hello BOM</h1><input class="radio" type="radio" name="sex">男<input class="radio" type="radio" name="sex">女
</body>
<script>h1 = document.getElementById("h1")sex = document.getElementsByName("sex")radio = document.getElementsByClassName("radio")input = document.getElementsByTagName("input")
</script>
</html>十七.使用DOM对象
1.改变标签属性：文档对象.属性=
2.增加加标签内的内容：文档对象.innerHTML+=
3.改变对象样式：文档对象.style属性=
<!DOCTYPE html>
<html lang="en">
<head><title></title>
</head>
<body><img id="img" src="img/off.gif"></body><br><br><div class="cls">伊莉莎贝斯</div><br><div class="cls">吉太</div><br>
</body>
<script>document.getElementById("img").src = "img/on.gif"myDiv = document.getElementsByTagName("div")for (let index = 0; index < myDiv.length; index++) {myDiv[index].innerHTML+='<font color="red"> very good!</font>'myDiv[index].style.color='red'}
</script>
</html> 
十八.监听事件绑定方法
监听事件绑定的两种方式
1.在标签设置属性onclick为一个函数，再到script里面写函数
2.直接在script里面获取对象，然后设置对象的onclick属性为一个函数(推荐)
<!DOCTYPE html>
<html lang="en">
<head><title></title>
</head><body><input type="button" onclick="on()" value="按钮1"><input type="button" id="but2" value="按钮2">
</body>
<script>function on(){alert("按钮一被点击了！")}document.getElementById("but2").onclick = function(){alert("按纽二被点击了！")}
</script>
</html>
十九.常见监听事件
常见事件(可以作为标签的属性)：
加载完成 onload
表单 onsubmit
焦点 onfocus,onblur
鼠标 onmouseover,onmouseout
键盘 onkeydown
<!DOCTYPE html>
<html lang="en"><head><title></title>
</head>
<body id="body"><form action="" id="form"><input type="text" id="text"><br><input type="submit" id="submit"></form>
</body>
<script>document.getElementById("body").onload = function () {console.log("页面加载完成")}document.getElementById("form").onsubmit = function () {alert("已提交表单")}document.getElementById("text").onblur = function () {console.log("失去了焦点...")}document.getElementById("text").onfocus = function () {console.log("成为了焦点...")}document.getElementById("text").onkeydown = function () {console.log("按下键盘...")}document.getElementById("submit").onmouseover = function () {console.log("鼠标移入...")}document.getElementById("submit").onmouseout = function () {console.log("鼠标移出...")}document.getElementById("submit").onmouseout = function () {console.log("鼠标移出...")}
</script>
</html>
二十. 表单处理案例
案例内容：未填写规范则：
1.出现提示
2.提交表单失败
1.正则表达式对象的创建与方法：/^正则表达式$/.test(字符串)，返回真假
2.引用函数，不加括号表示拷贝地址，加括号表示使用函数
3.对于onsubmit：返回false则提交失败
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>欢迎注册</title><link href="css/register.css" rel="stylesheet">
</head><body><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span> <a href="#">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password" id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>手机号</td><td class="inputs"><input name="tel" type="text" id="tel"><br><span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clear"></form></div><script>var usernameInput = document.getElementById("username")usernameInput.onblur = checkUsername;function checkUsername() {var flag = /^[a-zA-Z]{6,12}$/.test(usernameInput.value.trim())if (flag) document.getElementById("username_err").style.display = 'none'else document.getElementById("username_err").style.display = ''return flag}var passwordInput = document.getElementById("password")passwordInput.onblur = checkPasswordfunction checkPassword() {var flag = /^\w{6,12}$/.test(passwordInput.value.trim())if (flag) document.getElementById("password_err").style.display = 'none'else document.getElementById("password_err").style.display = ''return flag}var telInput = document.getElementById("tel")telInput.onblur = checkTelfunction checkTel() {var flag = /^[1]\d{10}$/.test(telInput.value.trim())if (flag)document.getElementById("tel_err").style.display = 'none'else document.getElementById("tel_err").style.display = ''return flag}document.getElementById("reg-form").onsubmit = function () {var flag = checkUsername() && checkPassword() && checkTel()return flag}</script>
</body>
</html>register.css
* {margin: 0;padding: 0;list-style-type: none;
}
.reg-content{padding: 30px;margin: 3px;
}
a, img {border: 0;
}body {background-image: url("../img/reg_bg_min.jpg") ;text-align: center;
}table {border-collapse: collapse;border-spacing: 0;
}td, th {padding: 0;height: 90px;}
.inputs{vertical-align: top;
}.clear {clear: both;
}.clear:before, .clear:after {content: "";display: table;
}.clear:after {clear: both;
}.form-div {background-color: rgba(255, 255, 255, 0.27);border-radius: 10px;border: 1px solid #aaa;width: 424px;margin-top: 150px;margin-left:1050px;padding: 30px 0 20px 0px;font-size: 16px;box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);text-align: left;
}.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {width: 268px;margin: 10px;line-height: 20px;font-size: 16px;
}.form-div input[type="checkbox"] {margin: 20px 0 20px 10px;
}.form-div input[type="button"], .form-div input[type="submit"] {margin: 10px 20px 0 0;
}.form-div table {margin: 0 auto;text-align: right;color: rgba(64, 64, 64, 1.00);
}.form-div table img {vertical-align: middle;margin: 0 0 5px 0;
}.footer {color: rgba(64, 64, 64, 1.00);font-size: 12px;margin-top: 30px;
}.form-div .buttons {float: right;
}input[type="text"], input[type="password"], input[type="email"] {border-radius: 8px;box-shadow: inset 0 2px 5px #eee;padding: 10px;border: 1px solid #D4D4D4;color: #333333;margin-top: 5px;
}input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {border: 1px solid #50afeb;outline: none;
}input[type="button"], input[type="submit"] {padding: 7px 15px;background-color: #3c6db0;text-align: center;border-radius: 5px;overflow: hidden;min-width: 80px;border: none;color: #FFF;box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}input[type="button"]:hover, input[type="submit"]:hover {background-color: #5a88c8;
}input[type="button"]:active, input[type="submit"]:active {background-color: #5a88c8;
}
.err_msg{color: red;padding-right: 170px;
}
#password_err,#tel_err{padding-right: 195px;
}#reg_btn{margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}相关文章：
[JavaWeb玩耍日记]HTML+CSS+JS快速使用
目录 一.标签 二.指定css 三.css选择器 四.超链接 五.视频与排版 六.布局测试 七.布局居中 八.表格 九.表单 十.表单项 十一.JS引入与输出 十二.JS变量，循环，函数 十三.Array与字符串方法 十四.自定义对象与JSON 十五.BOM对象 十六.获取…...
如何使用ArcGIS Pro创建最低成本路径
虽然两点之间直线最短，但是在实际运用中，还需要考虑地形、植被和土地利用类型等多种因素，需要加权计算最低成本路径，这里为大家介绍一下计算方法，希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载…...
Neoverse CSS N3：实现市场领先能效的最快途径
区分老的架构 从云到边缘，Arm Neoverse 提供无与伦比的性能、效率、设计灵活性和 TCO 优势，正在颠覆传统基础设施芯片。 我们看到云和超大规模服务运营商正在推动更高的计算密度。随着 128 核心 CPU 设计上市（Microsoft Cobalt、阿里巴巴 Y…...
JavaScript实现的计时器效果
之前做过电商网站倒计时的效果，今天在倒计时的基础上，把代码修改了一下，改为计时器效果，实现了以下功能： 1.点击“开始”后，按秒计时且“开始”文字变为“停止”； 2.点击“停止”，计…...
仿函数（Functor（c++））
定义 仿函数（Functor）是一个可以像函数那样被调用的类对象。这意味着它实现了operator()，使得类的对象可以像函数那样被调用。 仿函数的主要特点 它是一个类。它重载了operator()。可以通过创建该类的对象，并像函数那样调用该对…...
智能汽车加速车规级存储应用DS2431P+TR 汽车级EEPROM 存储器IC
DS2431PT&R是一款1024位1-Wire EEPROM芯片，由四页存储区组成，每页256位。数据先被写入一个8字节暂存器中，经校验后复制到EEPROM存储器。该器件的特点是，四页存储区相互独立，可以单独进行写保护或进入EPROM仿真模式…...
js json转换成字符串
js中JSON数据转换成字符串，可以使用JSON.stringify()方法。 var obj {name: "张三", age: 18, gender: "男"}; var jsonString JSON.stringify(obj); console.log(jsonString); // 输出 {"name":"张三","age"…...
Linux笔记--基本操作指令
一、查看日期与日历 1.date指令 显示日期 #用法1:dateCST: China Standard Time时区，中国标准时间 #用法2: date 指定格式 [常用格式]: "%Y-%m-%d"(%F): 2022-07-25 "%H:%M:%S"(%T): 14:53:44 "%F %T" #用法3: date -d "-1 da…...
论文阅读：基于超像素的图卷积语义分割（图结构数据）
#Superpixel-based Graph Convolutional Network for Semantic Segmentation github链接 引言 GNN模型根据节点特征周围的边来训练节点特征，并获得最终的节点嵌入。通过利用具有不同滤波核的二维卷积对来自附近节点的信息进行整合，给定超像素方法生成的…...
记录踩过的坑-macOS下使用VS Code
目录 切换主题 安装插件 搭建Python开发环境 装Python插件 配置解释器 打开项目 打开终端 切换主题 安装插件 方法1 方法2 搭建Python开发环境 装Python插件 配置解释器 假设解释器已经通过Anaconda建好，只需要在VS Code中关联。 打开项目 打开终端...
------数据的复制)
30天JS挑战(第十四天)------数据的复制
第十四天挑战(数据的复制) 地址：https://javascript30.com/ 所有内容均上传至gitee，答案不唯一，仅代表本人思路 中文详解：https://github.com/soyaine/JavaScript30 该详解是Soyaine及其团队整理编撰的，是对源代码…...
【洛谷 P8682】[蓝桥杯 2019 省 B] 等差数列 题解（数学+排序+辗转相除法）
[蓝桥杯 2019 省 B] 等差数列 题目描述 数学老师给小明出了一道等差数列求和的题目。但是粗心的小明忘记了一部分的数列，只记得其中 N N N 个整数。 现在给出这 N N N 个整数，小明想知道包含这 N N N 个整数的最短的等差数列有几项？ 输…...
Linux：kubernetes（k8s）部署CNI网络插件（4）
在上一章进行了node加入master Linux：kubernetes（k8s）node节点加入master主节点（3）-CSDN博客https://blog.csdn.net/w14768855/article/details/136420447?spm1001.2014.3001.5501 但是他们显示还是没准备好 看一下…...
docker save 命令 docker load 命令 快速复制容器
docker save 命令 docker load 命令 1、docker save 命令2、docker load 命令 1、docker save 命令 docker save 命令用于在系统上把正在使用的某个容器镜像 导出成容器镜像文件保存下载，以便在其他系统上导入这个容器镜像文件 以便快速在其他服务器上启动相同的容…...
Apache Flink连载（三十七）：Flink基于Kubernetes部署(7)-Kubernetes 集群搭建-3
🏡 个人主页：IT贫道-CSDN博客 🚩 私聊博主：私聊博主加WX好友，获取更多资料哦~ 🔔 博主个人B栈地址：豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录...
【机器学习】实验6，基于集成学习的 Amazon 用户评论质量预测
清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 代码和报告均为本人自己实现（实验满分），此次代码开源大家可以自行参考学习 有任何疑问或者问题，也欢迎私信博主，大家可以相互讨论交流哟…...
【寸铁的刷题笔记】图论、bfs、dfs
【寸铁的刷题笔记】图论、bfs、dfs 大家好 我是寸铁👊 金三银四，图论基础结合bfs、dfs是必考的知识点✨ 快跟着寸铁刷起来！面试顺利上岸👋 喜欢的小伙伴可以点点关注 💝 🌞详见如下专栏🌞 &…...
vue2 + axios + mock.js封装过程，包含mock.js获取数据时报404状态的解决记录，带图文，超详细！！！
vue axios mock.js 以下是封装的过程，记录一下 1、首先先了解什么是mock.js的用途及特点 官网地址：Mock.js (mockjs.com) 作用：生成随机数据，拦截 Ajax 请求 优势： 2、了解axios的原理及使用 官网地址：…...
对象变更记录objectlog工具(持续跟新)
文章目录 前言演示代码演示环境引入项目项目框架操作步骤 设计介绍参考仓库 前言 系统基于mybatis-plus, springboot环境 对于重要的一些数据，我们需要记录一条记录的所有版本变化过程，做到持续追踪，为后续问题追踪提供思路。下面展示预期效果…...
平衡二叉树，二叉树的路径，左叶子之和
第六章 二叉树part04 今日内容： 110.平衡二叉树 257. 二叉树的所有路径 404.左叶子之和 110.平衡二叉树 （优先掌握递归） 给定一个二叉树，判断它是否是高度平衡的二叉树。 本题中，一棵高度平衡二叉树定义为&am…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...
【C++进阶篇】智能指针
C内存管理终极指南：智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
uniapp 小程序 学习（一）
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 ：开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现 如下 bug 解…...
Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址：Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址（如 10.244.1.2）无特殊名称：在 Kubernetes 中，它通常被称为 “Pod IP” 或 “容器 IP”生命周期：与 Pod …...