七、建立表格
1、建立表格
(1)添加表格:表格标记:<table></table>
行标记:<tr></tr> 单元格标记<td><td>
(2)添加表格标题:如同在表格上方加一个没有边框的行,默认情况下居中
<caption>XXX</caption>
有 align 属性
(3)添加表头:用法与<td><td>相同 <th></th>
2、设置表格基本属性
(1)设置表格宽度:<table width=”20”>
可以是具体的像素值,也可以是百分比
(2)设置表格高度:<table height=”20”> 同上
(3)设置表格相对于页面的对齐方式:<table align=”center”>
(4)设置表格边框:
1
○外边框宽度:<table border=”3”> 默认无边框
2
○边框颜色:<table bordercolor=”xxxxx”> 前提是边框宽度不能是 0
3
○内边框之间的间隔:<table cellspacing=”5”>
4
○表格内文字与边框距离:<table cellpadding=”5”>
(5)设置表格背景图像:<table background=”xxx”>
(6)设置表格背景颜色:<table bgcolor=”xxx”>
3、设置表格行属性
(1)设置行高度:<tr height=”20”>
(2)设置行边框颜色:<tr bordercolor=”xxx”>
(3)设置行背景:<tr bgcolor=”xxxx”>
(4)设置行对齐方式: 水平对齐<tr align=”center”>
垂直对齐<tr valign=”top”>
只有 top 和 bottom 俩值
3、设置单元格属性
(1)设置单元格大小:<td width=”20” height=”25”>
一个单元格的改变往往也会改变其他单元格
(2)设置单元格列跨度:<td colspan=”2”>
(3)设置单元格行跨度:<td rowspan=”2”>
(4)设置单元格对齐方式:<td align=”水平对齐” valign=”垂直对齐”>
(5)设置单元格背景色:<td bgcolor=”xxx”>
(6)设置单元格边框颜色:<td bordercolor=”xxxx”>
(8)设置单元格的背景图像:<td background=”xxxxx”>
八、添加表单
1、表单标记:<form></form> 一般情况下,action 和 method 是必不可少的参数
(1)处理程序:<form action=”URL”> 可以是邮箱
(2)表单名称:<form name=”xxx”> 不能包含特殊符号和空格,用于 JavaScript 使用
(3)传送方法:<form method=”post”> get 或 post
(4)目标显示方式:<form target=”_blank”>
(5)编码方式:<form enctype=”编码方式”>
2、添加控件:
(1) 输入类控件:
<form>
<input name=”控件名称” type=”控件类型” />
单标签
</form>
1
○文字字段: type=”text”
size、maxlength、value
2 密码域:
○
type=password size、maxlength、value
value 默认值显示成*,必须用 POST 形式传递
3
○单选按钮: type=”radio”
value、checked:默认选中
往往要设定同样的一个名称
4
○复选框: type=”checkbox” value、checked
Checked 可以有多个,往往要设定同样的一个名称
5
○普通按钮: type=”button”
value、onclick:实现鼠标按下时实现的功能
6
○提交按钮: type=”submit”
value
7
○重置按钮: type=”reset”
value
8 图像域:
○
type=”image”
src
常用在创建特殊效果的按钮中,默认是提交功能
9 隐藏域:
○
type=”hidden” value
10
○文件域: type=”file”
共有属性: name、readonly--只读,不允许修改;disabled--禁用
(2) 菜单列表类控件:主要用来进行选择给定答案中的一种,用单选按钮浪则费空间
1
○下拉菜单:selected 只能有一个
<select name=”xx”>
<option value=”xx” selected>xxxxxx</option>
<option value=”xx”>xxxxx</option>
</select>
2
○列表:mulitple
<select name=”xx” size=”显示列表项数” multiple>
<option value=”xx” selected>xxxxxx</option>
<option value=”xx”>xxxxx</option>
</select>
(3)文本域标记:可以添加多行文字
<textarea name=”xx” value=”xx” rows=”行数” cols=”列数”></textarea>
默认值不是用属性 value,是在><标签中间写
九、框架结构
一、窗口框架
(1)什么是框架:如果页面可以分为几个部分,各个部分之间是相互独立的页面,却又互
相关联,用户在浏览这种页面时,当对其中某一部分进行操作,其他页面保持不变,这样的
页面就被称为框架结构的页面,也称为多窗口页面。
最常见的框架结构就是将网站的导航条作为一个单独的框架窗口,
当用户查看具体的内
容时,导航条窗口保持不变,这就为用户的浏览提供了方便。
网页为什么要分针:解决重读加载问题每次加载时,只加载不同部分。
(2)框架的基本结构:框架主要包含两个部分,一个是框架集,另一个就是具体的框架文
件。框架集就是存放框架结构的文件,也是访问框架文件的入口文件。如果网页由左右两个
框架组成,那么除了左右两个网页文件之外,还有一个总的框架集文件。
<html>
<head>
</head>
<frameset>
<frame />
单标记
<frame />
...
</frameset>
</html>
<body>主体标记被框架标记<frameset>所代替
二、设置框架集的基本属性
(1)水平分割窗口:分成上下排列的多个窗口
<frameset rows=”高度”>
<frame />
...
</frameset>
Rows 可以取多个值,可以是像素,也可以使占浏览器的百分比
(2)垂直分割窗口:分成左右排列的多个窗口
<frameset cols=”高度”>
<frame />
...
</frameset>
(3) 嵌套分割:
<frameset rows="30%, 70%">
<frame />
<frameset cols="20%, 55%, 25%">
<frame />
<frame />
<frame />
</frameset>
</frameset>
(4) 设置边框是否显示:<frame(frameset) frameborder=”0(1)” >
(5) 框架边框宽度:默认是 1 像素
<frameset framespacing=”xx”>
(6) 框架的边框颜色:<frameset bordercolor=”xx”>
三、设置窗口属性
(1)页面源文件:可以是 HTML 文件,也可以是一个图片或者其他文件。
<frame src=”xxx”>
(2) 页面名称:不允许有特殊字符、连字符、空格等
<frame name=”xxx”>
(3) 固定窗口尺寸:<frame src=”xxx” noresize>
(4) 边框与页面内容的水平边距:<frame src=”xxx” marginwidth=”xxx”>
(5) 边框与页面内容的垂直边距:<frame src=”xxx” marginheight=”xxx”>
(6) 设置是否显示滚动条:<frame src=”xxx” scrolling=”auto”> yes、no、auto(默认)
(7) 不支持框架标记:如果浏览器版本过低,不支持框架结构,用这个标记来告诉浏览
者无法打开信息
<frameset rows="30%, 70%">
<frame>
<frameset cols="20%, 55%, 25%">
<frame>
<frame>
<frame>
</frameset>
<noframe>
<p>对不起您的浏览器不支持框架页面,因此无法显示</p>
</ noframe>
</frameset>
四、浮动框架
不可以设置 framespacing、bordercolor
(1)必须参数:src
<iframe src=”xxx”>
src 可以指向 html 网页
</iframe>
(3)特有参数:width 和 height
<iframe src=”xxx” width=”500” height=”300”>
单位像素
(4)特有属性:align
< iframe src=”xxx align=”center”>
(5)其他参数:frameborder
<iframe src=”xxx” frameborder=”1”>
1 显示,0 不显示
颜色的取值方法:1、单词 2、#000000 -- #ffffff,不区分大小写,六位十六进制的值
#红绿蓝 #ff0000 红 #00ff00 绿 #0000ff 蓝
总结:
1、 单标记:meta、base、input、frame、br、hr
2、 表单中 radio 和 checkbox 的默认选中项都是 checked,下拉列表是 selected
3、 框架中表格是否显示、
表格宽度和颜色用的是:
frameborder、
framespacing 和 bordercolor