H5API

最新推荐文章于 2024-07-20 23:54:17 发布

今天晚上一定要早睡

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量157

点赞数

分类专栏： HTML es5 文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_48192192/article/details/120360716

版权

es5 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

1.语义标签

有语义的div标签

< nav > 导航栏
< section > 内容块
< article > 与上下文不相关的内容块
< aside > 附属信息部分
< header > 标题区域
< footer > 底部标签
< hgroup > 用于对网页或区段（section）的标题进行组合
< figure > 独立的流内容
< address > 联系方式

2.新添元素

< figure > < figcaption > 带标题的组合标签.
figcaption标签定义 figure 元素的标题 , 应该被置于figure元素的第一个或最后一个子元素的位置.
```
 < figure >
 内容
 < figcaption > 标题 < /figcaption >
 </ figure >
```
< mark > 强调标签,带有记号的文本（使文字带有黄色背景）
< wbr > 软换行对中文没有效果，对英文有效（一个单词不能在同一行显示可以强制换行）仅当浏览器不够显示内容时生效
< progress min=’ 0’ max=’ 100’ value=’ ’ > 进度条
```
 < progress min="0" max="100" value="70" >
```
< meter min=‘0’ max=‘100 ’ value=’ ’ low=‘20’ high=‘60’ optimun=’ ’ >
进度条度量:low最低 high最高 optimun 最优（value<low为红色，low<=value<high为黄色，value>=high为绿色）
```
  < meter value='0.1' max='1' optimum='0.9' high='0.7' low='0.3'></ meter >
  < meter min="0" max="100" value="60" low="20" high="60" optimum="90"></ meter>
```

< details > 细节信息配合 < summary >标题标签

 < details>
 < summary> 这里是标题</ summary>  //点击收起内容，在点击展开内容
 这里是内容
 </ details>

< ruby> 注音注释（将拼音显示在文字上方）配合 < rt >使用

3.删除的标签

< font> < center> < basefont> < big>
< s> < strike> < tt> < u>
< bgsound> < marquee> < applet> < rb>
< acronym> < dir> < isiindex> < xmp>
< nextid> < plaintext>

HTML5以后也不再支持框架了

4.添加的属性

< ol >新增 reversed属性：指定列表倒序显示

  <ol reversed>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
 </ol>

< style >新增 scoped属性：使style局部有效（样式只能被当前块使用，不能被其他元素继承）（火狐）
< script>新增 async属性：使js代码异步传输（只有在使用src引入js文件时有效）
-async（先执行先回来的），defer（按引入的顺序执行）
全局属性（所有标签都可以使用）：contentEditable 是否可以编辑；hidden 隐藏元素；spellcheck 拼写检查（false/true）

5.自定义属性

在HTML中，允许为HTML元素自定义属性：data-，可以通过JS进行获取或者操作
可以用于携带数据

<div data-id="1" data-username="xiaoming" id="a1"></div>  
<script>
    var a1=document.getElementById('a1');
    console.log(a1.getAttribute('data-id'));
</script>

6.多媒体播放

需要使用流媒体文件格式才能进行多媒体播放：mp4, webm, ogg 等。

新增两个H5多媒体标签**< audio> < video>**：使开发人员不必依赖任何插件（flash）就能在网页中嵌入跨浏览器的音频和视频内容。

6.1嵌入音频

<audio src="1.mp3" controls>您的浏览器不支持该播放器！（不能播放时显示）</audio>
<video src="" id="" width="640" height="360">视频播放器无法使用</video>

标签之间的元素表示后备内容，在浏览器不支持这两个媒体元素的情况下显示。

6.2属性

