HTML

即超文本标记语言

1、基本标签

<h1>-<h6>,<a href="">, <p>(块级元素),<img src="">，<a></a>  这些不再讲述

1-1、<hr/>水平线用于元素分割内容。

1-2、注释

1-3、<abbr> 定义缩写

1-4、<address>定义文档作者或者拥有者的联系信息

1-5、<article>定义文章

1-6、<aside> 定义页面内容之外的内容

1-7、<b> 粗体

1-8、<base> 定义页面中所有链接的默认地址或默认目标

1-9、<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。

1-10、<del> 定义被删除的文本

1-11、 <details> 定义元素的细节

1-12、<dialog>定义对话框或窗口

1-13、<dl>定义定义列表

<dt>定义定义列表中的项目

1-15、<em>定义强调文本

1-16、<footer> 定义section或者page的页脚

1-17、<i> 定义斜体

1-18、<ins>定义被插入文本

1-19、<nav> 定义导航链接

2、引用

2-1、<q> <q> 短的引用

2-2、<blockquote></blockquote>长的引用

2-3、<abbr></abbr> 元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

2-4、<dfn></dfn> 元素定义项目或缩写的定义。

用法：1.如果设置了<dfn> 元素的 title 属性，则定义项目

如果 <dfn>元素包含具有标题的 <abbr> 元素，则 title 定义项目

3.否则，<dfn>文本内容即是项目，并且父元素包含定义

2-5、<address></address> 用于联系信息斜体定义文档或者文章的联系信息（作者/拥有者）

2-6、<cite></cite>定义著作的标题斜体

2-7、<bdo></bdo> 定义双流向的覆盖用于覆盖当前文本的方向

3、颜色

仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua（湖绿色）, black, blue, fuchsia（紫红色）, gray（灰色）, green, lime（绿黄色）, maroon（酱紫色、褐红色）, navy（深青色、藏青色）, olive（橄榄色）, purple, red, silver, teal（蓝绿色）, white, yellow。

其余均为十六进制颜色值

4、链接

格式<a href="url"></a>

target 属性：定义被链接的文档在何处显示例如 target="_blank" 即在新窗口打开文档

name 属性：规定锚的名称（可以用id属性来替代name属性，命名锚同样有效）

实例:

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.baidu.com#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

注：作用类似于百度百科的

如何取消下划线：加样式 style="text-decoration:none"-

改变了链接颜色（链接字体默认为蓝色）：style="color:xxx"

5、图像

格式： <img src="url"/>

通过width和height来改变图片大小

5-1图片显示替换文本

alt:可预备替换文本属性（即当无法载入图片时，会显示文字）

格式：<img src="url" alt="xxx">

5-2 背景图片

5-2-1  在body便签中定义背景图片     <body background="">
5-2-2  用三种样式定义背景图片    以<style>{ background-img:}</style>
    
    <!--如果图片大小比页面大小小，则图片会进行重复
    取消重复 ：-->
    <style>
    *{ background-img:"url"；
        background-repeat:no-repeat;
    }
    </style>

5-3、排列图片

<img src="url" align="bottom/middle/top">         
<!--一共三种排列：bottom、middle、top
默认是buttom-->

5-4、浮动图片

<img src="url" align="lefy/right">         
<!--一共两种浮点：left/right-->

5-5制作图像链接

正如标题所言，即在链接后插入图片即可（在<a></a>中间）

<a href="url">
<img src="url" />
</a>

5-6、创建图像映射

<area>:定义图像地图中的可点击区域。

6、HTML表格

1.格式：

<table>
<tr>
<td></td>
</tr>
</table>

(在<table></table>中定义，<tr></tr>表示行，<td></td>是列)

2.边框属性<table border="1">

没有边框：不写或者<table border="0">

3.表格中的表头<th></th>



<table>
    <tr>
       <th>xxxx</th>
       <th>xxxx</th>
    </tr>
</table>

4.若<td>中间的内容是空的，浏览器可能无法显示出边框

