Day04表单多媒体.docx
- 文档编号:17628991
- 上传时间:2023-07-27
- 格式:DOCX
- 页数:15
- 大小:1.08MB
Day04表单多媒体.docx
《Day04表单多媒体.docx》由会员分享,可在线阅读,更多相关《Day04表单多媒体.docx(15页珍藏版)》请在冰点文库上搜索。
Day04表单多媒体
表单
1.表单的功能结构
2.文本栏、密码栏、隐藏栏
3.复选栏、单选栏
4.窗体栏位、区块栏位
5.按钮、图像按钮
6.允许上传文件
7.表单的外框和标题
8.元件的次序和快捷键
表单主要是采集用户信息,通过用户在网页上输入、勾选和选取数据,以便提交给服务器。
基本格式:
属性
值
描述
for
id
规定label绑定到哪个表单元素。
form
formid
规定label字段所属的一个或多个表单。
1表单form的属性:
主标记结构:
属性值说明
name字符串给这个表单起个名字
methodget/post表单的传输方式
actionurl传输目标
target_blank/_self页面打开方式
_top/_parent
enctypeapplication/x-www-form-urlencoded默认的编码形式
multipart/form-dataMINI编码
text/plain纯文本编码格式
2文本框、密码框、隐藏域
文本栏:
密码栏:
隐藏域:
3单选框、复选框
单选框:
复选框:
disabled=”disabled”> 4下拉列表框、文本区域框 下拉列表框的设置: //分组 //多选multiple 文字区块的设置: 5按钮、图像按钮 按钮设置: 按钮图像: 图像按钮: 6上传文件 上传文件: 7表单加上外框和标题 外边框:
标 题:
8元件的次序和快捷键
accesskey="w"(Alt+w)(Ctrl+w)
tabindex="n"
9html5中新增加了一些表单元素,下面列出这些元素及其作用
∙email类型用于验证email的格式,当提交表单时会自动验证email域的值
∙url类型用于验证URL地址的格式,当提交表单时会自动验证url域的值
∙number类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持
∙range类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100
∙日期和时间类型:
HTML5拥有多个可供选取日期和时间的新输入类型:
date-选取日、月、年
month-选取月、年
week-选取周和年
time-选取时间(小时和分钟)
datetime-选取时间、日、月、年(UTC时间)
datetime-local-选取时间、日、月、年(本地时间)
∙search类型用于搜索域,比如站点搜索或Google搜索,为其加上results="s"属性,则会在搜索框前面加上一个搜索图标
∙tel类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持
∙color类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中
多媒体
使用Web如此流行的原因之一是可以再网页上加入图像、声音、动画和电影文件。
虽然过去对这些文件大小的限制局限了它们的作用,但是新技术(比如流技术及宽带)已经使多媒体网页成为了可能。
1
定义嵌入的内容,embed可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3、SWF、MP4等等,Netscape及新版的IE都支持。
2
属性值说明
srcurl文件路径(相对路径或绝对路径)
autostarttrue/false是否在载入完成后自动播放
loop正整数/true/false是否循环及循环的次数
hiddentrue/no(默认)控制面板是否显示
volume0-100之间的整数音量大小
width像素/百分比控制面板的宽度
height像素/百分比控制面板的高度
title文本文字说明
1FLASH动画的插入
3MP3音频
使用标记插入MP3,它的前身是
4视频文件
使用标记播放MP4视频文件
HTML-5音频和视频
1.音频和视频概述
2.video视频元素
3.audio音频元素
本章主要探讨HTML5中音频和视频元素,通过这两个原生的媒体元素向HTML页面中嵌入音频和视频。
一.音频和视频概述
首先,我们要理解两个概念:
容器(container)和编解码器(codec)。
1.视频容器
音频文件或视频文件,都只是一个容器文件。
视频文件包含了音频轨道、视频轨道和其他一些元数据。
视频播放时,音频轨道和视频轨道是绑定在一起的。
元数据包含了视频的封面、标题、子标题、字幕等相关信息。
主流视频容器支持的格式为:
.avi、.flv、.mp4、.mkv、
.ogg、.webm。
容器格式
视频编解码
音频编解码
IE9+
Firefox5+
Chrome13+
WebM
VP8
Vorbis
×
√
√
OGG
Theora
Vorbis
×
√
√
MPEG-4
H.264
AAC
√
×
疑问?
2.编解码器
音频和视频编码/解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够播放。
原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间;如果不对其进行解码,就无法将编码后的数据重组为原始的媒体数据。
主流的音频编解码器:
AAC、MPEG-3、OggVoribs,
视频编解码器:
H.264、VP8、OggTheora。
3.浏览器支持情况
起初,HTML5规范本来打算指定编解码器,但实施起来极为困难。
部分厂商已有自己的标准,不愿实现标准;而有一些编解码器受专利保护,需要支付昂贵费用。
最终放弃了统一规范的要求,导致各个浏览器实现自己的标准。
除了上面三款浏览器,还有Safari5+支持MPEG-4,Opera11支持WebM和OGG,通过这组数据,只要备好MP4和OGG格式的即可,但对于新的高清标准WebM,当然是非常必要的。
因为WebM不但清晰度高,而且免费,不受限制许可的使用源码和专利权。
二.video视频元素
以往的视频播放,需要借助Flash插件才可以实现。
但Flash插件的不稳定性经常让浏览器导致崩溃,因此很多浏览器或系统厂商开始抛弃它。
而取代它的正是HTML5的video元素。
属性名称
说明
src
视频资源的URL
width
视频宽度
height
视频高度
autoplay
设置后,表示立刻开始播放视频
preload
设置后,表示预先载入视频
controls
设置后,表示显示播放控件
loop
设置后,表示反复播放视频
muted
设置后,表示视频处于静音状态
poster
指定视频数据载入时显示的图片
1.嵌入一个WebM视频
解释:
src表示资源
URL;width表示宽度;height表示高度。
2.附加一些属性
解释:
autoplay表示自动开始播放;controls表示显示播放控件;loop表示循环播放;muted表示静音。
3.预加载设置
//li.cc/test.webm"width="800"height="600"controls preload="none"> 解释: preload属性有三个值: none表示播放器什么都不加载;metadata表示播放之前只能加载元数据(宽高、第一帧画面等信息);auto表示请求浏览器尽快下载整个视频。 4.使用预览图 //li.cc/test.webm"width="800"height="600"controls poster="img.png"> 解释: poster属性表示在视频的第一帧,做一张预览图。 5.兼容多个浏览器 解释: 通过 二.audio音频元素 和video元素一样,audio元素用于嵌入音频内容,而音频元素的属性和视频元素类似。 音频的支持度和视频类似,使用 主流的音频格式有: .mp3,.m4a,.ogg,.wav。 属性名称 说明 src 视频资源的URL autoplay 设置后,表示立刻开始播放视频 preload 设置后,表示预先载入视频 controls 设置后,表示显示播放控件 loop 设置后,表示反复播放视频 volume 在0.0-1.0之间设置音量 muted 设置后,表示视频处于静音状态 1.嵌入一个音频 解释: 和嵌入视频一个道理。 2.兼容多个浏览器
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Day04 表单 多媒体