# HTML5
# HTML5 语义化标签
语义化标签 | 描述 |
---|---|
<nav> | 导航 |
<header> | 头部 |
<main> | 主体 |
<aside> | 侧边 |
<footer> | 底部 |
<article> | 文章 |
<section> | 章节 |
# HTML5 视频
<video>
标签提供了展示视频的标准<video>
支持的视频格式- WebM
- ogg
- mp4
<source>
标签可以为媒体元素定义多个资源- src 指定视频资源的 URL
- type 指定视频资源的格式
属性 | 值 | 描述 |
---|---|---|
src | URL | 指定视频资源的 URL |
poster | URL | 指定视频封面的 URL |
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
preload | auto | 规定是否在页面加载后载入视频,若指定 autoplay 则忽略此属性 |
metadata | 仅加载元信息 | |
none | 不加载 |
# HTML5 音频
<audio>
标签提供了展示视频的标准<audio>
支持的视频格式- Ogg Vorbis
- wav
- mp3
<audio>
没有 poster 属性,其他属性和<video>
是类似的
# HTML5 Canvas
<canvas>
标签只是图形容器,您必须使用脚本来绘制图形。通过 getContext("2d")能够获取到 Canvas 的 2D 渲染上下文,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx = canvas.getContext("2d");
绘制矩形
- fillRect(x, y, width, height)填充方法
- fillStyle 设置填充属性
- strokeRect(x, y, width, height)画笔方法
- strokeStyle 设置画笔属性
- clearRect(x, y, width, height)清除方法
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
绘制路径
- beginPath()方法开始一条路径,或重置当前的路径。
- moveTo(x, y)定义起始坐标
- lineTo(x, y)定义结束坐标
- closePath() 方法创建从当前点到开始点的路径。
- 最后调用 stroke()或者 fill()方法进行绘制
绘制圆形
- arc(x, y, r, start, stop, false)方法
- 角度顺时针计算,x 轴正向为 0,默认 false 顺时针绘制
绘制文本
- font 属性 定义字体
- fillText("text", x, y)方法绘制实心文本
- strokeText("text", x, y)方法绘制空心文本
绘制渐变
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x, y, r, x1, y1, r1) - 创建一个径向/圆渐变
放置图像
- drawImage(image, x, y)
# HTML5 拖放
- 设置元素属性为可拖动 draggable="true"
- 构造三个函数 drag allowDrop drop
- e.dataTransfer.getData("text")方法,获取被拖动元素的数据和值
- e.dataTransfer.setData("text",e.target.id)方法,设置被拖动元素的数据和值
- e.preventDefault()方法,阻止父元素的默认行为,拖动前后的父元素都要阻止
- e.target.appendChild(docoument.getElementById(data));拖动元素插入后者父元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img
loading="lazy"
id="drag1"
src="https://www.runoob.com//images/logo.png"
draggable="true"
ondragstart="drag(event)"
width="336"
height="69"
/>
</body>
</html>
# HTML5 定位
- Navigator 对象的 navigator.geolocation 属性返回一个 Geolocation 定位对象
- getCurrentPosition()方法,返回一个对象,其中包含用户当前的地理位置信息。
- watchPosition()方法,返回用户的当前位置,并继续返回用户移动时的更新位置。
- clearWatch()方法用于停止 watchPosition() 方法。
- 注意,调用这三个方法时,浏览器会跳出一个对话框,要求用户给予授权。
属性 | 描述 |
---|---|
coords.latitude | 纬度 |
coords.longitude | 经度 |
coords.altitude | 海拔 |
coords.heading | 方向,从正北开始以角度计 |
coords.speed | 速度 |