媒体元素

HTML5新增了两个与媒体相关的标签<audio>、<video>，可以在网页中嵌入跨浏览器的音频和视频内容。

HTML系列文章目录

HTML网页设计：一、HTML的基本结构
HTML网页设计：二、网页的基本标签
HTML网页设计：三、图像标签之＜img＞标签
HTML网页设计：四、超链接
HTML网页设计：五、行内元素和块元素
HTML网页设计：六、列表
HTML网页设计：七、表格
HTML网页设计：八、媒体元素
HTML网页设计：九、网页的简单布局
HTML网页设计：十、iframe内联框架
HTML网页设计：十一、表单

文章目录

媒体元素
- HTML系列文章目录
- 1.音频
- 2.视频
- 3.兼容性

1.音频

其基本格式如下：

<audio  src="音频文件">在浏览器不支持时显示的文本</audio>

其常用属性如下：

controls属性: 控制控件的显示，取值只能为controls。
autoplay属性: 布尔属性，自动播放。（可以不用书写属性值）
muted属性：布尔属性，静音播放。（可以不用书写属性值）
loop属性: 布尔属性，循环播放。（可以不用书写属性值）

代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音频元素学习</title>
</head>
<body><audio src="./audio/许嵩 - 最佳歌手 [mqms2].mp3" controls autoplay loop>最佳歌手-许嵩</audio>
</body>
</html>

网页显示如下：

2.视频

其基本格式如下：

<video src="视频文件">在浏览器不支持时显示的文本</video>

常用属性与音频一致。

代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>视频元素学习</title>
</head>
<body><video src="./video/许嵩 - 雅俗共赏.mp4" controls autoplay muted width="400px" height="300px">雅俗共赏-许嵩</video>
</body>
</html>

网页显示如下：

3.兼容性

旧版本的浏览器不支持这两个元素。
不同的浏览器支持的音、视频格式可能不一致。

HTML网页设计：八、媒体元素相关推荐

论文计算机动态网页的制作,计算机动态网页设计中多元素应用网页设计论文（范文1）...
<计算机动态网页设计中多元素应用[网页设计论文].doc>由会员分享,可免费在线阅读全文,更多与<计算机动态网页设计中多元素应用[网页设计论文]>相关文档资源请在帮帮文库(ww ...
html设计网页板块,网页设计
1.网站的分类 HTML类(80%) 1.png 优点:信息量大,板块划分规整,非常便于后期删除,修改,更新等维护. 缺点:不动感,视觉冲击力不强. HTML5.CSS3.JS.JQ(15%) 2.p ...
优秀网页设计的七条基本准则
互联网何时诞生?专家对此说法不一,30多年前,互联网的应用非常有限,仅仅一小部分人能够接触到这种"先进"的技术.然后经历了30多年的指数级发展,它取得了梦幻般的成功.十年前,互联网 ...
2012年网页设计趋势
每年的网页设计趋势都会有所改变,跟时装界一样,或者说世间万物亦是如此.作为网页设计师,你必须时刻关注业界的发展和变化,随时作出应对的准备.2012年网页设计的趋势将会是怎样的呢?一起来看看flashu ...
HTML网页设计：五、行内元素和块元素
行内元素和块元素 HTML系列文章目录 HTML网页设计:一.HTML的基本结构 HTML网页设计:二.网页的基本标签 HTML网页设计:三.图像标签之<img>标签 HTML网页设计:四 ...
网页设计排版中哪些元素最重要？
有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上.在我看来,内容质量的好坏确实是能够决定你浏览量多少的关键因素,但事实上,页 ...
网页设计排版中哪些元素比较重要？
有一些网页设计新手会认为,在设计网页的时候重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上.在合肥学码思小编看来,内容质量的好坏确实是能够决定你浏览量多少的关键因素,但 ...
【Google】【内部样式表】【外部样式表：听力地点方向题】【设置字体间距】【多类、子元素选择器】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】CSS基础——实验题1-6
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录实验1 1.题目 2.代码 3.网页运行效果实验2 1.题目 2.代码 3 ...
html5基础（网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单）
网页的基本信息 1.DOCTYPE声明文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档第一 ...
圆形英文在html中,圆形元素在网页设计中的巧妙运用
原标题:圆形元素在网页设计中的巧妙运用圆形元素在网页设计中的巧妙运用圆,是一个优雅的形状,但在优雅的同时似乎还带着一种神秘的格调.也正因为圆形元素拥有这种与生俱来的特性,所以在与其他元素合作时,一 ...

HTML网页设计：八、媒体元素

媒体元素

HTML系列文章目录

文章目录

1.音频

2.视频

3.兼容性

HTML网页设计：八、媒体元素相关推荐

最新文章

热门文章