HTML5常用语法总结
基本设置:框架及头标签和body标签
<!--声明文本是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个字号的标题
<h1>标题</h1>
p
为paragraph缩写,是段落的意思,align
是对其方式,可以填写left
,cente
r,right
,
是文本级标签,只能放文字、图片、表单
<p align="center">一段话</p>
水平线,hr
是horizontal的简写,属性有align
对其方式,可以填写left
,center
,right
size
:粗细,填写数字,单位为像素
width
:为线条长度,填写数字时单位为像素,也可以填写百分比
color
:填写颜色
noshade
:是不要阴影
<hr />
<hr size="3" width="100%" color="FF0000"> </hr>
换行标签为强制换行,是break的缩写
<br/>
我要<br/>换行
div
可以把标签中的内容分割为独立区域,使用时必须单独占一行,div
自动换行,属性有align
对其方式,可以填写left
,center
,right
,是容器级标签
<div>
<p>div使用</p>
<div class="logo"></div>
</div>
span
与div
一样可以把标签中的内容分割为独立区域,使用时必须单独占一行,span
不自动换行,属性有align
对其方式,可以填写left
,center
,right
<span>
<p>span使用</p>
<a href="">这是链接</a>
</span>
居中标签center
,不建议使用,建议运用css
<center>
<p>文本1</p>
<p>文本2</p>
</center>
预定义标签pre
,一般用不到,空格、换行也输出
<pre>
文本1
文本2
</pre>
转义字符
:空格 (non-breaking spacing,不断打空格)
<
:小于号(less than)
>
:大于号(greater than)
&
:符号`&``
"
:双引号
'
:单引号
A>B
下划线、删除线、斜体
<u>下划线</u>
<s>删除线</s>
<i>斜体<i>
上标sup
、下标sub
1<sup>2</sup>
3<sub>4</sub>
链接标签
超链接
a
是anchor锚的缩写,是文本级标签,href
是hypertext reference超文本地址的缩写
<a href="下个界面.html">点击此处进入下个界面</a>
<a href="baidu.com">点击此处进入百度</a>
锚链接
转跳到特定位置
<!--定义位置-->
<a name="test1">位置1</a>
<!--回到本页面定义的位置-->
<a href="#test1">回到位置1</a>
<!--回到其他页面定义的位置-->
<a href="web1.html#test1">回到位置1</a>
邮件连接
<a href="mailto:[email protected]">点击进入我的邮箱</a>
常用超链接属性
href
目标URL
title
:悬停文本。
name
:主要用于设置一个锚点的名称。
target
:告诉浏览器用什么方式来打开目标页面。target
属性有以下几个值:
_self
:在同一个网页中显示(默认值)_blank
:在新的窗口中打开。_parent
:在父窗口中显示_top
:在顶级窗口中显示
<a href="再出个界面.html" title="悬浮名称" target="_blank">链接名称</a>
img
标签
img
代表图片,可以插入jpg(jpeg)、gif、png、bmp等,不可以插入psd、ai等,src
是source的缩写
<img src="图片的地址" />
属性:
width
:图像的宽度。
height
:图像的高度。
alt
:alternate的缩写,替代的意思,图片无法显示时显示的文字
title
:悬停提示文本
align=
:可选bottom(默认)、center、top、left、right,是周围文字与图片相对位置
三种列表标签
无序列表ul
ul
:unordered list,“无序列表”的意思,可以相互嵌套。
li
:list item,“列表项”的意思。
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
属性:
type
:disc
(实心原点,默认),square
(实心方点),circle
(空心圆),常写在ul
里,li
里也可以写
有序列表ol
ol
:ordered list的缩写
<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
。
<dl>
<dt>标题1</dt>
<dd>第一行</dd>
<dd>第二行</dd>
<dt>标题2</dt>
<dd>第一行</dd>
<dd>第二行</dd>
</dl>
表格标签
表格table
table
是由每行tr
组成,每行由单个单元格td
组成
<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
:纵向合并。填写要合并的数量,向下合并
<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
搭配使用
<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
里使用
<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
:文本框只读
<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
下拉列表
<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
:文本、区域
<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
<form>
<fieldset>
<legend>登陆</legend>
账号:<input value="account" ><br>
密码:<input type="password" value="pwd""><br>
</fieldset>
</form>
label
<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
:背景音乐
<bgsound src="背景音乐.mp3"></bgsound>
src
:音乐路径
loop
:播放次数,-1
为循环播放
embed
:播放多媒体文件
<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
:滚动字幕
<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的增加功能
增加的语义标签
<!-- 传统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识别
<!--[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
:星期
举例
<!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
<input type="text" list="myData">
<datalist id="myData">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</datalist>
keygen
生成密钥,验证用户可靠性
<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()
:验证不通过时触发。比如,如果验证不通过时,想弹出一段提示文字,就可以用到它。
<!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
:音频
<audio src="音乐1.mp3" autoplay controls> </audio>
autoplay
:自动播放。写成autoplay
。
controls
:控制条。
loop
:循环播放。
preload
:预加载 同时设置 autoplay 时,此属性将失效。
兼容性处理
<!--推荐的兼容写法:-->
<audio controls loop>
<source src="音乐1.mp3"/>
<source src="音乐1.ogg"/>
<source src="音乐1.wav"/>
抱歉,你的浏览器暂不支持此音频格式
</audio>
视频
videos
,视频
<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-
开头。
<!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
<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
:当鼠标离开目标元素时调用
<!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
对象可以调整位置信息数据收集方式
<!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
:用户网络断开,布尔
window.addEventListener('online', function () {
alert('网络连接建立!');
});
缓存清单
.appcache
为后缀名
写法:
CACHE MANIFEST
#要缓存的文件
CACHE:
images/img1.jpg
images/img2.jpg
#指定必须联网才能访问的文件
NETWORK:
images/img3.jpg
images/img4.jpg
#当前页面无法访问是回退的页面
FALLBACK:
404.html
用法:
<!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
等