HTML5的介绍

、什么是 HTML5？

HTML5 是最新的 HTML 标准；
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件；
HTML5 拥有新的语义、图形以及多媒体元素；
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建；
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行；

二、HTML5的一些新特性

用于绘画的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
对本地离线存储的更好的支持；
新的特殊内容元素，比如article、footer、header、nav、section；
新的表单控件，比如 calendar、date、time、email、url、search；

三、video 元素

<video> 元素提供了播放、暂停和音量控件来控制视频；
<video> 元素也提供了 width 和 height 属性控制视频的尺寸；
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的；

video 元素的三种视频格式：

Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件；
MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件；
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；

video 元素的属性：

src：要播放的视频的 URL；
width：设置视频播放器的宽度；
height：设置视频播放器的高度；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件，比如播放按钮；
loop：循环播放；
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

video 元素的方法：

pause()：暂停当前播放的视频；
play()：开始播放视频；
load()：重新加载视频元素；
canPlayType()：检测浏览器是否能播放指定的视频类型；
addTextTrack()：向音频/视频添加新的文本轨道；

四、audio元素

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素；
<audio>元素能够播放声音文件或者音频流；

audio元素的三种音频格式：

MP3：适用于Internet Explorer、Chrome、Safari 等浏览器；
Wav：适用于Firefox、Opera等浏览器；
Ogg：适用于Firefox、IE9、Chrome 浏览器；

audio元素的属性：

src：要播放的音频的 URL；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件；
loop：循环播放；
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

audio元素的方法：

pause()：暂停当前播放的音频；
play()：开始播放音频；
load()：重新加载音频；

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通过 JavaScript 在网页上绘制图像，元素本身并没有绘制能力，它只是图形容器，必须使用脚本来绘制图形；
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；
创建一个画布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新属性有：

height：设置 canvas 的高度；
width：设置 canvas 的宽度；

六、绘制三角形

getElementById()：可返回对拥有指定 ID 的第一个对象的引用；

getContext()：返回一个用于在画布上绘图的环境，2d表示二维绘图；

beginPath()：开始一条路径，或重置当前的路径；

moveTo()：把路径移动到画布中的指定点，不创建线条。

lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）；

closePath()：创建从当前点到开始点的路径；

strokeStyle属性：设置或返回用于笔触的颜色、渐变或模式；

stroke()：会实际地绘制出路径；

fillStyle属性：设置或返回用于填充绘画的颜色、渐变或模式；

fill()：填充当前的图像（路径），默认颜色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或闭合 需要先闭合路径才能画
cxt.strokeStyle="red";
cxt.stroke();
//实心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示图

图1

七、使用Canvas绘制一个空心圆

arc()：创建弧或曲线（用于创建圆或部分圆）；

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas") 
 var ctx=can.getContext("2d"); //创建context对象
 ctx.beginPath();//标志开始一个路径
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中绘制圆形
 ctx.stroke()
 </script>

演示图

图2

八、绘制一个实心圆

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d"); 
 ctx.beginPath();
 ctx.arc(100,100,50,0,2*Math.PI);
 ctx.fillStyle="#deffff";
 ctx.fill();
 ctx.strokeStyle="red"
 ctx.stroke();
 </script>

演示图

图3

九、绘制一个空心矩形

strokeRect()：绘制矩形（不填色），笔触的默认颜色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas"); //获得画板数据
 var ctx=can.getContext('2d'); //获得笔刷
 ctx.strokeStyle="blue"; //设置线条颜色
 ctx.strokeRect(100,100,100,100); //线条画矩形
 </script>

演示图

图4

十、绘制一个实心的矩形

fillRect()：绘制“已填色”的矩形，默认的填充颜色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//获得画板数据
var ctx=can.getContext('2d'); //获得笔刷
 ctx.strokeStyle="blue"; //设置线条颜色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//线条画矩形
 </script>

演示图

图5

?HTML5被看做是Web前端开发的最佳编程语言，具有多设备、跨平台、即时更新等优势。更重要的是HTML5入门简单，就业前景广、薪资福利高，这促使越来越多的人转行学习HTML5。学习要一步一个脚印，下面就来给初学者介绍一下常见的HTML5开发工具有哪些。

1、Sublime Text

Sublime Text 是一个跨平台的代码编辑器，同时支持Windows、Linux、Mac OS X等操作系统，也是HTML和散文先进的文本编辑器。Sublime Text具有漂亮的用户界面和强大的功能，主要功能包括:拼写检查，书签，完整的 Python API ，Goto 功能，即时项目切换，多选择，多窗口等等。

2、Dreamweaver

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，拥有可视化编辑界面，支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，初学HTML5的人可以无需编写任何代码就能快速创建Web页面。

3、Adobe Edge

Adobe Edge是一款新型网页互动工具，允许设计师通过HTML5、CSS和Java制作网页动画。Edge的一个重要功能是Web工具包界面，方便确保页面在不同浏览器中的架构一致性。

4、WebStorm

WebStorm是一款Java 开发工具，目前已经被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的Java IDE"等。WebStorm具有的优势是：智能的代码补全、代码格式化、html提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构浏览、代码折叠、包裹或者去掉外围代码。

5、Sencha Touch

Sencha Touch是全球领先的应用程序开发框架，其设计旨在充分利用HTML5、CSS3 和Java 来实现最高级别的功能、灵活性和优化。Sencha Touch 是针对下一代具有触摸屏设备的跨平台框架。

6、DevExtreme

DevExtreme是专为你的移动世界精心准备的，一个跨平台开发的HTML5/JS框架，可以构建iOS、Android、Tizen和Windows Phone 8应用程序，是Visual Studio开发人员开发跨平台移动产品的优选工具。

7、Dojo Foundation Maqetta

Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具，支持在浏览器中查看HTML5界面。用户体验设计师可以通过拖放组装UI样板。

除此之外，还有很多优秀的HTML5开发工具。

你明白了吗？????

tml5是指万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（ HTML）的第五次重大修改，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括新的解析规则增强了灵活性、新属性、淘汰过时的或冗余的属性等。

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对 RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页 APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和 API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

从 Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页 多媒体 特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。

三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

性能与集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过 XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下， CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（ WOFF）也提供了更高的灵活性和控制性。

关于沿革

HTML5提供了一些新的元素和属性，例如

（网站导航块）和

。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如

1、取消了一些过时的 HTML4标记

其中包括纯粹显示效果的标记，如< font>和<center>，它们已经被CSS取代。

HTML5 吸取了 XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用 div。

2、将内容和展示分离

b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。

3、一些全新的表单输入对象

包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

4、全新的，更合理的Tag

多媒体对象将不再全部绑定在 object或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

5、本地数据库

这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的丰富动画。

6、Canvas 对象

将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

7、浏览器中的真正程序

将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。

8、Html5取代Flash在移动设备的地位。

9、其突出的特点就是强化了web页的表现性,追加了本地数据库,

在线咨询

上一篇：PHP实现页面跳转功能
下一篇：如何制作园林种植公司网站，园林维护企业官网搭建全攻略

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商