Lishier99

【Web基础入门】一文搞懂HTML + CSS + JavaScript 简单了解

html

html是什么

超文本标记语言，运行在浏览器上

超文本：超级文本，如流媒体、声音、视频
标记语言：由大量的标签组成
标签：任何一个标签都有开始标签和结束标签

html不是编程语言，没有变量，数据类型，控制语句等，只能算一种浏览器的规范

html怎么开发

创建.html或.htm结尾的文件，记事本打开就可以开发，打开浏览器就可以运行，无需编译

web是什么

web就是网站开发

web程序员

web前端：html css js

前端浏览器展示的效果

web后端：java/c++/c/python

前端浏览器展示的内容，是动态数据，是由后台java程序或者c++程序等提供的

B/S架构的原理

B:客户端
S:服务器
http协议：w3c制定的，浏览器和web服务器传送消息的协议

粗略流程（计算机网络知识）：

用户在浏览器输入URL，或者点击链接
浏览器（客户端）向浏览器发送请求request
服务器给浏览器（客户端）一个响应（html代码），浏览器队该html代码进行解释执行，展示到浏览器界面

第一个html

1、用记事本编辑

2、用浏览器运行

3、基本标签（标签包含开始标签和结束标签）

基本框架
：根标签
：头标签
：网页体（显示在网页上）

常用标签
：网页标题
：段落标签
：标题标签，h1、h2、h3、h4...

（独目标签）：换行
（独目标签）：分割线
：字体标签

补充标签
：保留格式标签，源码是什么格式，浏览器显示什么格式
：粗体字标签
：斜体字标签
：插入字标签
：删除子标签
：右上角字体标签
：右下角锥体标签
：标识html5标签
：编码方式标签，使用什么编码方式打开此文件

4、常用属性（放在标签里面，如

color：颜色属性
size：字号属性
charset：编码，浏览器默认GBK简体中文，程序员一般工作区默认UTF-8
border：边框宽度，1px
width:宽度，可以用百分比表示，50%
height：高度
align：对齐方式，center居中对齐
colspan:列td合并，"=2"即合并两个列
rowspan:行tr合并，"=2"即合并两个行

bgcolor：指定背景颜色，一般放在body
background：指定背景图片，"=文件路径”

5、实体符号

 ：空格
<：小于号
>：大于号

6、table标签

：表格标签
：表格中的一行（类似一维数组）
：一行中的一列（类似二维数组）
:可以代替td，相当于加粗，居中的td
和和可以将表格分成三部分，为js提供便利

7.img标签

中间没有内容等同于

属性
src:指定图片路径
width：指定图片宽度，同时不指定高度会等比例缩小放大，否则容易失真
title：鼠标指针悬停时的提示信息
alt：图片加载失败时的提示信息

8.超链接

href：超链接属性，指定链接路径，可以是网络路径，也可以是本地路径
  超链接的内容：可以是文字，也可以是图片 
自动添加下划线，鼠标指针停留自动变成小手

target：指定点击超链接后是新增浏览器窗口，还是当前窗口等
	_blank:新窗口属性
	_self:当前窗口属性
	_top:当前窗口的顶级窗口属性，嵌套窗口比如用
	_parent:当前窗口的父窗口属性，嵌套窗口比如用<iframe>
</code></pre> 
  <p>9.列表</p> 
  <pre><code><ul></ul>：无序列表，只有图标
<ol></ol>:有序列表,有1234
<li></li>：列表项
列表项<li>内部可以继续嵌套列表<ul>或<ol>

属性
type：制定列表项图标格式，circle、square、disc或ABC、123
</code></pre> 
  <p>10.表单</p> 
  <pre><code>表单是什么？有什么用？
   1、收集用户数据，如登入注册界面（制定了输入窗口）
   2、发送请求，携带数据（超链接只有发送请求但不携带数据）
   
<form></form>标签：一个网页可以有多个表单

表单属性
action：相当于href功能，制定请求路径，与超链接的区别：超链接直接点击即可发送，而表单要收集完数据，点击提交按钮，才会发送，所以要设置按钮

<input/>输入域
type属性：制定不同样式
    提交按钮（type="submit"）
    普通按钮（type="button")
    重置按钮（type="reset")：重置表单，要放在表单里面
    文件按钮（type="file"):选文件，需要后台io处理
    文本框（type="text")
    密码框（type="password")
    选择框（type="radio")：需要指定value，name需要一致，checked指默认开始选中
    复选框（type="checkbox"):需要指定value，name需要一致，checked指默认开始选中
    下拉框（type="select"):需要指定name，selected指定默认选中，包含多个<option>
	隐藏域（type="hidden"):隐藏，但会提交数据name=value
    
name属性：来标识数据（w3C制定的，所有浏览器都是这样的）
    数据链接格式：url?name=value&name=value....（该value是数据，不是下面那个value属性）
    按钮不需要填写name，否则会将按钮的value发送（没用的数据）
    
value属性
	文本框不用制定，因为发送value是输入的数据
	而选择框/复选框需要制定value
	按钮的value就是按钮的文字提示

maxlength属性：最多输入多少字符

readonly：只读，会提交数据
disabled：只读，不提交数据

<option></option>：是下拉列表里面的选择框，需要指定value
<textarea></textarea>:文本域，不用制定value，由用户自己填写
</code></pre> 
  <p>补充</p> 
  <pre><code>下拉列表多选
size：表示下拉框最多显示条目数量
multiple：表示支持多选
</code></pre> 
  <p>11、id属性</p> 
  <pre><code>1、每个节点都有id属性
2、同一个网页id属性不能重复
3、id代表这个节点，id是这个节点的身份证号
4、为JavaScript服务，对节点进行增删改，即索引各个节点
</code></pre> 
  <p>12、div和span：图层</p> 
  <pre><code>1、图层是什么？有什么用？
每一个图层就是一个独立的盒子，最主要的作用就是布局
2、若table表格用于布局，会非常不灵活，太规则了
3、div和span左上角有x、y坐标，可以非常灵活布局
4、现代化都是采用div和span进行布局
5、div默认独自占用1行，span不会占用1行，只是一块
</code></pre> 
  <h1>css快速入门</h1> 
  <h2>css是什么？</h2> 
  <ol> 
   <li> <p>层叠样式表语言，属于样式语言，用来修饰html，让html更好看</p> </li> 
   <li> <p>依附于html，为html服务</p> </li> 
  </ol> 
  <h2>如何在html中嵌入css？</h2> 
  <ol> 
   <li>内联定义方式</li> 
   <li>定义内部样式块对象</li> 
   <li>链入外部样式表文件</li> 
  </ol> 
  <h2>第一个css</h2> 
  <h2>内敛定义方式</h2> 
  <pre><code><标签 style= "样式名：样式值;
             样式名：样式值;
             样式名：样式值">
</标签>

任何一个标签都可以加style使用内敛定义方式
样式名和样式值通过查文档学习
</code></pre> 
  <h2>定义内部样式块对象</h2> 
  <pre><code>在<head>标签中，定义样式块<style></style>
