本文主要内容:
- 框架标签
- 表单标签
- 多媒体标签
一、框架标签
如果我们希望在一个网页中显示多个页面,那框架标签就派上用场了。
-
注意,框架标签不能放在< body >标签里面,因为< body >标签代表的只是一个页面,而框架标签代表的是多个页面。于是:< frameset >和< body >只能二选一。
-
框架的集合用< frameset >表示,然后在< frameset >集合里放入一个一个的框架
补充:frameset和frame已经从 Web标准中删除,建议使用 iframe 代替。
< frameset >:框架的集合
一个框架的集合可以包含多个框架或框架的集合。属性:
- row:水平分割,将框架分为上下两部分。写法有两种:
1、绝对值写法:rows="200," 其中代表剩余的。这里其实包含了两个框架:上面的框架占200个像素,下面的框架占剩下的部分。
2、相对值写法:rows="30%," 其中代表剩余的。这里其实包含了两个框架:上面的框架占30%,下面的框架占70%。
注:如果你想将框架分成很多行,在属性值里用逗号隔开就行了。
- cols:垂直分割,将框架分为左右部分。写法有两种:
1、绝对值写法:cols="200," 其中代表剩余的。这里其实包含了两个框架:左边的框架占200个像素,右边的框架占剩下的部分。
2、相对值写法:cols="30%," 其中代表剩余的。这里其实包含了两个框架:左边的框架占30%,右边的框架占70%。
注:如果你想将框架分成很多列,在属性值里用逗号隔开就行了。
代码展示:
1.将整个页面分为两列,左边占据25%,右边占据75%,例如:
<frameset cols="25%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
2.将整个页面先分为两行,上边占据20%,下边占据80%,下边在分为两列,左边占据20%,右边占据80%,当点击左边的时候右边能够进行页面的加载,例如:
<!--将窗口分为两个框架,两行(上下),上遍占据20-->
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<!--注意此处是name属性的设置-->
<frame name="right" />
</frameset>
</frameset>
<!--在left.html中,某一个具体的超链接的设置,target属性的设置-->
<a href="right.html" target="right">点击后right.html在rignt(name)的框架中进行展示</a>
备注:在使用frameset标签的时候,为了有效,不使用body标签,一般都把body标签删除。
< frame >:框架
一个框架显示一个页面。
属性:
- scrolling=“no”:是否需要滚动条。默认值是true。
- noresize:不可以改变框架大小。默认情况下,单个框架的边界是可以拖动的,这样的话,框架大小就不固定了。如果用了这个属性值,框架大小将固定。
-例如:<frame src="top.html" noresize></frame>
- bordercolor="#00FF00":给框架的边框定义颜色。这个属性在框架集合< frameset >中同样适用。颜色这个属性在IE浏览器中生效,但是在google浏览器中无效,不知道为啥。
- frameborder="0"或frameborder=“1”:隐藏或显示边框(框架线)。
- name:给框架起一个名字。
利用name这个属性,我们可以在框架里进行超链。参考上面代码。
内嵌框架
内嵌框架用< iframe >表示。< iframe >是< body >的子标记。
属性:
- src=“subframe/the_second.html”:内嵌的那个页面
- width=800:宽度
- height=“150:高度
- scrolling=“no”:是否需要滚动条。默认值是true。
- name=“mainFrame”:窗口名称。公有属性。
效果:
内嵌框架举例:(在内嵌页面中切换显示不同的页面)
表单标签
表单标签用< form >表示,用于与服务器的交互。表单就是收集用户信息的,就是让用户填写的、选择的。
属性:
- name:表单的名称,用于JS来操作或控制表单时使用;
- id:表单的名称,用于JS来操作或控制表单时使用;
- action:指定表单数据的处理程序,一般是PHP,如:action=“login.php”
- method:表单数据的提交方式,一般取值:get(默认)和post
注意:表单和表格嵌套时,是在标记中套标记。
< input >:输入标签(文本框)
用于接收用户输入。
<input type="text" />
属性:
-
type=“属性值”:文本类型。属性值可以是:
- text(默认) - password:密码类型 - radio:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。 - checkbox:多选按钮,name 属性值相同的按钮作为一组进行选择。 - checked:将单选按钮或多选按钮默认处于选中状态。当< input >标签设置为type="radio"或者type=checkbox时,可以用这个属性。属性值也是checked,可以省略。 - hidden:隐藏框,在表单中包含不希望用户看见的信息 - button:普通按钮,结合js代码进行使用。 - submit:提交按钮,传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。 - reset:重置按钮,清空当前表单的内容,并设置为最初的默认值 - image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。 - file:文件选择框。 提示:如果要限制上传文件的类型,需要配合JS来实现验证。对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。
-
value=“内容”:文本框里的默认内容(已经被填好了的)
-
size=“50”:表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。
-
readonly:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。 用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。
-
disabled:文本框只读,不能编辑,光标点不进去。属性值可以不写。
举例:
<form>
姓名:<input value="呵呵" >逗比<br>
昵称:<input value="哈哈" readonly=""><br>
名字:<input type="text" value="name" disabled=""><br>
密码:<input type="password" value="pwd" size="50"><br>
性别:<input type="radio" name="gender" id="radio1" value="male" checked="">男
<input type="radio" name="gender" id="radio2" value="female" >女<br>
爱好:<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</form>
效果:
注意,多个个单选框的input标签中,name 的属性值可以相同,但是 id 的属性值必须是唯一的。我们知道,html的标签中,id的属性值是唯一的。
四种按钮的举例:
<form>
<input type="button" value="普通按钮"><br>
<input type="submit" value="提交按钮"><br>
<input type="reset" value="重置按钮"><br>
<input type="image" value="图片按钮1"><br>
<input type="image" src="1.jpg" width="800" value="图片按钮2"><br>
<input type="file" value="文件选择框">
</form>
效果:
< select >:下拉列表标签
< select >标签里面的每一项用< option >表示。select就是“选择”,option“选项”。select标签和ul、ol、dl一样,都是组标签。
< select >标签的属性:
- multiple:可以对下拉列表中的选项进行多选。属性值为 multiple,也可以没有属性值。也就是说,既可以写成multiple="",也可以写成multiple=“multiple”。
- size=“3”:如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。
< option >标签的属性:
- selected:预选中。没有属性值。
举例:
<form>
<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option selected="">研究生</option>
</select>
<br><br><br>
<select size="3">
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option>研究生</option>
</select>
<br><br><br>
<select multiple="">
<option>小学</option>
<option>初中</option>
<option selected="">高中</option>
<option selected="">大学</option>
<option>研究生</option>
</select>
<br><br><br>
</form>
效果展示:
表单的语义化
比如,我们在注册一个网站的信息的时候,有一部分是必填信息,有一部分是选填信息,这个时候可以利用表单的语义化。 举例:
<form>
<fieldset>
<legend>账号信息</legend>
姓名:<input value="呵呵" >逗比<br>
密码:<input type="password" value="pwd" size="50"><br>
</fieldset>
<fieldset>
<legend>其他信息</legend>
性别:<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好:<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</fieldset>
</form>
效果:
多媒体标签
声明: 多媒体包含:音频、视频、Flash。网页上的多媒体基本都是Flash格式的。 .wmv、.dat、.mob、.rmvb等视频格式,在网页上不能直接播放,需要安装第三方的插件,才可以播放。不同的浏览器,播客上述视频格式,所使用插件参数又不一样。 上述格式视频一般文件较大,不利于网络下载播放。 一般情况下,是将其它的视频格式,转成Flash来在网页上播放。转换软件:格式工厂等。 Flash格式的视频兼容性非常好,Flash格式的文件很小。
< bgsound >标签:播放背景音乐
属性:
- src=“音乐文件的路径”
- loop="-1":属性值代表播放次数,-1代表循环播放。
举例:
<body>
<bgsound src="王菲 - 清风徐来.mp3"></bgsound>
</body>
运行效果: 打开网页后,在IE 8中播放正常,播放时网页上显示一片空白。在google浏览器中无法播放。
< embed >标签:播放多媒体文件(音频、视频等)
属性:
- src=“多媒体文件的路径”
- loop="-1":属性值代表播放次数,-1代表循环播放。
- autostart=“false”:打开网页时,禁止自动播放。默认值是true。
- width:指Flash文件的宽度
- height:指Flash文件的高度
- ……
举例:
<body>
<embed src="王菲 - 清风徐来.mp3"></embed>
</body>
< marquee >:滚动字幕标签
如果在这个标签里设置了内容,那么,打开网页时,内容会像弹幕一样自动移动。
属性:
- direction=“right”:移动的目标方向。属性值可以是:left(从右向左移动,默认值)、right(从左向右移动)、up(从下向上移动)、down(从上向下移动)。
- behavior=“slide”:行为方式。属性值可以是:slide(只移动一次)、scroll(循环移动,默认值)、alternate(循环移动)、。alternate和scroll属性值都是循环移动,区别在于:假设在direction="right"的情况下,behavior="scroll"表示从左到右、从左到右、从左到右···behavior="alternate"表示从左到右、从右到左、从左到右···
- scrollamount=“30”:移动的速度
- loop=“3”: 循环多少圈。负值表示无限循环
- scrolldelay=“1000”:移动一次休息多长时间。单位是毫秒。
举例:
<marquee behavior="alternate" direction="down" width="300" height="200" bgcolor="#8c5dc1">我来了</marquee>
效果展示
注:以上内容参考千古一号内容所写,本篇博客仅作为学习参考,若有侵犯,告知必删