src 指播放媒体的URL地址
type 媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式。
width,height:播放控件的宽度和高度
controls:默认播放控制条是否显示
autoplay:自动播放
preload:预加载（缓冲）
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
poster:视频预览图（视频不用或者不可用时）
loop:循环播放
currentTime:当前播放时间 00:00/30:00
duration:文件总的播放时间
palyed:是否播放中
paused:是否暂停
ended:是否播放完毕
defaultPlaybackRate:设置视频的默认播放速度 1
playbackRate:设置视频的播放速度 1
volume:音量 0-1
muted:静音 ture/false
object-fit: 指定元素的内容应该如何去适应指定容器的高度与宽度
属性值:
fill（默认值）不保证原有比例，完全铺满整个容器
contain保持原有尺寸比例，使图片的宽度完整的显示，高度自动缩放
cover保持原有尺寸比例。高度铺满容器，宽度等比缩放，超出部分被剪掉
none图片原有宽高不变，超出部分被剪掉，保留下来的内容使图片的正中央

<body>
    <audio src="1.mp3" controls id="myaudio">您的浏览器不支持该播放器！</audio>
    <button onclick='next()'>下一曲</button>
    <script>
        var ma=document.getElementById('myaudio');
        var mvs=['1.mp3','2.mp3']; //歌曲库
        var mvsl=mvs.length;  //歌曲数量
        var i=0; //当前索引
        function next(){
            i++; 
            if(i>=mvsl)
            i=0;
            ma.src=mvs[i];//播放下一首
        }
    </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #mv_con{
            width: 800px;
            height: 500px;
            background-color: pink;
        }
        #mv{
            width: 100%;
            height: 100%;
            object-fit: fill; /*媒体样式 fill 拉伸*/
        }
    </style>
</head>
<body>
    <div id="mv_con">
        <video src="a1.mp4" id="mv" controls autoplay>你的浏览器不支持该播放器</video>
    </div>
    <script>
        window.onload=function(){
            var mv=document.getElementById('mv');
            console.log(mv.duration); //视频总播放时长
            mv.playbackRate=4; //四倍速
        }
    </script>
</body>
</html>

6.3方法

play();播放
pause();暂停

7.canvas 元素

用于绘制图形或者制作动画游戏

7.1属性

width，heigth,background (canvas元素内设置的背景样式可以显示，下载没有效果)

7.2canvas配套API

var Mycanvas = document.getElementById('Mycanvas'); // 获取canvas元素
var c = Mycanvas.getContext("2d"); // 获取canvas元素操作上下文getContext对象

7.3canvas的基本使用

开始绘制：beginPath();
结束绘制：closePath();//闭合路径
清除画布：clearRect(x,y,width,height);

7.3.1绘制线段

属性
strokeStyle 线条颜色
lineWidth 线条粗细
方法
moveTo(x,y) 起始点
lineTo(x,y) 经过点
stroke() 绘制动作

<div id="mc_con">
        <canvas id="myCanvas" width="500px" height="500px" style="background-color: aquamarine;"></canvas>
        <!-- 背景样式可以显示，下载没有效果 -->
    </div>
    <button onclick="save()">下载</button>
    <script>
        // 开启vscode对canvas代码的提示
        /** @type {HTMLCanvasElement}*/
        // 获取canvas元素
        var myCanvas=document.getElementById('myCanvas');
        // 获取上下文对象
        var mc=myCanvas.getContext('2d');

        // 设置样式
         mc.strokeStyle='red';  //设置线条颜色
         mc.lineWidth=3; //设置线条粗细
         // 绘制过程
         // 开始绘制
         mc.beginPath();
         mc.moveTo(50,50); //起始点
         mc.lineTo(150,50); //经过点
         mc.lineTo(100,100);
         // mc.lineTo(50,50);
         // 结束绘制
         mc.closePath(); //(自动闭合路径)
         mc.stroke(); //绘制
    </script>

7.3.2绘制矩形

属性

fillStyle （实心矩形属性）

方法：

strokeRect(x,y,width,heigth) 空心矩形
fillRect(x,y,width,heigth) 实心矩形
fill() 实心矩形使用