</code></pre> 
  <h2>链入外部样式表文件（常用）</h2> 
  <pre><code>在外部创建样式表.css文件
在内部链接外部.css文件
<link rel="stylesheet" type="text/css" href="文件路径"/>
</code></pre> 
  <h2>选择器</h2> 
  <pre><code>css中常见的选择器包括
标签选择器:用于所有该类标签
	标签名{}
	div{
		width:100px
	}
id选择器：可以指定用于某个标签
	#id{}
	$username{
		width:100px
	}
类选择器:可以同时指定不同类的标签
	.class{}
	.student{
		width:100px
	}
	在需要的标签上加上class=""属性

选择器优先级
标签<类<id
</code></pre> 
  <p>以上是css的重点，能够看懂前端css代码即可</p> 
  <p>以下是常用的样式，列举一二，在遇到不认识的样式时，对照官方文档进行学习</p> 
  <hr> 
  <h3>隐藏样式</h3> 
  <pre><code>display:none 隐藏控件
display:block 显示控件

list-style-type:none  隐藏列表ul/ol左边的点
</code></pre> 
  <h3>文本装饰样式</h3> 
  <pre><code>text-decoration:
	underline:下划线
	overline:上划线
	line-through:贯穿线
	blink:闪烁（很多浏览器不兼容）
	none：取消样式（强制去除超链接默认的下划线）
</code></pre> 
  <h3>鼠标悬停效果</h3> 
  <pre><code>hover{ }：专门设置鼠标悬停效果
如input:hover{
	color:red 鼠标放在input控件中，字体变红色
}
注意:input:hover的:两边不能有空格
</code></pre> 
  <h3>内外补丁</h3> 
  <pre><code>margin-top:在控件外的上边打个补丁
padding-left:在控件内的左边打个补丁
</code></pre> 
  <h3>浮动样式</h3> 
  <pre><code>front:left:浮动效果
</code></pre> 
  <h3>定位样式</h3> 
  <pre><code>position:absolute 严格定位
top:300px
left:300px
</code></pre> 
  <h3>光标样式</h3> 
  <pre><code>cursor:pointer  光标变成小手，尽量不要用hand，有兼容问题
</code></pre> 
  <h1>JavaScript</h1> 
  <h2>JavaScript是什么</h2> 
  <pre><code>1、简称JS，与java没有多大关系
2、是一种脚本语言，运行在浏览器上，以普通文本形式保存，可以直接用记事本打开（直接运行，不用生成.class等）
3、是一种编程语言，有变量，控制语句等
4、主要用于操作HTML的节点，产生动态效果
</code></pre> 
  <h2>JavaScript包括三块：ECMAScript、DOM、BOM</h2> 
  <ol> 
   <li>ECMAScript:JavaScript核心语法</li> 
   <li>DOM:对HTML的某个节点进行操作</li> 
   <li>BOM:对浏览器进行操作，如网页前进、后退、关闭、刷新</li> 
  </ol> 
  <h2>嵌入JavaSript代码的三种方式</h2> 
  <p><strong>行间事件</strong></p> 
  <p>JavaScript是一种事件驱动型的编程语言，通常在发生某件事的时候，会去执行某段代码。其中事件包括鼠标单击click，鼠标经过mouseover等。所有事件句柄都是一标签的属性形式存在，例如按钮对象input button有一个onclick这样的属性，当用户点击按钮对象，触发了鼠标单击click事件，那么注册在onclick事件句柄当中的JS代码就会执行。onclick后面的代码实际上是由浏览器负责执行</p> 
  <ol> 
   <li>脚本块的方式 
    <ol> 
     <li>在页面打开的时候自上而下依次执行JS代码</li> 
     <li>一个界面可以出现过个脚本块</li> 
     <li>位置任意</li> 
    </ol> </li> 
  </ol> 
  <pre><code><script type="tet/javascript">
	JS代码
</script>
</code></pre> 
  <ol start="2"> 
   <li>引入外部独立的JS文件</li> 
  </ol> 
  <pre><code><script type="text/javascript" src="路径"></script>
</code></pre> 
  <ol start="3"> 
   <li>alert函数 
    <ol> 
     <li>引入的JS文件里面的JS代码会自上而下的运行</li> 
     <li>可以多次引入</li> 
     <li><code><script></script></code>之间的代码不会运行</li> 
    </ol> </li> 
  </ol> 
  <pre><code>window.alert('hello world');
用于弹窗，可以用单引号或双引号括字符串
分号可以省略，同时可以运行多个alert语句。
</code></pre> 
  <h5>console.log函数</h5> 
  <pre><code>conloe.log(’hello world‘);
输出信息到控制台，类似与system.out.println();
</code></pre> 
  <h5>标识符命名规则</h5> 
  <ol> 
   <li>由字母、数字、$、_组成</li> 
   <li>以字母、$、_开头</li> 
   <li>不可以使用保留字</li> 
   <li>要有意义，驼峰命名法，蛇形命名法</li> 
  </ol> 
  <h5>JS变量</h5> 
  <pre><code>java语言：是一种强类型语言，有编译阶段，属于编译型语言。在编译阶段就确定了变量的类型，而且永远不改变
int x;
x = 100; 	//x为int类型
x = false; 	//java编译器报错
int a,b,c = 100; 	//a,b,c都是int类型，a和b没有赋值，c是100

JS语言：是一种弱类型语言，没有编译姐段，直接浏览器打开解释执行，不需要指定变量数据类型，在赋值的时候赋什么类型数据，变量就是什么类型变量。
var i;
i = 100; 	//i为int类型
i = false; 	//i为布尔类型
var a,b,c = 100; 	//a和b没有赋值，系统默认赋值undefined，undefined是一个具体的值，c是100
</code></pre> 
  <h5>JS函数</h5> 
  <pre><code>java的方法
[修饰符列表] 返回值类型 方法名(形式参数列表){
	函数体;
}
public int sum(int a ,int b){
	return a+b;
}

JavaScript的函数:不需要返回值类型，传什么类型，返回什么类型
function 函数名(形式参数列表){
	函数体;
}
function sum(var a,var b){  	//var可以省略
	alert(a+','+b);
    return a+b;
}

sum();	//输出"undefined,undefined"
sum(1);	//输出"1,undefined"
sum(1,2);	//输出"1,2"
sum(1,2,3);	//输出"1,2"
//注意：这也是JS没有重载机制的一种体现。

另一种定义函数方式
sum = function(a,b){
    return a+b;
}

行间事件调用函数（在事件句柄中写调用函数代码）
<input type="button" value="hello" onclick="sum(1,2)"/>
    
脚本块的方式调用函数
<script type="text/javascript">
    函数声明;
	函数调用;	//声明和调用代码位置前后顺序无所谓，浏览器默认先执行声明（与代码位置无关）
