Java后端须知的前端知识

HTML （超文本标记语言）

W3C标准
- 结构：HTML
- 表现：CSS
- 行为：JavaScript

快速入门

	
		
	
	
        
	

<!--
	 结构标签，表示这是一个html文档
	 加载资源信息，添加标题
	 加载标题（窗口上的字）
	 定义文字
	<font> 文字标签 color 定义颜色
	html识别不区分大小写，标签属性值 单双引皆可 语法松散，语法错误可适当兼容
-->
</pre>
<h6>基础标签</h6>
<pre class="brush:python;toolbar:false"><!--html5标识-->



	<!--页面的字符集-->
	
	<title>Title



我是标题h1
我是标题h2
我是标题h3
我是标题h4
我是标题h5
我是标题h6




<!--
	~
 h1最大，h6最小 定义标题
	 	  定义文本的字体、字体尺寸、字体颜色  face控制字体，size控制大小 color控制颜色 html一般不使用，格式主要使用css
	 	  定义粗体文本 
	 	  定义斜体文本
	 	  定义文本下划线
	  定义文本居中  html一般不使用，格式主要使用css 
	 	  定义段落	
	  定义折行	
	  定义水平线	htmL表示颜色：	1.英文单词：red,pink,blue...	2.rgb(值1，值2，值3)：值的取值范围：0~255   rgb(255,0,0)	3.#值1值2值3：值的范围：00~FF-->

HTML	显示结果	描述
&lt ;	<	小于号或显示标记
&gt ;	>	大于号或显示标记
&amp ;	&	可用于显示其他特殊字符
&quot ;	“	引号
&reg ;	@ （里面的a应该是R）	已注册
&copy ;	@ （里面的a应该是C）	版权
&trade ;	TM	商标
&nbsp ;		不断行的空白

图片、音频、视频标签

img:定义图片
src:规定显示图像的URL(统一资源定位符)

height:定义图像的高度

width:定义图像的宽度

audio:定义音频。支持的音频格式：MP3、WAV、OGG

src:规定音频的URL

controls:显示播放控件

video:定义视频。支持的音频格式：MP4,WebM、OGG

src:规定视频的URL

controls:显示播放控件

Title

超链接标签

: 定义超链接，用于链接到另一个资源

href:指定访问资源的URL

target:指定打开资源的方式

_se1f：默认值，在当前页面打开

_blank：在空白页面打开

Title 百度一下，你就知道

列表标签

标签描述

定义有序列表（有序号）

定义无序列表

定义列表项

可以添加格式，来换对应的样式，但一般在CSS中进行进一步的修改

表格标签

标签描述

定义表格

定义行

定义单元格

定义表头单元格

table:定义表格

border:规定表格边框的宽度

width:规定表格的宽度

cellspacing:规定单元格之间的空白

tr:定义行

align:定义表格行的内容对齐方式

td:定义单元格

rowspan:规定单元格可横跨的行数

colspan:规定单元格可横跨的列数

Title

序号品牌Logo 品牌名称企业名称

010 三只松鼠

布局标签

标签描述

定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页，块级标签，会自动换行；

用于组合行内元素。不会换行（行内）

表单标签

表单：在网页中主要负责数据采集功能，使用标签定义表单

表单项（元素）：不同类型的iput元素、下拉列表、文本域等

标签描述

定义表单

定义表单项，通过type属性控制输入形式

为表单项定义标注

定义下拉列表

定义下拉列表的列表项

