TML5开发现在很火爆，是一门技术，更是一个概念。可以让我们的工作模式、交互模式以及对应用和游戏的体验有了翻天覆地的变化，很多人都知道HTML5这门技术，也常把HTML5读作H5（简称）。其实一些外行人对HTML5的认识是存在一些误区的，例如微信上出现一个应用就说是H5做的、看到炫酷的页面也说是H5做的、看到一个网页游戏还说是H5做的、以及看到一个数据提交的小表单也理解成是H5做的。其实说的并不全对，是有HTML5的身影存在，但如果HTML5不用JavaScript就像汽车没有发动机，如果HTML5不用CSS，就像汽车只有框架没有绚丽的外观，基于HTML5的开发必须要和其它多种技术配合才能实现。当然也不用太“较真儿”了，你可以把H5开发看作是代表WEB开发，或是当作是前端开发的统称，或是把HTML5看作是HTML、CSS3、JavaScript、jQuery等开发技术的代名词吧，通过本节的学习相信你就能真正认识什么是HTML5了。

HTML5和HTML的关系

HTML5是下一代HTML标准，要想了解什么是HTML5，就要先认识它的祖先HTML。HTML全称为超文本标记语言（HyperText Markup Language），是被用来结构化细节、定义文档外观和语义的一种标记语言。说白了HTML就是在Web世界里，将内容放到网页里的技术，内容包括文档、链接、图片、视频等，并能做一些简单的格式布局。

早期的HTML非常简单，1980年，为使用世界各地的物理学家能够方便地进行合作研究，创建了适合用于其系统的HTML。英国计算机科学家万维网的发明者Tim Berners-Lee，设计的HTML以纯文字格式为基础，则可以使用任何文本编辑器处理，当然最初仅有少量标记（TAG）且易于掌握运用。而随着HTML使用率的增加，人们不满足只能看到文字，1993年，还是大学生的Marc Andreessen在他的Mosaic浏览器加入<img>标记，从此以后在Web页面上就可以浏览图片了。但人们认为仅有文字和图片还是不够，还希望可以将任何形式的媒体加到网页上，因此HTML不断地扩充和发展，HTML经过20多年的发展历经了多个版本，如表1所示：

表1　HTML20多年的发展版本

HTML5，第五版超文本标记语言，单纯从技术的角度来看，HTML5就是HTML标准的最新版本，于2014年10月由万维网联盟（W3C）发布为正式推荐标准。它是HTML自1991年问世以来，最具变革价值的技术规范，历经多年修订与完善才制定完成。HTML5又不仅仅是HTML4的下一个版本，因为它同样支持HTML4之后的网页规范，是首个将Web作为应用开发平台的HTML标准。而从其他角度来讲，HTML5现在如此火爆原因总结如下：

1．HTML5增加了许多新特性，让网页能力变得更强，这让许多以前不切实际的想法变成了现实，也让很多难实现的功能变得很简单。

2．近几年移动互联网变得越来越普及，跨设备、跨终端的需求越来越明显，这也为HTML5的发展提供了契机。

3．对于应用或游戏开发来说，一套跨平台的标准更加易于节约开发成本，让开发工作从繁重的多平台版本中解脱出来。

所以HTML5很像当年Web2.0的概念，基于现有的技术，让用户体验到不一样的互联网世界。

么是SVG《HTML5系列教程26》

在HTML文档中我们可以嵌入各种各样的图片资源，然而不同的图片在特定的条件下显示的效果却大相径庭。比如在一样分辨率下，栅格图像和矢量图像显示效果就相差甚远。所以这次我们要介绍一个叫做SVG的元素，那么什么是SVG呢？SVG有什么优势呢？它都能够做些什么呢？

1.什么是SVG

Scalable Vector Graphics 是SVG的全称，是一种用来绘制矢量图的HTML5标签，是一个基于可扩展标记语言，用于绘制二维可缩放矢量图形的标准

SVG是一种使用XML来描述二维图形的语言，允许三种类型的图形对象：矢量图形、图像和文本。SVG是可伸缩的矢量图形，用来定义用于网格的基于矢量的图形，它使用XML格式定义图形，图像在放大或缩小的情况下，其图形质量不会有损失，SVG还是万维网联盟的一个标准。

SVG有哪些优势

SVG与其他图像格式都用于展示图形，但是SVG却有着更多的优势，具体体现在以下方面：

1. SVG可被多种工具读取和编辑，甚至是记事本。

2. SVG与JPEG和GIF图像相比，尺寸更小，可压缩性更强。

3. SVG是可伸缩的矢量图形。

4. SVG图像可以在如何分辨率下被高质量地打印。

5. SVG图像在放大或缩小的情况下，期图像质量不会下降。

6. SVG可以与Java技术一起运行。

7. SVG是开放的标准。

8. SVG是一种XML文本

3.将SVG直接嵌入HTML5页面

我们先来看一个实例，这个实例的效果是在一个HTML5页面中绘制一副图形，代码如下：

在这段代码中，SVG代码以＜svg＞元素开始，包括开启标签＜svg＞和关闭标签＜/svg＞。xmlns属性定义了SVG的命名空间。version属性定义所使用的SVG版本。

＜circle＞标签用来创建一个圆。cx和cy属性定义圆中心的x和y坐标。如果忽略这两个属性，那么圆点会被设置为（0,0）.r属性定义圆的半径。stroke和stroke-width属性克制如何显示形状的轮廓。我们把圆的轮廓设置为2px宽，黑色变宽。fill属性设置形状内的颜色。我们把填充颜色设置为红色。

在谷歌浏览器中显示的效果如下图：

通过上述文章中的叙述我们已经大致了解到了什么是SVG了，那么SVG还可以实现什么功能呢？在下次的文章继续为大家介绍。谢谢大家的观看。祝大家：身体健康、生活愉快！