html5可以理解为html+css+js

其目前可以解决：1.浏览器的兼容问题 2.统一web应用标准 3.解决文档结构定义不明确问题 4.解决web应用中的功能受限问题 5.是程序员编写的web应用更加独立

html5的判断是<!DOCTYPE html>标签，此标签内不含其他任何元素，便是html5。

html5新增特性：video,audio,canvas,新的特殊内容元素（article,footer,header,nav,section）,新增的表单控件（calendar,date,time,email,url,search）

添加视频：

目前html5只支持ogg,mpeg4,webm格式

添加音频：

 <audio controls="controls">

   <source src="song.ogg" type="audio/ogg">

   <source src="song.mp3" type="audio/mpeg">

 <!--当浏览器不支持以上视频格式，则显示下面语句-->

 Your browser does not support the audio tag.

 </audio>

表单元素就不举例子了，其各种浏览器的支持如下：

可见其在opera浏览器中支持较好，但是现在我们可以在任一浏览器中使用他们了，都会以文本框的形式显示，尽管可能不会显示其效果，如type="date",其可能只会显示一个文本框，而不会有日期供我们选择。

Canvas元素特性：

canvas是html5的新特性，其提供一个绘图的工具，但其本身并不具备绘图的动作，动作都是有js来完成的。

 <!-- 定义一个canvas画板 -->

 <canvas width="700" height="400" id="canvas"></canvas>

 <!-- 在画板上进行绘图动作 -->

 <script type="text/javascript">

 //获得canvas对象

 var c=document.getElementById("canvas");

 //定义画笔对象

 var cxt=c.getContext("2d");

 //填充颜色

 cxt.fillStyle="#FFC0CB";

 //定义大小，坐标为坐上角0,0，宽和高为150,75

 cxt.fillRect(0,0,150,75);

 </script>

效果图：

矢量图形：

矢量图形是由几何特性绘制的图形，矢量可以是一个点，一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后不会失真，和分辨率无关，适用于一些图形设计，文字设计，logo设计，版式设计。

canvas绘制矩形和三角形圆形，加载图片：

 <!DOCTYPE html >

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 </head>

 <body>

 <canvas id="canvas" width="1000" height="800" />

 <script type="text/javascript">

     //生成一张纸

     var cv = document.getElementById("canvas")

     //获取到笔对象

     var pen=cv.getContext("2d")

     //定义笔样式

     pen.fillStyle="#99cc33"

     pen.fill()

     //绘制矩形,以填充的方式，当然也有以线条的方式stroke

     pen.fillRect(100,100,200,200)

     //绘制三角形，定义起点

     pen.moveTo(300,300)

     //y轴不变，x轴向右移动100

     pen.lineTo(400,300)

     //x轴不变，y轴向下移动100

     pen.lineTo(300,400)

     //连接回起点

     pen.lineTo(300,300)

     //填充

     pen.fill()

     //绘制圆形

     //开始绘制路径

     pen.beginPath()

     pen.arc(400,100,50,0,Math.PI*2,false)//false为顺时针，true为逆时针

     pen.closePath()

     pen.fill()

     //在画板上加载图片

     //实例化图片对象

     var img = new Image();

     img.src="美女.jpg";

     pen.drawImage(img,0,0,100,100)

     //直接显示图片，执行脚本的流程是等待图片装载完毕之后才会执行下面的操作，如果不想这样的话，我们可以用onload（）函数

     /*

     * img.onload=function(){

     * pen.drawImage(img,0,0,100,600)

     * }*/

 </script>

 </body>

 </html>

效果图如下，其中图片素材读者可替换成自己的。

html5一些特性的更多相关文章

  1. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  2. 前端开发攻城师绝对不可忽视的五个HTML5新特性

    HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程.还记得以前我们介绍过的HTML5新标签. 作为未来前端开发技术的潮流和风向标,HTML ...

  3. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  4. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  5. HTML5新特性：FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  6. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  7. HTML5新特性：范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  8. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  9. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  10. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

随机推荐

  1. 福建工程学院16级第一周寒假作业E题----第七集，奇思妙想

    第七集,奇思妙想                                                                                            ...

  2. Ubuntu 18.04 安装 onedrive

    问题 在Ubuntu 18.04上安装Onedrive 问题背景 对于文档的同步,还是喜欢用Onedrive,主要因为Onedrive对文档的在线编辑支持很好. Onedrive初始免费容量5G,加上 ...

  3. yzoj 1201数字三角形3题解

    题意 如下图所示为一个数字三角形: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 请编程计算从顶至底部某处的一条路径,使该路径所经过的数字的总和最大.约定: (1)每一步可沿直线向下或右 ...

  4. 弹幕制作canvas方法,文字直播和聊天

    今天要做体育文字直播的项目,类似这样: 文字不断循环显示,我这里找到了一个网上的写法,分析后并贴在这里,并且封装成了jquery barrager方法,很是方便,分析了下原理,是刷新canvas 画布 ...

  5. 【Ehcache】基础知识学习

    一.Ehcache概述 1.1 简介 1.2 Ehcache的主要特性 二.Ehcache使用介绍 2.1 Ehcache缓存过期策略 2.2 如何解决缓存与db不同步的问题. 三.Ehcache 基 ...

  6. CopyOnWriteArrayList实现原理以及源码解析

    1.CopyOnWrite容器(并发容器) Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正 ...

  7. Vert.x Web 文档手册

    Vert.x Web 中英对照表 Container:容器 Micro-service:微服务 Bridge:桥接 Router:路由器 Route:路由 Sub-Route: 子路由 Handler ...

  8. docker java环境 直接做成镜像 跑自己的java包

    yum install docker #基于阿里源 可以直接下载 systemctl restart docker ifconfig  #出现 docker0  说明环境部署成功 docker ver ...

  9. 一次搞懂建模语言UML

    Unified Modeling Language (UML)又称统一建模语言或标准建模语言,它是一个支持模型化和软件系统开发的图形化语言,为软件开发的所有阶段提供模型化和可视化支持,包括由需求分析到 ...

  10. Winforn中设置ZedGraph曲线图的属性、坐标轴属性、刻度属性

    场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 在上面 ...