html媒体标签

一、html图片标签

<img />

相关属性:src:图片的相对路径或图片网址        width:图片的宽度     height:图片的高度

title:当鼠标放到图片上时的提示语    alt:当图片无法显示的时候提示信息

usemap:html5新增属性,图片映射,带有可点击区域

<img src="img1.jpg" title="这是一张图片" alt="显示" width="320" height="180"  usemap="#img1"/>
<map name="img1">
    <area shape="rect" coords="20,30,80,80" href=" / >
    <area shape="circle" coords="50,60,10" href="http://www.baidu.com/" / >
    <area shape="poly" coords="20,30,80,80,60,50" href="http://www.baidu.com/" / >
</map>

shape属性的值有三个分别是:rect(矩形),circle(圆形),href(链接地址)

coords属性表示坐标点

当shape="rect"  coords的值表示x1,y1,x2,y2  表示矩形的两个点自动闭合

当shape="circle"  coords的值表示x1,y1,r  x1,y1表示圆点的坐标,r表示元的半径

当shape="poly"  coords的值表示x1,y1,x2,y2,x3,y3...  表示多边形的顶点坐标,自动闭合

二、html的音频标签

1)<bgsound src=""/>目前仅支持IE浏览器

loop  指定循环次数,loop=-1时无限循环

volumn 指定音量   -1000-0  0最大

<embed src=""></embed>  目前仅支持IE浏览器

hidden  no(面板显示)  true(面板隐藏)

loop   循环次数   loop=‘-1‘时无限循环

插入视频时只支持MP4和wmv格式的视频

HTML提供了音频和视频的标签

<audio src="">您的浏览器暂不支持该标签,请升级浏览器</audio>

src:音频文件路径   controls="controls"  面板显示

autoplay 自动播放

loop  该属性出现时循环播放

<audio controls="controls" autoplay loop>
    <source src="*.ogg" type="audio/ogg" />
    <source src="*.mp3" type="audio/mpeg"/>
</audio>

<video src="">您的浏览器暂不支持该视频标签,请升级浏览器</video>

src  视频文件路径    autoplay   自动播放

loop 循环播放      controls   控制面板显示

poster  在浏览器不支持此视频标签的时候显示一张图片

<video autoplay controls="controls" loop poster="*.jpg">
    <source src="*.ogg" type="video/ogg" />
    <source src="*.mp4" type="video/mp4" />
</video>
时间: 2024-10-13 20:35:03

html媒体标签的相关文章

实体标签,媒体标签,飘动标签

1.实体标签:当有特殊含义的字符要显示在网页中,就绪要使用实体标签了. 常见的实体标签: 空格      小于号      < 大于号      > &符号       &      当&后边正好是gt时类似情况下可以用到 版权         © 商标         ® 2.媒体标签 <emble src="所选文件名" hidden=“true”></embed> 音乐插件是浏览器自己实现的,所以存在兼容问题. hidd

媒体标签

<!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"> <head> <meta http-equiv="Content-

实体字符,媒体标签,元素飘动标签,超链接标签

一)实体字符 一些特别的字符会被html认为是关键字,从而在页面无法显示出来,这些特殊的字符我们要用实体字符里代替,这样就能在页面显示出来了: 常用的实体字符: 空格   小于号 < 大于号 > 人民币 ¥: 版权所有 © 注册的商标 ® 在html中,这些字符我们就用实体字符来代替: <body bgcolor="#80FFFF"> 我们即将要学习 <a>"标签"<br/> 这件毛衣的价格是:¥180 <br/

html5 新增媒体标签详解 &lt;audio&gt;音频 &lt;vedio&gt; 视频 &lt;source&gt; &lt;canvas&gt; 标记定义图片&lt;embed&gt; 标记定义外部可交互内容或者插件 标记定义图片媒体资源

html5 变得更加简洁易用,新增了不少结构标签 比如<article> 标记一篇文章   <header> 定义头部 <footer> 定义底部  <nav> 定义导航  <section> 定义一个区域  <aside> 定义侧边栏 <hgroup> 标记定义文件夹一个区块的相关信息 同时也新增了 <audio><vedio><source>  下面我们就来详细的讲解一下这三个媒体标

07-多媒体标签

video标签 作用: 播放视频 格式1: <video src=""> </video> video标签的属性 src: 告诉video标签需要播放的视频地址 autoplay: 告诉video标签是否需要自动播放视频 controls: 告诉video标签是否需要显示控制条 poster: 告诉video标签视频没有播放之前显示的占位图片 loop: 告诉video标签循环播放视频. 一般用于做广告视频 preload: 告诉video标签预加载视频, 但是

html5新增标签

一.语义化标签 1.没有特殊样式盒模型干净的标签 <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <footer></footer>页脚  页面的底部 或者 版块底部 <hgroup></hgroup> 页面上的一个标题组合 一个标题和一个子标题,或者标语的组合 <hgroup> <h1>妙味课堂</h1> <h2>带您进入富有人情味的IT培训&

WEB前端开发学习----8. Html5一些新增标签

先看一张图 明显看出Html5的页面布局方式要比html4.0  div+css传统布局模式简洁许多,同时对搜索引擎更加友好.语义化标签的好处就不多说了. 说几个有意思的新增标签: <meter></meter> 显示一个测量计,可用于温度,气压等 meter演示 <progress><progress/> 显示一个进度条,配合js可以显示动态加载效果.用于加载进度,下载进度等. progress演示 <details></details&

html5新增及删除标签

一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签,之前都是用div实现的,为了语义化,html5从div派生出很多新的标签.这些新增的结构标签有助于将文档分成几个逻辑部分.如下: a.section标签 表示页面中的一个独立内容区块,里面有自己的大纲结构,比如章节,页眉,页脚或页面的其他部分.就是说section可以包含h1.h2...h6标签,表

html(三) -- 常用功能标签

媒体标签 <embed></embed> 属性:        hidden : 设置隐藏插件是否隐藏.        src :用于指定音乐的路径 超链接标签 <a></a> 属性: href  : 用于指定链接的资源.常用协议:file:. mailTo:. http:      target: 设置打开新资源的目标.属性对应的值:_Blank 在独立的窗口上打开新资源   _self 在当前窗口打开新资源. a标签的原理:    1. a标签的href