</td> <td>定义文本域</td> </tr> </tbody> </table> <ul> <li>form:定义表单 <ul> <li>action: 规定当提交表单时向何处发送表单数据，URL</li> <li>method: 规定用于发送表单数据的方式 <ul> <li>get: 浏览器会将数据直接附在表单的action URL之后。大小有限制（4KB），默认值</li> <li>post: 浏览器会将数据放到http请求消息体中。大小无限制</li> </ul> </li> </ul> </li> </ul> <pre class="brush:python;toolbar:false"> <title>Title</title> </pre> <ul> <li>input: 表单项，通过type属性控制输入形式</li> </ul> <table> <thead> <tr> <th>type取值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>默认值。定义单行的输入字段</td> </tr> <tr> <td>password</td> <td>定义密码字段</td> </tr> <tr> <td>radio</td> <td>定义单选按钮</td> </tr> <tr> <td>checkbox</td> <td>定义复选框</td> </tr> <tr> <td>file</td> <td>定义文件上传按钮</td> </tr> <tr> <td>hidden</td> <td>定义隐藏的输入字段</td> </tr> <tr> <td>submit</td> <td>定义提交按钮，提交按钮会把表单数据发送到服务器</td> </tr> <tr> <td>reset</td> <td>定义重置按钮，重置按钮会清除表单中的所有数据</td> </tr> <tr> <td>button</td> <td>定义可点击按钮</td> </tr> </tbody> </table> <ul> <li> <p>select: 定义下拉列表，option定义列表项</p> </li> <li> <p>textarea：文本域</p> </li> <li> <p>label：可以提升用户体验：点击用户名，也可以选中文本框</p> <pre class="brush:python;toolbar:false"><Label for="username">用户名：</Label> <br> </pre> </li> <li> <p>单选框/复选框细节：单选框/复选框中value值必须加上，不然上传信息给后端的时候，不管选中哪一个，都只会上传一个”on”</p> <pre class="brush:python;toolbar:false"> 男女 </pre> </li> </ul> <h5>CSS（层叠样式表）</h5> <h6>CSS导入方式</h6> <ul> <li> <p>内联样式：在标签内部使用style属性，属性值是css属性键值对</p> <pre class="brush:python;toolbar:false">Hello CSS~ </pre> </li> <li> <p>内部样式：定义</p> </li> </ul> <h6>CSS选择器</h6> <ul> <li> <p>概念：选择器是选取需设置样式的元素（标签）</p> <pre class="brush:python;toolbar:false">div{ color: red; } </pre> </li> <li> <p>分类（三个选择器之间谁的范围小谁就生效，以下标签内容需要再style标签内抒写）</p> <ul> <li> <p>元素选择器</p> <pre class="brush:python;toolbar:false">元素名称{color: red;} div{color: red;} </pre> </li> <li> <p>id选择器</p> <pre class="brush:python;toolbar:false">#id属性值{color: red;} #name{color: red;} hello css2 </pre> </li> <li> <p>类选择器</p> <pre class="brush:python;toolbar:false">.class属性值{color:red;} .cls{color:red;} hello css3 </pre> </li> </ul> </li> </ul> <h6>CSS属性</h6> <p>存在很多属性，每一个属性均为一个键值对，详情请参照：CSS 教程 (w3school.com.cn)</p> <h5>JavaScript</h5> <p><em>一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互。JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。JavaScript(简称：JS)在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准。ECMAScript6(ES6)是最新的JavaScript版本（发布于2015年）。</em></p> <h6>JavaScript引入方式</h6> <p>内部脚本：将JS代码定义在HTML页面中</p> <p>在HTML中，JavaScript代码必须位于script标签之间</p> <pre class="brush:python;toolbar:false"> alert("hello JS ~") </pre> <p>注意：</p> <ul> <li>在HTML文档中可以在任意地方，放置任意数量的script标签</li> <li>一般把脚本置于body元素的底部，可改善显示速度，因为脚本执行会拖慢显示</li> </ul> <p>外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中</p> <p>外部文件：demo.js</p> <pre class="brush:python;toolbar:false">alert("hello JS ~") </pre> <p>引入外部js文件</p> <pre class="brush:python;toolbar:false"> </pre> <p>注意：</p> <ul> <li> <p>外部脚本不能包含script标签</p> </li> <li> <p>script标签不能自闭合</p> </li> </ul> <h6>JavaScript基础语法</h6> <p>书写语法</p> <ul> <li> <p>区分大小写：与ava一样，变量名、函数名以及其他一切东西都是区分大小写的</p> </li> <li> <p>每行结尾的分号可有可无</p> </li> <li> <p>注释：</p> <ul> <li> <p>单行注释：//注释内容</p> </li> <li> <p>多行注释：/*注释内容*/</p> </li> </ul> </li> <li> <p>大括号表示代码块</p> <pre class="brush:python;toolbar:false">if (count == 3){ alert(count); } </pre> </li> </ul> <p>输出语句</p> <pre class="brush:python;toolbar:false">window.alert("hello JS~"); //弹出警告框 document.write("hello JS~"); //写入HTML输出 console.log("hello JS~"); //写入控制台 </pre> <p>变量</p> <p>JavaScript中用var关键字(variable的缩写)来声明变量</p> <pre class="brush:python;toolbar:false">/* var: 1.作用域：全局变量 2.变量可以重复定义 */ var test = 20 test = "张三" </pre> <ul> <li>JavaScript是一门弱类型语言，变量可以存放不同类型的值</li> <li>变量名需要遵循如下规侧：<br /> <blockquote> <p>组成字符可以是任何字母、数字、下划线（_)或美元符号($)</p> <p>数字不能开头</p> <p>建议使用驼峰命名</p> </blockquote> </li> <li>ECMAScript6新增了let关键字来定义变量。它的用法类似于var,但是所声明的变量，只在Iet关键字所在的代码块内有效，且不允许重复声明</li> <li>ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。</li> </ul> <p>数据类型</p> <p>JavaScript中分为：原始类型和引用类型</p> <p>5种原始类型：</p> <ul> <li>number:数字（整数、小数、NaN(Not a Number)）</li> <li>string:字符、字符串，单双引皆可</li> <li>boolean:布尔。true,false</li> <li>null:对象为空</li> <li>undefined:当声明的变量未初始化时，该变量的默认值是undefined</li> </ul> <p>使用typeof运算符可以获取数据类型</p> <pre class="brush:python;toolbar:false">alert(typeof age) </pre> <p>运算符</p> <ul> <li>一元运算符：++，–</li> <li>算术运算符：+，-，*，/，%</li> <li>赋值运算符：=，+=，-=…</li> <li>关系运算符：>，=，<=，！=,==,===…</li> <li>逻辑运算符：&&，||，！</li> <li>三元运算符：条件表达式？true_value : false_value</li> </ul> <pre class="brush:python;toolbar:false">/* == 1.判断类型是否一样，如果不一样，则进行类型转换 2.再去比较其值 ===:全等于 1.判断类型是否一样，如果不一样，直接返回false 2.再去比较其值类型转换：(主要用于判断) * 其他类型转为number: 1.string:按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt 2.boolean:true 转为1，fase转为0 * 其他类型转为boolean: 1.number:0和NaN转为false,其他的数字转为true 2.string:空字符串转为false,其他的字符串转为true 3.null:false 4.undefined:false */ </pre> <p>流程控制语句</p> <ul> <li>if:判断语句</li> <li>switch:判断语句</li> <li>for:与JAVA一致</li> <li>while:与JAVA一致</li> <li>do…while:与JAVA一致</li> </ul> <p>函数</p> <p>函数（方法）是被设计为执行特定任务的代码块</p> <ul> <li> <p>定义：JavaScript函数通过function关键词进行定义，语法为：</p> <pre class="brush:python;toolbar:false">function functionName(参数1, 参数2..){ 要执行的代码 } </pre> </li> </ul> <p>注意：</p> <blockquote> <p>形式参数不需要类型。因为JavaScript是弱类型语言</p> <p>返回值也不需要定义类型，可以在函数内部直接使用returni返回即可</p> </blockquote> <pre class="brush:python;toolbar:false">function add(a,b){ return a + b; } // 调用 let result = add(1,2); // 第二种定义方式： var functionName=function(参数列表)K 要执行的代码 } var add = function(a,b){ return a + b; } </pre> <h6>JavaScript常用对象</h6> <p>Array对象</p> <p>JavaScript Array对象用于定义数组</p> <ul> <li> <p>定义</p> <pre class="brush:python;toolbar:false">var 变量名 =new Array(元素列表); //方式一 var arr =new Array(1,2,3); var 变量名 =[元素列表]; //方式二 var arr=[1,2,3]; </pre> </li> <li> <p>访问</p> <pre class="brush:python;toolbar:false">arr[索引] = 值; arr[0] = 1; // 特点：JavaScript数组相当于Java中集合。变长变类型 // 变长： var arr3=[1,2,3]; arr3[10]=10; // 变类型： //变类型 arr3[5]="hello"; //之前的数据保留 alert(arr3); // 方法 push：添加元素 splice:删除元素 splice(0,1):从位置0开始删除，删除1个 </pre> </li> </ul> <p>String</p> <ul> <li> <p>定义</p> <pre class="brush:python;toolbar:false">var变量名=new String(s); //方式一 var str =new String("hello"); var变量名 = s; /方式二 var str = "hello"; var str = 'hello'; //trim()：去除字符串前后的空白字符 </pre> </li> </ul> <p>自定义对象</p> <ul> <li> <p>格式</p> <pre class="brush:python;toolbar:false">var对象名称={ 属性名称1: 属性值1, 属性名称2: 属性值2, ... 函数名称: function(形参列表){} ... }; var person = { name:"zhangsan", age:23, eat:function (){ alert("干饭~"); } }; </pre> </li> </ul> <h6>BOM</h6> <ul> <li> <p>Browser Object Model 浏览器对象模型</p> </li> <li> <p>JavaScript将刘览器的各个组成部分封装为对象</p> </li> <li> <p>组成：</p> <ul> <li> <p>Window: 浏览器窗口对象</p> <ul> <li> <p>获取：直接使用window，其中window.可以省略</p> <pre class="brush:python;toolbar:false">window.alert("abc") </pre> </li> <li> <p>属性：获取其他BOM对象</p> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>history</td> <td>对History对象的只读引用。</td> </tr> <tr> <td>Navigator</td> <td>对Navigator对象的只读引用。</td> </tr> <tr> <td>Screen</td> <td>对Screen对象的只读引用。</td> </tr> <tr> <td>location</td> <td>用于窗口或框架的Location对象。</td> </tr> </tbody> </table> </li> <li> <p>方法</p> <table> <thead> <tr> <th>方法</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>alert()</td> <td>显示带有一段消息和一个确认按钮的警告框。</td> </tr> <tr> <td>confirm()</td> <td>显示带有一段消息以及确认按钮和取消按钮的对话框。确认按钮（true）</td> </tr> <tr> <td>setInterval()</td> <td>按照指定的周期（以毫秒计）来调用函数或计算表达式。在一定的时间间隔后执行一·个function,循环执行</td> </tr> <tr> <td>setTimeout()</td> <td>在指定的毫秒数后调用函数或计算表达式。在一定的时间间隔后执行一·个function,只执行一次</td> </tr> </tbody> </table> </li> </ul> </li> <li> <p>Navigator: 浏览器对象（浏览器的基本信息，用到的不多）</p> </li> <li> <p>Screen: 屏幕对象（屏幕的基本信息，用到的不多）</p> </li> <li> <p>History: 历史记录对象</p> <table> <thead> <tr> <th>方法</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>back()</td> <td>加载history列表中的前一个URL</td> </tr> <tr> <td>forward（）</td> <td>加载history列表中的下一个URL</td> </tr> </tbody> </table> </li> <li> <p>Location: 地址栏对象</p> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>href</td> <td>设置或返回完整的URL</td> </tr> </tbody> </table> </li> </ul> </li> </ul> <h6>DOM （文档对象模型）</h6> <ul> <li>将标记语言的各个组成部分封装为对象 <ul> <li>Document：整个文档对象</li> <li>Element：元素对象</li> <li>Attribute：属性对象</li> <li>Text：文本对象</li> <li>Comment：注释对象</li> </ul> </li> </ul> <p><img src="/img/da/fec918e9c9244668bedca1e0061ee0fa.png" alt="请添加图片描述" /></p> <ul> <li>JavaScript通过DOM，就能够对HTML进行操作了 <ul> <li>改变HTML元素的内容</li> <li>改变HTML元素的样式(CSS)</li> <li>对HTML DOM事件作出反应</li> <li>添加和删除HTML元素</li> </ul> </li> <li>DOM是W3C(万维网联盟)的标准，其定义了访问HTML和ML文档的标准，W3C DOM标准被分为3个不同的部分： <ul> <li>核心DOM:针对任何结构化文档的标准模型 <ul> <li>Document:整个文档对象</li> <li>Element:元素对象</li> <li>Attribute:属性对象</li> <li>Text:文本对象</li> <li>Comment:注释对象</li> </ul> </li> <li>XML DOM:针对XML文档的标准模型</li> <li>HTML DOM:针对HTML文档的标准模型 <ul> <li>Image：<img></li> <li>Button ：</li> </ul> </li> </ul> </li> <li>Element：元素对象 <ul> <li>获取Element对象 <ul> <li>getElementByld:根据id属性值获取，返回一个Element对象</li> <li>getElementsByTagName:根据标签名称获取，返回Element对象数组</li> <li>getElementsByName:根据name属性值获取，返回Element对象数组</li> <li>getElementsByClassName:根据class属性值获取，返回Element对象数组</li> </ul> </li> </ul> </li> </ul> <h6>事件监听</h6> <ul> <li>事件：HTML事件是发生在HTML元素上的“事情”。比如： <ul> <li>按钮被点击</li> <li>鼠标移动到元素之上</li> <li>按下键盘按键</li> </ul> </li> <li>事件监听：JavaScript可以在事件被侦测到时执行代码</li> </ul> <p>事件绑定</p> <ul> <li> <p>方式一：通过HTML标签中的事件属性进行绑定</p> <pre class="brush:python;toolbar:false"> function on(){ alert(我被点了"); } </pre> </li> <li> <p>方式二：通过DOM元素属性绑定（推荐）</p> <pre class="brush:python;toolbar:false"> document.getElementByld("btn").onclick = function(){ alert(我被点了"); } </pre> </li> </ul> <p>常见事件</p> <ul> <li>onfocus：获得焦点</li> <li>onblur：失去焦点（可用来做数据验证）</li> <li>onclick：当用户点击某个对象时调用的事件句柄</li> <li>onsubmit：在表单中的确认按钮被点击时发生，返回true，则表单会被提交，返回false，则表单不提交</li> </ul> <h6>案例：表单验证</h6> <ul> <li> <p>当输入框失去焦点时，验证输入内容是否符合要求</p> <ul> <li> <p>获取表单输入框</p> <pre class="brush:python;toolbar:false">var usernameInput = document.getElementById("username"); </pre> </li> <li> <p>绑定onblur事件</p> <pre class="brush:python;toolbar:false">usernameInput.onblur = function (){} </pre> </li> <li> <p>获取输入内容</p> <pre class="brush:python;toolbar:false">var username = usernameInput.value.trim(); </pre> </li> <li> <p>判断是否符合规则</p> <pre class="brush:python;toolbar:false">var usernameReg = /^\w{6,12}$/; ∥正则表达式 </pre> </li> <li> <p>如果不合符规则，则显示错误提示信息</p> </li> </ul> </li> <li> <p>当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交</p> <ul> <li> <p>获取表单对象</p> <pre class="brush:python;toolbar:false">var regForm document.getElementById("reg-form"); </pre> </li> <li> <p>为表单对象绑定onsubmit</p> <pre class="brush:python;toolbar:false"> regForm.onsubmit = function(){} </pre> </li> <li> <p>判断所有输入框是否都符合要求，如果符合，则返回true,如果有一项不符合，则返回false</p> </li> </ul> </li> </ul> <pre class="brush:python;toolbar:false"> <span class="err_msg">用户名不太受欢迎</span> //1.1获取用户名的输入框 var usernameInput = document.getElementById("username"); //1.2绑定onblur事件失去焦点 usernameInput.onblur = checkUsername; function checkUsername(){ // 1.3获取用户输入的用户名 var username = usernameInput.value.trim(); // 1.4判断用户名是否符合规则：长度612 flag = username.length >= 6 && username.length <=12; if(flag){ //符合规则 document.getElementById("username_err").style.display = 'none'; }else{ // 不合符规则 document.getElementById("username_err").style.display =''; } return flag; } //1.获取表单对象 var regForm document.getElementById("reg-form"); //2.绑定onsubmit事件 regForm.onsubmit = function (){ //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false var flag = checkUsername() && checkPassword() && checkTel(); return flag; } </pre> <p><em>如果觉得有帮助，请帮我点个赞或者收藏，感谢~</em></p> <div class="entry-copyright"><p>本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/10b88e2cc3.html</p></div> </div> <div class="entry-footer"> <div class="entry-tag"><a href="https://net2asp.com/tag/java/" rel="tag">java</a><a href="https://net2asp.com/tag/%e5%89%8d%e7%ab%af/" rel="tag">前端</a><a href="https://net2asp.com/tag/%e5%bc%80%e5%8f%91%e8%af%ad%e8%a8%80/" rel="tag">开发语言</a></div> <div class="entry-action"> <div class="btn-zan" data-id="33388"><i class="fa fa-thumbs-up"></i> 赞 <span class="entry-action-num">(0)</span></div> </div> <div class="entry-bar"> <div class="entry-bar-inner clearfix"> <div class="info text-center"> <div class="info-item meta"> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="33388" data-qrcode="https://net2asp.com/10b88e2cc3.html"><i class="fa fa-share-alt"></i> 生成海报</a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="fa fa-wechat"></i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="fa fa-weibo"></i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="fa fa-qq"></i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"><i class="fa fa-file-text"></i></a> </div> </div> </div> </div> <div class="entry-page"> <div class="entry-page-prev" style="background-image: url();"> <a href="https://net2asp.com/a25d886e25.html" title="Python爬虫—Scrapy框架—CrawlSpider" rel="prev"> <span>Python爬虫—Scrapy框架—CrawlSpider</span> </a> <div class="entry-page-info"> <span class="pull-left">« 上一篇</span> <span class="pull-right">1天前</span> </div> </div> <div class="entry-page-next" style="background-image: url();"> <a href="https://net2asp.com/49de8f8fd1.html" title="查询到List后再进行分页（mybatis-plus" rel="next"> <span>查询到List后再进行分页（mybatis-plus</span> </a> <div class="entry-page-info"> <span class="pull-right">下一篇 »</span> <span class="pull-left">1天前</span> </div> </div> </div> <h3 class="entry-related-title">相关推荐</h3><ul class="entry-related clearfix cols-3 post-loop post-loop-default"><li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/aad998e515.html" title="AI浪潮下程序员的提效神器-Athena编程助手(国产Copilot)" target="_blank"> <img src="/img/b7/7739e2f835ce42b58bea71e960472acb.png" width="480" height="300" alt="AI浪潮下程序员的提效神器-Athena编程助手(国产Copilot)" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/aad998e515.html" title="AI浪潮下程序员的提效神器-Athena编程助手(国产Copilot)" target="_blank"> AI浪潮下程序员的提效神器-Athena编程助手(国产Copilot) </a> </h4> <div class="item-excerpt"> <p>AI时代普通程序员的危机与机遇作为一个十年开发经验的老兵，在初次接触ChatGPT时，主要感受就是：兴奋、震惊、担忧、恐惧。兴奋的是一个全新的AI时代即将来临；震惊的是它的推理及…</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/b79c6d4148.html" title="AI之MLM：《MM-LLMs: Recent Advances in MultiModal Large Language Models多模态大语言模型的最新进展》翻译与解读" target="_blank"> <img src="/img/63/1454a8d593a0467b8c5055f376310746.png" width="480" height="300" alt="AI之MLM：《MM-LLMs: Recent Advances in MultiModal Large Language Models多模态大语言模型的最新进展》翻译与解读" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/b79c6d4148.html" title="AI之MLM：《MM-LLMs: Recent Advances in MultiModal Large Language Models多模态大语言模型的最新进展》翻译与解读" target="_blank"> AI之MLM：《MM-LLMs: Recent Advances in MultiModal Large Language Models多模态大语言模型的最新进展》翻译与解读 </a> </h4> <div class="item-excerpt"> <p>AI之MLM：《MM-LLMs: Recent Advances in MultiModal Large Language Models多模态大语言模型的最新进展》翻译与解读目录…</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/0fbaebe8e4.html" title="推荐系统笔记（十）：InfoNCE Loss 损失函数" target="_blank"> <img src="/img/d4/06f0534796674d71b0f3e86906fbfa11.png" width="480" height="300" alt="推荐系统笔记（十）：InfoNCE Loss 损失函数" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/0fbaebe8e4.html" title="推荐系统笔记（十）：InfoNCE Loss 损失函数" target="_blank"> 推荐系统笔记（十）：InfoNCE Loss 损失函数 </a> </h4> <div class="item-excerpt"> <p>背景对比学习损失函数有多种，其中比较常用的一种是InfoNCE loss。最近学习实现了SGL推荐系统算法，对InfoNCE Loss做一个总结。 …</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/d8793cd997.html" title="ChatGPT 与生成式 AI 的崛起：第一章到第二十五章" target="_blank"> <img src="/img/44/d74f9c61194012890ec5e2722af83513.png" width="480" height="300" alt="ChatGPT 与生成式 AI 的崛起：第一章到第二十五章" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/d8793cd997.html" title="ChatGPT 与生成式 AI 的崛起：第一章到第二十五章" target="_blank"> ChatGPT 与生成式 AI 的崛起：第一章到第二十五章 </a> </h4> <div class="item-excerpt"> <p>原文：Rise of Generative AI and ChatGPT 译者：飞龙协议：CC BY-NC-SA 4.0 第一章：ChatGPT 简介介绍 ChatGPT 是过…</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/7c2f14826a.html" title="Github Copilot AI保密级教程" target="_blank"> <img src="/img/85/2cb64b0e668e405b8e726e1996f60909.png" width="480" height="300" alt="Github Copilot AI保密级教程" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/7c2f14826a.html" title="Github Copilot AI保密级教程" target="_blank"> Github Copilot AI保密级教程 </a> </h4> <div class="item-excerpt"> <p>Copilot 是一款由 OpenAI 推出的人工智能代码自动补全AI工具，它可以帮助程序员更快、更准确地编写代码。Copilot 的核心技术基于 GPT-3 模型，但是在编码方面…</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/cb0bf41af2.html" title="基于YOLOv5的水下海洋目标检测" target="_blank"> <img src="/img/bb/d00b085743ae447f88cecb2d3fefacf9.png" width="480" height="300" alt="基于YOLOv5的水下海洋目标检测" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/cb0bf41af2.html" title="基于YOLOv5的水下海洋目标检测" target="_blank"> 基于YOLOv5的水下海洋目标检测 </a> </h4> <div class="item-excerpt"> <p>摘要：水下海洋目标检测技术具有广泛的应用前景，可以用于海洋环境监测、海洋资源开发、海洋生物学研究等领域。本文提出了一种基于 YOLOv5 的水下海洋目标检测方法，使用数据增强方法进…</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/991b3e528d.html" title="最新目标跟踪评估指标汇总" target="_blank"> <img src="/img/e8/660784d152e8e0a0cab0aa70fbd9a398.png" width="480" height="300" alt="最新目标跟踪评估指标汇总" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/991b3e528d.html" title="最新目标跟踪评估指标汇总" target="_blank"> 最新目标跟踪评估指标汇总 </a> </h4> <div class="item-excerpt"> <p>前段时间接触了一些目标跟踪的场景，本文主要汇总目标跟踪的常用评估指标，主要包括下面几类：容易理解的概念：FP、FN、TP、id switch、ML、MT 更加综合的概念：MOTA…</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/ecd52a0675.html" title="MinkowskiEngine安装" target="_blank"> <img src="/img/75/224b8486a0bd444c85ad2f8814d1fd25.png" width="480" height="300" alt="MinkowskiEngine安装" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/ecd52a0675.html" title="MinkowskiEngine安装" target="_blank"> MinkowskiEngine安装 </a> </h4> <div class="item-excerpt"> <p>MinkowskiEngine安装记录参考了好多经验贴，终于在自己电脑上成功安装编译MinkowskiEngine，uu们务必看完本贴再跟着操作，有些问题放在后面解释了环境准备…</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item item-no-thumb"> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/e1c695b4b9.html" title="人工智能与哲学：探索人类意识的未来" target="_blank"> 人工智能与哲学：探索人类意识的未来 </a> </h4> <div class="item-excerpt"> <p>1.背景介绍人工智能(Artificial Intelligence, AI)和哲学之间的关系是一 topic 复杂且深沉的。从一开始，人工智能的研究者们都在探索人类思维的底层原…</p> </div> <div class="item-meta"> <a class="item-meta-li" href="https://net2asp.com/ai/" target="_blank">人工智能</a> <span class="item-meta-li date">1天前</span> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://net2asp.com/cb213cbfd9.html" title="基于自然语言描述的行人检索 Text-based Person Retrieval – 常用数据集 CUHK-PEDES、ICFG-PEDES、RSTPReid" target="_blank"> <img src="/img/2d/5ae4f6f3c8d44a5997939fef5643e1fc.png" width="480" height="300" alt="基于自然语言描述的行人检索 Text-based Person Retrieval – 常用数据集 CUHK-PEDES、ICFG-PEDES、RSTPReid" referrerpolicy="no-referrer"> </a> <a class="item-category" href="https://net2asp.com/ai/" target="_blank">人工智能</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://net2asp.com/cb213cbfd9.html" title="基于自然语言描述的行人检索 Text-based Person Retrieval – 常用数据集 CUHK-PEDES、ICFG-PEDES、RSTPReid" target="_blank"> 基于自然语言描述的行人检索 Text-based Person Retrieval – 常用数据集 CUHK-PEDES、ICFG-PEDES、RSTPReid </a> </h4> <div class="item-excerpt"> <p>目录 Text-based Person Retrieval 任务介绍常用数据集 CUHK-PEDES 数据集 ICFG-PEDES 数据集 RSTPReid 数据集 Text-…</p> </div> <div class="item-meta"> <span class="item-meta-li date">1天前</span> </div> </div> </li> </ul> </div> </div> </article> </div> <aside class="sidebar"> <div id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title"><span>最新</span></h3> <ul> <li> <a href="https://net2asp.com/aad998e515.html">AI浪潮下程序员的提效神器-Athena编程助手(国产Copilot)</a> </li> <li> <a href="https://net2asp.com/b79c6d4148.html">AI之MLM：《MM-LLMs: Recent Advances in MultiModal Large Language Models多模态大语言模型的最新进展》翻译与解读</a> </li> <li> <a href="https://net2asp.com/0fbaebe8e4.html">推荐系统笔记（十）：InfoNCE Loss 损失函数</a> </li> <li> <a href="https://net2asp.com/d8793cd997.html">ChatGPT 与生成式 AI 的崛起：第一章到第二十五章</a> </li> <li> <a href="https://net2asp.com/7c2f14826a.html">Github Copilot AI保密级教程</a> </li> <li> <a href="https://net2asp.com/cb0bf41af2.html">基于YOLOv5的水下海洋目标检测</a> </li> <li> <a href="https://net2asp.com/991b3e528d.html">最新目标跟踪评估指标汇总</a> </li> <li> <a href="https://net2asp.com/ecd52a0675.html">MinkowskiEngine安装</a> </li> <li> <a href="https://net2asp.com/e1c695b4b9.html">人工智能与哲学：探索人类意识的未来</a> </li> <li> <a href="https://net2asp.com/cb213cbfd9.html">基于自然语言描述的行人检索 Text-based Person Retrieval – 常用数据集 CUHK-PEDES、ICFG-PEDES、RSTPReid</a> </li> <li> <a href="https://net2asp.com/b1b9da67d3.html">数学建模（三）：预测</a> </li> <li> <a href="https://net2asp.com/2169e75d0a.html">本地部署生成式AI，选显卡or笔记本电脑？！新款酷睿Ultra举票</a> </li> <li> <a href="https://net2asp.com/5423e8f1b3.html">人工智能与创意写作：我的2023年AIGC心得体会</a> </li> <li> <a href="https://net2asp.com/72d600a129.html">人工智能 | 自然语言处理的发展历程</a> </li> <li> <a href="https://net2asp.com/9673e09d0c.html">Pytorch学习笔记（9）模型的保存与加载、模型微调、GPU使用</a> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-copy"> <div class="copyright"> <p>Copyright © 2022 Www.Net2asp.COM Rights Reserved.</p> <p class="footer-beian"><a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener">苏ICP备2025168566号-5</a></p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-0 action-pos-0"> <div class="action-item j-share"> <i class="action-item-icon"> <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg> </i> </div> <div class="action-item gotop j-top"> <i class="action-item-icon"> <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg> </i> </div> </div> <script type='text/javascript' id='main-js-extra'> /* <![CDATA[ */ var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/net2asp.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/net2asp.com\/wp-content\/themes\/news","slide_speed":"5000","video_height":"482","login_url":"https:\/\/net2asp.com\/wp-login.php","register_url":"https:\/\/net2asp.com\/wp-login.php?action=register"}; /* ]]> */ </script> <script type='text/javascript' src='https://net2asp.com/wp-content/themes/news/js/main.js?ver=5.7.3' id='main-js'></script> <script type='text/javascript' src='https://net2asp.com/wp-content/themes/news/js/wp-embed.js?ver=5.7.3' id='wp-embed-js'></script> <script type="application/ld+json"> { "@context": { "@context": { "images": { "@id": "http://schema.org/image", "@type": "@id", "@container": "@list" }, "title": "http://schema.org/headline", "description": "http://schema.org/description", "pubDate": "http://schema.org/DateTime" } }, "@id": "https://net2asp.com/10b88e2cc3.html", "title": "Java后端须知的前端知识", "images": ["/img/da/fec918e9c9244668bedca1e0061ee0fa.png"], "description": "Java后端须知的前端知识 HTML （超文本标记语言） W3C标准结构：HTML 表现：CSS 行为：JavaScript 快速入门 <!-- 结构标签，表示这是一个ht...", "pubDate": "2024-03-07T19:27:33", "upDate": "2024-03-07T19:27:33" } </script> <script>setup_share(1);</script> <script> document.querySelectorAll('img').forEach(img => { img.onerror = () => img.src = '/default.jpeg'; }); </script> </body> </html>

标签	描述
	定义有序列表（有序号）
	定义无序列表
	定义列表项