</script>
</code></pre> 
  <h5>JS全局变量和局部变量</h5> 
  <ul> 
   <li>全局变量：在函数体之外声明的变量，在浏览器打开的时候分配空间，浏览器关闭的时候才会销毁</li> 
   <li>局部变量：在函数体当中声明的变量，在函数被调用的时候分配空间，函数执行结束之后，内存释放</li> 
  </ul> 
  <pre><code>特别的地方
function sum(){
	i = 1;
    j;		//全局变量必须手动赋值，否则报错
}
alert(i);	//如果没有var关键字，那么i不管在哪里声明，都是全局变量，不会报错
</code></pre> 
  <h5>JS重载问题</h5> 
  <p>JS没有重载机制，后面定义的函数会覆盖前面定义的同名函数（不看参数）</p> 
  <h5>JS的数据类型</h5> 
  <pre><code>ES6之前有6种数据类型
原始类型（基本数据类型）
undefined
	1、只有一个值，就是undefined
	2、当一个变量声明后没有赋值，系统默认赋值undefined
Number
	1、包括整数，浮点数，NaN，Infinity
	2、NaN不是一个数字，但类型是Number，意义是运算结果本应该是一个数字，却返回不了数字时，就会产生NaN，例如100/"a" -> NaN。
	3、isNaN(x),会先尝试转换成数字，例如x是true，那么转换成1。在进行判断是否为NaN
	判断结果返回true，表示不是一个数字，返回false，表示是一个数字
	4、Inifity是无穷大的意思，如100/0（java会报异常）
	5、Number(x)，该函数可以将不是数字的变量转换成数字，例如Number("123.123")->123
	6、parseInt(123.123) -> 123 不会四舍五入,只取整数部分
	7、ceil(123.123) -> 124 向上取整
	8、10/3=3.33333 是浮点类型（与java不同）
String
	1、var s1 = "abc" 属于String类型
	2、var s2 = new String("abc") 属于Object类型
	3、不管是String类型的字符串s1，还是Object类型的s2，他们的方法都一样
	4、常用方法
		charAt() 获取指定下标位置的字符
		concat() 连接字符串
		IndexOf()	获取某个字符串在该字符串中第一次出现的索引
		lastIndexOf()	获取某个字符串在改字符串中最后一次出现的索引
		replace()	替换
		split()		拆分
		substr()	截取，（起始下标，长度）
		substring()		截取，（起始下标，终止下标）
		toLowerCase()	转小写
		toUpperCase()	转大写
Boolean
	1、Boolean()函数，可以将不是Boolean类型的变量转换成Boolean类型，非空/非零就是为true
	2、0、“”、NaN、undefined转换成false
	3、Boolean()函数在JS种会被隐式调用
Null    
	1、var v = null; null是基本数据类型，但typeof运算符的运算结果是"object"

对象类型
Object
	1、JS内置的类型，一般看作所有类型的超类/基类
	2、属性：prototype
		可以给对象动态扩展属性和方法
		var o = new Object;
		Object.prototype.doSome = function(){
			xxx;
		}
		o.doSome();		//声明时没有该方法，通过prototype扩展了一个方法
		Object.prototype.username = "username";
		console.log(o.username)		//通过prototype扩展了一个属性
		由于Object是其他类型的基类，所以也可以通过prototype给String等类型扩展方法、属性
		
		
ES6之后引入了两个新类型
Symbol
BigInt

动态获取变量的数据类型 typeof 变量名
返回结果是数据类型的字符串，如"undefined"、"number"、"string"、"object"、"function"，都是小写
判断两个变量的数据类型是否相同，用==
if(typeof x == "number" && (typeof y == typeof z))
</code></pre> 
  <h5>官方文档参考</h5> 
  <pre><code>https://developer.mozilla.org/en-US/docs/Learn/JavaScript
</code></pre> 
  <h5>JS的类</h5> 
  <pre><code>类的定义
第一种方法：
function 类名(形式参数列表){		//既是函数定义，又是类的定义，关键在于调用方式
    this.属性名 = 参数;
    this.方法名 = function(){
   		xxx;
    }		
}

函数名();	//上面看作函数定义，不会在堆中new对象
var obj = new 类名();		//上面看作类定义，会导致在浏览器的堆中new一个新对象

第二种方法：
类名 = function(形式参数列表){
	this.属性名 = 参数;
    this.方法名 = function(){
    	xxx;
    }	
}

同理可以用上面的prototype来对类进行扩展函数和属性
 
补充：访问属性名可以用：对象名["属性名"]来访问对象中的某个属性
</code></pre> 
  <h5>null、NaN、undefined的区别</h5> 
  <pre><code>1、== 与 === 的区别
	== 等同运算符，只比较值是否相等
	=== 全等运算符，既比较值是否相等，又比较数据类型是否相等

2、null与undefined是等同关系，值相等
   三者都不是全等关系，因为类型都不同null(Object)、NaN(Number)、undefined(undefined)
</code></pre> 
  <h5>JS的常用事件</h5> 
  <p>任何一个事件都有对应的事件句柄。事件句柄是在事件名称钱添加on即可。</p> 
  <ol> 
   <li>焦点事件</li> 
  </ol> 
  <pre><code>1、失去焦点事件
<input type="text" onblur="console.log('失去焦点')"/>
2、获取焦点事件
<input type="text" onfocus="console.log('获得焦点')"/>

用途：在注册界面，当鼠标点击其他input时，原先的input就失去焦点了，也就可以触发一些判断逻辑。
</code></pre> 
  <ol start="2"> 
   <li>鼠标点击事件</li> 
  </ol> 
  <pre><code>1、click单击事件
<input type="button" value="click事件" onclick="console.log('单击')"/>

2、dblclick双击事件
<input type="button" value="dblclick事件" ondblclick="console.log('双击')"/>
</code></pre> 
  <ol start="3"> 
   <li>键盘事件</li> 
  </ol> 
  <pre><code>1、keydown键盘按下事件
<input type="text" value="keydown事件" onkeydown="console.log('keydown')"/>
2、keyup键盘抬起事件
<input type="text" value="keyup事件" onkeyup="console.log('keyup')"/>
3、keydown、keyup事件结合
<input type="text" value="key事件" onkeyup="console.log('keyup') onkeydown="console.log('keydown')"/>
</code></pre> 
  <ol start="4"> 
   <li>鼠标事件</li> 
  </ol> 
  <pre><code>1、鼠标经过事件
<div id="mouseover" onmouseover="consolo.log('鼠标经过了')"></div>
2、鼠标按下事件
<div id="mousedown" onmousedownr="consolo.log('鼠标按下了')"></div>
3、鼠标弹起事件
<div id="mouseup" onmouseup="consolo.log('鼠标弹起了')"></div>
4、鼠标移动事件
<div id="mousemove" onmousemove="consolo.log('鼠标移动了')"></div>
5、鼠标离开事件
<div id="mouseout" onmouseout="consolo.log('鼠标离开了')"></div>
</code></pre> 
  <ol start="5"> 
   <li>表单事件</li> 
  </ol> 
  <pre><code><form action="xxx" onsubmit="console.log('表单提交了') onreset="console.log('表单重置了')">
