html基础（svg、canvas，媒体）
Svg基础：以像素为单位，所以不用写单位。X是右，y是下。
什么是svg：
1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2. SVG 用来定义用于网络的基于矢量的图形
3. SVG 使用 XML 格式定义图形
4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
5. SVG 是万维网联盟的标准
6. SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
实例：
SVG文件必须使用 .svg 后缀来保存：所有的开启标签必须有关闭标签！
standalone属性！该属性规定此 SVG文件是否是“独立的”，或含有对外部文件的引用。standalone="no"意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的SVG 元素
SVG 代码以 元素开始，包括开启标签 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 文件可通过以下标签嵌入HTML 文档：
Svg形状：
1. 矩形
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
2. 圆形
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。
3. 椭圆
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
4. 线
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
5. 折线
6. 多边形
7. 路径
滤镜
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>filter:url属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
线性渐变：
渐变必须在
<linearGradient>标签的 id属性可为渐变定义一个唯一的名称，x1、x2、y1、y2 属性可定义渐变的开始和结束位置
每种颜色通过一个
style="fill:url(#orange_red)"/>
放射性渐变：
fx="50%"fy="50%">cx、cy和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个
style="fill:url(#grey_blue)"/> fill:url(#grey_blue)
canvas：
必须要有的两个步骤：
1、找到 元素:varc=document.getElementById("myCanvas");
2、创建 context对象：var ctx=c.getContext("2d");
getContext("2d")对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
路径：
划横线路径一定要有的方法：
ctx.moveTo(x,y);定义线条开始坐标；
ctx.lineTo(x,y);定义结束坐标，可以有n多个
ctx.stroke()；连接
绘制圆形一定要有的方法：
ctx.arc(x,y,start,stop);
ctx.stroke()描边或者ctx.fill()填充;
绘制文本一定要有的方法：
ctx.fon=”字体大小 字体类型”；
ctx.fillText(text,x,y)实心的文本；或者ctx.strokeText(text,x,y)空心的文本；
渐变一定要有的方法：
grd=ctx.createLinearGradient(x,y,x1,y1)线性渐变
或者grd=ctx.createRadialGradient(x,y,r,x1,y1)径向渐变
grd.addColorStop(0-1,”颜色名”)；可以有n多个
ctx.fillStyle=grd;把自己设置的渐变效果赋给填充样式；
ctx.fillRect(10,10,150,80);
图像一定要有：
varc=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById(“图片id名”)；
ctx.drawImage(img,x左上角，y左上角)
媒体：
视频在html5中：把video换成audio同样适用；
适用于 Safari浏览器，视频文件必须是 MPEG4 类型。
允许多个source元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
Your browser does not support the video tag.
Video标签的常见属性：autoplay=“autoplay”视频就绪后马上播放；controls=“controls”出现显示控件；loop=“loop”循环播放
video/audio + dom：
js中视频的播放用play（）方法；暂停用pause（）方法；
HTML5特性：
PWA（ 全称：Progressive Web App）也就是说这是个渐进式的网页应用程序。
优点可以一步一步地增强现有的web应用。
PWA 应该具备以下特点：
响应式
独立于网络连接
类似原生应用的交互体验
始终保持更新
安全
可发现
可重连
可安装
可链接
PWA 带给 Web 的功能使开发者可以为用户构建更快、更可靠、更吸引人的网站。
这些功能被添加到浏览器中，这意味着它们也可以与你熟悉的任何库或框架一起很好地工作。无论你是有一个现成的应用，还是想从头开始构建新的 Web应用，都可以根据需要来定制 PWA。
在本章中，我们研究一种叫做应用外壳架构的架构方式，你可以使用它来利用Service Worker 缓存来为你的用户立即提供有意义的页面。
在用户体验方面，相比于传统网站，原生应用可以提供更好的体验。
Web 正在发展，我们没有任何理由不去为用户提供快速、有弹性和吸引人的 Web 应用。
PWA 能够为你的用户提供更快的、富有弹性的和更吸引人的网站。
Service Workers是解锁浏览器力量的关键。可以把它们当做是能够拦截 HTTP 请求的空中交通管制员。