新特性
取消了font、center标签
语义化标签
header、footer、container、aiticle、aside(侧边)、mark、summary、main、time、section、details、
注意 ie8以下的浏览器并不支持h5的语义化标签
兼容性处理
1.使用dom创建元素
(1)设置display为block
(2)创建元素
<style>
.header {
background-color: red;
display: block;//(1)
}
</style>
<script>
document.createElement('header');//(2)
</script>
<body>
<header>头部</header>
</body>
注意 script必须放在header之前，生成header元素，body那边才能使用
但是我们不可能给每个元素挨个这样操作，可以使用第二种方法
2.引入html5shiv.js,自行百度下载
<style>
.header {
background-color: red;
}
</style>
<script src="html5shiv.js"></script>
<body>
<header>头部</header>
</body>
但是非ie8以下浏览器不需要请求html5shiv.js文件，可以做个判断
<style>
.header {
background-color: red;
}
</style>
<!--[if lte IE 8]>
<script src="html5shiv.js"></script>
<![endif]-->
<body>
<header>头部</header>
</body>
# geolocation定位
- PC的定位方式--IP地址
精度比较低
可以使用ip库来改善，但是还存在ip库更新不及时的问题
- 手机的定位方式--GPS
genolocation多用于移动端
window.navigator.geolocation
- 单次 getCurrentPosition
enableHighAccuracy//高精度模式
timeout//超时时间
maximumAge//缓存
<body>
<button id="btn">定位</button>
<script>
let btn = document.getElementById('btn');
btn.onclick = ()=>{
if(window.navigator.geolocation) {
navigation.geolocation.getCurrentPosition(res=>{
alert('成功')
},err=>{
alert('失败')
},{
//timeout: 50*...
frequency: 1000
})
}else {
alert('你的浏览器不支持定位')
}
};
</script>
</body>
- 监听 watchPosition
<body>
<button id="btn">定位</button>
<script>
let btn = document.getElementById('btn');
btn.onclick = ()=>{
if(window.navigator.geolocation) {
var watchID = navigation.geolocation.watchPosition(res=>{
alert('成功')
},err=>{
alert('失败')
},{
timeout: 50*...
})
}else {
alert('你的浏览器不支持定位')
}
//navigator.geolocation.clearWatch(watchID);
};
</script>
</body>
video、audio
video--视频MP4
属性
- constrols控制器
-
src
-
autoplay：自动播放
-
loop循环播放
-
poster=""封面
兼容性
<video>你的浏览器不支持video</video>
处理兼容性
<video><flesh></flesh></video>
video支持格式
| 浏览器 | 视频格式 |
|---|---|
| IE | wmv、mp4 |
| Chrome | webq、MP4 |
| FireFox | ogv、MP4 |
audio--音频MP3
JS接口--vedio、audio
.play()播放
.pause()暂停
.stop() x（pause+currenttime=0）
.currentTime当前播放位置
.duration 长度（s）
.volume音量0-100
.muted静音
客户端存储
客户端存储只存储在客户端，不会通过http发送到后端
localStorage、sessionStorage
localStorage、sessionStorage都适用，这里用localStorage演示
image.png
由键值对组成，key value，value只能是字符串
localStorage对象跟一般对象的用法一样
let name = localStorage.name;
localStorage.name = 'lwp'
let name = localStorage["name"]
for(let key in localStorage){
let value = localStorage[key]
}
| localStorage | localStorage |
|---|---|
| 永久存储 | 浏览器关掉就没了 |
| 文档源（协议、主机名、端口） | 浏览器或标签页关掉就没了 |
API
- 读写
正规的写法
localStorage.setItem('name','lwp')
localStorage.getItem('name')
for(let i = 0;i<localStorage.length;i++){
let name = localStorage.key(i)
let value = localStorage.getItem(name)
} - 删除
localStorage.removeItem('name')
locStorage.clear()//全部删除
网友评论