HTML5学习_day11(2)--H5多媒体标签

多媒体标签

一.audio音频标签

<audio src="music.mp3" controls="controls">浏览器不支持该标签时，才显示这部分文字</audio>

属性：

1.src:表示文件地址

2.controls 向用户展示播放按钮

3.当浏览器不支持该标签时，才显示标签里面的内容

4.loop文件循环播放

5.autoplay 让文件自动播放

6.preload用来缓存大的文件其中有三个值可选

a.none：不缓存

b.auto：缓存(默认)

c.metadata:缓存文件元信息

为了兼容不同浏览器对不同媒体类型的支持，利用source标签来提供多个不同媒体类型

<span style="white-space:pre">		</span><audio controls="controls">
			<source src="music.mp3" type="audio/mp3"></source>
			<source src="music.wave" type="audio/vnd.wave"></source>
			<source src="music.ogg" type="audio/ogg"></source>
			<source src="music.wma" type="audio/x-ms-wma"></source>
		</audio>

二.video标签

<span style="white-space:pre">		</span><video width="100" height="" autoplay="" controls="controls"  >
			<source src="1.mp4" type="video/mp4"></source>
			<source src="myvideo.ogv" type="video/ogg"></source>
			<source src="myvideo.webm" type="video/webm"></source>
			<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
				<param name="movie" value="myvideo.swf" />
				<param name="flashvars" value="autostart=true&file=myvideo.swf" />
			</object>
			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
		</video>

注意:一定也要加上controls 不然就显示一个大黑框，

1.src:表示文件地址

2.controls 向用户展示播放按钮

3.当浏览器不支持该标签时，才显示标签里面的内容

4.loop文件循环播放

5.autoplay 让文件自动播放

6.preload用来缓存大的文件其中有三个值可选

a.none：不缓存

b.auto：缓存(默认)

c.metadata:缓存文件元信息

三.mark标签

高亮显示文字 突出文字

<mark style="background: red;width: 200px;height: 200px;" >从窗前明月撒开了的激发了快速的交罚款蓝色的房间</mark>

注意：一定也要加上controls，mark不然页面直接显示一个大黑框,不设置高宽，以默认为标准

四.input标签

html4之前的input属性

1.文本 text

2.密码 password

3.单选 radio

4.复选 checkbox

5.按钮 button

6.提交 submit

7.重置 reset

8.文件 file

9.图片 img

html5新增的type属性值

1.电子邮件:email

2.数字:number

3.网址:url

4.取值范围:range

5.日期(年-月-日):date

6.日期(年-月):month

7.日期(年-周):week

8.日期(时-分):time

9.日期(国际统一时间):datetime

10.日期(本地时间):datetime-loacl

<span style="white-space:pre">		</span><form action="#" method="post">
			1.电子邮件:<input type="email" name="" id="" value="" /><br />
			2.数字 step：设置数值为能整除step值 <input type="number" name="" id="" max="9" min="-4" step="3"/><br />
			3.网址 <input type="url" name="" id="" value="" /><br />
			4.取值范围 <input type="range" name="" id="" value="5" max="10" min="5" /><br />
			5.日期(年月日) <input type="date" name="" id="" value="" /><br />
			6.日期(年月) <input type="month" name="" id="" value="" /><br />
			7.日期(年-周) <input type="week" name="" id="" value="" /><br />
			8.日期(时-分) <input type="time" name="" id="" value="" /><br />
			9.日期(国际统一时间) <input type="datetime" name="" id="" value="" /><br />	
			10.日期(本地时间) <input type="datetime-local" name="" id="" value="" /><br />	
			<input type="submit" value="提交"/>
		</form>

六.output标签（input输入即时触发事件）

<span style="white-space:pre">	</span><form action="#" method="post" οninput="result.value=parseInt(num1.value)+parseInt(num2.value);console.log(result.value)">
		<input type="number" name="num1" id="num1" value="" />+
		<input type="number" name="num2" id="num2" value="" />=
		<output name="result"></output>
		<input type="submit" value=""/>
	</form>

七.datalist标签（类似下拉列表）

<span style="white-space:pre">	</span><input  list="browser" name="browser" />
	<datalist id="browser">
	<option value="谷歌浏览器"></option>		
	<option value="IE浏览器"></option>		
	<option value="360浏览器"></option>	
	</datalist>

注意：这里的datalist中的id一定与input中的list的name保持一致

八.progress标签(进度条)

<progress max="100" value="30"></progress>

一般max是100最大值  value/max 就是进度条显示的百分比

九.dl dt dd标签

<span style="white-space:pre">	</span><dl>
		<dt>广州
			<dd>广州是什么</dd>
		</dt>
	</dl>

注意:一条术语dt对应一条解析dd(dt下只有一个dd)