nykek5i 发表于 2024-10-3 11:13:27

【HTML 教程】多媒介标签

<img src="https://mmbiz.qpic.cn/mmbiz_jpg/eXCSRjyNYcZicHX2GeiaDX7s6dicdUJvwu5ZuHDDouTL0NqGyfyb1u0Baia9KGeQDyDKq9vYp0c0bEwrM0XfayorjQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">作者 | 阮一峰</span></strong></span><span style="color: black;">除了图像,网页还<span style="color: black;">能够</span><span style="color: black;">安置</span>视频和音频。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;"><span style="color: black;">1、&lt;video&gt;</span></strong></h2><span style="color: black;">&lt;video&gt;</span><span style="color: black;">标签是一个块级元素,用于<span style="color: black;">安置</span>视频。<span style="color: black;">倘若</span>浏览器支持加载的视频格式,就会<span style="color: black;">表示</span>一个播放器,否则<span style="color: black;">表示</span></span><span style="color: black;">&lt;video&gt;</span><span style="color: black;">内部的子元素。</span><span style="color: black;">&lt;<span style="color: black;">video</span> <span style="color: black;">src</span>=<span style="color: black;">"example.mp4"</span> <span style="color: black;">controls</span>&gt;</span> <span style="color: black;"><span style="color: black;">&lt;<span style="color: black;">p</span>&gt;</span>你的浏览器不支持 HTML5 视频,请下载<span style="color: black;">&lt;<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"example.mp4"</span>&gt;</span>视频文件<span style="color: black;">&lt;/<span style="color: black;">a</span>&gt;</span>。</span><span style="color: black;">&lt;/<span style="color: black;">p</span>&gt;</span><span style="color: black;">&lt;/<span style="color: black;">video</span>&gt;</span><span style="color: black;">上面代码中,<span style="color: black;">倘若</span>浏览器不支持该种格式的视频,就会<span style="color: black;">表示</span></span><span style="color: black;">&lt;video&gt;</span><span style="color: black;">内部的文字提示。</span><span style="color: black;">&lt;video&gt;</span><span style="color: black;">有以下属性。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">src</span><span style="color: black;">:视频文件的网址。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">controls</span><span style="color: black;">:播放器<span style="color: black;">是不是</span><span style="color: black;">表示</span><span style="color: black;">掌控</span>栏。该属性是布尔属性,<span style="color: black;">不消</span>赋值,只要写上属性名,就<span style="color: black;">暗示</span>打开。<span style="color: black;">倘若</span>不想<span style="color: black;">运用</span>浏览器默认的播放器,而想<span style="color: black;">运用</span>自定义播放器,就不要<span style="color: black;">运用</span>该属性。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">width</span><span style="color: black;">:视频播放器的宽度,单位像素。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">height</span><span style="color: black;">:视频播放器的高度,单位像素。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">autoplay</span><span style="color: black;">:视频<span style="color: black;">是不是</span>自动播放,该属性为布尔属性。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">loop</span><span style="color: black;">:视频<span style="color: black;">是不是</span>循环播放,该属性为布尔属性。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">muted</span><span style="color: black;">:<span style="color: black;">是不是</span>默认静音,该属性为布尔属性。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">poster</span><span style="color: black;">:视频播放器的封面<span style="color: black;">照片</span>的 URL。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">preload</span><span style="color: black;">:视频播放之前,<span style="color: black;">是不是</span>缓冲视频文件。这个属性仅适合<span style="color: black;">无</span>设置</span><span style="color: black;">autoplay</span><span style="color: black;">的<span style="color: black;">状况</span>。它有三个值,分别是</span><span style="color: black;">none</span><span style="color: black;">(不缓冲)、</span><span style="color: black;">metadata</span><span style="color: black;">(仅仅缓冲视频文件的元数据)、</span><span style="color: black;">auto</span><span style="color: black;">(<span style="color: black;">能够</span>缓冲<span style="color: black;">全部</span>文件)。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">playsinline</span><span style="color: black;">:iPhone 的 Safari 浏览器播放视频时,会自动全屏,该属性<span style="color: black;">能够</span>禁止这种<span style="color: black;">行径</span>。该属性为布尔属性。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">crossorigin</span><span style="color: black;">:<span style="color: black;">是不是</span>采用跨域的方式加载视频。它<span style="color: black;">能够</span>取两个值,分别是</span><span style="color: black;">anonymous</span><span style="color: black;">(跨域请求时,不发送用户凭证,<span style="color: black;">重点</span>是 Cookie),</span><span style="color: black;">use-credentials</span><span style="color: black;">(跨域时发送用户凭证)。</span></p><span style="color: black;">下面是一个例子。</span><span style="color: black;"><span style="color: black;">&lt;<span style="color: black;">video</span> <span style="color: black;">width</span>=<span style="color: black;">"400"</span> <span style="color: black;">height</span>=<span style="color: black;">"400"</span></span><span style="color: black;"> <span style="color: black;">autoplay</span> <span style="color: black;">loop</span> <span style="color: black;">muted</span></span><span style="color: black;"> <span style="color: black;">poster</span>=<span style="color: black;">"poster.png"</span>&gt;</span></span><span style="color: black;">&lt;/<span style="color: black;">video</span>&gt;</span><span style="color: black;">上面代码中,视频播放器的<span style="color: black;">体积</span>是 400 x 400,会自动播放和循环播放,并且静音,还带有封面图。这是网站首页背景视频的<span style="color: black;">平常</span>写法。</span><span style="color: black;">HTML 标准<span style="color: black;">无</span>规定浏览器需要支持<span style="color: black;">那些</span>视频格式,完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式,<span style="color: black;">能够</span><span style="color: black;">运用</span></span><span style="color: black;">&lt;source&gt;</span><span style="color: black;">标签,<span style="color: black;">安置</span>同一个视频的多种格式。</span><span style="color: black;">&lt;<span style="color: black;">video</span> <span style="color: black;">controls</span>&gt;</span> <span style="color: black;">&lt;<span style="color: black;">source</span> <span style="color: black;">src</span>=<span style="color: black;">"example.mp4"</span> <span style="color: black;">type</span>=<span style="color: black;">"video/mp4"</span>&gt;</span> <span style="color: black;">&lt;<span style="color: black;">source</span> <span style="color: black;">src</span>=<span style="color: black;">"example.webm"</span> <span style="color: black;">type</span>=<span style="color: black;">"video/webm"</span>&gt;</span> <span style="color: black;"><span style="color: black;">&lt;<span style="color: black;">p</span>&gt;</span>你的浏览器不支持 HTML5 视频,请下载<span style="color: black;">&lt;<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"example.mp4"</span>&gt;</span>视频文件<span style="color: black;">&lt;/<span style="color: black;">a</span>&gt;</span>。</span><span style="color: black;">&lt;/<span style="color: black;">p</span>&gt;</span><span style="color: black;">&lt;/<span style="color: black;">video</span>&gt;</span><span style="color: black;">上面代码中,</span><span style="color: black;">&lt;source&gt;</span><span style="color: black;">标签的</span><span style="color: black;">type</span><span style="color: black;">属性的值是视频文件的 MIME 类型,上例指定了两种格式的视频文件:MP4 和 WebM。<span style="color: black;">倘若</span>浏览器支持 MP4,就加载 MP4 格式的视频,<span style="color: black;">再也不</span>往下执行了。<span style="color: black;">倘若</span>不支持 MP4,就<span style="color: black;">检测</span><span style="color: black;">是不是</span>支持 WebM,<span style="color: black;">倘若</span>还是不支持,则<span style="color: black;">表示</span>提示。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;"><span style="color: black;">2、&lt;audio&gt;</span></strong></h2><span style="color: black;">&lt;audio&gt;</span><span style="color: black;">标签是一个块级元素,用于<span style="color: black;">安置</span>音频,用法与</span><span style="color: black;">&lt;video&gt;</span><span style="color: black;">标签基本一致。</span><span style="color: black;">&lt;<span style="color: black;">audio</span> <span style="color: black;">controls</span>&gt;</span> <span style="color: black;">&lt;<span style="color: black;">source</span> <span style="color: black;">src</span>=<span style="color: black;">"foo.mp3"</span> <span style="color: black;">type</span>=<span style="color: black;">"audio/mp3"</span>&gt;</span> <span style="color: black;">&lt;<span style="color: black;">source</span> <span style="color: black;">src</span>=<span style="color: black;">"foo.ogg"</span> <span style="color: black;">type</span>=<span style="color: black;">"audio/ogg"</span>&gt;</span> <span style="color: black;"><span style="color: black;">&lt;<span style="color: black;">p</span>&gt;</span>你的浏览器不支持 HTML5 音频,请直接下载<span style="color: black;">&lt;<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"foo.mp3"</span>&gt;</span>音频文件<span style="color: black;">&lt;/<span style="color: black;">a</span>&gt;</span>。</span><span style="color: black;">&lt;/<span style="color: black;">p</span>&gt;</span><span style="color: black;">&lt;/<span style="color: black;">audio</span>&gt;</span><span style="color: black;">上面代码中,</span><span style="color: black;">&lt;audio&gt;</span><span style="color: black;">标签内部<span style="color: black;">运用</span></span><span style="color: black;">&lt;source&gt;</span><span style="color: black;">标签,指定了两种音频格式:优先<span style="color: black;">运用</span> MP3 格式,<span style="color: black;">倘若</span>浏览器不支持则<span style="color: black;">运用</span> Ogg 格式。<span style="color: black;">倘若</span>浏览器<span style="color: black;">不可</span>播放音频,则<span style="color: black;">供给</span>下载链接。</span><span style="color: black;">&lt;audio&gt;</span><span style="color: black;">标签的属性与</span><span style="color: black;">&lt;video&gt;</span><span style="color: black;">标签类似,参见上一节。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">autoplay</span><span style="color: black;">:<span style="color: black;">是不是</span>自动播放,布尔属性。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">controls</span><span style="color: black;">:<span style="color: black;">是不是</span><span style="color: black;">表示</span>播放工具栏,布尔属性。<span style="color: black;">倘若</span>不设置,浏览器不<span style="color: black;">表示</span>播放界面,<span style="color: black;">一般</span>用于背景音乐。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">crossorigin</span><span style="color: black;">:<span style="color: black;">是不是</span><span style="color: black;">运用</span>跨域方式请求。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">loop</span><span style="color: black;">:<span style="color: black;">是不是</span>循环播放,布尔属性。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">muted</span><span style="color: black;">:<span style="color: black;">是不是</span>静音,布尔属性。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">preload</span><span style="color: black;">:音频文件的缓冲设置。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">src</span><span style="color: black;">:音频文件网址。</span></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;"><span style="color: black;">3、&lt;track&gt;</span></strong></h2><span style="color: black;">&lt;track&gt;</span><span style="color: black;">标签用于指定视频的字幕,格式是 WebVTT (</span><span style="color: black;">.vtt</span><span style="color: black;">文件),<span style="color: black;">安置</span>在</span><span style="color: black;">&lt;video&gt;</span><span style="color: black;">标签内部。它是一个单独<span style="color: black;">运用</span>的标签,<span style="color: black;">无</span>结束标签。</span><span style="color: black;">&lt;<span style="color: black;">video</span> <span style="color: black;">controls</span> <span style="color: black;">src</span>=<span style="color: black;">"sample.mp4"</span>&gt;</span> <span style="color: black;">&lt;<span style="color: black;">track</span> <span style="color: black;">label</span>=<span style="color: black;">"英文"</span> <span style="color: black;">kind</span>=<span style="color: black;">"subtitles"</span> <span style="color: black;">src</span>=<span style="color: black;">"subtitles_en.vtt"</span> <span style="color: black;">srclang</span>=<span style="color: black;">"en"</span>&gt;</span> <span style="color: black;">&lt;<span style="color: black;">track</span> <span style="color: black;">label</span>=<span style="color: black;">"中文"</span> <span style="color: black;">kind</span>=<span style="color: black;">"subtitles"</span> <span style="color: black;">src</span>=<span style="color: black;">"subtitles_cn.vtt"</span> <span style="color: black;">srclang</span>=<span style="color: black;">"cn"</span> <span style="color: black;">default</span>&gt;</span><span style="color: black;">&lt;/<span style="color: black;">video</span>&gt;</span><span style="color: black;">上面代码指定视频文件的英文字幕和中文字幕。</span><span style="color: black;">&lt;track&gt;</span><span style="color: black;">标签有以下属性。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">label</span><span style="color: black;">:播放器<span style="color: black;">表示</span>的字幕名<span style="color: black;">叫作</span>,供用户<span style="color: black;">选取</span>。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">kind</span><span style="color: black;">:字幕的类型,默认是</span><span style="color: black;">subtitles</span><span style="color: black;">,<span style="color: black;">暗示</span>将原始声音成翻译外国文字,<span style="color: black;">例如</span>英文视频<span style="color: black;">供给</span>中文字幕。另一个<span style="color: black;">平常</span>的值是</span><span style="color: black;">captions</span><span style="color: black;">,<span style="color: black;">暗示</span>原始声音的文字描述,<span style="color: black;">一般</span>是视频原始<span style="color: black;">运用</span>的语言,<span style="color: black;">例如</span>英文视频<span style="color: black;">供给</span>英文字幕。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">src</span><span style="color: black;">:vtt 字幕文件的网址。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">srclang</span><span style="color: black;">:字幕的语言,必须是有效的语言代码。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">default</span><span style="color: black;">:<span style="color: black;">是不是</span>默认打开,布尔属性。</span></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;"><span style="color: black;">4、&lt;source&gt;</span></strong></h2><span style="color: black;">&lt;source&gt;</span><span style="color: black;">标签用于</span><span style="color: black;">&lt;picture&gt;</span><span style="color: black;">、</span><span style="color: black;">&lt;video&gt;</span><span style="color: black;">、</span><span style="color: black;">&lt;audio&gt;</span><span style="color: black;">的内部,用于指定一项<span style="color: black;">外边</span>资源。单标签是单独<span style="color: black;">运用</span>的,<span style="color: black;">无</span>结束标签。</span><span style="color: black;">它有如下属性,<span style="color: black;">详细</span>示例请参见相应的容器标签。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">type</span><span style="color: black;">:指定<span style="color: black;">外边</span>资源的 MIME 类型。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">src</span><span style="color: black;">:指定源文件,用于</span><span style="color: black;">&lt;video&gt;</span><span style="color: black;">和</span><span style="color: black;">&lt;audio&gt;</span><span style="color: black;">。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">srcset</span><span style="color: black;">:指定<span style="color: black;">区别</span><span style="color: black;">要求</span>下加载的图像文件,用于</span><span style="color: black;">&lt;picture&gt;</span><span style="color: black;">。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">media</span><span style="color: black;">:指定<span style="color: black;">媒介</span><span style="color: black;">查找</span>表达式,用于</span><span style="color: black;">&lt;picture&gt;</span><span style="color: black;">。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">sizes</span><span style="color: black;">:指定<span style="color: black;">区别</span>设备的<span style="color: black;">表示</span><span style="color: black;">体积</span>,用于</span><span style="color: black;">&lt;picture&gt;</span><span style="color: black;">,必须跟</span><span style="color: black;">srcset</span><span style="color: black;">搭配<span style="color: black;">运用</span>。</span></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;"><span style="color: black;">5、&lt;embed&gt;</span></strong></h2><span style="color: black;">&lt;embed&gt;</span><span style="color: black;">标签用于嵌入<span style="color: black;">外边</span>内容,这个<span style="color: black;">外边</span>内容<span style="color: black;">一般</span>由浏览器插件负责<span style="color: black;">掌控</span>。<span style="color: black;">因为</span>浏览器的默认插件都不一致,很可能不是所有浏览器的用户都能<span style="color: black;">拜访</span>这部分内容,<span style="color: black;">意见</span><span style="color: black;">小心</span><span style="color: black;">运用</span>。</span><span style="color: black;">下面是嵌入视频播放器的例子。</span><span style="color: black;"><span style="color: black;">&lt;<span style="color: black;">embed</span> <span style="color: black;">type</span>=<span style="color: black;">"video/webm"</span></span><span style="color: black;"> <span style="color: black;">src</span>=<span style="color: black;">"/media/examples/flower.mp4"</span></span><span style="color: black;"> <span style="color: black;">width</span>=<span style="color: black;">"250"</span></span><span style="color: black;"> <span style="color: black;">height</span>=<span style="color: black;">"200"</span>&gt;</span></span><span style="color: black;">上面代码嵌入的视频,将由浏览器插件负责<span style="color: black;">掌控</span>。<span style="color: black;">倘若</span>浏览器<span style="color: black;">无</span>安装 MP4 插件,视频就<span style="color: black;">没法</span>播放。</span><span style="color: black;">&lt;embed&gt;</span><span style="color: black;">标签<span style="color: black;">拥有</span>如下的通用属性。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">height</span><span style="color: black;">:<span style="color: black;">表示</span>高度,单位为像素,不<span style="color: black;">准许</span>百分比。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">weight</span><span style="color: black;">:<span style="color: black;">表示</span>宽度,单位为像素,不<span style="color: black;">准许</span>百分比。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">src</span><span style="color: black;">:嵌入的资源的 URL。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">type</span><span style="color: black;">:嵌入资源的 MIME 类型。</span></p><span style="color: black;">浏览器<span style="color: black;">经过</span></span><span style="color: black;">type</span><span style="color: black;">属性得到嵌入资源的 MIME 类型,一旦该种类型<span style="color: black;">已然</span>被某个插件注册了,就会<span style="color: black;">起步</span>该插件,负责处理嵌入的资源。</span><span style="color: black;">下面是 QuickTime 插件播放 MOV 视频文件的例子。</span><span style="color: black;">&lt;<span style="color: black;">embed</span> <span style="color: black;">type</span>=<span style="color: black;">"video/quicktime"</span> <span style="color: black;">src</span>=<span style="color: black;">"movie.mov"</span> <span style="color: black;">width</span>=<span style="color: black;">"640"</span> <span style="color: black;">height</span>=<span style="color: black;">"480"</span>&gt;</span><span style="color: black;">下面是<span style="color: black;">起步</span> Flash 插件的例子。</span><span style="color: black;"><span style="color: black;">&lt;<span style="color: black;">embed</span> <span style="color: black;">src</span>=<span style="color: black;">"whoosh.swf"</span> <span style="color: black;">quality</span>=<span style="color: black;">"medium"</span></span><span style="color: black;"> <span style="color: black;">bgcolor</span>=<span style="color: black;">"#ffffff"</span> <span style="color: black;">width</span>=<span style="color: black;">"550"</span> <span style="color: black;">height</span>=<span style="color: black;">"400"</span></span><span style="color: black;"> <span style="color: black;">name</span>=<span style="color: black;">"whoosh"</span> <span style="color: black;">align</span>=<span style="color: black;">"middle"</span> <span style="color: black;">allowScriptAccess</span>=<span style="color: black;">"sameDomain"</span></span><span style="color: black;"> <span style="color: black;">allowFullScreen</span>=<span style="color: black;">"false"</span> <span style="color: black;">type</span>=<span style="color: black;">"application/x-shockwave-flash"</span></span><span style="color: black;"> <span style="color: black;">pluginspage</span>=<span style="color: black;">"http://www.macromedia.com/go/getflashplayer"</span>&gt;</span></span><span style="color: black;">上面代码中,<span style="color: black;">倘若</span>浏览器<span style="color: black;">无</span>安装 Flash 插件,就会提示去</span><span style="color: black;">pluginspage</span><span style="color: black;">属性指定的网址下载。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;"><span style="color: black;">6、&lt;object&gt;,&lt;param&gt;</span></strong></h2><span style="color: black;">&lt;object&gt;</span><span style="color: black;">标签<span style="color: black;">功效</span>跟</span><span style="color: black;">&lt;embed&gt;</span><span style="color: black;"><span style="color: black;">类似</span>,<span style="color: black;">亦</span>是<span style="color: black;">插进</span><span style="color: black;">外边</span>资源,由浏览器插件处理。它<span style="color: black;">能够</span>视为</span><span style="color: black;">&lt;embed&gt;</span><span style="color: black;">的替代品,有标准化<span style="color: black;">行径</span>,只限于<span style="color: black;">插进</span><span style="color: black;">少许</span>几种通用资源,<span style="color: black;">无</span>历史遗留问题,<span style="color: black;">因此呢</span>更<span style="color: black;">举荐</span><span style="color: black;">运用</span>。</span><span style="color: black;">下面是<span style="color: black;">插进</span> PDF 文件的例子。</span><span style="color: black;"><span style="color: black;">&lt;<span style="color: black;">object</span> <span style="color: black;">type</span>=<span style="color: black;">"application/pdf"</span></span><span style="color: black;"> <span style="color: black;">data</span>=<span style="color: black;">"/media/examples/In-CC0.pdf"</span></span><span style="color: black;"> <span style="color: black;">width</span>=<span style="color: black;">"250"</span></span><span style="color: black;"> <span style="color: black;">height</span>=<span style="color: black;">"200"</span>&gt;</span></span><span style="color: black;">&lt;/<span style="color: black;">object</span>&gt;</span><span style="color: black;">上面代码中,<span style="color: black;">倘若</span>浏览器安装了 PDF 插件,就会在网页<span style="color: black;">表示</span> PDF 浏览窗口。</span><span style="color: black;">&lt;object&gt;</span><span style="color: black;"><span style="color: black;">拥有</span>如下的通用属性。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">data</span><span style="color: black;">:嵌入的资源的 URL。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">form</span><span style="color: black;">:当前网页中<span style="color: black;">关联</span>联表单的</span><span style="color: black;">id</span><span style="color: black;">属性(<span style="color: black;">倘若</span>有的话)。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">height</span><span style="color: black;">:资源的<span style="color: black;">表示</span>高度,单位为像素,<span style="color: black;">不可</span><span style="color: black;">运用</span>百分比。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">weight</span><span style="color: black;">:资源的<span style="color: black;">表示</span>宽度,单位为像素,<span style="color: black;">不可</span><span style="color: black;">运用</span>百分比。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">type</span><span style="color: black;">:资源的 MIME 类型。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">typemustmatch</span><span style="color: black;">:布尔属性,<span style="color: black;">暗示</span></span><span style="color: black;">data</span><span style="color: black;">属性与</span><span style="color: black;">type</span><span style="color: black;">属性<span style="color: black;">是不是</span>必须匹配。</span></p><span style="color: black;">下面是<span style="color: black;">插进</span> Flash 影片的例子。</span><span style="color: black;"><span style="color: black;">&lt;<span style="color: black;">object</span> <span style="color: black;">data</span>=<span style="color: black;">"movie.swf"</span></span><span style="color: black;"> <span style="color: black;">type</span>=<span style="color: black;">"application/x-shockwave-flash"</span>&gt;&lt;/<span style="color: black;">object</span>&gt;</span></span><span style="color: black;">&lt;object&gt;</span><span style="color: black;">标签是一个容器元素,内部<span style="color: black;">能够</span><span style="color: black;">运用</span></span><span style="color: black;">&lt;param&gt;</span><span style="color: black;">标签,给出插件所需要的运行参数。</span><span style="color: black;">&lt;<span style="color: black;">object</span> <span style="color: black;">data</span>=<span style="color: black;">"movie.swf"</span> <span style="color: black;">type</span>=<span style="color: black;">"application/x-shockwave-flash"</span>&gt;</span> <span style="color: black;">&lt;<span style="color: black;">param</span> <span style="color: black;">name</span>=<span style="color: black;">"foo"</span> <span style="color: black;">value</span>=<span style="color: black;">"bar"</span>&gt;</span><span style="color: black;">&lt;/<span style="color: black;">object</span>&gt;</span><span style="color: black;"><span style="color: black;">关联</span><span style="color: black;">文案</span></span><a style="color: black;"><span style="color: black;">【HTML 教程】链接标签</span></a><img src="https://mmbiz.qpic.cn/mmbiz_jpg/eXCSRjyNYcZicHX2GeiaDX7s6dicdUJvwu5ibL9rTNXiafbmmILCkhgpCrIGEDgZfl0xSQqDOvGnic3AAB1Pc5YvZknA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/eXCSRjyNYcbZsQ1cq1ic2HWhprhDVANpkwYZPwlAWolqAbQ6YzxPOqgpNiaIDicIicv1OWdmswmSEdDjrrUIdIcvzQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">




页: [1]
查看完整版本: 【HTML 教程】多媒介标签