tags: [笔记, HTML]
categories: [笔记, HTML]

参考资源：阿里云前端开发学习路线 - HTML入门与实战笔记

HTML元素属性分为元素特有属性和样式属性两类（如字体大小、背景颜色）？？？

前言-基础班学习路线-HTML

前言-基础班学习路线.pdf

01-HTML 简介

01-HTML 简介.pdf

02-HTML 标签（上）

02-HTML 标签（上）.pdf

02-HTML 标签（下）

02-HTML.标签（下）.pdf

03-HTML5新增标签

02_HTML5.pdf

Web基础

浏览器：渲染网页展示

常见浏览器
IE、Edge
Google Chrome
Mozilla Firefox
Safari
Opera

浏览器内核
浏览器内核可以分成两部分：渲染引擎（Layout engineer 或者 Rendering Engine）和 JS 引擎。
渲染引擎负责取得网页的内容（HTML、XML、图像等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后输出至显示器或打印机。
JS引擎则是解析JavaScript语言，执行JavaScript语言来实现网页的动态效果。

Trident（IE内核）

IE、Edge、360
大多多核浏览器的兼容内核

Gecko（firefox内核）

代码开源，可开发程度高
打开速度慢、升级频繁

webkit（Safari内核）

早期chrome使用webkit内核，现在改为blink

chromium/Blink（chrome内核）

blink实际上是webkit的分支

Presto（opera内核）

presto是opera早期内核，现在已经换为谷歌的blink内核。

移动端的浏览器内核

移动端的浏览器内核说的是系统内置浏览器的内核。
ios平台主要是webkit，Android 4.4之前的内核是webkit，后面切换到了chromium，Windows Phone 8的内核是Trident。

web标准
Web标准是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
样式标准：表现用于设置网页元素的板式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义以及交互的编写，主要包括DOM和ECMAScript两个部分。
理想状态的源码：.html、.css、.js 。

HTML入门

HTML初识
HTML（英文Hyper Text Markup Language的缩写），中文译名为“超文本标签语言”，主要是通过对HTML标签对网页中的文本、图片、声音等内容进行描述。
```
<strong>加粗文本</strong>
```
骨架格式
```
<html>
  <head>
      <title></title>
  </head>
  <body>
  </body>
</html>
```
标签

必要的标签
html标签：作为所有html中标签的一个根节点
head标签：用于存放title、meta、base、style、script、link，head标签中必须设置的标签是title
title标签：页面标题
body标签：页面主体部分

标签分类
在HTML页面中，带有<>符号的元素被称为标签或元素。
1、双标签：该语法中<标签名>表示该标签的作用开始，一般称为开始标签；</标签名>表示该标签的作用结束，一般称为结束标签。

<标签名>内容</标签名>

2、单标签：单标签也称空标签，是指一个标签符号即可完整地描述某个功能的标签。

<标签名/> 比如 <br />

标签嵌套和并列关系

嵌套关系：html嵌套head，head嵌套title
```
<head>    <title></title>    </head>
```
并列关系：比如head和body
```
<head></head>
<body></body>
```

下列哪个标签是错误的？

A    <head></head><body></body>
B    <strong><div></div></strong>
C    <head><title></head></title>    X
D    <body><div></div></body>

开发工具：快速生成标签、骨架

Dreamweaver
sublime
WebStorm
HBuilder
VSCode

doctype文档类型
<!DOCTYPE html>
这句话告诉我们所使用的html版本，html 5的版本
位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，必须在开头使用该标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

字符集简介
<meta charset="UTF-8">
utf-8是目前最常用的字符集编码方式，还有gbk和gb2312等较常用。
GB2312简单中文，包含6763个汉字
GBK包含全部中文字符，是GB2312的扩展，兼容GB2312
UTF-8包含全世界所有国家需要用到的字符

HTML标签

标签的语义化
标签语义化即标签的含义。
语义化标签

