h5移动开发web

来源：互联网发布：钓鱼软件生成器安卓版编辑：程序博客网时间：2024/05/19 12:27

一、h5新特性

canvas绘图

多媒体

本地存储

离线应用

二、h5新元素标签

常用的语义标签

audio 定义音频内容

canvas 定义画布功能

command 定义一个命令按钮

datalist 定义一个下拉列表

details 定义一个元素的详细内容

dialog 定义一个对话框

keygen 定义一个表单里声称的键值

mark 定义有标记的文本

output 定义一些输出的类型

progress 定义任务的过程

source 定义媒体资源

video 定义一个视频内容

三、h5本地存储

两个api：Web Storage 和 Web SQL Database

Web Storage下有两种类型：sessionStorage 和 localStroage

以下是用来判断浏览器是否支持Web Storage的语法：

if(window.localStroage){

//浏览器支持localStroage

}

if(window.sessionStorage){

//浏览器支持sessionStorage

}

四、移动web的离线应用

h5离线应用的特性：

离线资源缓存、ApplicationCache对象的缓存状态、在线状态检测

以下是判断浏览器当前网络状态的语法：

if(window.navigator.online){

//当前浏览器online

}else{

//当前浏览器offline

}

五、h5表单属性

丰富的表单属性：

form属性、placeholder属性、autofocus属性、list属性和datalist属性、autocomplete属性、required属性

input类型：

search类型文本、email类型文本、number类型文本、range类型文本、tel类型文本、url类型文本、datetime类型、datetime-local类型、Time类型、Date类型、Week类型、Month类型

六、移动Web界面样式

1、css3新特性

增强的选择器、阴影、强大的背景设置、圆角边框

2、媒体流查询的使用 Media Queries

Media Queries语法总结：

@media[media query] media_type and media_feature

使用Media Queries 样式模块时都必须以“@media”方式开头

七、Geolocation地理定位

Geolocation API是通过window.navigator.geolocation获得对地理定位的访问。该对象有三个方法：

getCurrentPosition()、watchPosition()、clearWatch()

<!DOCTYPE html>

<html>

<head>

<title>position</title>

navigator.geolocation.getCurrentPosition(function(pos){

console.log("当前位置的纬度：" + pos.coords.latitude);

console.log("当前位置的经度：" + pos.coords.longitude);

console.log("当前经纬度的精度：" + pos.coords.accuracy);

});

</script>

</head>

</html>

0 0