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. 2014 北京区域赛 dp

    Matt has N friends. They are playing a game together. Each of Matt’s friends has a magic number. In ...

  2. Toad客户端连接Oracle数据库报错 ORA-12170：TNS：连接超时

    Oracle 客户端连接Oracle数据库报错   ORA-12170:TNS:连接超时  排错步骤: 1. 查看网络是否畅通:  打开cmd,ping数据库IP 2. 查看端口是否畅通: 打开cmd ...

  3. 宝塔Linux面板命令

    安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/inst ...

  4. 四大组件初始之Broadcast

    在进行应用设计时,需要获取很多环境参数,像电量,音量,亮度,网络等.相比较每次去询问android这些信息改变了吗.让Android告诉我们,这些信息改变了更加合理.只要这些信息改变,Android通 ...

  5. 【学习笔记】第一章 python安全开发简介

    1.1为什么黑客喜欢用python? python为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数据库.文本等大量内容,被形象的称为“”内置电池“”,用python开发,许多功能不必从零 ...

  6. 基于python的selenium两种文件上传操作

    方法一.input标签上传     如果是input标签,可以直接输入路径,那么可以直接调用send_keys输入路径,这里不做过多赘述,前文有相关操作方法. 方法二.非input标签上传 这种上传方 ...

  7. ACM团队招新赛题解

    标程代码全部为C语言编写.代码中的#if LOCAL_ 至#endif为本地一些调试内容,可以忽略. Xenny的A+B(1)[容易][签到] 签到题,做不出的话可能你有点不太适合ACM了. Xenn ...

  8. Python获取列表中的最后一个或者倒数第几个的方案

    print(members[3]) 灵魂所在“ - (负号 )” 我们先来创建一个列表,和php中的数组一样. members = ['张三','李四','王五','芳芳','小明','小王'] 按照 ...

  9. Docker学习之volume

    提供独立于容器之外的持久化存储 容器中的数据会随着容器的消失而消失,为了解决这个问题,产生了数据卷volume. 例子,比如说mysql容器,msyql中的数据应该是持久化的,故应该存储在volume ...

  10. php 两种获取分类树的方法

    php 两种获取分类树的方法 1. /** * 获取分类树 * @param array $array 数据源 * @param int $pid 父级ID * @param int $level 分 ...