Welcome

A blog by moplord

欢迎来到我的博客一起分享学习

7-Minute Read

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(中文)


排版标签

h1h6为由大到小的6个字号的标题

<h1>标题</h1>

p为paragraph缩写,是段落的意思,align是对其方式,可以填写leftcenter,right

是文本级标签,只能放文字、图片、表单

<p align="center">一段话</p>

水平线,hr是horizontal的简写,属性有align对其方式,可以填写leftcenterright

size:粗细,填写数字,单位为像素

width:为线条长度,填写数字时单位为像素,也可以填写百分比

color:填写颜色

noshade:是不要阴影

<hr />
<hr size="3" width="100%" color="FF0000"> </hr>

换行标签为强制换行,是break的缩写

<br/>
我要<br/>换行

div可以把标签中的内容分割为独立区域,使用时必须单独占一行,div自动换行,属性有align对其方式,可以填写leftcenterright,是容器级标签

<div>
    <p>div使用</p>
<div class="logo"></div>
</div>

spandiv一样可以把标签中的内容分割为独立区域,使用时必须单独占一行,span不自动换行,属性有align对其方式,可以填写leftcenterright

<span>
<p>span使用</p>
<a href="">这是链接</a>
</span>

居中标签center,不建议使用,建议运用css

<center>
<p>文本1</p>
<p>文本2</p>
</center>

预定义标签pre,一般用不到,空格、换行也输出

<pre>
文本1

文本2
</pre>

转义字符

&nbsp;:空格 (non-breaking spacing,不断打空格)

&lt;:小于号(less than)

&gt;:大于号(greater than)

&amp;:符号`&``

&quot;:双引号

&apos;:单引号

A&gt;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>

属性:

typedisc(实心原点,默认),square(实心方点),circle(空心圆),常写在ul里,li里也可以写


有序列表ol

ol:ordered list的缩写

<ol >
	<li>第一行</li>
	<li>第二行</li>
	<li>第三行</li>
</ol>

type:属性值可以是:1(阿拉伯数字,默认)、aAiI,是排序符号

start:填写数字,从第几开始排序


定义列表dl

<dl>:英文单词:definition list,没有属性。dl的子元素只能是dtdd

<dt>:definition title 列表的标题,这个标签是必须的

<dd>:definition description 列表的列表项,如果不需要它,可以不加

dtdd只能在dl里面;dl里面只能有dtdd

<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:内容的横向对齐方式。属性值可以填:leftrightcenter

valign:内容的纵向对齐方式。属性值可以填:topmiddlebottom

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表示标题相对于表格的位置,可取:leftcenterrighttopbottom

thead:表格显示顺序,theadtbodaytfoot,包裹住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

scrollingtrueno,是否需要滚动条

noresize:不可以改变边框大小,边框不能拖动,不用=

bordercolorframeframeset同样可使用,用于定义边框颜色

brameborder01,显示边框

name:框架名


内嵌框架

iframe,可在body里使用

<body>
  <iframe src="内嵌界面.html"></iframe>
</body>

src: 页面路径

width,height:宽度与高度

scrolling:滚动条,notrue

name:窗口名称,可与hreftarget配合使用实现切换内容


表单标签

form,表单

nameid:表单名称

action:表单处理程序

method:提交方式,getpostget用于提交少量、不敏感、ASCII数据,post提交数据不可见,提交大量、相对安全、多样的数据。

enctype:加密方式,post下使用,取值application/x-www-form-urlencodedmultipart/form-data

input:用于接收用户输入,可取值textradio(单选)、checkbox(多选,name相同为一组)、checked(默认选中,radiocheckbox可使用)、hidden(隐藏框)、buttonsubmitresetimage(和submit一样不过可以显示图片)、file(上传文件)

value:文本框里默认内容

size:文本框最多显示字符数量

readonly:文本框只读

disabled:文本框只读

    <form>
    姓名:<input value="默认"><br>
    密码:<input type="password"><br>
    I&nbsp;D&nbsp;:&nbsp;<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>

forid相同,那么就会绑定,点击label与点击点都是选中。


多媒体标签

bgsound:背景音乐

<bgsound src="背景音乐.mp3"></bgsound>

src:音乐路径

loop:播放次数,-1为循环播放


embed:播放多媒体文件

 <body>
	<embed src="音乐.mp3"></embed>
 </body>

src:多媒体文件路径

loop:播放次数,-1代表循环播放。

autostart:打开网页时,是否自动播放,truefalse

volume:设置默认的音量大小。

width:宽度

height:高度

quality:播放质量,质量有高有低 hightlow

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="">
                    电&nbsp;&nbsp;&nbsp;话:<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,拖拽元素,truefalse

<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

https://www.runoob.com/

Recent Posts

CSS3

Categories

About

没有名字的博客