1、方便代码的阅读和维护
2、同时让浏览器方便解析
3、搜索引擎优化
核心：合适的地方给一个合理的标签。
语义良好：去掉CSS后，网页结构依然组织有序，并且有良好的可读性。
原则：先确定语义的HTML，再选合适的CSS。

排版标签

排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签
单词缩写head，头部、标题
HTML提供了6个等级的标题：< h1 >到< h6 >
语义：作为标题使用，并且依据重要性递减

最小到6级标题，数字再大无效

<html>
  <head>
      <title>标题标签测试</title>
  </head>
  <body>
      <h1>一级标题</h1>
      <h2>二级标题</h2>
      <h3>三级标题</h3>
      <h4>四级标题</h4>
      <h5>五级标题</h5>
      <h6>六级标题</h6>
  </body>
</html>

段落标签

单词缩写：paragraph
就像写文章一样的，对内容分段

<p>一段文字</p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签
单词缩写：horizontal 横线
在网页中用水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以通过标签完成。
单标签

<hr/>

在网页中显示默认样式的水平线。

换行标签
单词缩写：break 打断，换行
在HTML中，一个段落中的文字会从左到右依次排列，知道浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。
单标签

<br />

换行和段落的区别在于行间距

div span标签
div就是division的缩写
span 跨度，跨距；范围
div和span是没有语义的，是网页布局主要的两个盒子
```
<div> 这是头部 </div>    <span>今日价格<span>
```
文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊方式显示。
表格中的标签不带内左右不带空格，因为CSDN不加空格显示不出来 | 标签 | 显示效果 | | —- | —- | | < b >< /b >，< strong >< /strong > | 文字以粗体方式显示（XHTML推荐使用strong） | | < i >< /i >，< em >< /em> | 文字以斜体方式显示（XHTML推荐使用em） | | < s >< /s >，< del >< /del > | 文字以加删除线方式显示（XHTML推荐使用del ） | | < u >< /u >，< ins >< /ins > | 文字以加下划线方式显示（XHTML推荐使用ins） |
四列的后者语义更强烈

标签属性
属性就是特性，使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置，其基本语法如下：
```
<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
```
标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均用空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。
采取键值对的格式 key=“value”
比如水平线长度（宽）width为400，颜色为红色
```
<hr width="400" color="red" />
```
图像标签
单词缩写：image 图像
图像标签的语法如下：
```
<img src="图像URL" />
```
图像标签的属性 | 属性 | 属性值 | 描述 | | —- | —- | —- | | src | URL | 图像的路径 | | alt | 文本 | 图像不能显示时的替换文本 | | title | 文本 | 鼠标悬停时显示的内容 | | width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 | | height | 像素（XHTML不支持%页面百分比） | 设置图像的高度 | | border | 数字 | 设置图像边框的宽度 |

链接标签

单词缩写：anchor 锚
创建超链接，需要用链接标签环绕被链接的对象即可，语法如下：
```
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
```
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。Hypertext Reference的缩写
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。
注意：
（1）外部链接需要添加 http://
（2）内部链接直接链接内部页面名称即可，比如 < a href=“index.hrml”>首页< /a>
（3）如果当时没有确定链接目标时，通常将链接标签的href属性值定义为#，表示该链接暂时为一个空链接。
（4）不仅可以创建文本超链接，在网页中的各种元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位
通过创建锚点链接，用户能快速定位到目标内容；比如CSDN博客的目录。

创建锚点链接分两步：

<!--1、使用以下语句创建链接文本
  2、使用相应的id名标注跳转目标的位置
-->
<a href="#id名">链接文本</a>

base标签

base可以设置整体链接的打开状态

比如把链接都设置为新窗口打开

  <head>
      <base target="_blank" />
  </head>

特殊字符

