Web前端开发之HTML+CSS基础入门(框架)

HTML框架详解与框架布局                                        

1)什么是框架

框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果

2) <frameset>划分框架标记

a) 语法格式

<frameset>....</frameset>

b) 属性

cols: 使用“像素数”和%分割左右窗口，“”表示剩余部分, 如果使用“”，“”表示框架平均分成2个, 如果使用“”，“”，“”表示框架平均分成3个

rows: 使用“像素数”和%分割上下窗口，“*”表示剩余部分

frameborder: 指定是否显示边框，0不显示，1显示

border: 设置边框的大小，默认值5像素

c) <frame>子窗口标记

<frame>标记是一个单标记，该标记必须放在<frameset>中使用，在<frameset>中设置了几个窗口，就必须对应使用几个<frame>框架，而且还必须使用src属性指定一个网页

属性:

src: 加载网页文件的URL地址

name: 框架名称，是链接标记的target所要参数

noresize: 表示不能调整框架大小，没有设置时就可以调整

scrolling:是否需要滚动条

值: auto根据需要自动出现

Yes:有 no:无

Frameborder:是否需要边框

值:（1） 显示边框(0) 不显示边框

11.HTML表单设计(上)

1)表单标记

<form>...</form>

<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容

基本格式: <form action="服务器端地址（接受表单内容的地址）" name="表单名称" method="post|get">...</form>

常用属性:

name:表单名称

method:

post: post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制

get: get方式提交时，会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性

action: 表单数据的处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要指定其属性为“no”

enctype: 设置表单的资料的编码方式

target: 和超链接的属于类似，用来指定目标窗口

2)文本域和密码

<input>标记: <input>标记没有结束标记

基本语法: <input type="" name=""value="" size="" maxlength="">

属性介绍:

type属性:

text: 当type="text"时，<input>表示一个文本输入域

password: 当type="password"时，<input>表示一个密码输入域

name属性: 定义控件的名称

value属性: 初始化值，打开浏览器时，文本框中的内容

size属性:设置控件的长度

maxlength: 输入框中最大允许输入的字符数

3) 提交、重置、普通按钮

1.提交按钮:当<input type="submit">时，为提交按钮

2.重置按钮:当<inputtype="reset">时，为重置按钮

3.普通按钮:当<inputtype="button">时，为普通按钮

4）单选框和复选框

单选按钮:当<inputtype="radio">时，为单选按钮

复选按钮:当<inputtype="checkbox">时，为复选框

注意: 单选框和复选框都可以使用”cheked“属性来设置

默认选中项

5）隐藏域

当<input type="hidden">时，为隐藏表单域

6）多行文本域

使用<textarea>标记可以实现一个，能够输入多行文本的区域

语法格式: <textarea name="name"rows="value" cols="value" value="value"> ...... <textarea>

rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数

7）菜单下拉列表域

<select>标记

语法格式:

<selectname="" size="value" multiple>

<option value="value"selected>选项1</option>

<optionvalue="value">选项2</option>

<optionvalue="value">选项3</option>

...... ...

</select>

属性:

multiple属性: multiple属性不用赋值，其作用是，表示用可以多选的下来列表，如果没有这个属性就只能单选

size属性: 设置列表的高度

name属性:定义列表的名称

option标记:

<option>标记用来指定列表中的一个选项，需要放在<select></select>之间

值:

value: 给选项赋值，指定传送到服务器上面的值

selected: selected指定默认的选项