1、表单提交事件
<input type="submit" value='提交'/>
2、表单重置事件
<input type="reset" value='重置'/>
</form>
</code></pre> 
  <ol start="6"> 
   <li>文本选中事件</li> 
  </ol> 
  <pre><code><textarea row="10" cols="30" onselect="console.log('文本被选中了')"></textarea>

<input type="text" onselect="console.log('文本被选中了')"/>
</code></pre> 
  <ol start="7"> 
   <li>下拉列表选项改变事件</li> 
  </ol> 
  <pre><code><select onchange="console.log('选项被修改')">
	<option value="Chinese">语文</option>
	<option value="Math">数学</option>
</code></pre> 
  <ol start="8"> 
   <li>页面加载完毕事件</li> 
  </ol> 
  <pre><code><body onload="console.log('页面加载完毕')"></body>
注意：不是在页面加载过程中触发，而是页面所有元素加载完毕之后才会触发
</code></pre> 
  <h5>JS注册事件的两种方式</h5> 
  <h5>第一种方式，注册事件</h5> 
  <p>在标签中使用事件句柄，在事件句柄中编写JS代码（调用函数），当事件句柄对应的事件被触发时候，"注册"在事件句柄的这个代码就被监听器调用。</p> 
  <p>当页面打开时，button标签中的say()函数并不会调用，知识在页面打开时完成事件的绑定，即注册事件，只有事件发生后，say()才会被调用，像这种函数，被称作回调函数</p> 
  <h5>回调函数的特点</h5> 
  <ul> 
   <li>监听器负责调用，不是程序员主动调用。</li> 
   <li>事件发生之后，监听器才会调用函数。</li> 
  </ul> 
  <pre><code><script type="text/javascript">
	function say(){
		console.log("hello");
	}
</script>
<input type="button" value="say" onclick="say()"/>
</code></pre> 
  <h5>补充：根据节点id获得节点对象</h5> 
  <pre><code><input type="button" id="mybtn" value="按钮"/>

想要在JS种获取该input对象
<script type="text/javascript">
	//JS当中有一个内置的隐含的对象叫做：document，document代表整个HTML文档。document是DOM的顶级对象
	//JS当中有一个内置的隐含的对象叫做：wiondow，window代表整个浏览器窗口。window是BOM的顶级对象
	
	var mybtnElt = document.getElementById("mybtn");	//通过顶级对象的getElementById方法找到该节点
	mybtnElt.type = "checkbox";		//重点：在JS中，当你获取了某个节点后，这个节点中有什么属性你就可以访问他的属性，并修改，前端会发生变化
</script>
</code></pre> 
  <h5>第二种方式，</h5> 
  <pre><code><input type="button" value="say" id="saybtn" onclick=""/>	//这里句柄不注册函数

<script type="text/javascript">
	function say(){
		console.log("hello");
	}
	
	sayElt = document.getElementById("saybtn");
	sayElt.onclick = say;	//通过这种方式来注册函数，注意这里不是调用，所以不是say()，只是把say()函数注册在onclick句柄上，网页打开的时候就会执行。
	sayElt.onclick = function(){
		console.log("我是一个回调函数");	//也可以直接用匿名函数注册在句柄上
	}
</script>
</code></pre> 
  <h5>注意执行顺序</h5> 
  <pre><code><script type="text/javascript">
	sayElt = document.getElementById("saybtn");		//若先写script，那么input节点还没有在浏览器上加载，则getElementById会报错
	sayElt.onclick = function(){
		console.log("我是一个回调函数");	
	}
</script>

<input type="button" value="say" id="saybtn" onclick=""/>	

解决方式：只要让input节点加载完后，再执行script代码，回到上面的load内容——让页面全部元素加载完，才会执行body里面的程序
所以只需要把script的代码封装成注册函数，在<body onload = "注册函数"></body>即可
即等待网页元素加载完毕事件发生后，就会调用句柄事件中的pageLoad函数，也就把回调函数注册在button上了（此时button早已加载出来了）
<body onload="pageLoad()">
	<script type="text/javascript">
         function pageLoad(){
         	sayElt = document.getElementById("saybtn");		
            sayElt.onclick = function(){
                console.log("我是一个回调函数");	
            }
    	}
    </script>

	<input type="button" value="say" id="saybtn" onclick=""/>	
</body>
</code></pre> 
  <h5>onload事件句柄</h5> 
  <pre><code><body>
	<script type="text/javacript">
		function myfun(){
			console.log("go")；
		}
		window.onload = myfun	//页面打开的时候会先把myfun注册在onload句柄上，等待页面加载事件load执行完，监听器才会调用myfun()函数
		//window就是DOM顶级对象，可以直接调用onload属性
</body>

同样可以简写成匿名函数
<script>
	windos.onload = function(){
		console.log("go");
	}
</script>
</code></pre> 
  <h5>经典案例（以后就这么编写事件）</h5> 
  <pre><code><body>
	<script type="text/javascript">
		window.onload = function(){
			var btnElt1 = document.getElementById("btn1");
			btnElt1.onclick = function(){
				console.log('按钮1被点击');
			}
			
			var btnElt2 = document.getElementById("btn2");
			btnElt2.onclick = function(){
				console.log('按钮2被点击');
			}
		}
	</sctipt>
	<input type="button" id="btn1" value="按钮1"/>
	<input type="button" id="btn2" value="按钮2"/>
</body>
</code></pre> 
  <h5>捕捉用户的回车键</h5> 
  <pre><code>1、keydown事件
2、捕捉键值，当敲入的是"Enter"，才执行
3、接收监听器调用函数时传递过来的事件对象
4、键盘事件对象，有keyCode属性，通过keyCode属性获取键值
5、判断键值=="Enter"，键盘上的回车的键值永远是13，ESC的键值永远是27

<body>
	<script type="text/javascript">
		window.onload = function(){		
			var usernameElt = document.getElementById("username");
			usernameElt.keydown = function(key){		//1、注册keydown事件
			//3、function(key)的key类似java的形式参数，这里的function(key)是被监听器调用，所以key是用来接收监听器调用时传递过来的实参（事件对象）
				if(key.keyCode == 17){		//4、获取键值 5、判断键值
					console.log("输入回车")
				}
			}
		}
	</script>
	
	<input type="text" id="username"/>
</body>
</code></pre> 
  <h5>JS运算符之void</h5> 
  <pre><code>绝大多数运算符与java相同，例如++、--

<a href="javascript:void(0)" onclick="JS代码"></a>   //保留了超链接格式，点击后运行JS代码，且不会跳转界面

void运算符执行表达式，但不会返回任何结果，javascript:void(0)结果就是废弃掉链接路径，不会跳转界面的核心
</code></pre> 
  <h5>JS的控制语句</h5> 
  <pre><code>JS控制语句绝大多数和java一样
