前端基础温故而知新--第8篇

131 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第13天,点击查看活动详情

HTML5 新特性学习

一、音频标签<audio></audio>

  • <audio></audio>标签是HTML5提供的播放音频文件的标准
  • control(控制器)属性供添加播放、暂停和音量控件
  • <audio></audio>:定义声音
  • <source>:规定多媒体资源,可以是多个

image.png

二、视频标签<video></video>

  • <video></video>标签是HTML5提供的展示视频的标准
  • control(控制器)属性供添加播放、暂停和音量控件
  • <video></video>:定义声音
  • <source>:规定多媒体资源,可以是多个
  • width:宽度
  • height:高度

image.png

三、拖放draggble

  • 拖放是一种常见的特性,即抓取对象以后拖到另一个位置
  • 浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome以及Safari支持拖放
  • 设置原为可拖放:draggable="true"
  • 拖放对象需要设置的函数:ondragstartsetData
  • 拖放位置的对象需要设置的函数:ondragover
  • 进行拖放的函数:ondrop image.png

四、画布canvers

  • 画布是一个矩形区域,我们可以控制其每一像素
  • canvers拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

五、SVG

  • SVG指可伸缩的矢量图形(Scalable Vector Graphics),用于定义用于网络的基于矢量的图形
  • SVG使用XML格式定义图形
  • SVG图像在放大或改变尺寸情况下图片质量不会有损失
  • SVG图像可以通过文本编辑器进行创建和修改
  • SVG图像可以在任何分辨率下被高质量打印
  • 浏览器支持:Internet Explorer 9、Firefox、Opera、Chrome以及Safari支持内联SVG

SVG三角形案例

image.png

image.png