整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

什么是 HTML5?

TML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 简单易学。

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素，比如 article、footer、header、nav、section

  • 新的表单控件，比如 calendar、date、time、email、url、search

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单

下面是一个简单的HTML5文档：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文档标题</title></head><body>文档内容......</body></html>

HTML5 的改进

  • 新元素

  • 新属性

  • 完全支持 CSS3

  • Video 和 Audio

  • 2D/3D 制图

  • 本地存储

  • 本地 SQL 数据

  • Web 应用

HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。

  • HTML5 <video>

  • HTML5 <audio>

HTML5 应用

使用 HTML5 你可以简单地开发应用

  • 本地数据存储

  • 访问本地文件

  • 本地 SQL 数据

  • 缓存引用

  • Javascript 工作者

  • XHTMLHttpRequest 2

HTML5 图形

使用 HTML5 你可以简单的绘制图形:

  • 使用 <canvas> 元素。

  • 使用内联 SVG。

  • 使用 CSS3 2D 转换、CSS3 3D 转换。

HTML5 使用 CSS3

  • 新选择器

  • 新属性

  • 动画

  • 2D/3D 转换

  • 圆角

  • 阴影效果

  • 可下载的字体

了解更多CSS3知识请查看本站的 CSS3 教程。

HTML5 表单

新表单元素, 新属性，新输入类型，自动验证。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>

  • <applet>

  • <basefont>

  • <big>

  • <center>

  • <dir>

  • <font>

  • <frame>

  • <frameset>

  • <noframes>

  • <strike>

TML5是HTML的最新版本，HTML又称为超文本语言。如今几乎所有的智能手机和平板电脑都能支持HTML5。HTML5培训认为它的主要目的是用来开发更优秀、更高效的Web应用，它是在开放Web标准下开发的API和规范的。对于iOS和Android设备，都能很好的支持HTML5，因为它们运行的浏览器Safari、Chrome都基于WebKit，WebKit对HTML5有相当出色的支持。

Web应用

Web应用是指与桌面应用相似的web应用（Word、IE、Web浏览器），简而言之，Web应用就是不直接在计算机上打开，而是通过Web浏览器来运行。使用HTML5为iOS和Android设计Web页面的好处是在未来的设备上可以继续使用。

HTML5中的新标签

<article>-文档或站点的一个独立部分

<aside>-页面或站点主题之外的内容

<figcaption>-figure元素的标题

<figure>-独立于文本流之外的一段流内容（图形、图表）

<footer>-文档或章节的页脚

<header>-文档或标题的页眉

<hgroup>-标题组

<nav>-导航

<section>-章节部分

以下是一小段代码：

在许多Web设计中，<div id = "header">，在HTML5中将写成<header>，还有一些其他不同变化。

HTML5新的多媒体标签

<audio>-内嵌音频文件

<canvas>-内嵌动态图形

<embed>-增添其他不包含特定H5元素的技术

<source>-内嵌音频及视频的源文件

<track>-内嵌音频及视频的辅助多媒体轨道

<video>-内嵌视频文件

HTML5 的新属性

onabort-操作终止时触发

onbeforeonload、onbeforeonunload、onunload-在某一元素记载或卸载之前或同时触发

oncontextmenu-打开菜单时触发

ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-发生拖拽时触发

onerror及onmessage-错误或弹出信息时触发

onscroll-用户滚动浏览器滚动条时触发

onresize-调整元素大小时触发

HTML5拥有与视频、音频、Web应用程序、编辑页面内容、拖拽以及展示浏览器历史等功能相关的API，另外H5开放Web还提供于地理定位、Web存储及离线Web应用程序的API，这些都非常适合在移动设备上使用。

用CSS3设计移动页面样式

CSS（层叠样式表），是移动Web开发中的一个重要组成部分，CSS用于定义HTML文档的外观，Web页面显示或特定移动设备来定制HTML样式。创建CSS样式表，CSS由附加了样式属性的一个或者多个选择器组成。例如在更改段落的文本颜色时，可以写为：

p {

color：red；

}

p为选择器，样式属性为color：red。如果要加入第二个选择器，需要逗号隔开

p， .redText }

color: red

}

样式表附加到Web页面的方法：

1、内联在标签中

2、内嵌于HTML开头

3、放在一个独立文档作为样式表

内联：

将单一段落的文本颜色定位为红色

<p : red;">

内联的缺点是只能定义所在标签的样式，如果要讲所有段落都定义为红色时，需要就爱那个样式属性添加在每个段落。

内嵌：

内嵌样式表位于文档的<head>标签中，使用<style>标签，下面是讲所有段落文本设置为红色

效果如下：

内嵌样式与内联样式一样，只能影响所处页面的样式。如果我们需要将同一样式作用于其他Web页面，需要将它们分别粘贴到每个页面，这个时候独立的样式表的好处就体现出来了。

外联样式表

创建外联样式表的步骤：

1.打开一个新文档

2.编写样式表，但是要去掉<style>标签

3. 讲该文件保存为扩展名为.css的样式表文件,例如 ：style.css

下面的代码是将段落定义为红色并包含其他样式的样式表

ps：完成样式表，要记得讲它附加到Web页面中，在文档开头加一个指向样式表的<link>标签。代码如下：

<link href = "styles.css" rel="stylesheet">

ps:外联样式表可以提高网站加载速度，如果将所有样式放在同一个文档中的外联样式表

学习无止境，郑州HTML5培训哪里好，快来蓝鸥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


在线咨询
上一篇：16个超牛逼的HTML5和JavaScript特效
下一篇：css3制作图形大全：简单几句代码画出漂亮的图形，一起来看看吧~

您的项目需求

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

推荐阅读
友情链接 潮南区 延庆县 东川区 米易县 大方县 泗阳县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服