选择语句if、switch
循环语句while、for
转向语句break、continue、return

不同的：
数组（JS中的数组对象创建的时候用的时中括号[]）
var arr = [1,2,3];


以下了解即可
for...in语句
for(var a in arr){		//arr是数组，a是arr的下标
	console.log(arr[a]);		//根据a下标遍历数组arr
}

for...in语句也可以遍历对象属性
function Employee(enum,estring){		//类的定义
	this.enum = enum;
	this.estring = estring; 
}
var e = new Employee(123,'456');		//创建对象
三种遍历属性方式
console.log(e.num +','+ estring);	//通过对象访问
console.log(e["enum"] +','+ e["estring"])		//通过对象+数组下标
for(var a in e){
	console.log(e["a"])		//a就相当于上面的"enum"和”estring"，是字符串，含义是数组下标，通过遍历数组下标访问数组
}
</code></pre> 
  <h5>JS数组</h5> 
  <h5>创建</h5> 
  <pre><code>第一种方式
var a = [];
var a1 = [1,2,3];
var a2 = [1,true,"123"];		//数组原始可以不一致
a2[100] = 100    	//数组长度可以变,自动扩容，中间添加的内容是undefined
console.log(a2[-100]);		//不报错，undefined

第二种方式
var arr1 = new Array();
var arr2 = new Array(3):	//3不是数组元素，而是长度为3
var arr3 = new Array(1,2,3,4,5);	//数组内容是1，2，3，4，5
</code></pre> 
  <h5>Array常用函数</h5> 
  <pre><code>push():添加一个元素，并放在末尾，可以是不同类型
pop():将数组末尾的元素弹出，并且数组长度-1
reverse():翻转数组
jion():连接字符串
</code></pre> 
  <h5>内置对象Date</h5> 
  <pre><code>var time = new Date();
console.log(time);  //Fri Jul 08 2022 23:09:31 GMT+0800 (中国标准时间)
抽取时间，并格式化输出
var year = time.getFullYear();	//getYear过时了，只有两位数
var month = time.getMonth()+1;	//0-11
//var day = time.getDay();	获取的是星期几
var day = time.getDate();
var	hour = time.getHours();
...
var strTime = time.toLocaleString();	//获取本地的日期表达形式 2022/7/8 下午11:15:01

重点方法
console.log(new Date().getTime())	//获取从1970:00:00到现在的总毫秒数
</code></pre> 
  <h5>BOM和DOM区别和联系</h5> 
  <pre><code>1、BOM（浏览器对象模型）：通过BOM的对象和方法可以完成对浏览器窗口的操作，例如关闭浏览器，前进后退，等等
2、DOM（文档对象模型）：通过DOM的对象和方法可以完成对文档的操作，如每个标签，属性
3、BOM是浏览器，DOM是浏览器的网页，所以BOM是包含DOM的
</code></pre> 
  <h5>操作div和span</h5> 
  <pre><code>var divElt = document.getElementById("div1");	//老方法，先根据id取节点
divElt.innerHTML = "<font color='red'>用户名不能为空!</font>";		//修改属性，可以修改<div>标签之间的内容，而且会让浏览器对字符串解释执行
divElt.innerText = "<font color='red'>用户名不能为空!</font>";		//修改属性，可以修改<div>标签之间的内容，不过是原样输出字符串，不会解释执行

同理用到span中
var spanElt = document.getElementById("span1");	
spanElt.innerHTML = "<font color='red'>用户名不能为空!</font>";		
spanElt.innerText = "<font color='red'>用户名不能为空!</font>";
</code></pre> 
  <h5>复选框的全选和取消全选</h5> 
  <p>具体代码可以参考：复选框的全选和取消全选案例视频</p> 
  <h5>获取文本框的value（用户输入的内容）</h5> 
  <pre><code>经典操作

window.onload = function(){
	var usernameElt = document.getElementById("username");
	console.log(usernameElt.value);
}
</code></pre> 
  <h5>获取下拉列表选中项的value</h5> 
  <pre><code>一般数据库存储下拉列表的value，所以获取下拉列表的value去数据库查询
例如存储各个省01、02、03...取得省份可以再查该省的各个市

方法一
<select id="province" onchange="alert(this.value)">		//一改变选项，就可以用this.value获取
	<option value="">--请选择省份--</option>
	<option value="01">广东</option>
</select>

方法二：老方法
window.onload = function(){
	document.getElementById("province").onchage = function(){
		console.log(this.value)	
		console.log(document.getElementById("province").value)	//this就是这个节点对象
	}
}
</code></pre> 
  <h5>显示网页时钟</h5> 
  <pre><code>window.onload = function(){
	document.getElementById("displayTimeBtn").onclick = funciton(){
		v = window.setInterval("displayTime()",1000)		//该函数可以实现，每隔1000ms调用一次，无限循环
	}
	
	document.getElementById("stopTimeBtn").onclick = funciton(){
		window.clearInterval(v)			//setInterval设置完后有个返回值，将返回值设置为全局变量，方便之后重置间隔，即达到取消周期的作用clearInterval
	}
}

function displayTime(){
	var nowTime = new Time();
	document.getElementById("timediv").innerHTML = nowTime.toLocaleString();	
	//之前学习过innerHTML就是编译执行输出字符串
	//tolocaleString就是当前机器默认的时间表示
}
</code></pre> 
  <h5>打开和关闭窗口（BOM操作）</h5> 
  <pre><code>window.open(url,targe) 	//与超链接相似，都能发送请求
window.close()	//关闭窗口

默认开新窗口
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"/>

开一个窗口，在当前窗口显示
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_self')"/>

开一个窗口，在新窗口显示
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_blank')"/>

开一个窗口，在父窗口显示
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_parent')"/>

开一个窗口，在顶级窗口显示
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_top')"/>
</code></pre> 
  <h5>alert和confirm</h5> 
  <pre><code>alert是消息框
confirm是确认框，有返回值Boolean类型

function del(){
	var ok = window.confirm("确认删除？");
	if(ok){
		alert("删除");
	}
}
</code></pre> 
  <h5>设置当前窗口为顶级窗口</h5> 
  <p>可能使用场景：若操作菜单子窗口控制显示子窗口，当长时间没有使用系统时，token过期，那么点击操作菜单的时候，需要重新回到登录界面，那么登陆界面就需要设置成顶级窗口，覆盖原来的各个子窗口</p> 
  <pre><code>if(window.top! = window.self){
	window.top.location = window.self.location		//地址
}
</code></pre> 
  <h5>历史记录（回退到上个界面，前进下个界面）</h5> 
  <pre><code>onclick="window.history.back()"		//回退
onclick="window.history.go(1)"		//前进1步
onclick="window.history.go(-1)"		//前进-1步，相当于后退一步
</code></pre> 
  <h5>多种发送请求方法</h5> 
  <pre><code>1、浏览器地址栏填写url(重点)
