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. 漫谈Spring Security 在Spring Boot 2.x endpoints中的应用（一）

    Spring Boot 2.x极大简化了默认的安全配置,并不是说有很多安全相关的配置,现在你只需要提供一个WebSecurityConfigurerAdapter继承类这样一个简单的操作,Spring ...

  2. Django系列---使用MySql数据库

    目录 1. 创建数据库 1.1. 使用utf8mb4编码 1.1.1. 确定mysql的配置文件 1.1.2. 修改配置文件 1.1.3. 重启数据库服务,检查相关字段 1.1.4. 新建数据库 1. ...

  3. 小白的消费为何被迫升级？-java数据类型的转换

    背景 小白最近有点烦恼,原因也很简单,不知道为何?小白的消费不知不觉被迫升级了,请看费用清单: for (byte b = Byte.MIN_VALUE; b < Byte.MAX_VALUE; ...

  4. (转载)非常完善的Log4net配置详细说明

    一.前言 在项目中,对项目的日志收集是非常重要的,这里我就说说代码的异常日志收集.收集异常日志,有很多第三方成熟的框架,我这里就介绍一下我常用的Log4net. Log4Net介绍 Log4net 是 ...

  5. ASP.NET Core 2.2 : 二十一. 内容协商与自定义IActionResult和格式化类

    上一章的结尾留下了一个问题:同样是ObjectResult,在执行的时候又是如何被转换成string和JSON两种格式的呢? 本章来解答这个问题,这里涉及到一个名词:“内容协商”.除了这个,本章将通过 ...

  6. Spring Boot 配置文件和命令行配置

    Spring Boot 属于约定大于配置,就是说 Spring Boot 推荐不做配置,很多都是默认配置,但如果想要配置系统,使得软件符合业务定义,Spring Boot 可以通过多种方式进行配置. ...

  7. java动态代理之CGLIB实现

    动态代理(CGlib 与连接池的案例) Cglib代理: 针对类来实现代理,对指定目标 产生一个子类 通过方法拦截技术拦截所有父类方法的调用. 我们要使用cglib代理必须引入 cglib的jar包 ...

  8. Python3 爬虫之 Scrapy 核心功能实现（二）

    博客地址:http://www.moonxy.com 基于 Python 3.6.2 的 Scrapy 爬虫框架使用,Scrapy 的搭建过程请参照本人的另一篇博客:Python3 爬虫之 Scrap ...

  9. 混合事务分析处理“HTAP”的技术要点分析

    HTAP是近些年来比较火的一个概念,本文将聊聊HTAP的前世今生及技术特点. 一.数据应用类别 根据数据的使用特征,可简单做如下划分.在选择技术平台之前,我们需要做好这样的定位. 1.1 OLTP 联 ...

  10. elasticsearch 增删改查底层原理

    elasticsearch专栏:https://www.cnblogs.com/hello-shf/category/1550315.html 一.预备知识 在对document的curd进行深度分析 ...