<div id="mc_con">
        <canvas id="myCanvas" width="500px" height="500px" style="background-color: aquamarine;"></canvas>
        <!-- 背景样式可以显示，下载没有效果 -->
    </div>
    <button onclick="save()">下载</button>
    <script>
        // 开启vscode对canvas代码的提示
        /** @type {HTMLCanvasElement}*/
        // 获取canvas元素
        var myCanvas=document.getElementById('myCanvas');
        // 获取上下文对象
        var mc=myCanvas.getContext('2d');

        //绘制矩形(不需要结束绘制)
        //空心矩形
        mc.beginPath(); //开始绘制
        mc.strokeRect(200,50,50,50); //空心矩形
        mc.closePath();//结束绘制（矩形绘制可以不加）

        //实心矩形
        mc.fillStyle='pink'; //矩形实心颜色
        mc.beginPath();
        mc.fillRect(200,150,50,50); //实心矩形
        mc.fill();
        mc.closePath();//结束绘制（矩形绘制可以不加）
    </script>

7.3.3绘制圆弧

方法

arc(x,y,r,beginAngle,endAngle,anticlockwise) 圆心 ,半径，弧度，顺时针/逆时针
弧度：0度： 0Math.PI/180 ; 180度： 180Math.PI/180
stroke() 空心圆
fill() 实心圆

<div id="mc_con">
        <canvas id="myCanvas" width="500px" height="500px" style="background-color: aquamarine;"></canvas>
        <!-- 背景样式可以显示，下载没有效果 -->
    </div>
    <button onclick="save()">下载</button>
    <script>
        // 开启vscode对canvas代码的提示
        /** @type {HTMLCanvasElement}*/
        // 获取canvas元素
        var myCanvas=document.getElementById('myCanvas');
        // 获取上下文对象
        var mc=myCanvas.getContext('2d');

        mc.fillStyle='skyblue'; //实心圆颜色
        mc.arc(400,100,80,0*Math.PI/180,360*Math.PI/180,true); //画整圆不用区分顺时针逆时针
        // mc.stroke(); //空心圆
        mc.fill(); //实心圆
        mc.closePath();

        mc.beginPath();
        mc.arc(400,300,80,0*Math.PI/180,90*Math.PI/180,false); //圆弧 false顺时针
        mc.stroke();
        mc.closePath();
        
        mc.strokeStyle='red'; 
        mc.beginPath();
        mc.arc(400,300,80,0*Math.PI/180,90*Math.PI/180,true)//true逆时针
        mc.stroke(); //空心
        mc.closePath();
    </script>

在这里插入图片描述

7.3.4绘制文字

属性：

font : " 50px 微软雅黑 "

方法：

strokeText(str,x,y); 空心字
fillText(str,x,y); 实心字

<div id="mc_con">
        <canvas id="myCanvas" width="500px" height="500px" style="background-color: aquamarine;"></canvas>
        <!-- 背景样式可以显示，下载没有效果 -->
    </div>
    <button onclick="save()">下载</button>
    <script>
        // 开启vscode对canvas代码的提示
        /** @type {HTMLCanvasElement}*/
        // 获取canvas元素
        var myCanvas=document.getElementById('myCanvas');
        // 获取上下文对象
        var mc=myCanvas.getContext('2d');
        
        //绘制文字
        mc.font='32px 微软雅黑'; //设置字体属性
        mc.fillStyle='green';
        var x=0;
        setInterval(function(){
            x++;
            mc.clearRect(0,200,500,150); //清除原来绘制的文字
            mc.fillText('今天天气很好',x,230); //实心字
        },100)
    </script>

7.3.5图像翻转

方法：

save(); 产生一个与原图相同的异次空间
translate(x,y); 设置旋转点
rotate(angle); 设置弧度
restore(); 把旋转后的异次元空间映入原图

