# 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 速度