基本设置：框架及头标签和body标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!--声明文本是HTML-->
<!DOCTYPE html>
<!--声明语言是英语，zh-CN为中文-->
<html lang="en">
<head>
<!--meta用来提供页面基本信息-->
<meta charset="UTF-8">
<!--声明视口宽度为屏幕宽度-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--声明字符集-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--声明作者-->
<meta name="Author" content="">
<!--声明关键词，用于提高搜索引擎命中率-->
<meta name="Keywords" content="厉害很厉害" />
<!--页面描述，搜索引擎中对整篇文章概述-->
<meta name="Description" content="本网站是XXXX" />
<!--网站标题-->
<title>网站标题</title>
<!--自动转跳-->
<meta http-equiv="refresh" content="3;http://www.baidu.com">
<!--指定基础路径，本网页连接都是由此处为基准开始-->
<base href="/">
</head>
<!--body里面的含义为没点链接时为红色，点时为蓝色，点完为绿色-->
<!--里面还可以添加-->
<!--bgcolor背景颜色，background背景图片，text文本颜色-->
<!--leftmargin、topmargin、rightmargin、bottommargin分别为左上右下边距-->
<body link='red' alink='blue' vlink='green'>
</body>
</html>
|
常用编码有UTF-8，Unicode编码(统一编码，浪费空间)，GBK（GB2132拓展），GB2312（中文）
排版标签
h1到h6为由大到小的6个字号的标题
p为paragraph缩写，是段落的意思，align是对其方式，可以填写left，center，right，
是文本级标签，只能放文字、图片、表单
1
|
<p align="center">一段话</p>
|
水平线，hr是horizontal的简写，属性有align对其方式，可以填写left，center，right
size：粗细,填写数字，单位为像素
width：为线条长度，填写数字时单位为像素，也可以填写百分比
color：填写颜色
noshade：是不要阴影
1
2
|
<hr />
<hr size="3" width="100%" color="FF0000"> </hr>
|
换行标签为强制换行，是break的缩写
div可以把标签中的内容分割为独立区域，使用时必须单独占一行，div自动换行，属性有align对其方式，可以填写left，center，right，是容器级标签
1
2
3
4
|
<div>
<p>div使用</p>
<div class="logo"></div>
</div>
|
span与div一样可以把标签中的内容分割为独立区域，使用时必须单独占一行，span不自动换行，属性有align对其方式，可以填写left，center，right
1
2
3
4
|
<span>
<p>span使用</p>
<a href="">这是链接</a>
</span>
|
居中标签center，不建议使用，建议运用css
1
2
3
4
|
<center>
<p>文本1</p>
<p>文本2</p>
</center>
|
预定义标签pre，一般用不到，空格、换行也输出
1
2
3
4
5
|
<pre>
文本1
文本2
</pre>
|
转义字符
：空格 （non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号`&``
"：双引号
'：单引号
下划线、删除线、斜体
1
2
3
|
<u>下划线</u>
<s>删除线</s>
<i>斜体<i>
|
上标sup、下标sub
1
2
|
1<sup>2</sup>
3<sub>4</sub>
|
链接标签
超链接
a是anchor锚的缩写，是文本级标签，href是hypertext reference超文本地址的缩写
1
2
|
<a href="下个界面.html">点击此处进入下个界面</a>
<a href="baidu.com">点击此处进入百度</a>
|
锚链接
转跳到特定位置
1
2
3
4
5
6
|
<!--定义位置-->
<a name="test1">位置1</a>
<!--回到本页面定义的位置-->
<a href="#test1">回到位置1</a>
<!--回到其他页面定义的位置-->
<a href="web1.html#test1">回到位置1</a>
|
邮件连接
1
|
<a href="mailto:gmoplord@gmail.com">点击进入我的邮箱</a>
|
常用超链接属性
href目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
_self：在同一个网页中显示（默认值）_blank：在新的窗口中打开。_parent：在父窗口中显示_top：在顶级窗口中显示
1
|
<a href="再出个界面.html" title="悬浮名称" target="_blank">链接名称</a>
|
img标签
img代表图片，可以插入jpg(jpeg)、gif、png、bmp等，不可以插入psd、ai等，src是source的缩写
属性：
width：图像的宽度。
height：图像的高度。
alt：alternate的缩写，替代的意思，图片无法显示时显示的文字
title：悬停提示文本
align=：可选bottom（默认）、center、top、left、right，是周围文字与图片相对位置
三种列表标签
无序列表ul
ul：unordered list，“无序列表”的意思，可以相互嵌套。
li：list item，“列表项”的意思。
1
2
3
4
5
|
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
|
属性：
type：disc(实心原点，默认)，square(实心方点)，circle(空心圆)，常写在ul里，li里也可以写
有序列表ol
ol：ordered list的缩写
1
2
3
4
5
|
<ol >
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
|
type：属性值可以是：1(阿拉伯数字，默认)、a、A、i、I，是排序符号
start：填写数字，从第几开始排序
定义列表dl
<dl>：英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
<dt>：definition title 列表的标题，这个标签是必须的
<dd>：definition description 列表的列表项，如果不需要它，可以不加
dt、dd只能在dl里面；dl里面只能有dt、dd。
1
2
3
4
5
6
7
8
9
10
|
<dl>
<dt>标题1</dt>
<dd>第一行</dd>
<dd>第二行</dd>
<dt>标题2</dt>
<dd>第一行</dd>
<dd>第二行</dd>
</dl>
|
表格标签
表格table
table是由每行tr组成，每行由单个单元格td组成
1
2
3
4
5
6
7
8
9
10
11
12
|
<table>
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table>
|
table属性：
border：边框。单位为像素。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left，right，center。
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background="路径"：背景图片。（背景图片的优先级大于背景颜色。）
bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色
（这两个属性的目的是为了设置3D的效果。）
dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
tr属性：
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认）与rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
height：一行的高度
align：一行的内容水平居中显示，取值：left、center、right
valign：一行的内容垂直居中，取值：top、middle、bottom
td属性
align：内容的横向对齐方式。属性值可以填：left，right，center
valign：内容的纵向对齐方式。属性值可以填：top，middle，bottom
width：单元格宽度
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。
colspan：横向合并，填写要合并的数量，向左合并
rowspan：纵向合并。填写要合并的数量，向下合并
1
2
3
4
5
6
7
8
9
|
<table border="1">
<tr>
<td>1行1列</td>
<td rowspan="2">纵向合并</td>
</tr>
<tr>
<td>2行1列</td>
</tr>
</table>
|
<th>：加粗的单元格。相当于<td> + <b>
<caption>：表格的标题。使用时和tr标签并列
caption属性有，align表示标题相对于表格的位置，可取：left、center、right、top、bottom
thead：表格显示顺序，thead、tboday、tfoot，包裹住tr
框架标签
frameset
rows：水平分割，可以像素或百分比，*表示剩余部分
cols：垂直分割
与frame搭配使用
1
2
3
4
5
6
7
8
9
10
11
12
|
<frameset rows="20%,*">
<frame src="上.html"></frame>
<frameset cols="40%,*">
<frame src="左下.html"></frame>
<frame src="右下.html" name="右下界面变更"></frame>
</frameset>
</frameset>
<!--上.html-->
<body>
<a herf="新界面.html" target="右下界面变更">上页面</a>
</body>
|
frame
scrolling：true或no，是否需要滚动条
noresize：不可以改变边框大小，边框不能拖动，不用=
bordercolor：frame与frameset同样可使用，用于定义边框颜色
brameborder：0或1，显示边框
name：框架名
内嵌框架
iframe，可在body里使用
1
2
3
|
<body>
<iframe src="内嵌界面.html"></iframe>
</body>
|
src： 页面路径
width，height：宽度与高度
scrolling：滚动条，no与true
name：窗口名称，可与href的target配合使用实现切换内容
表单标签
form，表单
name与id：表单名称
action：表单处理程序
method：提交方式，get和post，get用于提交少量、不敏感、ASCII数据，post提交数据不可见，提交大量、相对安全、多样的数据。
enctype：加密方式，post下使用，取值application/x-www-form-urlencoded、multipart/form-data
input：用于接收用户输入，可取值text、radio（单选）、checkbox（多选，name相同为一组）、checked（默认选中，radio与checkbox可使用）、hidden（隐藏框）、button、submit、reset、image（和submit一样不过可以显示图片）、file（上传文件）
value：文本框里默认内容
size：文本框最多显示字符数量
readonly：文本框只读
disabled：文本框只读
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<form>
姓名：<input value="默认"><br>
密码：<input type="password"><br>
I D ： <input value="123" readonly><br>
种族：<input value="人类" disabled><br>
性别：<input type="radio" name="gender" id="select1" value="male">男
<input type="radio" name="gender" id="select2" value="female">女<br>
特长：<input type="checkbox" name="hobby" id="select1" value="sleep">睡觉
<input type="checkbox" name="hobby" id="select2" value="eat">吃饭
<input type="checkbox" name="hobby" id="select3" value="water">滑水
</form>
<form>
<input type="button" value="按钮"><br>
<input type="submit" value="提交"><br>
<input type="reset" value="重置"><br>
<input type="image" value="图片按钮1"><br>
<input type="image" src="图片.jpg" width="800" value="图片按钮2"><br>
<input type="file" value="文件选择框">
</form>
|
select下拉列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<form>
<select>
<option>选项1</option>
<option>选项2</option>
<option selected="">选项3</option>
</select>
<br><br><br><br>
<select size="2">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<br><br><br><br>
<select multiple="">
<option>选项1</option>
<option>选项2</option>
<option selected="">选项3</option>
<option selected="">选项4</option>
</select>
</form>
|
selected：默认选项
size：下拉栏大小
多行文本输入框
textarea：文本、区域
1
2
3
4
5
6
7
|
<form>
<textarea name="txt1" rows="5" cols="15">内容1234567890</textarea>
<textarea name="txt2" rows="5" cols="15">
内容1234567890</textarea>
<textarea name="txt3" rows="5" cols="15" readonly>内容1234567890</textarea>
</form>
|
rows：行数
cols：列数
readonly：只读
空格、回车可以显示
fieldset
1
2
3
4
5
6
7
8
9
|
<form>
<fieldset>
<legend>登陆</legend>
账号：<input value="account" ><br>
密码：<input type="password" value="pwd""><br>
</fieldset>
</form>
|
label
1
2
|
<input type="radio" name="sex" id="male" /> <label for="male">男</label>
<input type="radio" name="sex" id="female" /> <label for="female">女</label>
|
for与id相同，那么就会绑定，点击label与点击点都是选中。
多媒体标签
bgsound：背景音乐
1
|
<bgsound src="背景音乐.mp3"></bgsound>
|
src：音乐路径
loop：播放次数，-1为循环播放
embed：播放多媒体文件
1
2
3
|
<body>
<embed src="音乐.mp3"></embed>
</body>
|
src：多媒体文件路径
loop：播放次数，-1代表循环播放。
autostart：打开网页时，是否自动播放，true、false。
volume：设置默认的音量大小。
width：宽度
height：高度
quality：播放质量，质量有高有低 hight、low
pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
type：指定的文件格式类型
wmode：指背景是否可以透明，取值：transparent是透明的
object：播放多媒体文件
主要用于IE，为了兼容性，将object中嵌套embed
classid：指定Flash插件的ID号，一般存在于注册表中。
codebase：如果Flash插件不存在，则从codebase指定的地址下载。
<param>标签的主要作用：设置具体的详细参数。
marquee：滚动字幕
1
|
<marquee behavior="alternate" direction="left" width="500" height="500" bgcolor="#FFFF" scrollamount="50">移动文字</marquee>
|
direction：移动的目标方向。属性值可以是：left（从右向左移动，默认值）、right（从左向右移动）、up（从下向上移动）、down（从上向下移动）。
behavior：行为方式。属性值可以是：slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动）、。
alternate和scroll属性值都是循环移动，区别在于：假设在direction=“right"的情况下，behavior=“scroll"表示从左到右、从左到右、从左到右···behavior=“alternate"表示从左到右、从右到左、从左到右···
scrollamount：移动的速度，数值
loop=: 循环次数。负值表示无限循环
scrolldelay：下次移动间隔，毫秒。
HTML5的增加功能
增加的语义标签
1
2
3
4
5
6
7
8
9
10
11
|
<!-- 传统html -->
<div class="header"></div>
<div class="main">
<div class="artical"></div>
</div>
<!-- html5 -->
<header></header>
<div class="main">
<arical></arical>
</div>
|
<section>： 表示区块
<article> ：表示文章。如文章、评论、帖子、博客
<header> ：表示页眉
<footer> ：表示页脚
<nav> ：表示导航
<aside> ：表示侧边栏。如文章的侧栏
<figure> ：表示媒介内容分组。
<mark> ：表示标记
<progress> ：表示进度
<time> ：表示日期
兼容性解决方案：IE8及以下
运用条件注释，只可以被IE识别
1
2
3
|
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
|
l：less 更小
t：than 比
e：equal等于
g：great 更大
增加的表单
email ：只能输入email格式。自动带有验证功能。
tel ：手机号码。
url ：只能输入url格式。
number ：只能输入数字。
search ：搜索框
range ：滑动条
color ：拾色器
time：时间
date ：日期
datetime ：时间日期
month ：月份
week ：星期
举例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>表单类型</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
form {
max-width: 500px;
width: 100%;
margin: 32px auto 0;
font-size: 16px;
}
label {
display: block;
margin: 10px 0;
}
input {
width: 100%;
height: 25px;
margin-top: 2px;
display: block;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单类型</legend>
<label for="">
email: <input type="email" name="email" required>
</label>
<label for="">
color: <input type="color" name="color">
</label>
<label for="">
url: <input type="url" name='url'>
</label>
<label for="">
number: <input type="number" step="3" name="number">
</label>
<label for="">
range: <input type="range" name="range" value="100">
</label>
<label for="">
search: <input type="search" name="search">
</label>
<label for="">
tel: <input type="tel" name="tel">
</label>
<label for="">
time: <input type="time" name="time">
</label>
<label for="">
date: <input type="date" name="date">
</label>
<label for="">
datetime: <input type="datetime">
</label>
<label for="">
week: <input type="week" name="week">
</label>
<label for="">
month: <input type="month" name="month">
</label>
<label for="">
datetime-local: <input type="datetime-local" name="datetime-local">
</label>
<input type="submit">
</fieldset>
</form>
</body>
</html>
|
datalist
1
2
3
4
5
6
|
<input type="text" list="myData">
<datalist id="myData">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</datalist>
|
keygen
生成密钥，验证用户可靠性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<form action="">
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名：<input type="text" placeholder="例如：xxx" autofocus name="userName" autocomplete="on" required/>
</label>
<br>
<label for="">
电 话：<input type="tel" pattern="1\d{10}"/>
</label>
<br>
<label for="">
multiple的表单: <input type="file" multiple>
</label>
<br>
<!-- 上传文件-->
<input type="file" name="file" multiple/>
<br>
<input type="submit"/>
</fieldset>
</form>
|
placeholder ：占位符（提示文字）
autofocus ：自动获取焦点
multiple ：文件上传多选或多个邮箱地址
autocomplete ：自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
form： 指定表单项属于哪个form，处理复杂表单时会需要
novalidate ：关闭默认的验证功能（只能加给form）
required ：表示必填项
pattern ：自定义正则，验证表单。
表单事件
oninput()：用户输入内容时触发
oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form {
width: 100%;
/* 最大宽度*/
max-width: 400px;
/* 最小宽度*/
min-width: 200px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单事件</legend>
<label for="">
邮箱：<input type="email" name="" id="txt1"/>
</label>
<label for="">
输入的次数统计：<input type="text" name="" id="txt2"/>
</label>
<input type="submit"/>
</fieldset>
</form>
<script>
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2');
var num = 0;
txt1.oninput = function () { //用户输入时触发
num++; //用户每输入一次，num自动加 1
//将统计数显示在txt2中
txt2.value = num;
}
txt1.oninvalid = function () { //验证不通过时触发
this.setCustomValidity('亲，请输入正确哦'); //设置验证不通过时的提示文字
}
</script>
</body>
</html>
|
音频
audio：音频
1
|
<audio src="音乐1.mp3" autoplay controls> </audio>
|
autoplay ：自动播放。写成autoplay 。
controls ：控制条。
loop ：循环播放。
preload ：预加载 同时设置 autoplay 时，此属性将失效。
兼容性处理
1
2
3
4
5
6
7
|
<!--推荐的兼容写法：-->
<audio controls loop>
<source src="音乐1.mp3"/>
<source src="音乐1.ogg"/>
<source src="音乐1.wav"/>
抱歉，你的浏览器暂不支持此音频格式
</audio>
|
视频
videos，视频
1
|
<video src="video2.mp4" controls autoplay></video>
|
autoplay： 自动播放。写成autoplay 或者 autoplay = ""，都可以。
controls ：控制条。（建议把这个选项写上，不然都看不到控件在哪里）
loop ：循环播放。
preload ：预加载 同时设置 autoplay 时，此属性将失效。
width：设置播放窗口宽度。
height：设置播放窗口的高度。
兼容写法类似音频
DOOM操作
获取元素
document.querySelector("selector") ：通过CSS选择器获取符合条件的第一个元素。
document.querySelectorAll("selector") ：通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
类名操作
Node.classList.add("class") ：添加class
Node.classList.remove("class") ：移除class
Node.classList.toggle("class") ：切换class，有则移除，无则添加
Node.classList.contains("class") ：检测是否存在class
自定义属性
js 里可以通过 box1.index=100; box1.title 来自定义属性和获取属性。
H5可以直接在标签里添加自定义属性，但必须以 data- 开头。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
<script>
var box = document.querySelector('.box');
//自定义的属性 需要通过 dateset[]方式来获取
console.log(box.dataset["content"]); //打印结果：我是一个div
console.log(box.dataset["myName"]); //打印结果：smyhvae
//设置自定义属性的值
var num = 100;
num.index = 10;
box.index = 100;
box.dataset["content"] = "aaaa";
</script>
</body>
</html>
|
拖拽
draggable，拖拽元素，true或false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<head>
<style>
.test1{
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="test1" draggable="true"></div>
<script>
var test1 = document.qurySelector('.test1')
test1.ondragleve = function(){
console.log('离开');
}
</script>
</body>
|
当前元素：
ondragstart：当拖拽开始时调用
ondragleave：当鼠标离开拖拽元素时调用
ondragend：当拖拽结束时调用
ondrag ：整个拖拽过程都会调用
目标元素：
ondragenter：当拖拽元素进入时调用
ondragover：当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
ondrop：当在目标元素上松开鼠标时调用
ondragleave：当鼠标离开目标元素时调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: green;
}
.two {
position: relative;
width: 200px;
height: 200px;
left: 300px;
top: 100px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div class="one" draggable="true"></div>
<div class="two"></div>
<script>
var two = document.querySelector('.two');
//目标元素的拖拽事件
// 当被拖拽元素进入时触发
two.ondragenter = function () {
console.log("来了.");
}
// 当被拖拽元素离开时触发
two.ondragleave = function () {
console.log("走了..");
}
// 当拖拽元素在 目标元素上时，连续触发
two.ondragover = function (e) {
//阻止拖拽事件的默认行为
e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
console.log("over...");
}
// 当在目标元素上松开鼠标是触发
two.ondrop = function () {
console.log("松开鼠标了....");
}
</script>
</body>
</html>
|
历史
window.history
window.history.forward(); ： 前进
window.history.back(); ：后退
window.history.go(); ： 刷新
window.history.go(n); ：n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。
通过JS可以加入一个访问状态
history.pushState; ：放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)
定位
navigator.getCurrentPosition(successCallback, errorCallback, options)：获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options)： 重复获取当前地理信息
当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）position.coords.latitude纬度、position.coords.longitude经度，当获取地理信息失败后，会调用errorCallback，并返回错误信息error。可选参数 options 对象可以调整位置信息数据收集方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 兼容处理
if(navigator.geolocation){
// 如果支持，获取用户地理信息
navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
}else{
console.log('sorry,你的浏览器不支持地理定位');
}
// 获取地理位置成功的回调函数
function successCallback(position){
// 纬度latitude
var wd=position.coords.latitude;
// 经度longitude
var jd=position.coords.longitude;
console.log("获取用户位置成功！");
console.log(wd+','+jd);
}
// 获取地理位置失败的回调函数
function errorCallback(error){
console.log(error);
console.log('获取用户位置失败！')
}
</script>
</body>
</html>
|
百度地图API：https://lbsyun.baidu.com/index.php?title=jspopularGL
全屏
document.fullScreen，同时不同浏览器可能有不同写法
伪类，写在CSS里，full-screen .box {}、webkit-full-screen {}、moz-full-screen {}
存储
window.sessionStorage ：会话存储，存在内存里，管理浏览器窗口销毁，同一窗口共享数据
window.localStorage ：本地存储：永久有效，多窗口共享
setItem(key, value);：设置存储
getItem(key);：读取内容
removeItem(key);：删除键与内容
clear();：清空所有存储
key(n);：根据索引获取内容
网络状态
window.online：用户网络连接，布尔
window.offline：用户网络断开，布尔
1
2
3
|
window.addEventListener('online', function () {
alert('网络连接建立！');
});
|
缓存清单
.appcache为后缀名
写法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
CACHE MANIFEST
#要缓存的文件
CACHE:
images/img1.jpg
images/img2.jpg
#指定必须联网才能访问的文件
NETWORK:
images/img3.jpg
images/img4.jpg
#当前页面无法访问是回退的页面
FALLBACK:
404.html
|
用法：
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html manifest="缓存文件.appcache">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="images/缓存的照片1.jpg" alt=""/>
</body>
</html>
|
文章参考：
https://github.com/qianguyihao/Web
https://www.runoob.com/
等