<div id="mc_con">
        <canvas id="myCanvas" width="500px" height="500px" style="background-color: aquamarine;"></canvas>
        <!-- 背景样式可以显示，下载没有效果 -->
    </div>
    <button onclick="save()">下载</button>
    <script>
        // 开启vscode对canvas代码的提示
        /** @type {HTMLCanvasElement}*/
        // 获取canvas元素
        var myCanvas=document.getElementById('myCanvas');
        // 获取上下文对象
        var mc=myCanvas.getContext('2d');
        
        // 设置样式
        mc.strokeStyle='red';  //设置线条颜色
        mc.lineWidth=3; //设置线条粗细
        // 绘制过程
        // 开始绘制
        mc.beginPath();
        mc.moveTo(50,50); //起始点
        mc.lineTo(150,50); //经过点
        mc.lineTo(100,100);
        // mc.lineTo(50,50);
        // 结束绘制(自动闭合路径)
        mc.closePath();
        mc.stroke(); //绘制

        //实心矩形
        mc.fillStyle='pink'; //矩形实心颜色
        mc.beginPath();
        mc.fillRect(200,150,50,50); //实心矩形
        mc.fill();
        mc.closePath();

        //图像翻转
        //旋转预设
        mc.save(); //产生一个相同的副本，升起来
        mc.translate(100,100); //旋转点
        mc.rotate(180*Math.PI/180); //旋转弧度

        mc.beginPath();
        mc.moveTo(-50,-50); //起始点
        mc.lineTo(50,-50); //经过点
        mc.lineTo(0,0);
        mc.closePath();
        mc.stroke(); //绘制

        mc.restore(); //映入原图

        mc.save();
        mc.translate(200,200);
        mc.rotate(180*Math.PI/180);

        mc.fillStyle='pink'; //矩形实心颜色
        mc.beginPath();
        mc.fillRect(0,-50,50,50); //实心矩形
        mc.fill();
        mc.closePath();

        mc.restore(); //映入原图
    </script>

在这里插入图片描述

7.3.6绘制渐变图像

方法：

var color=c.createLinearGradient(0,0,0,500); 创建渐变色
color.addColorStop(0,“yellow”);
color.addColorStop(1,“red”);
c.fillStyle=color;
c.fillRect(0,0,500,500);

<div id="mc_con">
        <canvas id="myCanvas" width="500px" height="500px" style="background-color: aquamarine;"></canvas>
        <!-- 背景样式可以显示，下载没有效果 -->
    </div>
    <button onclick="save()">下载</button>
    <script>
        // 开启vscode对canvas代码的提示
        /** @type {HTMLCanvasElement}*/
        // 获取canvas元素
        var myCanvas=document.getElementById('myCanvas');
        // 获取上下文对象
        var mc=myCanvas.getContext('2d');
        
        var color=mc.createLinearGradient(0,0,0,500); //创建渐变（方向）
        color.addColorStop(0,'#fff'); //0 渐变开始的颜色
        color.addColorStop(0.3,'yellow');
        color.addColorStop(0.6,'orange');
        color.addColorStop(1,'red'); //1 渐变结束的颜色

				mc.fillStyle=color; //设置矩形颜色为渐变
         mc.fillRect(0,0,500,500); //绘制矩形
    </script>

7.4 canvas存储

function down(){
//流的方式（不能指定文件名）
//window.location=mymc.toDataURL("image/png").replace("image/png","image/octet-stream");
//A标签模拟的方式(可以指定文件名)
var data = mymc.toDataURL("image/png")
var link = document.createElement('a');
link.href = data;
link.download = '1.png';
link.click();
}

8.js-cookie(本地不支持)

//创建简单的cookie
Cookies.set(‘name’, ‘value’);
//创建有效期为7天的cookie
Cookies.set(‘name’, ‘value’, { expires: 7 });
//为当前页创建有效期7天的cookie
Cookies.set(‘name’, ‘value’, { expires: 7, path: ‘’ });
//准确时间
var date = new Date(new Date().getTime()+10000);
//取值
Cookies.get(‘name’); // => ‘value’
//获取所有cookie Cookies.get(); // => { name: ‘value’ }
//删除
Cookies.remove(‘name’);
//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.remove(‘name’, { path: ‘’ });
//json
Cookies.set(‘name’, { foo: ‘bar’ });//’{“foo”:“bar”}’