若想显示边框，在空单元格中添加一个空占位，即在<td></td>中插入( &nb sp; )

注：

带标题的表格<caption>xxxx</caption>
单元格边框<table cellpading=""> </table> <table rowpadding =""> </table>
背景颜色 <table bgcolor="color" ></table>;背景图像 <table background="url"></table>
横跨两列的单元格 <th colspan=""></th> ;横框两行的单元格 <th rowspan=""></th>

例如：

姓名电话
xxx 18888888888 10000000000

姓名 xxx
电话 xxxxxxx
qqqqqqq

姓名	电话
xxx	18888888888	10000000000

姓名	xxx
电话	xxxxxxx
qqqqqqq

5，表格中依旧可以定义另一个表格，但是前面的标记是不一样的。

6.表格中排列内容 <th align="left"></th> <th align="right"></th>

7.框架（frame）属性。（框架属性无法在Internet explorer中正确显示）

例如：

Table with frame="box":

Month	Savings
January	$100

Table with frame="above":

Month	Savings
January	$100

Table with frame="below":

Month	Savings
January	$100

Table with frame="hsides":

Month	Savings
January	$100

Table with frame="vsides":

Month	Savings
January	$100

7.列表

7.1无序列表：实心黑圆圈

<ul>
<li> </li>
<li></li>
</ul>

可以通过<ul type="">来改变无序列表前面的标记，如disc（不变），circle(空心圆)，square（实心黑方块）

7.2有序列表：数字

<ol>
<li> </li>
<li></li>
</ol>

可以通过<ul type="">来改变有序列表前面的标记；如A（后续为B,C,D...）、如a（后续为b,c,d...）、如I（后面为罗马字母）、如i（后面为小写罗马字母）

7.3定义列表：定义列表项不仅仅是定义项目，而是项目和其注释的组合

自定义列表以 <dl>标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以<dd>开始。

<dl>
<dt>项目</dt>
<dd>项目及其解释</dd>
<dt></dt>
<dd></dd>
</dl>

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

8.块和内联（span,div）

大多数html元素被定义为块级元素或者内联元素

块级元素（block level element）：块级元素在浏览器显示时，通常以新行来开始

例如：<h1>、<p>、<ul>、<table>等

内联元素（inline element）：内联元素在显示时通常不会以新的一行开始

例如：<b>、<tb>、<a>、<img>等

div:是块级元素，可用于组合html元素的容器，无特定含义

如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性；<div>的另一个常见的用途是文档布局

使用：用内部样式表来设置样式时，一般是把div命名为类名即<div class="xx">,然后在内联样式表用 “ . ” 来使用

span：是内联元素，可用于作文本的容器，也无特定含义，如果与CSS一同使用，<span>元素可用于对大的内容块设置样式属性；

span的使用方法与div相同

9.id与类

id与类的区别是id是唯一的，并且id在内联样式表使用是用” # “ 设置样式；而类（class是为可以有多个的），用 ” .“ 设置样式

10.路径

url:连接到外部的样式表、网页、图像、js等等

路径分为绝对路径和相对路径：

1.绝对路径：指向一个因特网的完整url

2.相对路径：指向相对于当前页面的位置

推荐使用相对路径，可以不与当前基准的url相绑定，链接到自己的电脑上（localhost）

11.头部元素

一、head元素

是所有头部元素的容器。head 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

二、title 元素

< title > 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

三、base元素

base 标签为页面上的所有链接规定默认地址或默认目标（target）

link元素

<link>标签定义文档与外部资源之间的关系。

<link>标签最常用于连接样式表：

<link rel="stylesheet" type="text/css" href="mystyle.css" />

四、style元素

style 标签用于为 HTML 文档定义样式信息。

可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式

五、meta 元素

元数据（metadata）是关于数据的信息。

meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

meta 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

HTML<script>元素

script 标签用于定义客户端脚本，比如 JavaScript。

六、HTML5 语义元素

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

12、表单

用法：用于搜集不同类型的用户输入

form 元素

form元素定义html表单

一、HTML输入类型

html表单包含表单元素

