html-css-js
html，超文本标记语言，解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
html是一种规范、标准，通过标记符号来标记要显示的网页中的各个部分。
HTML的基本结构：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head></head><body></body>
</html>
html环境
编写html代码可以使用任何编辑器，例如记事本、editplus、Eclipse…
编写好的html页面，可以使用浏览器来解析、运行、显示，这时有两种方式：使用本地地址，浏览器打开的就是本地的html页面；使用服务器地址，浏览器打开的就是服务器软件中部署的html页面。
本地访问就是在浏览器的地址栏中输入：file:///路径…/test.html；或者双击html文件，使用浏览器打开；或者把html文件拖拽到已经打开的浏览器中。
服务器访问分为访问静态资源和访问动态资源：web服务器有两种：(1)支持html页面(静态资源)访问的web服务器，例如apache服务器、ngnix服务器…；(2)支持java代码(动态资源)访问的web服务器，例如tomcat服务器、jboss服务器…。
nginx安装后，双击nginx.exe闪退是正常的，但如果进程没有启动，通过添加logs和temp文件夹解决。nginx服务器关闭后，启动新浏览器不能再进行访问，但原来返回的浏览器中有缓存，可以访问。
eclipse配置服务器：
Apache-Tomcat8.5
/
(1)Windows-Preferences-Server
\
\ Basic-HTTP Server
Pivotal tc Server v4.0
(2)Run As-Run on Server
在Windows里配置的是环境，项目要部署到服务器才能通过浏览器访问。
使用ngnix服务器时，sts中可以配置html文件的存放位置，在nginx.exe同级目录下，新建一个html文件夹，把html文件放到这个文件夹，双击ngnix.exe，访问的路径是http://localhost(127.0.0.1)/test.html，按照这个路径去访问html页面，这是访问静态资源。把编写好html文件部署到tomcat服务器上，然后Run on Server，按照html、css、js和servlet的代码去访问tomcat服务器上的代码，这是访问动态资源。
sts中可以写静态的web项目(Static Web Project)，也可以写动态的web项目(Dynamic Web Project)。
(1)静态web项目：在默认生成的WebContent(web容器)目录下，新建html文件，编写好的html文件直接用sts中内置的浏览器(Web Browser)打开，这是本地访问。把这个静态web项目部署到外部的服务器(ngnix)中时，就相当于把项目中的html文件部署到ngnix指定的目录里面。过程：Run on Server-Basic-HTTP Server-指定html文件存放的路径-访问到本地的html文件。
浏览器：向服务器发送请求(post/get)
–http请求–>
服务器：接收请求-》解析url，定位到模板文件-》根据url的参数和确定的模板文件生成1个HTML文件-》给浏览器发送HTML文件
–http响应–>
浏览器：接收响应，拿到HTML文件-》解析HTML文件，整理相关资源-》展示页面。
http://127.0.0.1:80/html-css-js/test.html
浏览器访问的是nginx服务器中的html，本地访问的是工作空间中的html。
手动部署是把工作空间中的html复制1份到nginx服务器，而自动部署是同通过服务器设置的访问路径把工作空间中的html加载到服务器进行访问。
静态资源和动态资源的区别？
1.静态资源使用静态网页开发技术发布的资源；动态资源使用动态页面及时发布的资源。
2.如果是访问静态资源，那么所有用户访问到的都是同样的结果；如果是访问动态资源，那么不同的用户访问到的资源可能不同。
3.如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎。如果用户请求的是动态资源，那么服务器会先将动态资源转换成静态资源，服务器把静态资源发送给浏览器，浏览器再用内部解析。
html语法
后缀：可能用.html或.htm作为后缀名(文件的扩展名)
注释：快捷键是Shift+Ctrl+/，格式是<!-- 注释内容 -->
html的结构？
(1)严格的文档类型：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(2)宽松的文档类型：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(3)frameset框架文档类型：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
(4)HTML5文档类型：<!DOCTYPE html>
meta标签：可以用来定义html文档的元数据。
(1)关键字（给搜索引擎看的）：
<meta name="Author" content="briup">
<meta name="Copyright" content="版权信息">
<meta name="Description" content="描述信息">
<meta name="keywords" lang="zh-cn" content="精品图书">
<meta name="keywords" lang="en-us" content="good book">
(2)报头规范（给浏览器看的）：
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
将会创建如下的消息头
Content-Type:text/html;charset=utf-8
<meta http-equiv="Content-Languaga" content="zh-CN">
将会创建如下的消息头
Content-Language:zh-CN
<meta http-equiv="Refresh" content="n;url=http://yourlink">
定时让网页在指定的时间n内跳转到页面http://yourlink
n表示时间，单位是秒
<meta http-equiv="expires" content="Wed, 20 Jun 2022 22:33:00 GMT">
可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
<meta http-equiv="Pragma" content="no-cache">
设置网页禁用浏览器缓存
将会创建如下的消息头：
Pragma:no-cache
<meta http-equiv="Cache-Control" content="no-cache">
设置网页禁用浏览器缓存
html颜色由红®、绿(G)、蓝(B)三原色组成，每种颜色的最低值为0(十六进制为000)，最高值为255(十六进制为FF)；十六进制值的写法为#十六进制字符(3或6个字符)；html颜色一共有256256256=16,777,216种。
html的标签
(1)块元素(block)，一个标签，需要独占一行的空间。
h1~h6标签：标题，有字体大小的设置；文本有加粗强调设置；上下文之间有较大间距。
p标签：段落，独占一行；上下文之间具有距离。
ul、li标签：无序列表。两者需要配合使用；ul、li都独占一行空间；ul上下文之间有很大空间；li与列表的样式显示(默认点状)且有文本缩进。
ol、li标签：有序列表。和ul类似。
dl、dt、dd标签：自定义列表。三个标签配合使用，一个dl下面可以有若干个dt，一个dt下面可以有若干个dd；dl、dt、dd独占一行空间；dl上下文之间有很大空间；dd有文本缩进。
div标签：独占一行。
(2)行内元素(inline)，也可以称为内联元素。不会独占一行，可以和其他行内元素并列一起显示。
span标签：最干净的内联标签(没有任何修饰)；不独占一行。
a标签，超链接。不独占一行；点击可以发生跳转或进行对应其他操作，默认的语法颜色为绿色；文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示。
u标签：下划线修饰；i标签：斜体修饰；b标签：加粗；em标签：强调；strong标签：加粗；s标签：删除线；sup标签：上标；sub标签：下标。
img标签，图片。服务器路径：
。相对路径：
。
超链接：从一个web资源到另外一个web资源的链接。
(1)链接路径：服务器路径（类似于http://www.xxx.com/test或者http://ip地址:port端口号/test），相对路径（是指访问当前路径下有的文件，直接写文件名：test.html或者…/文件名：…/test.html），本地路径（file:///路径…/文件名）。
(2)链接状态：未访问，已选择，已访问。
(3)属性：
超链接标签中，有一个很重要的属性href，该属性中可以设置链接的URI地址
绝对路径：http://www.baidu.com
相对路径：hello.html
邮件地址：mailto:test@briup.com
锚点：#id
空连接：javascript:void(0);
link标签：只能出现在head标签中，定义了当前文档和另一个资源之间的联系。
通常用于链接到外部css样式表：
href：定义关系链接地址
rel：定义当前文档所连接文档之间的关系
type：文档类型。
base标签，只能出现在head标签中，设置页面中所有文档的相对路径，相对的基准URI。如果设定了基准链接地址，当前页面中的所有相对路径都基于该路径。<base href="http://localhost:7777/html_css_js">
html表格：使用table可以定义一个表格，用tr来定义表格中的一行，用td来定义列。在md文件中编写笔记文档的时候，其实也是在写一个html页面，例如下面的表格就是html中的table可以使用shift+f12进行查看。
html表单(form)：主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。表单是客户端和服务器端传递数据的桥梁，是实现用于与服务器互动的最主要方式。前后端交互：在form标签中action=“后端代码的路径”。属性有：
(1)action：设定处理表单数据URI的地址。
(2)method：设定数据传送到服务器的方式。
get请求：将输入的数据追加到action地址后面。
post请求：将输入的数据保存到HTTP协议的报文中。
(3)name：设定表单的名称。
(4)enctype：设定表单数据的内容类型。
application/x-www-form-urlencoded：在发送前编码所有字符(默认)，以属性=值&属性=值的形式进行处理。
multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
(5)accept-charset：设置服务器端可以处理的字符编码(一般不需要单独设置)。
input标签，基本表单控件。type属性可以控制，这个表单控件的具体类型。
text-单行文本框
password-密码框
radio-单选按钮
checkbox-复选框
file-文件(上传)
hidden-隐藏域
submit-提交按钮
reset-重置按钮
name属性，控件名称，这个名称与控件的当前值，形成"名称=值"，一同随表单提交。value属性，用于设定初始化，可选。
checked属性，单选框，复选框默认选中属性。
button标签，按钮控件。
name属性，控件名称
value属性，控件初始值
type属性，控件类型：button普通按钮、submit提交按钮、reset重置按钮。
select标签，下标列表。
name属性， 控件名称
size属性， 列表框中行的显示数量
multiple属性， 是否允许多选
option标签，value属性， 定义控件的初始值。提交表单时，初始值会被提交给服务器。
textarea：多行文本框(文本域)。
name属性， 控件名称
rows属性， 定义文本框行数
cols属性， 定义文本框列数
css：层叠样式表，用来渲染html中元素内容的呈现的形式。css属性和值之间用冒号分隔；css属性之间用分号分隔；css的值有多个的时候使用空格分隔。
css样式的使用方式？
(1)内嵌式：每个html元素都包含有一个style属性，使用该属性可以直接指定样式。
<div style="font-size: 60px;color: red;">hello world</div>
(2)嵌入式：css样式定义内容位于style元素之间，其type属性必须定义为text/css，把样式嵌入到html页面中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title><style type="text/css">div{font-size: 60px;color: red;}</style>
</head>
<body><div>hello world</div>
</body>
</html>
(3)外联式：外部引用，可以在多个文档间共享样式表，提高效率；可以改变样式表而无须改变html文档。
test.css：
div{font-size: 60px;color: red;
}
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body><div>hello world</div>
</body>
</html>
css选择器：是一种css的语法，用来实现选中需要渲染的标签元素。
(1)标签选择器：通过html元素的标签名选择指定的元素。
div{font-size:50px;
}
//选择html中的div元素进行样式渲染
(2)类选择器：通过html元素的class属性值选择指定的元素。
<p class="rr">one</p>
<span class="rr">two</span>
<div class="rr">three</div>
//选择html中所有的class的值为rr的元素进行样式渲染//一个标签class属性中的值可以有多个，如：<p class="rr tt">one</p>。
.rr{color:red;
}
(3)id选择器：通过html元素的id属性值选择指定的元素。
<p class="rr">one</p>
<p id="two" class="rr">two</p>
<p class="rr">three</p>
#two{background-color:green;
}
(4)通配符(*)选择器：
*{color:red;
}
(5)组合选择器：使用逗号(,)隔开选择器，可以减少样式表的重复声明。
h1,h2,h3,h4{color:red;
}
(6)关联选择器：选择div标签里面的所有a元素(子元素和后代元素)，然后进行样式渲染
div a{color:red;
}
选择div标签中直接子元素里面的a元素（只有儿子元素），然后进行样式渲染
div > a{color:red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body><div><a>test</a><span><a>test</a></span></div>
</body>
</html>
(7)伪类选择器是指同一个html元素的不同状态的一种定义/选择方式。
/* 超链接没有任何动作前的状态 */
a:link{color: red;
}
/* 光标移动到超链接上的状态 */
a:hover{color: green;text-decoration:none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body><a href="javascript:viod(0);">test</a>
</body>
</html>
css常见的样式属性和值：
(1)尺寸属性
width 设置元素的宽度
height 设置元素高度
max-height 设置元素的最大高度
max-width 设置元素的最大宽度
min-height 设置元素的最小高度
min-width 设置元素的最小宽度
(2)字体属性
font-family 字体族科：微软雅黑 Microsoft YaHei
font-size 字体大小
font-style 字体风格：normal 正常;italic 斜体;oblique 倾斜
font-weight 字体加粗：normal 正常;bold 粗体;bolder 更粗;lighter 更细
text-decoration 规定添加到文本的修饰
-none 默认，定义标准的文本
-underline 定义文本下的一条线
-overline 定义文本上的一条线
-line-through 定义穿过文本下的一条线
-blink 定义闪烁的文本
(3)颜色
color 设定文本的颜色
opcity 设置透明度：
-所有浏览器都支持 opacity 属性
-IE8 以及更早的版本支持替代的 filter 属性：例如，filter:Alpha(opacity=50)
-一般两个属性一起写，保证兼容性
opacity:0.5;
filterAlpha(opacity=50)
(4)背景设置元素的背景颜色，background-color:#CCC;
background-image
-设置元素的背景图像
-url(bgimage.gif)
background-repeat
-设置是否及如何重复背景图像
-repeat 默认。背景图像将在垂直方向和水平方向重复
-repeat-x 背景图像将在水平方向重复
-repeat-y 背景图像将在垂直方向重复
-no-repeat 背景图像将仅显示一次
background-attachment
-设置背景图像是否固定或者随着页面的其余部分滚动
-fixed 固定
-scroll 滚动
background-position
-设置背景图像的开始位置
background
-简写属性在一个声明中设置所有的背景属性
(5)边框属性
border-style
-设置4个边框的样式
-dotted 定义点状边框。在大多数浏览器中呈现为实线
-solid 定义实线
-double 定义双线
-如果4个值都给定了，分别应用于上，右，下，左
-如果给定1个值，应用于各边
-如果给定2个值，第一个值应用于上下边，第二个值应用于左右边
border-width
-设置4个边框的宽度
border-color
-设置边框颜色
border
-在一个声明设置所有的边框属性
border:1px solid #ff0000
(6)鼠标光标属性
cursor，属性规定要显示的光标的类型（形状）
none 无
auto 默认,浏览器设置的光标
pointer 光标呈现为指示链接的指针（一只手）
wait 此光标指示程序正忙（通常是一只表或沙漏）
help 此光标指示可用的帮助（通常是一个问号或一个气球）
(7)列表属性
list-style 在一个声明中设置所有的列表属性
list-style: square inside url('/i/eg_arrow.gif')
list-style-image 将图象设置为列表项标记
list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置
-inside 列表项目标记放置在文本以内且环绕文本根据标记对齐
-outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外且环绕文本不根据标记对齐
list-style-type 设置列表项标记的类型
-none 无标记
-disc 默认，标记是实心圆
-circle 标记是空心圆
-square 标记是实心方块
-decimal 标记是数字
-ower-roman 小写罗马数字(i, ii, iii, iv, v, …)
-upper-roman 大写罗马数字(I, II, III, IV, V, …)
-lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, …)
-upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, …)
-lower-latin 小写拉丁字母(a, b, c, d, e, …)
-upper-latin 大写拉丁字母(A, B, C, D, E, …)
(8)表格
-color
-font-size
-text-align 文字对齐
-background
-border 边框，只能用于table,th,td
-margin 间距，只能用于table,caption
-padding 内间距，只能用于th,td
-width 宽，只能用于table,td,th
-height 高，只能用于table,td,th
js：JavaScript是基于对象的语言。
Javascript语言的特点：解释执行的脚本语言，基于对象的语言，简单性，弱语言，事件驱动，动态性，安全性，跨平台性。
Javascript的作用：
动态改进网页的设计布局(操作页面中的标签元素)；
验证表单；
检测浏览器、控制浏览器的行为；
创建cookies；
处理页面中触发的事件；
再使用ajax的时候也要用JavaScript。
JavaScript在页面中的位置：
(1)直接写到页面中：
必须写到之间，放置在HTML页面的或标签中：
<script type="text/javascript">//...
</script>
(2)写到标签元素的事件属性里面：
<div onclick="javascript:alert('hello world')">
(3)写到一个外部的文件里面(.js结尾的文件)：
哪个页面使用就引入，类似于css样式表的引用
<script type="text/javascript" src="js/test.js"></script>JavaScript的变量名(标识符)：大小写敏感；不能以数字开头；可以由字母、数字、下划线、$符号组成；不能是JavaScript的关键字。Javascript中常见的数据类型：字符串(String)，数字(Number)，布尔(Boolean)，数组(Array)，对象(Object)，空(null)，未定义(Undefined)。判断数据类型：使用全局函数typeof()，只能判断基础数据类型，对于使用内置构造函数创建的对象，均返回object。Javascript中任何类型的变量都使用var关键字来声明。JavaScript有动态类型的特点，就是说相同的变量可以作为不同的类型。
```java
var x;
console.log(typeof(x));
x = 5;
console.log(typeof(x));
x = "briup";
console.log(typeof(x));
//输出结果：
undefined
number
string
1.字符串（String）
(1)字符串可以是任意文本。可以使用单引号或双引号
var name1="tom1";var name2='tom2';
(2)可以在字符串中使用引号，只要不匹配包围字符串的引号
var v1="He is called 'tom'";
var v2='He is called "tom"';
(3)也可以使用转义字符"/"
var v="He is called \"tom\" ";
(4)字符串中还内置一些函数
var s="hello world";
//获取字符串的长度
console.log(s.length);
//从下标为3的位置开始，截取4个字符，包括下标为3的位置的字符
console.log(s.substr(3,4));
//从下标为6的位置开始截取，截取到下标为8的位置，但不包括下标为8的字符[6,8)
console.log(s.substr(6,8));
//trim()去掉字符串两边的空格，但此方法部分浏览器不支持
console.log(s.trim().length);
//字符串转换为大写
console.log(s.toUpperCase());
//字符串转换为小写
console.log(s.toLowerCase());
//分割字符串，返回一个数组
console.log(s.split(" "));
console.log(s.split(" ").length);
console.log(s.split(" ")[0]);
console.log(s.split(" ")[1]);
2.数字（Number）
Javascript只有一种数字类型，数字可以带小数点，也可以不带
var x1=34.00;
var x2=34;
3.布尔（Boolean）
只能有两个值：true或false
4.数组（Array）
JavaScript中数组的特点：
数组的长度是可变的；
数组里面放的数据类型也可以不同；
数组的长度是和所使用到的数组中最大下标相关联的。
//1.创建数组的时候,可以指定长度也可以不指定：
var a1 = new Array(4);
var a2 = [1,3,4,"tom"];
var a3 = new Array();
var a4 = [];
//JavaScript中，一对中括号可以用来代表数组，java中是用一对大括号
//2.创建数组并赋值
var a = new Array();
a[0] = "tom0";
a[1] = "tom1";
a[2] = "tom2";
a[6] = "tom6";
console.log(a.length);
for(var i=0;i<a.length;i++){console.log(a[i]);
}
//3.数组对象还有push方法，可以直接把数据存放到数组中，而不需要控制下标
arr.push("briup");
5.空（null）
var name=null;
console.log(name);
6.未定义（Undefined）
var age;
console.log(age);
7.对象（Object）
var v = new Date(); //日期+时间对象
var obj1 = new Object(); //Object对象
var obj2 = {}; //Javascript中{}可以代表对象
var arr1 = new Array(); //数组对象
var arr2 = []; //数组对象
var boo1 = new Boolean(true), boo2 = true; //Boolean对象
var num1 = new Number(123), num2 = 123.45; //Number对象
var str1 = new String("abc"), str2 = 'abc'; //String对象//自定义对象：
var person={firstname:"John",lastname:"Doe",id:5566
};
console.log(person);
8.函数（function）
function test1(){//无参函数
}
function test2(name){//有参函数（1参）
}
function test3(v1,v2){//有参函数（2参）
}//函数中使用return就表示有返回值，不使用则表示没返回值
//return 可以表示直接结束当前函数，也可以不带返回值
function test4(v1,v2){return;
}//匿名函数
function(){//....
}a.test(function(){//.....
});
函数的位置：定义在
<script type="text/javascript">function test(){alert("hello world");}test();
</script>
（2）在html元素的事件属性中调用定义过的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title><script type="text/javascript">function test(){alert("hello world");}</script>
</head>
<body><input type="button" value="点击" onclick="test()" />
</body>
</html>
运算符：算术运算符；赋值运算符；字符串运算(字符串和字符串，字符串和数字进行加法，都是进行拼接运算)；比较运算符；逻辑运算符；条件运算符。
条件判断：
if-else语句：
if(condition){}
if(condition){}else{}
if(condition1){}else if(condition2){}else{}
switch-case语句
循环语句：
//for循环语句：
for(var i=0;i<5;i++){console.log("hello world");
}
for(i=0;i<5;i++){console.log("hello world");
}//for-in语句：可以专门循环遍历出对象中的属性和值。
var person={fname:"John",lname:"Doe",age:25
};
for (x in person){console.log(x+":"+person[x]);
}//while语句：
var i=0;
while (i<5){console.log("hello world");i++;
}//do-while语句：
var i=0;
do{console.log("hello world");i++;
}while(i<6);
跳出循环：break，continue
日期类型Date：可以使用创建对象，获取一个日期时间。
console.log("日期对象");
var date = new Date();
console.log(date);
//获得当前年份-1900
console.log(date.getYear());
//获得当前年份
console.log(date.getFullYear());
//获得当前月份-1
console.log(date.getMonth());
//获得当前是一个月中的哪一号
console.log(date.getDate());
//获得星期几
console.log(date.getDay());
//获得时间中的时(24)
console.log(date.getHours());
//获得时间中的分
console.log(date.getMinutes());
//获得时间中的秒
console.log(date.getSeconds());
//获得时间中的毫秒
console.log(date.getMilliseconds());
DOM
当页面被加载时，浏览器会创建页面的文档对象模型。
可以用document对象来表示浏览器创建出来的文件对象模型。
使用Javascript能够改变页面中的HTML元素；HTML属性；CSS样式；还可以对页面的所有事件做出处理。
但处理页面前，必须要先找到当前要操作的这个元素对象。
查找HTML元素的方式：
//通过id找到HTML元素返回某一个元素对象，默认id是唯一的：
document.getElementById("...");
//通过name找到HTML元素，返回一个集合：
document.getElementsByName("...");
//通过标签名找到HTML元素，返回一个集合：
document.getElementsByTagName("...");
//通过class找到HTML元素，返回一个集合：
document.getElementsByClassName("...");
操作HTML元素：（调用方法去覆盖之前的属性、事件）
(1)改变元素中的内容
(2)改变元素的属性
(3)改变元素的css样式
(4)给元素添加事件处理
JavaScript中，可以支持处理的html中的事件有：
onblur 在对象失去输入焦点时触发
onfocus 当对象获得焦点时触发
onchange 当对象或选中区的内容改变时触发
onclick 在用户用鼠标左键单击对象时触发
ondblclick 当用户双击对象时触发
onkeydown 当用户按下键盘任何按键时触发
onkeypress 当用户按下字母数字键时触发
onkeyup 当用户按下并释放键盘按键时触发
onmousedown 当用户用任何鼠标按钮单击对象时触发
function test(event){//event.button=0 左键//event.button=1 中键//event.button=2 右键
}
<input type="button" value="点击" onmousedown="test(event)" />
onmousemove 当用户将鼠标划过对象时触发
onmouseout 当用户将鼠标指针移出对象边界时触发
onmouseover 当用户将鼠标指针移动到对象内时触发
onreset 当用户重置表单时触发
onsubmit 当表单将要被提交时触发
onload 在浏览器完成对象的装载后立即触发
onunload 在浏览器完成对象的卸载后立即触发
BOM，浏览器对象模型，Javascript可以使用window对象操作浏览器。
window.location，用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面；window.history，包含浏览器的历史。
定时调用：setInterval(function,time)，函数会返回一个定时编号，并且没间隔指定时间调用一次指定函数。clearInterval(id)，根据定时调用编号，清除掉次定时调用的任务。
延时调用：setTimeout()，函数可以延迟指定时间，用来调用一个指定函数，只能调用一次。第一个参数传入一个匿名函数，第二个参数的单位是毫秒。
html-css-js相关推荐
- 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty\j ...
- html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...
- css/js压缩工具
css/js压缩工具 http://ajaxmin.codeplex.com/
- html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
- web静态资源访问规则||webjars的访问配置——webjars是maven库里面对css js image打的一个jar包
Html css js image txt web项目中 放在 Webapp 在springboot项目中 静态资源放置的位置 Springboot默认的静态资源目录 (1)在src/main ...
- asp.net MVC发布iis无法加载css,js和图片
今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...
- 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- html css js 实战案例_使用html+css+js实现弹球游戏
php中文网最新课程 每日17点准时技术干货分享 使用html+css+js实现弹球游戏 代码如下,复制即可使用: <head> <style type="text/css ...
最新文章
- vue-解决弹出蒙层滑动穿透问题
- 分布式 RPC架构简单理解
- HDU - 4847 Wow! Such Doge!
- POJ3751 时间日期格式转换【日期计算】
- flask mysql orm,flask的orm框架(Flask-SQLAlchemy)-创建表
- go read text file into string array
- 《Python入门到精通》Python基础语法
- 分布式红锁的加锁的lua底层设计原理
- C++成员函数的重载、覆盖与隐藏
- javascript学习之闭包
- mysql的储存原理_mysql储存原理
- overleaf使用指南以及最基本LaTeX语法回顾(二)
- centos7.4源码安装nginx-1.16.1 及NGINX最全配置 缓存缩略图4层转发
- javascript案例：动态生成表格
- 如何获取网站的HTTPS证书？
- 搜狗输入法自定义短语使用小技巧
- 宽带服务器盒信号灯红色闪烁,光纤灯红色闪烁怎么解决(图文)
- 京东风控团队带你全方位解读特征工程
- Windows 批处理(bat) if条件判断语句使用教程
- 如何应对面试中的常见问题？