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;">




4zhvml8 发表于 昨天 06:19

你的话语如春风拂面，让我感到无比温暖。
页: [1]
查看完整版本: 【HTML 教程】多媒介标签