续HTML5新增特性1
文章标题
四丶HTML5多媒体标签
4.1HTML5 Video(视频)
很多站点都会使用到视频,HTML5 提供了展示视频的标准。
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
4.1.1语法格式
代码:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video>
元素提供了播放、暂停和音量控件来控制视频。
<video>
也提供了width和height属性控制视频尺寸,所需的视频 空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时 保留特定的空间,页面就会根据原始视频的大小而改变。
<video></video>
标签之间插入的内容是提供给不支持video元素的浏览器显示的。
video标签支持多个<source>
元素,该元素可以链接不同的视频文件,浏览器使用第一个可以识别的格式。
4.1.2video标签相关属性
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。 |
preload | auto metadata none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | URL | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
注意:autoplay在chrome浏览器下,需要打开静音才能自动播放,在IE浏览器下不出现该问题
4.2HTML Audio(音频)
4.2.1语法格式
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在 <audio>
和</audio>
之间你需要插入浏览器不支持的<audio>
元素的提示文本。
<audio>
元素允许使用多个 <source>
元素. <source>
元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
4.2.2相关属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | ||
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 如果出现该属性,则音频输出为静音。 |
preload | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载。 |
src | URL | 规定音频文件的 URL。 |
4.3source标签
上述有有关source标签的使用
五丶其他常用HTML5新标签
5.1HTML5文本格式化标签
<time>
标签定义时间或日期,或者两者
<mark>
标签定义带有记号的文本。请在需要突出显示文本时使用 < mark > 标签。
<ruby>
在文字上方注音,不常用,主流浏览器基本都支持,需要使用rt标签定义注音,例如
<ruby>饕餮<rt>tao tie</rt></ruby>
5.2HTML5度量条
定义已知范围或分数值内的标量测量,计数仪表,也被称为 gauge(尺度)。例子:磁盘用量、查询结果的 相关性,等等。
注:<meter>
标签不应用于指示进度(在进度条中)。如果标记进度条,请使用<progress>
标签。
属性 | 值 | 描述 |
---|---|---|
form | form_id | 规定 元素所属的一个或多个表单。 |
high | number | 规定被界定为高的值的范围。 |
low | number | 规定被界定为低的值的范围。 |
max | number | 规定范围的最大值。 |
min | number | 规定范围的最小值。 |
optimum | number | 规定度量的最优值。 |
value | number | 必需。规定度量的当前值。 |
当前内存剩余:<br><br>
<meter max="" min="" value="0.2"></meter><br><br>
<meter max="100" min="0" value="45"></meter><br><br>
低:<meter max="100" min="0" value="10" low="30" high="80"></meter><br><br>
中:<meter max="100" min="0" value="50" low="30" high="80"></meter><br><br>
高:<meter max="100" min="0" value="90" low="30" high="80"></meter><br><br>
最佳:<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter>
<br><br>
5.3HTML5进度条
<progress>
标签定义运行中的任务进度。
一般与js配合使用
max属性:规定当前进度的最大值
value属性:规定进度条当前默认显示值
form属性:规定进度条所属的一个或多个表单
注:max和value属性的值必须是一个类型数值,可以是小数或整数
<progress></progress><br><br>
<progress value="30" max="100"></progress><br><br>
<progress value="0.6" max="1"></progress><br><br>
<!--设置百分比无效-->
<progress value="40%" max="100%"></progress><br><br>
5.4HTML5详情标签
“details" 元素用于描述有关文档或文档片段的详细信息。
“summary” 元素应该是 “details” 元素的第一个子元素。可以为details定义标题.标题是可见的,用户点击 标题时,会显示details中的内容。
details元素的属性:
open属性:规定在html页面中details是可见的
注:目前还不是所有浏览器都支持,但是之后肯定会都支持的
<details>
<h3>该商品的月销售量:6000</h3>
<ul>
<li>8000以上:爆品<meter max="100" min="0" value="82" high="80" low="30">
</meter></li>
<li>3000-8000:一般<meter max="100" min="0" value="50" high="80" low="30">
</meter></li>
<li>3000以下:滞销商品<meter max="100" min="0" value="20" high="80"
low="30"></meter></li>
</ul>
</details>
<details>
<summary>月销售量统计</summary>
<h3>该商品的月销售量:6000</h3>
<ul>
<li>8000以上:爆品<meter max="100" min="0" value="82" high="80" low="30">
</meter>meter></li>
<li>3000-8000:一般<meter max="100" min="0" value="50" high="80" low="30">
</meter>meter></li>
<li>3000以下:滞销商品<meter max="100" min="0" value="20" high="80"
low="30"></meter>meter></li>
</ul>
</details>