表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等

input元素

<input>元素是最重要的表单元素

<input>元素有很多形态，根据不同的type属性。

1-1.text 类型定义供文本输入的单行输入字段

1-2.radio类型

定义单选按钮输入

1-3.submit类型

定义提交表单数据至表单处理程序的按钮。

1-4.password类型

定义密码字段

1-5.checkbox类型

定义复选框

复选框允许用户在有限数量的选项中选择零个或多个选项。

1-6.button类型

定义按钮

HTML5输入类型

HTML5 增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

注释： 老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

2-1.输入类型：number

*<input type="number">* 用于应该包含数字值的输入字段。

能够对数字做出限制。

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

2-2.输入类型：date

*<input type="date">* 用于应该包含日期的输入字段。

<form>
  Birthday:
  <input type="date" name="bday">
</form>

2-3.输入类型：color

*<input type="color">* 用于应该包含颜色的输入字段。

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

2-4.输入类型：range

*<input type="range">* 用于应该包含一定范围内的值的输入字段。

<form>
  <input type="range" name="points" min="0" max="10">
</form>

2-5.输入类型：month

*<input type="month">*允许用户选择月份和年份。

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

2-6.输入类型：week

*<input type="week">*允许用户选择周和年。

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

2-7.输入类型：time

*<input type="time">*允许用户选择时间（无时区）。

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

2-8.输入类型：datetime

*<input type="datetime">*允许用户选择日期和时间（有时区）。

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

2-9.输入类型：datetime-local

*<input type="datetime-local">*允许用户选择日期和时间（无时区）。

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

2-10.输入类型：email

*<input type="email">*用于应该包含电子邮件地址的输入字段。

<form>
  E-mail:
  <input type="email" name="email">
</form>

2-11.输入类型：search

*<input type="search">*用于搜索字段（搜索字段的表现类似常规文本字段）。

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

2-12.输入类型：tel

*<input type="tel">* 用于应该包含电话号码的输入字段。

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

2-13.输入类型：url

*<input type="url">*用于应该包含 URL 地址的输入字段。

根据浏览器支持，在提交时能够自动验证 url 字段。

某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

输入限制

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

二、HTML输入属性

1.value 属性

value 属性规定输入字段的初始值

2.readonly 属性

readonly 属性规定输入字段为只读（不能修改）

3.disabled 属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

4.size 属性

size 属性规定输入字段的尺寸（以字符计）

5.maxlength 属性

maxlength 属性规定输入字段允许的最大长度：

HTML5 属性

HTML5 为 <input>增加了如下属性：

autocomplete

autocomplete 属性规定表单或输入字段是否应该自动完成。

当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

novalidate

novalidate 属性属于 <form>属性。

如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

autofocus

autofocus 属性是布尔属性。

如果设置，则规定当页面加载时 <input>元素应该自动获得焦点。

form

form 属性规定<input> 元素所属的一个或多个表单。

提示： 如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

formaction

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form>元素的 action 属性。

formaction 属性适用于 type="submit" 以及 type="image"。

formenctype

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

formenctype 属性覆盖 <form>元素的 enctype 属性。

formenctype 属性适用于 type="submit" 以及 type="image"。

formmethod

formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。

formmethod 属性覆盖<form>元素的 method 属性。

formmethod 属性适用于 type="submit" 以及 type="image"。

formnovalidate

novalidate 属性是布尔属性。

如果设置，则规定在提交表单时不对 <input>元素进行验证。

formnovalidate 属性覆盖 <form>元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"。

formtarget

formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。

formtarget 属性会覆盖<form> 元素的 target 属性。

formtarget 属性可与 type="submit" 和 type="image" 使用。

height 和 width

height 和 width 属性规定 <input> 元素的高度和宽度。

height 和 width 属性仅用于 <input type="image">。

注释： 请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。

list

st 属性引用的 <datalist>元素中包含了 <input>元素的预定义选项。

min 和 max

min 和 max 属性规定 <input> 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

multiple

multiple 属性是布尔属性。

