HTML
2019-06-27 本文已影响0人
兰为鹏
HTML、CSS、JS是什么
HTML：骨架
image.png
CSS：美化
image.png
JS：交互
使用div+css就可以做静态页面
标签
双标签
<div>哈哈</div>
单标签
<br/>
div
一般我们使用div+css来写静态页面，你可以想象成盒子，后面学css就知道这是啥了
br
换行
aabb
image.png
aa<br/>bb
image.png
hr
水平线
aa<hr/>bb
image.png
---
title: html5
category: web前端
新特性
取消了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静音
