Html学习笔记（4）表单/多媒体

参考文献： 《HTML, CSS, JavaScript 整合详解》 王津涛 编著，机械工业出版社

 

1.     表单，用来收集信息并提交给服务器进行处理，包括：单行文本框、多行文本框、下拉框、单选按钮、复选按钮、Submit和Reset按钮等，一个表单是一块可以含有表单元素的区域，用<form>标签在网页中创建表单

2.     <input>标签

① 单行文本框，type=”text”，size属性指定文本框宽度（默认20），maxlength属性限制文本框输入的字符数，maxlength只有在type=”text”时才有效果

② 口令文本框/密码文本框，type=”password”，（maxlength也是可用的~）

③ Submit、Reset按钮

    <input type="submit" value="Submit" />

 <input type="reset" value="Reset" />

       其中value属性值是按钮上显示的文字

④ type为image时，可以用来创建图形化提交按钮

<input type="image" name="..." src="..." />

⑤ 普通按钮

<input type="button" value="..." />

⑥ 单选按钮type=”radio”

<input type="radio" name="radiobutton" value="one" checked="checked" />XHTML <br />

<input type="radio" name="radiobutton" value="two" />AWT/Swing <br />

注：在同一组单选按钮中name属性要相同，checked属性指定默认选择，可选属性，可不设置，在单选按钮列表中只能将一个选项设置为默认选择

⑦ 复选按钮，type=”checkbox”，name属性与单选框不同，此处name值可以相同也可以不同

3.     多行文本框，<textarea>标签

属性	属性值	说明
cols	number	文本区域列数
rows	number	文本区域行数
disabled	disabled	第一次加载时区域不可用
readonly	readonly
name	name_of_textarea

4.     下拉框，<select>标签、<option>标签

	属性	说明
select标签	size=”n”	列表可见选项个数
	name=”…”
	disabled=”disabled”	下拉列表不可用
	multiple=”multiple”	多项选择
option标签	selected=”selected”	设置默认选中
	disabled=”disabled”	第一次加载时不可选
	label	使用<optgroup>时定义一块标签
	value=”…”	发送到服务器上的值

分组下拉框，<optgroup>标签，label属性为每一个分组设置标题

<select name="Cars" >

<optgroup label="大众公司车型">

<option value="奥迪A6">奥迪A6</option>

</optgroup>

<optgroup label="丰田公司车型">

<option value="凯美瑞">凯美瑞</option>

</optgroup>

</select>

5.    
上传文件，type=”file”,size属性设置表单文本框的长度

<input type="file" name="FileUpload" size="40” />

6.     <form> 标签的特殊属性属性

属性	说明
action=”…”	指明处理表单数据的程序所在的位置
method=”…”	传送资料的方式，post（允许传送大量资料），get（允许传送大小低于1K的资料）

注：如果没有CGI等网络程序进行测试，可以将action设置为一个邮箱地址，提交信息将被发送到邮箱中，例：

7.     <form> 标签的enctype属性

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
text/plain	空格转换为 "+" 加号，但不对特殊字符编码

8.     定义域集合，<fieldset>标签，将相关主题的控件或标签组合在一起，<legend>标签为fieldset设置标题

   <fieldset>

       <legend>用户信息</legend>

       姓名：<input type="text" size="4" />

              ……

</fieldset>

      

不使用legend标签

9.     表单组件的tab顺序为tabindex由小到大，若两值相等，则按顺序进行移动，如果tabindex为负值，则这个表单组件将被排除在tab键的序列外

10.  滚动文字 <marquee>标签

<marquee>标签只适用于IE浏览器，不推荐使用此标签，仅供学习

① 常见属性有：direction（滚动方向，值为left/right）、behavior（滚动方式，值为scroll/slide/alternate，默认scroll）、align（文字对齐方式，top/middle/bottom）、bgcolor（位子背景颜色）等

② loop属性设置滚动次数，取整数，值为infinite时，不断滚动

③ scrollamount设置滚动过程中文字每次移动的像素数；scrolldelay设置文字移动的延迟，单位ms

