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. 牛客-2018多校算法第五场D-集合问题+并查集

    集合问题 题意: 给你a,b和n个数p[i],问你如何分配这n个数给A,B集合,并且满足: 若x在集合A中,则a-x必须也在集合A中. 若x在集合B中,则b-x必须也在集合B中. 思路:并查集操作,自 ...

  2. 深入浅出TypeScript（4）- 使用接口和类型别名

    在TypeScript中,为了可以约束对象定义,提供了两个新的特性,接口和类型别名. TypeScript中的接口 在强类型语言中,都有接口的概念,那么TypeScript中的接口是如何使用的呢? 接 ...

  3. 洛谷 P1980【计数问题】 题解（1）

    鉴于数据最高只有七位数,通过判断数位,逐位判断即可完成本题. (运行很快,打得手疼) //Stand up for the faith!#include<bits/stdc++.h> us ...

  4. 连接池你用对了吗?一次Unexpected end of stream异常的排查

    能收获什么? 更加了解TCP协议 Redis与客户端关闭连接的机制 基于Apache Common连接池的参数调优 Linux网络抓包 情况简介 近期迁移了部分应用到K8s中,业务开发人员反馈说,会发 ...

  5. android中fragment与activity之间通信原理以及例子

    参考文章 http://blog.csdn.net/guozh/article/details/25327685#comments Activity和fragment通信方式一般有3种方法 1.在fr ...

  6. android 中Application的作用

    转自:lieren666 博客地址:http://blog.csdn.net/lieren666/article/details/7598288 What is Application Applica ...

  7. Docker Compose部署项目到容器-基于Tomcat和mysql的项目yml配置文件代码

    场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  8. hbase shell命令及Java接口介绍

    一. shell命令 1. 进入hbase命令行  ./hbase shell 2. 显示hbase中的表  list3. 创建user表,包含info.data两个列族create 'user', ...

  9. 从零开始入门 K8s| 阿里技术专家详解 K8s 核心概念

    作者| 阿里巴巴资深技术专家.CNCF 9个 TCO 之一 李响 一.什么是 Kubernetes Kubernetes,从官方网站上可以看到,它是一个工业级的容器编排平台.Kubernetes 这个 ...

  10. scala函数式编程（二） scala基础语法介绍

    上次我们介绍了函数式编程的好处,并使用scala写了一个小小的例子帮助大家理解,从这里开始我将真正开始介绍scala编程的一些内容. 这里会先重点介绍scala的一些语法.当然,这里是假设你有一些ja ...