html5中新特性

最新推荐文章于 2022-08-30 15:10:12 发布

ranchocai

最新推荐文章于 2022-08-30 15:10:12 发布

阅读量494

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/ranchonono/article/details/56684274

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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

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

video：（IE8不支持）

video 元素支持三种视频格式：
Ogg：Firefox、Opera、Chrome
MPEG 4：IE、Chrome、Safari
WebM：Firefox、Opera、Chrome

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
或者
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
control 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
video 元素允许多个 source 元素。确保所有浏览器都可播放放。source 元素可以链接不同的视频文件。

audio：（IE8不支持）

支持三种格式：
Ogg：Firefox、Opera、Chrome
MP3：IE、Chrome、Safari
wav：Firefox、Opera、Safari

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
或
<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>

拖放（Drag 和 drop）

浏览器支持：IE9、Firefox、Opera12、Chrome、 Safari5。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
<!--补充解释： event.preventDefault() 方法：阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交），参数是event -->
</body>
</html>

ranchocai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5中新特性

HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、searchvideo：（IE8不支持）video 元素支持三种视频格式：Ogg：
复制链接

扫一扫