您的位置：首页 > Web前端 > HTML5

HTML5学习（一）

2016-03-07 23:52 633 查看

HTML5是什么？

html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：HTML 5 ≈ HTML+CSS 3+JS+API。

HTML5新特性

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

ps:

1.在文档类型声明上,html5比较方便简洁。

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
html5:
<!doctype html>


用于绘画的 canvas 元素

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

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

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

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

HTML5的新特性解析

1.video

< video > 标签定义视频，比如电影片段或其他视频流。

当前，video 元素支持三种视频格式：

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件



<!DOCTYPE html>
<html>
<body>

<div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="./html5/mov_bbb.mp4" type="video/mp4"/>
<source src="./html5/mov_bbb.ogg" type="video/ogg"/>
Your browser does not support HTML5 video.
</video>
</div>

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause(){
if (myVideo.paused) //paused为属性
myVideo.play(); //play()事件
else
myVideo.pause(); //pause()事件
}

function makeBig(){
myVideo.width=560;
}

function makeSmall(){
myVideo.width=320;
}

function makeNormal(){
myVideo.width=420;
}
</script>
</body>
</html>




2.audio

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。control 属性供添加播放、暂停和音量控件。< audio> 与 < /audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。


标签的属性" title="">

自定义控件：

浏览器在显示< video>元素时，会添加一些与浏览器样式统一的标准播放控件。想自定义这些控件的外观或添加新控件，可以通过DOM属性来实现，主要包括：

currentTime:返回当前播放的位置，以秒表示；
duration：返回媒体的总时长，以秒表示，对于流媒体返回无穷大；
paused:表示媒体是否处于暂停状态；
play:在媒体播放开始时发生；
pause：在媒体暂停时发生；
loadeddata:在媒体可以从当前播放位置开始播放时发生；
ended:在媒体已播放完成而停止时发生。


注意：不管创建什么控件，别忘了在< video>元素中添加control属性：

<video src="movie.ogv" control>


给个源码参考《JavaScript DOM编程艺术》：

//movie.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>movie</title>
<link rel="stylesheet" type="text/css" href="play.css">
</head>
<body>
<div class="video-wrapper">
<video id="movie" controls>
<source src="movie.mp4"/>
<source src="movie.ogg" type='video/ogg; codecs="theora,vorbis"'/>
<p>download movie as
<a href="movie.mp4">mp4</a>,
or<a href="movie.ogg">ogg</a>
</p>
</video>
</div>
<script type="player.js"></script>
</body>
</html>

//play.css
.video-wrapper{
overflow:hidden;
}

.video-wrappper .controls{
position: absolute;
height: 30px;
width: 30px;
margin: auto;
background: rgba(0,0,0,0.5);
}

.video-wrapper button{
display: block;
width: 100%;
height: 100%;
border: 0;
cursor: pointer;
font-size: 17px;
color: #fff;
background: transparent;
}

.video-wrapper button[paused]{
font-size: 12px;
}

//player.js
function createVideoControls(){
//首先找到页面的video元素，对其分别应用addControls函数
var vids=document.getElementByTagName('video');
for(var i=0;i<vids.length;i++){
addControls(vids[i]);
}
}

function addControls(vid){
//在addControls函数中，删除了video元素原来的Controls属性去掉其内置的空间，添加了几个DOM对象充当play/pause按钮，并把他们添加到video元素的子元素。
vid.removeAttribute('controls');
vid.height=vid.videoHeight;
vid.width=vid.videoWidth;
vid.parentNode.style.height=vid.videoHeight+'px';
vid.parentNode.style.width=vid.videoWidth+'px';

var controls=document.createElement('div');
controls.setAttribute('class','controls');

var play=document.createElement('button');
play.setAttribute('title','play');
play.innerHTML='►';

controls.appendChild(play);
vid.parentNode.insertBefore(controls,vid);
//play按钮添加一个click事件，以便单击它播放影片：
play.onclick=function(){
if(vid.ended){
vid.currentTime=0;
}
if(vid.paused){
vid.play();
}else{
vid.pause();
}
};
//利用play、pause和ended事件来修改play按钮的状态，并在影片未暂停情况下显示pause按钮。
vids.addEventListener('play',function(){
//addEventListener
play.innerHTML='▐▐';
play.setAttribute('paused',true);
},false);

vid.addEventListener('pause',function(){
play.setAttribute('paused');
play.innerHTML='►';
},false);

vid.addEventListener('ended',function(){
vid.pause();
},false);
}

window.onload=function(){
createVideoControls();
}


3.拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

1）首先需要设置图像可拖放：

为了使元素可拖动，把 draggable 属性设置为 true。

<img draggable="true" />


2)拖动什么？ondragstart()和setData()

ondragstart属性调用了一个函数，drag(event)它规定了被拖动数据。dataTransfer.setData()发股份设置被拖数据的数据类型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}


3）放在哪里？ondragover()

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法.

4）进行放置ondrop

当放置被拖数据时，会发生 drop 事件。

4.canvas

HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一个像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1)创建canvas元素

规定元素的id、宽度和高度：

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


2)通过JavaScript来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
//通过id来寻找canvas元素；
var cxt=c.getContext("2d");
//创建context对象，getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";//填充颜色为红色
cxt.fillRect(0,0,150,75);//fillRect方法规定了形状、位置和尺寸。
//在画布上绘制150*75的矩形，从左上角开始（0,0）
</script>


5.HTML5 内联 SVG

html5支持内联svg

SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

1)svg是什么

svg指的是可伸缩矢量图形（scale vector graphics）

svg用于定义用于网络的基于矢量的图形

svg使用XML格式定义图形

svg是可伸缩的

svg图像可在任何的分辨率下被高质量的打印

svg可在图像质量不下降的情况下被放大

2）svg的优点

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：SVG 图像可通过文本编辑器来创建和修改；SVG 图像可被搜索、索引、脚本化或压缩；SVG 是可伸缩的；SVG 图像可在任何的分辨率下被高质量地打印；SVG 可在图像质量不下降的情况下被放大。

svg文件可以通过下列标签嵌入到html文档中：<embed>、<object>或者<iframe>.

1.使用<embed>标签
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

2.使用<object>标签
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

3.使用<iframe>标签
<iframe src="rect.svg" width="300" height="100">
</iframe>


svg主要有svg实现形状、svg滤镜和svg渐变：

详情请看：http://www.w3school.com.cn/svg/svg_grad_linear.asp

总结：Canvas和SVG的比较

首先svg是一种使用XML描述2D图形的语言。由于急于XML，因此svg DOM的每个元素可用。在svg中每个图形均被视为对象。

canvas是通过JavaScript来绘制2D图像。canvas是逐像素进行渲染的，如果一旦被绘制完成就不会继续得到浏览器的关注，如果其位置发生变化，则整个场景需要重新绘制。

比较：

CanvasSVG
依赖分辨率不依赖分辨率
不支持时间处理器支持时间处理器
弱的文本渲染能力适合带有大型渲染区域的应用程序（谷歌地图）
以.png等格式保存结果图像复杂度高会减慢渲染速度
适合图像密集型游戏不适合游戏应用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航