④ height、width属性设置滚动文字字幕区域大小，默认情况下，滚动文字字幕区域为整个IE浏览器的屏幕，属性值可以为绝对像素数，也可以取相对百分比，通常，高度应足够容纳滚动文字，宽度小于滚动文字长度

⑤ hspace与vspace属性设置文字字幕的空间距离

11.  背景音乐标签

① IE自带<bgsound>标签，只能在IE浏览器中使用，loop属性用于指定音频文件的播放次数（整数，值为“infinite”时重复播放）

<bgsound src="test.mp3" loop="3"></bgsound>

② <embed>不是HTML规定的标签，但目前主流的浏览器都支持（若浏览器不支持该标签，可以通过<noembed>标签标记代替文本，还可以再写一个该浏览器支持的标签），标签嵌入音频后，网页中会出现音频控制器，默认情况下嵌入的音频会自动播放，可以通过autostart属性设置，如果不希望用户看到音频控制器，可以通过hidden属性设置，不过在隐藏之后，应该将autostart的值设置为true

<embed src="test.mp3" loop="infinite"></embed>

<noembed>The sound can not broadcast</noembed>

③ HTML标准推荐使用<object>标签添加对象

<object data="test.mp3">测试音频</object>

貌似不是这个用法，用法参见：http://blog.youkuaiyun.com/lostpub/article/details/7043722

④ 建立音频链接

<a href="test.mp3">点击播放音乐“test.mp3”</a>

点击该链接时，若浏览器不能播放该音频格式，则自动调用本地计算机上能识别该音频格式的播放器播放，如果美的计算机没有安装此类播放器，浏览器会提示用户保存该音频（试了一下，在IE下会保存文件，在chrome下会播放音频）

⑤ 常用的浏览器音频格式有WAV、MP3、MIDI

a) MP3，MPEG Audio Layer3音频压缩技术，Internet上最流行的音乐格式

b) WAV，也称波形声音文件，微软开发，存储空间需求大，不便于交流和传播

c) MIDI，Music Instrument Digital Interface，数字化乐器接口，”*.mid”，本身不能发声，需要经A/D驱动声卡转换发声

12.  创建视频

① 在网页中建立视频链接成为外部视频，大多数情况下视频文件通过调用本地计算机已安装的具有支持该视频格式的播放器软件播放

<a href="test.avi">点击播放视频</a>

IE和Chrome都不能播放，下载视频~

所谓内部视频，是指可以在浏览器中直接播放的视频，以下介绍的几种方法为内部视频

② 使用<embed>标签创建视频（IE专用，有视频控制器）

<embed src="test.avi" width="360" heigth="300"></embed>

autostart=”true”时自动播放，为false时需要手动播放，loop=”true”循环播放

③ 使用<img>标签创建视频，利用dynsrc属性，目前只有IE支持，没有视频控制器，最好使用src属性添加一幅图片，使那些无法播放视频的浏览器能够显示该视频，可以设置loop为true或infinite

④ start属性、loopdelay属性的设置均对网页视频的播放由影响，start属性值包括fileopen（自动播放，默认）和mouseover（鼠标移动到视频区域才播放视频），loopdelay属性设置延迟时间，单位ms

⑤ 常见视频格式：AVI、MPEG、WMV、RA/RM/RAM

a) AVI，将语音和影像同步组合在一起，有损压缩，压缩比较高，画质不太好，支持256色和RLE压缩

b) MPEG，Moving Picture Expert Group，活动图像专家组，主要有MPEG-1、MPEG-2、MPEG-4、MPEG-7、MPEG-21等，利用具有补偿的帧间压缩编码技术以减小时间冗余度，利用DCT技术以减小图像空间冗余度，用熵编码在信息表示方面减小了统计冗余度，大大增强了压缩性能

c) WMV，微软，高解析度还原视频，大多数软件兼容WMV时隔，WMV文件护视频和音频，视频部分使用Windows Media Video编码，音频部分使用Windows Media Audio编码

d) RA/RM/RAM，文件小，画质相对良好，适合在线播放，主要包含RealAudio、RealVideo和RealFlash三部分