2、超链接(重点)
3、提交表单(重点)
4、window.open(url,target)(了解)
5、js代码：window.location.href或document.location.href(重点)
	function go(){
		window.location.href="www.baidu.com";
		window.location="www.baidu.com";
		
		document.location.href="www.baidu.com";
		document.location="www.baidu.com";
	}
</code></pre> 
  <h5>JSON</h5> 
  <h5>eval函数</h5> 
  <pre><code>作用：把一串字符串当做JS代码解释执行
window.eval("var i = 100")等同于var i = 100
</code></pre> 
  <h5>JSON是什么？</h5> 
  <pre><code>JavaScript标记对象，是一种轻量级的数据交换格式

轻量级：JSON的体积小，但表示的数据很多
数据交换：不同语言之间进行的数据通讯。例如C语言对数据库进行查询后，将数据拼接成XML格式的字符串，通过网络的形式将XML格式的字符串传递给java，java接收后再解析XML，获取里面的数据，这样就完成了一次数据交换。同理也可以用JSON格式，或者其他语言之间进行数据交换。
对象：JavaScript当中，json以对象的形式存在

能够数据交换，包括XML、JSON
XML：解析难度大，语法严格
JSON：解析难度小，语法简单
</code></pre> 
  <h5>怎么定义JSON对象，怎么访问对象的属性</h5> 
  <pre><code>1、JSON的属性值可以是任意类型
2、JSON是无类型对象，直接大括号包起来就是一个JSON对象
3、数组使用[]，JSOn是用{}

定义JSON对象
var jsonObj={
		"属性名":属性值
}

var emp = {
	"empno" : 123,
	"ename" : "name"
}

访问JSON对象
emp.empno
emp["empno"]

JSON的属性也可以是JSON对象
var emp1 = {
	"city" : "北京",
	"street" : "中山路"
} 
var emp2 = {
	"name" : "小明",
	"address" : emp1
}
或者
var emp2 = {
	"name" : "小明",
	"address" : {	"city" : "北京","street" : "中山路"}
}

访问
emp2.address.city
emp2.address.street
所以JSON访问属性非常容易，靠"."即可
</code></pre> 
  <h5>处理JSON对象流程</h5> 
  <pre><code>现从java后台中获取JSON类型的字符串
var fromJavaJSON = "{\"nanme\":\"zhangsan\",\"age\":20}";	//这里是用定义的方式模拟从java得到的字符串
其中\"的含义就是转义字符，所以就是取到了一串内容为：{"nanme":"zhangsan","age":20}的字符串

接下来我们就要拼接成JSON格式，并且把这串代码当做JSON代码来解释执行，也就是取得JSOn对象
window.eval("var stu = "+fromJavaJSON)	//现拼接字符串，再用eval把字符串当做JS代码执行，从而获得了JSON对象stu
</code></pre> 
  <h5>经典案例（将后台传递的数据展示在前端表格中）</h5> 
  <pre><code><body>
	<script type="text/javascript">
	var fromJavaJSON = "{\"total\":2,\"students\":[{\"name\":\"zhangsan\",\"age\":20},{\"name\":\"lisi\",\"age\":21}]}";	//还没用后端，这里是用定义的方式模拟从java得到的字符串
		window.onload = function(){
			document.getElementById("stubtn").onclick = function(){
				window.eval("var json = " + fromJavaJSON);
				document.getElementById("total").innerHTML = json.total;
				
				var students = json.students;
				var html = "";
				for(var i = 0;i < students.length;i++){
					html += "<tr>";
					html += "<td>" + students[i].name + "</td>";
					html += "<td>" + students[i].age + "</td>";
					html += "</tr>";
				}
				document.getElementById("tbody").innerHTML = html;
			}
		}
	</script>
	
	<input type="button" id="stubtn" value="显示学生信息"></button>
	<table border="1px" width="40%">
		<tbody id="tbody">
		
		</tbody>
	</table>
	总记录数是：<span id="total"></span>条。
</body>
</code></pre> 
  <h5>正则表达式</h5> 
  <p>参考：正则表达式</p> 
  <h5>经典案例-表单验证</h5> 
  <p>具体代码参考：经典案例-表单验证视频</p> 
  <h5>JS拿元素的三种案例</h5> 
  <pre><code>1、根据id
var div1 = document.getElementById("div1");
2、根据name
var aihaos = document.getElementsByName("aihao");
3、根据标签名
var divs = document.getElementsByTagName("div");
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1647188487985729536"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端,前端,javascript,html,css,json)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div>
                    </li>
                    <li><a href="/article/1835508130608410624.htm"
                           title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
                        <span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div>
                    </li>
                    <li><a href="/article/1835499615491813376.htm"
                           title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
                        <span class="text-muted">彩云飘过</span>

                        <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835493267907637248.htm"
                           title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a>
                        <span class="text-muted">dmengmeng</span>

                        <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div>
                    </li>
                    <li><a href="/article/1835492740536823808.htm"
                           title="node.js学习" target="_blank">node.js学习</a>
                        <span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                        <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
                    </li>
                    <li><a href="/article/1835485429059645440.htm"
                           title="docker" target="_blank">docker</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/eureka/1.htm">eureka</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a>
                        <div>Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息</div>
                    </li>
                    <li><a href="/article/1835480639814594560.htm"
                           title="在Ubuntu中编译含有JSON的文件出现报错" target="_blank">在Ubuntu中编译含有JSON的文件出现报错</a>
                        <span class="text-muted">芝麻糊76</span>
<a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/kill_bug/1.htm">kill_bug</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
                        <div>在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"</div>
                    </li>
                    <li><a href="/article/1835478496810463232.htm"
                           title="Xinference如何注册自定义模型" target="_blank">Xinference如何注册自定义模型</a>
                        <span class="text-muted">玩人工智能的辣条哥</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/Xinference/1.htm">Xinference</a>
                        <div>环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model</div>
                    </li>
                    <li><a href="/article/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835448239864770560.htm"
                           title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a>
                        <span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                    <li><a href="/article/1835435506645692416.htm"
                           title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a>
                        <span class="text-muted">有一只柴犬</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div>
                    </li>
                    <li><a href="/article/1835435141535723520.htm"
                           title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a>
                        <span class="text-muted">夜空_2cd3</span>

                        <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div>
                    </li>
                    <li><a href="/article/1835430719363575808.htm"
                           title="更改npm镜像源为淘宝镜像" target="_blank">更改npm镜像源为淘宝镜像</a>
                        <span class="text-muted">骆小骆</span>
<a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8Enode.js/1.htm">基于node.js</a>
                        <div>npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de</div>
                    </li>
                    <li><a href="/article/1835430340806668288.htm"
                           title="COCO 格式的数据集转化为 YOLO 格式的数据集" target="_blank">COCO 格式的数据集转化为 YOLO 格式的数据集</a>
                        <span class="text-muted">QYQY77</span>