//第三个参数{}
expires
定义有效期。如果传入Number，那么单位为天，你也可以传入一个Date对象，表示有效期至Date指定时间。默认情况下cookie有效期截止至用户退出浏览器。
path
string，表示此cookie对哪个地址可见。默认为”/”。
domain
string，表示此cookie对哪个域名可见。设置后cookie会对所有子域名可见。默认为对创建此cookie的域名和子域名可见。
secure
true或false，表示cookie传输是否仅支持https。默认为不要求协议必须为https。

9.数据存储

由于cookie与IE中提供的持久化用户数据的容量限制以及数据安全问题，不能大量存储数据和安全数据，H5中提供了Web Storage

Web Storage

WebStorage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续将数据发回服务器。

1) 使用cookie的限制

cookies的大小被限制在4KB
cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽
要正确操纵cookies是很困难的

2) WebStorage的两个目标是：

提供一种在cookie之外存储会话数据的途径
提供一种存储大量可以跨会话存在的数据的机制

3) Storage类型

Storage类型提供了大量的存储空间来存储键值对，Storage实例与其他对象类似，Storage类型只能存储字符串，非字符串的数据在存储之前会被转换成字符串。
Storage对象提供的方法:
setItem(name,value) 为指定的name设置一个对应的值
getItem(name) 根据指定的名字name获取对应的值
removeItem(name) 删除由name指定的键值对
clear() 删除所有值;
key(index) 获得index位置处的值的名字
length Storage对象中，键值对的数量

4)Web Storage分类

sessionStorage对象
将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。(仅限当前选项卡)
localStorage（在服务器中有效）
将数据保存在客户端本地的硬盘设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

10.拖拽操作

在HTML4.01中超链接和图片默认可以被拖动。（超链接被拖动时会打开链接的新窗口）

10.1将元素设置拖动属性

第一步：设置可拖放属性draggable为true
第二步：根据需求选择拖放的事件进行处理（与click、change等事件用法相同）
新添事件
dragstart:开始拖放
drag:拖放中
dragenter:拖放中进入本元素
dragover:拖放中在本元素移动
dragleave:拖放中离开本元素
drop:放开移动元素
dragend:拖放结束

注意：如果你想实现拖放过程，无论是否需要都要取消dragover事件的默认行为
document.ondragover =function(e){e.preventDefault();}

10.2 事件数据处理对象:dataTransfer

dataTransfer对象有两个主要的方法：getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”text”或”URL”。

IE只定义了”text”或”URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型。考虑到向后兼容，HTML5也支持”text”或”URL”，但这两种类型会被映射为”text/plain”或”text/url-list”。

setData(mime_type,data);存储数据
getdata(mime_type);取出数据

属性：
- effectAllowed 控制特效
effectAllowed 用来指定当元素被拖放式所允许的视觉效果，其值如下：
　　 uninitialized：没有给被拖动元素设置任何放置行为。
　　 none：被拖动的元素不能有任何行为。
　　 copy：只允许值为”copy”的dropEffect。
　　 link：只允许值为”link”的dropEffect。
　　 move：只允许值为”move”的dropEffect。
　　 copyLink：允许值为”copy”和”link”的dropEffect。
　　 copyMove：允许值为”copy”和”move”的dropEffect。
　　 linkMove：允许值为”link”和”move”的dropEffect。
all：允许任意dropEffect。

dropEffect 控制特效
dropEffect 表示拖放操作的视觉效果这个属性的四个值如下：
　　 none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
　　 move：应该把拖动的元素移动到放置目标。
　　 copy：应该把拖动的元素复制到放置目标。
　　 link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。

11.WebMessage

