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格式

添加音频：

  1.  <audio controls="controls">
  2.    <source src="song.ogg" type="audio/ogg">
  3.    <source src="song.mp3" type="audio/mpeg">
  4.  <!--当浏览器不支持以上视频格式，则显示下面语句-->
  5.  Your browser does not support the audio tag.
  6.  </audio>

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

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

Canvas元素特性：

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

  1.  <!-- 定义一个canvas画板 -->
  2.  <canvas width="700" height="400" id="canvas"></canvas>
  3.  <!-- 在画板上进行绘图动作 -->
  4.  <script type="text/javascript">
  5.  //获得canvas对象
  6.  var c=document.getElementById("canvas");
  7.  //定义画笔对象
  8.  var cxt=c.getContext("2d");
  9.  //填充颜色
  10.  cxt.fillStyle="#FFC0CB";
  11.  //定义大小，坐标为坐上角0,0，宽和高为150,75
  12.  cxt.fillRect(0,0,150,75);
  13.  </script>

效果图：

矢量图形：

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

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

  1.  <!DOCTYPE html >
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.  <title>Insert title here</title>
  6.  </head>
  7.  <body>
  8.  <canvas id="canvas" width="1000" height="800" />
  9.  <script type="text/javascript">
  10.      //生成一张纸
  11.      var cv = document.getElementById("canvas")
  12.      //获取到笔对象
  13.      var pen=cv.getContext("2d")
  14.      //定义笔样式
  15.      pen.fillStyle="#99cc33"
  16.      pen.fill()
  17.      //绘制矩形,以填充的方式，当然也有以线条的方式stroke
  18.      pen.fillRect(100,100,200,200)
  19.      //绘制三角形，定义起点
  20.      pen.moveTo(300,300)
  21.      //y轴不变，x轴向右移动100
  22.      pen.lineTo(400,300)
  23.      //x轴不变，y轴向下移动100
  24.      pen.lineTo(300,400)
  25.      //连接回起点
  26.      pen.lineTo(300,300)
  27.      //填充
  28.      pen.fill()
  29.      //绘制圆形
  30.      //开始绘制路径
  31.      pen.beginPath()
  32.      pen.arc(400,100,50,0,Math.PI*2,false)//false为顺时针，true为逆时针
  33.      pen.closePath()
  34.      pen.fill()
  35.      //在画板上加载图片
  36.      //实例化图片对象
  37.      var img = new Image();
  38.      img.src="美女.jpg";
  39.      pen.drawImage(img,0,0,100,100)
  40.      //直接显示图片，执行脚本的流程是等待图片装载完毕之后才会执行下面的操作，如果不想这样的话，我们可以用onload（）函数
  41.      /*
  42.      * img.onload=function(){
  43.      * pen.drawImage(img,0,0,100,600)
  44.      * }*/
  45.  </script>
  46.  </body>
  47.  </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. POJ-2253-Frogger +最短路小变形

    传送门:http://poj.org/problem?id=2253 参考:https://www.cnblogs.com/lienus/p/4273159.html 题意:给出一个无向图,求一条从 ...

  2. HDU2896病毒入侵AC_自动机

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  3. Intel X86 32位CPU内存管理----《Linux内核源码情景分析》笔记（一）

    Intel X86 32位CPU内存管理 在X86系列中,8086和8088是16为处理器,而从80386开始为32为处理器,80286则是该系列从8088到80386,也就是16位处理器到32位处理 ...

  4. js-DOM ～ 04. BOM：浏览器对象模型window. 、定时器、在线用户、祝愿墙、BOM的内置方法内置对象

    multiple. select列表多选 触发事件后调用有参数的函数要先创建一个函数,然后在函数内调用执行函数 Array.from(伪数组):伪数组变为真数组 indexOf():查询字符的索引 a ...

  5. zookeeper的未授权访问漏洞解决

    zookeeper的基本情况 zookeeper是分布式协同管理工具,常用来管理系统配置信息,提供分布式协同服务.zookeeper官网下载软件包,bin目录下有客户端脚本和服务端脚本.另外还有个工具 ...

  6. 致初学者（二）： HDU 2014~ 2032题解

    下面继续给出HDU 2014~2032的AC程序,供大家参考.2014~2032这19道题就被归结为“C语言程序设计练习(三) ”~“C语言程序设计练习(五) ”. HDU 2014:青年歌手大奖赛_ ...

  7. 阿里云CentOS7.3服务器通过Docker安装Nginx

    前言 小编环境: 阿里云CentOS7.3服务器 docker 下面分享一次小编在自己的阿里云CentOS7.3服务器上使用Docker来安装Nginx的一次全过程 温馨小提示: 如果只是希望单纯使用 ...

  8. activity的隐式和显式启动

    显式Intent(Explicit intent):通过指定Intent组件名称来实现的,它一般用在知道目标组件名称的前提下,一般是在相同的应用程序内部实现的. 隐式Intent(Implicit i ...

  9. 卷积层后连接LSTM层的报错（InvalidArgumentError (see above for traceback): Incompatible shapes: [128] vs. [384]）

    三通道编译通过但无法训练 报错 InvalidArgumentError (see above for traceback): Incompatible shapes: [128] vs. [384] ...

  10. C# https证书通信Post/Get（解决做ssl通道时遇到“请求被中止: 未能创建 SSL/TLS 安全通道”问题）

    public static string HttpPost(string url, string param = null) { HttpWebRequest request; //如果是发送HTTP ...