HTML为这些特殊字符准备了专门的替代代码，可以用于CSDN博文。
字符的代码中，&后没有空格，在CSDN博文中不加就被当特殊字符转义了 | 特殊字符 | 描述 | 字符的代码 | | —- | —- | —- | | | 空格 | & nbsp; | | < | 小于号 | & lt; | | > | 小于号 | & gt; | | & | 小于号 | & amp; | | ￥ | 人名币 | & yen; | | © | 版权 | & copy; | | ® | 注册商标 | & reg; | | ° | 摄氏度 | & deg; | | ± | 正负号 | & plusmn; | | × | 乘号 | & times; | | ÷ | 除号 | & divide; | | ² | 平方（上标2） | & sup2; | | ³ | 立方（上标3） | & sup3; |

注释标签

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。语法如下：
HTML注释方式 
CSS注释方式 /* */
JavaScript注释方式 //
```

```
注释内容不会显示在浏览器窗口中，但是作为HTML文档的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

路径
路径可以分为：相对路径和绝对路径
相对路径：
（1）图像文件和HTML文件位于同一文件夹：只需要输入图像文件的名称即可。
（2）图像文件位于HTML文件的下一级文件夹：输入文件夹和文件名，之间用/分开。
（3）图像文件位于HTML文件的上一级文件夹：在文件名之前加“../”，如果是上两级，则需要使用“../../”，以此类推。
绝对路径：完整的地址信息。

列表标签
容器内装载着文字或者图表的一种形式，叫列表。
列表最大的特点是整齐、有序。
列表分为无序列表、有序列表和自定义列表。

无序列表 ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。基本语法如下：
```
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ···
</ul>
```
注意事项：
- < ul>< /ul>中只能嵌套< li>< /li>，直接在无序列表标签中输入其他标签或者文字的做法是不允许的。
- < li>与< /li>之间相当于一个容器，可以容纳所有元素。
- 无序列表会带有自己的样式属性。
  有序列表 ol
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
```
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ···
</ol>
```
自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ···
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
</dl>

HTML5新特性

HTML5 音频

1、Audio(音频)
HTML5 提供了播放音频文件的标准
2、control(控制器)
control属性供添加播放、暂停和音量控件
3、标签:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>音频</title> 
</head>
<body>
  <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
  </audio>
</body>
</html>

音频格式的MIME类型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

HTML5 视频

1、Video(视频)
HTML5提供了展示视频的标准
2、control(控制器)
control属性供添加播放、暂停和音量控件
3、标签:

定义声音规定多媒体资源，可以是多个4、属性:width: 宽height: 高

<!DOCTYPE html>
<html>
<head> 
  <meta charset="utf-8"> 
  <title>视频</title> 
</head>
<body>
  <!--视频转码工具：ffmpeg.org-->
  <video width="320px" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</body>
</html>

5、视频格式与浏览器的支持
当前，

元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

6、视频格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 拖放

拖放:
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
浏览器支持:
Internet Explorer 9、Firefox、 Opera 12、Chrome 以及Safari 5支持拖放。
设置元素为可拖放:
draggable= “true’
拖动什么: .
ondragstart和setData()
放到何处
ondragover
进行放置:
ondrop

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"> 
  <title>拖放</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 id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

代码解释

设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
HTML5 - 图1
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id (“drag1”)。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}

其中：

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素（目标元素）中
HTML5 画布
画布:
画布是一个矩形区域，您可以控制其每一像素。