如果设置，则规定允许用户在<input> 元素中输入一个以上的值。

multiple 属性适用于以下输入类型：email 和 file。

pattern (regexp)

pattern 属性规定用于检查 <input> 元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

placeholder

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

required

required 属性是布尔属性。

如果设置，则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

step

step 属性规定 <input> 元素的合法数字间隔。

示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。

提示： step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。

step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

并为 <form> 增加如需属性：

autocomplete
novalidate

三、HTML表单属性

1.Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

2.Action 属性

action 属性定义提交表单时要执行的操作。

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

3.Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

默认值为 _self，这意味着响应将在当前窗口中打开。

4.Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。

提交表单数据时，默认的 HTTP 方法是 GET。

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

提示： 如果表单数据包含敏感信息或个人信息，请务必使用 POST！

5.Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

6.Novalidate 属性

novalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

7.html的form属性设施的所有可能的值

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

属性	描述
accept-charset	规定用于表单提交的字符编码。
action	规定提交表单时将表单数据发送到何处。
autocomplete	规定表单是否应打开自动完成（填写）功能。
enctype	规定将表单数据提交到服务器时应如何编码（仅供 method="post"）。
method	规定发送表单数据时要使用的 HTTP 方法。
name	规定表单名称。
novalidate	规定提交时不应验证表单。
rel	规定链接资源和当前文档之间的关系。
target	规定提交表单后在何处显示接收到的响应。

8.用 <fieldset>组合表单数据

*<fieldset>*元素组合表单中的相关数据（即在表单外面加了一个框）

四、HTML表单元素

1.<select>元素（下拉列表）

2.*<option>* 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

3.<textarea>元素

<textarea>* 元素定义多行输入字段（ 文本域*）】

4.<button>元素

*<button>* 元素定义可点击的按钮

5.HTML5的表单元素

新增了

< datalist >
<keygen>
<output>

注释： 默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。

5-1.HTML5<datalist> 元素

*<datalist>*元素为<input>元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist>元素的 id 属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

13.HTML图形

一、HTML画布

canvas 元素用于在网页上绘制图形。

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

<canves id="my canvas"></canvas>

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

<script type="text/javascript">
var c=document.getElementById("myCanvas");<!-- 使用 id 来寻找 canvas 元素-->
var cxt=c.getContext("2d");<!--创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法-->
cxt.fillStyle="#FF0000";<!-- fillstyle方法将其染色-->
cxt.fillRect(0,0,150,75);<!-- fillrect方法规定了形状、位置和尺寸,该例的意思是在画布上绘制 150x75 的矩形，从左上角开始 (0,0)-->
</script>

实例1.线条

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

</body>
</html>

实例2、圆形

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

实例3.渐变

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

</body>
</html>

实例4.图像

<!DOCTYPE html>
<html>
<body>



<img id="scream" width="224" height="162"
src="/i/eg_flower.png" alt="The Scream">

<p>Canvas:</p>

<canvas id="myCanvas" width="244" height="182"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

</body>
</html>

二、HTML5内联svg

什么是 SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

把 SVG 直接嵌入 HTML 页面

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
 
</body>
</html>

三、HTML 5 Canvas vs. SVG

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

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

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

HTML笔记

HTML

1、基本标签

2、引用

3、颜色

4、链接

5、图像

6、HTML表格

7.列表

8.块和内联（span,div）

9.id与类

10.路径

11.头部元素

一、head元素

二、title 元素

三、base元素

四、style元素

五、meta 元素

六、HTML5 语义元素

12、表单

一、HTML输入类型

input元素

HTML5输入类型

二、HTML输入属性

HTML5 属性

三、HTML表单属性

四、HTML表单元素

13.HTML图形

一、HTML画布

什么是 Canvas？

创建 Canvas 元素

通过 JavaScript 来绘制

二、HTML5内联svg

什么是 SVG？

SVG 的优势

把 SVG 直接嵌入 HTML 页面

三、HTML 5 Canvas vs. SVG

SVG

Canvas

Canvas 与 SVG 的比较