当我们的需求为在HTML中内嵌的一个iframe框架，我们想要将主页面中的某个数据传递给iframe时，我们可以使用webMessage进行传递。

//a.html
//1.以 HTML 对象来返回 iframe 中的文档
//2.通过postMessage方法进行数据的传递
//3.需要通过window调用postMessage方法
iframe.contentWindow.postMessage(info.value,"http://127.0.0.1:5500");
//b.html
//添加一个事件监听器，检测是否有数据进行传递
window.addEventListener('message', function receiveMsg(e) {
    console.log(e)//传递的数据
}, false);

12.websocket

当我们的需求为一个聊天室的应用，我们需要时刻知道是否有人发布了新的消息，一般情况下的解决方案：轮询和长连接。

12.1轮询

轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。

缺点：因为轮询需要在项目的使用过程中，每个一段时间就发送一个请求到后台（比如用户并没有发送新的消息，而轮询是一直在进行的），这样就导致了请求中有大半是无用，浪费带宽和服务器资源。

12.2长连接

长连接：客户端项服务器端发起一个请求，服务器和客户端会保持连接。当有新的消息产生时，会将新的消息推送的给连接池（聊天室的所有用户）中的客户，而无消息的情况下，服务器端是不会有其它动作的。

缺点：因为一直保持连接的状态，也造成一部分的资源浪费。

//创建链接
var socket = new WebSocket("ws://127.0.0.1:7788/imserver/1001");
//接收消息
 socket.onmessage = function (msg) {
  $("#message").text("接收到后端消息:"+msg.data);
};
//发送数据
socket.send(str);
//关闭链接
socket.close();
//打开链接触发
socket.onopen = function () {
$("#message").text("websocket已打开");
};
//关闭事件触发
socket.onclose = function () {
  $("#message").text("websocket已关闭");
};
//发生了错误事件触发
socket.onerror = function () {
  $("#message").text("websocket发生了错误");
}

13.地图API

浏览器对定位的支持(火狐有效，谷歌需要https)

if (navigator.geolocation){   //检测是否支持地理定位
  navigator.geolocation.getCurrentPosition(function(e){
  console.log(e)//定位信息
  });
} else{
  console.log('error');
}

百度地图
https://lbsyun.baidu.com/ （创建应用，获取AK（秘钥））
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld

<script type="text/javascript">
// 创建地图实例 
var map = new BMapGL.Map("container");
// 创建点坐标 
var point = new BMapGL.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别 
map.centerAndZoom(point, 15);
//滚轮缩放
map.enableScrollWheelZoom(true);
//地球模式
map.setMapType(BMAP_EARTH_MAP); 
// 添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl();  
map.addControl(scaleCtrl);
// 添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl();  
map.addControl(zoomCtrl);
// 添加城市列表控件
var cityCtrl = new BMapGL.CityListControl(); 
map.addControl(cityCtrl);
//定制功能
var loCtrl = new BMapGL.LocationControl(); 
map.addControl(loCtrl);

</script>

<!DOCTYPE html> 
<html>
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Hello, World</title> 
<style type="text/css"> 
html{height:100%} 
body{height:100%;margin:0px;padding:0px} 
#container{height:100%} 
</style> 
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
</script>
</head> 
  
<body> 
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标 
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别 
</script> 
</body> 
</html>

今天晚上一定要早睡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5API

H5API1.语义标签2.新添元素3.删除的标签4.添加的属性5.自定义属性6.多媒体播放6.1嵌入音频6.2属性6.3方法7.canvas 元素7.1属性7.2canvas配套API7.3canvas的基本使用7.3.1绘制线段7.3.2绘制矩形7.3.3绘制圆形7.3.4绘制文字7.3.5图像翻转7.3.6绘制渐变图像7.4 canvas存储8.js-cookie(本地不支持)1.语义标签有语义的div标签< nav > 导航栏< section > 内容块<
复制链接

扫一扫