<a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>"""--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances</div>
                    </li>
                    <li><a href="/article/1835428948339683328.htm"
                           title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a>
                        <span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div>
                    </li>
                    <li><a href="/article/1835428317084348416.htm"
                           title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a>
                        <span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div>
                    </li>
                    <li><a href="/article/1835427057752961024.htm"
                           title="补充元象二面" target="_blank">补充元象二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div>
                    </li>
                    <li><a href="/article/1835420753252675584.htm"
                           title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a>
                        <span class="text-muted">jun778895</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div>
                    </li>
                    <li><a href="/article/1835419870070665216.htm"
                           title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a>
                        <span class="text-muted">hai40587</span>
<a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835403246865313792.htm"
                           title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a>
                        <span class="text-muted">和自己一起成长</span>

                        <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div>
                    </li>
                    <li><a href="/article/1835398064727224320.htm"
                           title="前端代码上传文件" target="_blank">前端代码上传文件</a>
                        <span class="text-muted">余生逆风飞翔</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835397938482868224.htm"
                           title="golang获取用户输入的几种方式" target="_blank">golang获取用户输入的几种方式</a>
                        <span class="text-muted">余生逆风飞翔</span>
<a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的</div>
                    </li>
                    <li><a href="/article/1835395039572881408.htm"
                           title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a>
                        <span class="text-muted">清风怎不知意</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div>
                    </li>
                                <li><a href="/article/15.htm"
                                       title="Spring4.1新特性——Spring MVC增强" target="_blank">Spring4.1新特性——Spring MVC增强</a>
                                    <span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a>
                                    <div>目录 
Spring4.1新特性——综述 
Spring4.1新特性——Spring核心部分及其他 
Spring4.1新特性——Spring缓存框架增强 
Spring4.1新特性——异步调用和事件机制的异常处理 
Spring4.1新特性——数据库集成测试脚本初始化 
Spring4.1新特性——Spring MVC增强 
Spring4.1新特性——页面自动化测试框架Spring MVC T</div>
                                </li>
                                <li><a href="/article/142.htm"
                                       title="mysql 性能查询优化" target="_blank">mysql 性能查询优化</a>
                                    <span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E4%BC%98%E5%8C%96/1.htm">优化</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a>
                                    <div>

1 时间到底花在哪了？
  mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了
  检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方
  花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操</div>
                                </li>
                                <li><a href="/article/269.htm"
                                       title="windows系统配置" target="_blank">windows系统配置</a>
                                    <span class="text-muted">cherishLC</span>
<a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a>
                                    <div>删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可： 
http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html 
类似的还有pagefile.sys 
 
msconfig 配置启动项 
shutdown 定时关机 
 
ipconfig 查看网络配置 
ipconfig /flushdns</div>
                                </li>
                                <li><a href="/article/396.htm"
                                       title="人体的排毒时间" target="_blank">人体的排毒时间</a>
                                    <span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a>
                                    <div>======================== 
||&nbsp; 人体的排毒时间是什么时候？|| 
========================  
 
转载于： 
http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR</div>
                                </li>
                                <li><a href="/article/523.htm"
                                       title="ZooKeeper" target="_blank">ZooKeeper</a>
                                    <span class="text-muted">cugfy</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步， 配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea</div>
                                </li>
                                <li><a href="/article/650.htm"
                                       title="网络爬虫的乱码处理" target="_blank">网络爬虫的乱码处理</a>
                                    <span class="text-muted">随意而生</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                                    <div>下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文 、俄文、藏文之类的乱码处理，因为他们的解决方式 是一致的，故在此统一说明。 &nbsp;&nbsp;&nbsp; 网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理</div>
                                </li>
                                <li><a href="/article/777.htm"
                                       title="Xcode常用快捷键" target="_blank">Xcode常用快捷键</a>
                                    <span class="text-muted">张亚雄</span>
<a class="tag" taget="_blank" href="/search/xcode/1.htm">xcode</a>
                                    <div>一、总结的常用命令： 
 
&nbsp;&nbsp;&nbsp; 隐藏xcode command+h 
 
&nbsp;&nbsp;&nbsp; 退出xcode command+q 
 
&nbsp;&nbsp;&nbsp; 关闭窗口 command+w 
 
&nbsp;&nbsp;&nbsp; 关闭所有窗口 command+option+w 
 
&nbsp;&nbsp;&nbsp; 关闭当前</div>
                                </li>
                                <li><a href="/article/904.htm"
                                       title="mongoDB索引操作" target="_blank">mongoDB索引操作</a>
                                    <span class="text-muted">adminjun</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a>
                                    <div>一、索引基础：&nbsp;&nbsp; &nbsp;MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令：&nbsp;&nbsp; &nbsp;&gt; db.test.ensureIndex({&quot;username&quot;:1})&nbsp;&nbsp; &nbsp;可以通过下面的名称查看索引是否已经成功建立：&nbsp;&nbs</div>
                                </li>
                                <li><a href="/article/1031.htm"
                                       title="成都软件园实习那些话" target="_blank">成都软件园实习那些话</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E6%88%90%E9%83%BD+%E8%BD%AF%E4%BB%B6%E5%9B%AD+%E5%AE%9E%E4%B9%A0/1.htm">成都 软件园 实习</a>
                                    <div>无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~ 
　　断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。 
　　都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都</div>
                                </li>
                                <li><a href="/article/1158.htm"
                                       title="Linux下FTP服务器安装及配置" target="_blank">Linux下FTP服务器安装及配置</a>
                                    <span class="text-muted">ayaoxinchao</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/FTP%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">FTP服务器</a><a class="tag" taget="_blank" href="/search/vsftp/1.htm">vsftp</a>
                                    <div>检测是否安装了FTP 
[root@localhost ~]# rpm -q vsftpd 
如果未安装：package vsftpd is not installed&nbsp; 安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息 
&nbsp; 
安装FTP 
运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf</div>
                                </li>
                                <li><a href="/article/1285.htm"
                                       title="使用mongo-java-driver获取文档id和查找文档" target="_blank">使用mongo-java-driver获取文档id和查找文档</a>
                                    <span class="text-muted">BigBird2012</span>
<a class="tag" taget="_blank" href="/search/driver/1.htm">driver</a>
                                    <div>注：本文所有代码都使用的mongo-java-driver实现。 
&nbsp; 
在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在</div>
                                </li>
                                <li><a href="/article/1412.htm"
                                       title="JSONObject以及json串" target="_blank">JSONObject以及json串</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/JSONObject/1.htm">JSONObject</a>
                                    <div>一.JAR包简介 
&nbsp; &nbsp; 要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包： 
&nbsp; &nbsp; 1.commons-lang-2.0.jar 
&nbsp; &nbsp; 2.commons-beanutils-1.7.0.jar 
&nbsp; &nbsp; 3.commons-collections-3.1.jar 
&n</div>
                                </li>
                                <li><a href="/article/1539.htm"
                                       title="[Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性" target="_blank">[Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>为了说明问题，看个简单的代码， 
&nbsp; 
    import org.apache.zookeeper.*;  
      
    import java.io.IOException;  
    import java.util.concurrent.CountDownLatch;  
    import java.util.concurrent.ThreadLocal</div>
                                </li>
                                <li><a href="/article/1666.htm"
                                       title="【Scala十二】Scala核心六：Trait" target="_blank">【Scala十二】Scala核心六：Trait</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
                                    <div>Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c</div>
                                </li>
                                <li><a href="/article/1793.htm"
                                       title="weblogic version 10.3破解" target="_blank">weblogic version 10.3破解</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a>
                                    <div>版本：WebLogic Server 10.3 
 
说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录 
例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain 
 
1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa</div>
                                </li>
                                <li><a href="/article/1920.htm"
                                       title="求第n个斐波那契数" target="_blank">求第n个斐波那契数</a>
                                    <span class="text-muted">BrokenDreams</span>

                                    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 自己试了下，搞了好久。。。基础要加强了。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbs</div>
                                </li>
                                <li><a href="/article/2047.htm"
                                       title="读《研磨设计模式》-代码笔记-访问者模式-Visitor" target="_blank">读《研磨设计模式》-代码笔记-访问者模式-Visitor</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
                                    <div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 


import java.util.ArrayList;
import java.util.List;

interface IVisitor {
	
	//第二次分派，Visitor调用Element
	void visitConcret</div>
                                </li>
                                <li><a href="/article/2174.htm"
                                       title="MatConvNet的excise 3改为网络配置文件形式" target="_blank">MatConvNet的excise 3改为网络配置文件形式</a>
                                    <span class="text-muted">cherishLC</span>
<a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a>
                                    <div>MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。 
主页：
http://www.vlfeat.org/matconvnet/ 
教程：
http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html 
 
注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet：
http</div>
                                </li>
                                <li><a href="/article/2301.htm"
                                       title="ZK Timeout再讨论" target="_blank">ZK Timeout再讨论</a>
                                    <span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/timeout/1.htm">timeout</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a>
                                    <div>http://crazyjvm.iteye.com/blog/1693757&nbsp;文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息： 
Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003</div>
                                </li>
                                <li><a href="/article/2428.htm"
                                       title="CASE WHEN 用法介绍" target="_blank">CASE WHEN 用法介绍</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/group+by/1.htm">group by</a><a class="tag" taget="_blank" href="/search/case+when/1.htm">case when</a>
                                    <div>CASE WHEN 用法介绍 
 
1. CASE WHEN 表达式有两种形式 
 
 
--简单Case函数&nbsp; 
 
CASE sex&nbsp; 
WHEN '1' THEN '男'&nbsp; 
WHEN '2' THEN '女'&nbsp; 
ELSE '其他' END&nbsp; 
 
--Case搜索函数&nbsp; 
 
CASE 
WHEN sex = '1' THEN </div>
                                </li>
                                <li><a href="/article/2555.htm"
                                       title="PHP技巧汇总:提高PHP性能的53个技巧" target="_blank">PHP技巧汇总:提高PHP性能的53个技巧</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
                                    <div>PHP技巧汇总:提高PHP性能的53个技巧　　用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，　　单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注：　　PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。　　1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍</div>
                                </li>
                                <li><a href="/article/2682.htm"
                                       title="Yii框架中CGridView的使用方法以及详细示例" target="_blank">Yii框架中CGridView的使用方法以及详细示例</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
                                    <div>CGridView显示一个数据项的列表中的一个表。 
表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。　　CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。 
实例代码如下：</div>
                                </li>
                                <li><a href="/article/2809.htm"
                                       title="Maven项目打包成可执行Jar文件" target="_blank">Maven项目打包成可执行Jar文件</a>
                                    <span class="text-muted">dyy_gusi</span>
<a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a>
                                    <div>Maven项目打包成可执行Jar文件 
在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下： 
1、在项目中加入插件的依赖： 
&lt;plugin&gt;
	</div>
                                </li>
                                <li><a href="/article/2936.htm"
                                       title="php常见错误" target="_blank">php常见错误</a>
                                    <span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
                                    <div>1. &nbsp;kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: &quot;GET / HTTP/1.1&quot;, upstream: &quot;fastc</div>
                                </li>
                                <li><a href="/article/3063.htm"
                                       title="修改linux的用户名" target="_blank">修改linux的用户名</a>
                                    <span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/change+password/1.htm">change password</a>
                                    <div>Change Linux Username 
更改Linux用户名，需要修改4个系统的文件： 
/etc/passwd 
/etc/shadow 
/etc/group 
/etc/gshadow 
古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替： 
vipw 
vipw -s 
vigr 
vigr -s 
&nbsp; 
具体的操作顺</div>
                                </li>
                                <li><a href="/article/3190.htm"
                                       title="第五章 常用Lua开发库1-redis、mysql、http客户端" target="_blank">第五章 常用Lua开发库1-redis、mysql、http客户端</a>
                                    <span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a>
                                    <div>对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。 
一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&amp;q=lua+resty。 
&nbsp; Redis客户端 
lua-resty-r</div>
                                </li>
                                <li><a href="/article/3317.htm"
                                       title="zkClient 监控机制实现" target="_blank">zkClient 监控机制实现</a>
                                    <span class="text-muted">liyonghui160com</span>
<a class="tag" taget="_blank" href="/search/zkClient+%E7%9B%91%E6%8E%A7%E6%9C%BA%E5%88%B6%E5%AE%9E%E7%8E%B0/1.htm">zkClient 监控机制实现</a>
                                    <div>&nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp;直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举</div>
                                </li>
                                <li><a href="/article/3444.htm"
                                       title="在Mysql 众多表中查找一个表名或者字段名的 SQL 语句" target="_blank">在Mysql 众多表中查找一个表名或者字段名的 SQL 语句</a>
                                    <span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>在Mysql 众多表中查找一个表名或者字段名的&nbsp;SQL&nbsp;语句：   
　　方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name';
　　方法二：SELECT column_name from information_schema.colum</div>
                                </li>
                                <li><a href="/article/3571.htm"
                                       title="程序员对英语的依赖" target="_blank">程序员对英语的依赖</a>
                                    <span class="text-muted">Smile.zeng</span>
<a class="tag" taget="_blank" href="/search/%E8%8B%B1%E8%AF%AD/1.htm">英语</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E7%8C%BF/1.htm">程序猿</a>
                                    <div>1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。 
2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。 
3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。 
4、写的程序至少能有一定的可读性，至少要人别人能懂吧... 
 
以上一些问题，充分说明了英语对程序猿的重要性。骚年</div>
                                </li>
                                <li><a href="/article/3698.htm"
                                       title="Oracle学习笔记(8) 使用PLSQL编写触发器" target="_blank">Oracle学习笔记(8) 使用PLSQL编写触发器</a>
                                    <span class="text-muted">vipbooks</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/Access/1.htm">Access</a>
                                    <div>&nbsp;&nbsp;&nbsp; 时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！ 
&nbsp;&nbsp;&nbsp; 这是第八章的学习笔记，学习完第七章的子程序和包之后</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>