位图与矢量图 以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。在光栅图像中，图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强，但是在某些情形下会显得不足。例如，当浏览器以不同大小显示一副图像时，通常会产生锯齿边缘，这时，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值；这样会导致图像失真。此外，针对位图进行动画...
前面介绍了很多的图形元素，如果很多图形本身是一样的，需要每次都去定义一个新的么？我们能否共用一些图形呢？这是这节的重点-SVG元素的重用。 组合-g元素 g元素是一种容器，它组合一组相关的图形元素成为一个整体；这样，我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用，提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子： 代码如下: <svgxmlns="http://www.w3.org/2000...
使用脚本可以很方便的完成各种复杂的任务，也是完成动画和交互的一种主流方式。由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本质上是xml文档，所以也有一种特殊的DOM操作，大多称之为SVG DOM。当然了，由于目前IE不支持SVG，开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉，下面只是简单的看一下。 HTML页面中的DOM操作 DOM大家应该很熟悉了，这里先看一个小例子： 代码如下: #svgContainer {...
前面我们重点都在总结各类形状，文本和图片，接下来，我们还是和讨论canvas一样，总结一下颜色处理，也就是填充和边框效果；你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中，也可以以CSS的形式保存(这是与canvas不一样的地方)。填充色 - fill属性这个属性使用设置的颜色填充图形内部，使用很简单，直接把颜色值赋给这个属性就可以了。看例子：代码如下:<rect x="10" y="10" width="100" height=...
坐标系统SVG存在两套坐标系统：视窗坐标系与用户坐标系。默认情况下，用户坐标系与视窗坐标系的点是一一对应的，都为原点在视窗的左上角，x轴水平向右，y轴竖直向下；如下图所示： SVG的视窗位置一般是由CSS指定，尺寸由SVG元素的属性width和height设置，但是如果SVG是存储在embedded对象中(例如object元素，或者其他SVG元素)，而且包含SVG的文档是用CSS或者XSL格式化的，并且这些外围对象的CSS或者其他指定尺寸的值已经可以计算出...
近有在学习html5中video标签（播放器）的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。 网上的教程其实也不少了 w3cschool里面的最为简单而详细，那么这几介绍的是一些更为直接的应用。 本文目录: 1.使用标签2.加上一些必要参数3.自动播放或自动加载4.规范播放器 第一步：使用标签 使用的方法很简单，就是一句代码：代码如下: 第二步：加上一些必要的参数，比如播放...
HTML5 代表未来；W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML，从而使 HTML5 成为正式标准并得到认可。 HTML5 是下一代的 HTML。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变...
VG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。 SVG 主要用于矢量类型的图表，比如饼图，X，Y 坐标系统中的二维图等等。 SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准，你可以在 SVG 规范 页面中查看最新版本的 SVG 规范。 查看 SVG 文件大多数 Web 浏览器都可以显示 SVG，就像它们可以显示 PNG，GIF 以及 JPG 图形。IE 用户可能需要安装 Adobe SVG 阅读器 以便...
HTML5 究竟什么是HTML5？在W3C HTML5的常见问题中，关于HTML5是这样说明的：HTML5是一个开放的平台下开发的免费许可条款。具体来说，对这句话有以下两种理解：“指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的，且随时间变化的。指HTML5规范，当然也是开放式网络平台的一部分。 ”Canvas的浏览器支...
30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。什么是HTML【推荐教程：HTML教程】HTML是英文Hyper Text Mark-up Language（超文本标记语言）的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。HTM...
随着html5的快速发展，很多学生都加入进来，那么如此具有前景的前端我们该怎么入门呢？新手在学习前端的时候要学习那些内容呢？下面我们来总结一下web前端学什么内容？前端入门需要注意什么？一：web前端学什么内容刚刚入门web前端，学习的东西有很多，比如html基础，和css样式，javascript。html和css是在一起的，学起来也是比较的简单，但是随着html5和css3的出现，让一些前端又有了新的挑战，新手可以专业的去学习html5和css3，...
本篇文章主要介绍HTML入门基础，感兴趣的朋友参考下，希望对大家有所帮助。标记、标签、元素标签和元素通常是描述同样的意思，但是严格来说，一个HTML元素包含了开始标签和结束标签。一个标准的HTML页面<!DOCTYPE html> <!--声明了文档类型--> <html> <!--描述了文档类型--> <head> <!--可以插入<script>脚本，样式文件(css)以及各种meta信息 <meta http-equiv="content-type" content="text/html;charset="utf-8" /> <titl...
【块级标签与行级标签的区别】1.块级标签： 默认宽度100%（独占一行）自动换行(右边不能有任何东西)可以使用css设置宽度高度 2.行级标签： 内容宽度，由内容撑开(内容多宽，宽度就占多宽)不会自动换行(从左往右依次排列) 【常见的行级标签】span（文本）img（图片）em（强调）strong（强调）q（短引用）a（超链接）i（倾斜）b（加粗）small（缩小字体）【em/strong i/b】区别①em和i都能倾斜，strong和b都能加粗，但是，i和b仅仅是...
1、HTML简介HTML（Hypertext Markup Language）即超文本标记语言，是用于描述网页文档的一种标记语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。 2、HTML结构 1 <!DOCTYPE html><!-- 表示HTML5文档协议声明标签，协议的不同会影响整个页面的显示效果 --> 2 <html><!-- <html>表示文档标签 --> 3 <...
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bootstrap</title><link rel="stylesheet" href="bootstrap.min.css?1.1.11"><style>body{padding-top:50px;}.starter{padding:40px 15px ;text-align: center;}</style> </head> <body><nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"...