JavaScript代码解析:<br />1、首先，找到 <canvas> 元素: `var c=document.getElementById("myCanvas");`<br />2、然后，创建 context 对象(2维)：`var ctx=c.getContext("2d");`getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。<br />3、下面的两行代码绘制一个红色的矩形：
```javascript
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

Canvas 坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

Canvas - 路径

直线

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 “ink” 的方法，就像stroke().

varc=document.getElementById("myCanvas"); 
varctx=c.getContext("2d"); ctx.moveTo(0,0); 
ctx.lineTo(200,100); ctx.stroke();
// 定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

圆形

在canvas中绘制圆形, 我们将使用以下方法: arc(x,y,r,start,stop)
实际上我们在绘制圆形时使用了 “ink” 的方法, 比如 stroke() 或者 fill().

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle='#f00'
ctx.beginPath();
ctx.arc(100,50,50,0,Math.PI*2);
ctx.closePath();
// ctx.stroke();
ctx.fill();

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

// 使用 "楷体" 字体在画布上绘制一个高 20px 的文字（实心）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px 楷体";
ctx.fillText("Hello World",0,20);  // 绘制实心文本，坐标定位为文本的左下角
// ctx.strokeText("Hello World",0,20); // 绘制空心文本

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变（开始坐标和结束坐标）
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变（两个圆形的圆形坐标和半径参数）

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);  // 创建一个线性渐变。使用渐变填充矩形:
// var grd=ctx.createRadialGradient(100,50,5,100,50,50);  // 创建一个径向/圆渐变。使用渐变填充矩形：
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,100);  // 定位坐标为矩形左上角

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法: drawImage(image,x,y)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)-图像</title>
</head>
<body>
    <p>Image to use:</p>
    <img id="ldh" src="./images/img.jpg" alt="刘德华" width="200">
    <p>Canvas:</p>
    <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        // 第一种方式：直接加载现有的图像，但属性好像不能继承比如宽度还是原来的640px，而不是200px，可能后续可以通过js代码控制、改变？？？
        // var img=document.getElementById("ldh");
        // ctx.drawImage(img,0,0);  // 直接绘制这样做并不是没有绘制图像，只是图像加载需要时间，直接调用drawImage(img,0,0)方法时，传递的img值还是空的，所以绘图也为空？？，因此需要调用onload()方法，图像加载完成后方可进行绘制图像
        // img.onload = function() {
        //     ctx.drawImage(img,0,0);
        // }
        // 第二种方式：创建一个新的image对象
        var img = new Image();
        img.src = "./images/img.jpg"
        img.width = "200"  // 无效果，看看后面学到时刚怎么弄
        img.onload = function(){
            ctx.drawImage(img,0,0)
        }
    </script>
</body>
</html>

HTML5 SVG

SVG 有多种绘制路径、框、圆、文本和图形图像的方法。
什么是SVG?
SVG指可缩放矢量图形(Scalable Vector Graphics)
SVG用于定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失（不会变形）
SVG是万维网联盟的标准
SVG的优势
与其他图像格式相比(比如JPEG和GIF)，使用 SVG的优势在于:
SVG图像可通过文本编辑器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的（不变形）
SVG图像可在任何的分辨率下被高质量地打印
SVG可在图像质量不下降的情况下被放大
浏览器支持
Internet Explorer 9、Firefox、 Opera、 Chrome以及Safari支持内联SVG。

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />  // 定位坐标为圆心
</svg> 
</body>
</html>

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas	SVG
- 依赖分辨率 - 不支持事件处理器 - 弱的文本渲染能力 - 能够以 .png 或 .jpg 格式保存结果图像 - 最适合图像密集型的游戏，其中的许多对象会被频繁重绘	- 不依赖分辨率 - 支持事件处理器 - 最适合带有大型渲染区域的应用程序（比如谷歌地图） - 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） - 不适合游戏应用

svg绘制教程参考资源：

https://www.runoob.com/svg/svg-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element

外部文件引入svg文件
SVG 文件可通过以下标签嵌入 HTML 文档：、

HTML5

前言-基础班学习路线-HTML

01-HTML 简介

02-HTML 标签（上）

02-HTML 标签（下）

03-HTML5新增标签

Web基础

常见浏览器

浏览器内核

web标准

HTML入门

HTML初识

骨架格式

标签

必要的标签

标签分类

标签嵌套和并列关系

开发工具：快速生成标签、骨架

doctype文档类型

字符集简介

HTML标签

标签的语义化

排版标签

标题标签

段落标签

水平线标签

换行标签

div span标签

文本格式化标签

标签属性

图像标签

链接标签

锚点定位

base标签

特殊字符

注释标签

路径

列表标签

无序列表 ul

有序列表 ol

自定义列表