非常教程

HTML 参考手册教程

HTML source media 属性

HTML source media 属性

HTML <source> media 属性

HTML source media 属性

HTML <source> 标签

实例

media 属性的使用:

<source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">

尝试一下 »

浏览器支持

HTML source media 属性

HTML source media 属性

HTML source media 属性

HTML source media 属性

HTML source media 属性

几乎所有的主流浏览器都不支持 media 属性。


定义和用法

media 属性指定媒体资源的类型(文件为什么样的媒体/设备进行了优化)。

浏览器使用该属性,以确定它是否可以播放该文件。如果它不能,它可以选择不下载文件。

注意:该属性可接受多个值。


HTML 4.01 与 HTML5之间的差异

<source> 标签是 HTML5 中的新标签。


语法

<source media="value">

可能的运算符

描述
and 规定一个 AND 运算符。
not 规定一个 NOT 运算符。
, 规定一个 OR 运算符。

设备

描述
all 默认。适用于所有设备。
aural 语音合成器。
braille 盲文反馈装置。
handheld 手持设备(小屏幕、有限带宽)。
projection 投影仪。
print 打印预览模式/打印页面。
screen 计算机屏幕。
tty 电传打字机以及类似的使用等宽字符网格的媒体。
tv 电视机类型设备(低分辨率、有限的滚屏能力)。

描述
width 规定目标显示区域的宽度。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (min-width:500px)"
height 规定目标显示区域的高度。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (max-height:700px)"
device-width 规定目标显示器/纸张的宽度。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (device-width:500px)"
device-height 规定目标显示器/纸张的高度。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (device-height:500px)"
orientation 规定目标显示器/纸张的方向。
可能的值:"portrait" 或 "landscape"。
例子:media="all and (orientation: landscape)"
aspect-ratio 规定目标显示区域的宽度/高度比。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (aspect-ratio:16/9)"
device-aspect-ratio 规定目标显示器/纸张的 device-width/device-height 比率。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (aspect-ratio:16/9)"
color 规定目标显示器的 bits/color。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (color:3)"
color-index 规定目标显示器可以处理的颜色数。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (min-color-index:256)"
monochrome 规定单色帧缓冲中的 bits/pixel。
可使用 "min-" 和 "max-" 前缀。
例子:media="screen and (monochrome:2)"
resolution 规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。
可使用 "min-" 和 "max-" 前缀。
例子:media="print and (resolution:300dpi)"
scan 规定 tv 显示器的扫描方式。
可能的值:"progressive" 和 "interlace"。
例子:media="tv and (scan:interlace)"
grid 规定输出设备是否是网格或位图。
可能的值:"1" 为网格,否则为 "0"。
例子:media="handheld and (grid:1)"


HTML source media 属性

HTML <source> 标签
HTML source media 属性
HTML 参考手册

HTML 参考手册提供了完整的 HTML 标签、属性、事件列表,并配有具体的实例演示,另外还讲解了拾色器、字符集等相关内容。

HTML 参考手册目录

1.HTML 事件
2.HTML 全局属性
3.HTML 标签列表(功能排序)
4.HTML 标签列表(字母排序)
5.HTML <option> 标签
6.HTML <output> 标签
7.HTML <p> 标签
8.HTML <param> 标签
9.HTML <pre> 标签
10.HTML 拾色器
11.HTML 颜色名
12.HTML 有效DOCTYPES
13.HTML 音频/视频
14.HTML 画布
15.HTML5 <mark> 标签
16.HTML <menu> 标签
17.HTML <meta> 标签
18.HTML <meter> 标签
19.HTML <nav> 标签
20.HTML <noframes> 标签
21.HTML <noscript> 标签
22.HTML <object> 标签
23.HTML <ol> 标签
24.HTML <optgroup> 标签
25.HTML <img> 标签
26.HTML <input> 标签
27.HTML <ins> 标签
28.HTML <kbd> 标签
29.HTML5 <keygen> 标签
30.HTML <legend> 标签
31.HTML <li> 标签
32.HTML <label> 标签
33.HTML <link>标签
34.HTML <map> 标签
35.HTML <area> 标签
36.HTML <applet> 标签
37.HTML <address> 标签
38.HTML <acronym> 标签
39.HTML <abbr> 标签
40.HTML <a> 标签
41.HTML <!DOCTYPE> 声明
42.HTML <button> 标签
43.HTML <i> 标签
44.HTML <iframe> 标签
45.HTML <blockquote> 标签
46.HTML <big> 标签
47.HTML <bdo> 标签
48.HTML <bdi> 标签
49.HTML <basefont> 标签
50.HTML <base> 标签
51.HTML <b> 标签
52.HTML <audio> 标签
53.HTML <aside> 标签
54.HTML <article> 标签
55.HTML <command> 标签
56.HTML <colgroup> 标签
57.HTML <col> 标签
58.HTML <code> 标签
59.HTML <cite> 标签
60.HTML <center> 标签
61.HTML <caption> 标签
62.HTML <canvas> 标签
63.HTML <br> 标签
64.HTML <body> 标签
65.HTML <dt> 标签
66.HTML <dl> 标签
67.HTML <div> 标签
68.HTML <dir> 标签
69.HTML <dialog> 标签
70.HTML <dfn> 标签
71.HTML <details> 标签
72.HTML <del> 标签
73.HTML <dd> 标签
74.HTML <datalist> 标签
75.HTML <frameset> 标签
76.HTML <frame> 标签
77.HTML <form> 标签
78.HTML <footer> 标签
79.HTML <font> 标签
80.HTML <figure> 标签
81.HTML <figcaption> 标签
82.HTML <fieldset> 标签
83.HTML <embed> 标签
84.HTML <em> 标签
85.HTML URL 编码参考手册
86.HTML 符号实体参考手册
87.HTML ISO-8859-1 参考手册
88.HTML ASCII 参考手册
89.HTML 字符集
90.HTML <hr> 标签
91.HTML <h1> – <h6> 标签
92.HTML <hgroup> 标签
93.HTML <header> 标签
94.HTML <head> 标签
95.HTML <q> 标签
96.HTML5 <progress> 标签
97.HTML <html> 标签
98.HTML <!–…–> 注释标签
99.键盘快捷键
100.HTTP 方法:GET 对比 POST