表格的应用:
表格能将网页分成多个任意的矩形区域, 表格在网页制作中是常用的一种简单布局工具.
<table></table> 表格
<tr></tr>行
<td></td>列
<th></th>表头 设置为表头后, 会加粗显示
<caption></caption>表格标题 应用于<table>与<tr>之间的位置
<table>的属性:
<table width="宽度" height="高度" border="边框粗细" bordercolor="边框颜色" frame="边框样式" rules="内部边框属性" bgcolor="表格背景色"> </table>
<tr>的属性:
<tr align="行内容水平对齐方式:left,right,center" valign="行内容垂直对齐方式:top,middle,bottom,baseline" >
跨行设置: rowspan <td rowspan=" "></td>
跨列设置: colspan <td colspan=" "> </td>
设置单元格间距: cellspacing <table cellspacing=" ">
设置单元格边距: cellpadding <table cellpadding=" "> 单元格中内容与单元格边框的距离
层的应用:
图层也是网页制作中用于定位元素或者布局的一种技术. 但是, 图层比表格的布局更加灵活, 它能够将层中的内容放到浏览器的任意位置.
基本语法:
<div id=" " style="position:定位; left:左边距; top:顶端间距; 宽度; height:高度;"> </div>
在定义图层的时候, 需要将层的样式同时定义, 否则在网页中不会显示出来.
框架的应用:
框架是一种在一个网页中显示多个网页的技术, 通过超链接可以为框架之间建立内容之间的联系, 从而实现页面导航的功能.
框架的主要作用是在一个浏览器窗口显示多个网页, 每个区域显示的网页内容也可以不同, 它的这个特性在"厂"字型的网页中使用极为广泛.
基本语法:
<html><head><title>框架的基本结构</title></head><frameset><frame><frame>
..</frameset><html><frame>的属性:
<frame src="加载文件的路径" name="框架名称" frameborder="边框属性" scrolling="滚动条" noresize marginwidth="框架边缘宽度" marginheight="框架边缘高度">
src: 可以是绝对路径, 也可以是相对路径.
frameborder: 设置框架的边框是否显示, 0 不显示, 1显示.
scrolling: yes添加滚动条, no不添加滚动条, auto自动添加滚动条.
noresize: 不允许改变左侧框架的尺寸, 就是页面被打开后, 浏览者不能通过鼠标调整页面显示的宽度.
<noframe>设置浏览器不支持框架时, 显示网页文件的内容.
<noframe>很抱歉! 由于您的浏览器版本太低, 不支持框架显示内容.</noframe><frameset>的设置:
<frameset frameborder="边框属性" frmaspacing="框架集边框的宽度" bordercolor="边框颜色" cols="将网页左右分割" rows="将网页上下分割">
frameborder: 设置框架集的边框是否显示, 0 不显示, 1显示.
cols, rows:将网页进行分割, 分割方式可以是百分比, 也可以是具体的数值.
frameset
<iframe>浮动框架
浮动框架是框架页面中的一种特例, 在浏览器窗口中嵌入子窗口. <iframe> </iframe>
基本语法:
<iframe src="加载文件路径" name="框架名称" width="框架宽度" height="框架高度" align="浮动框架在网页中的对齐方式"> </iframe>
表单的应用:
表单是网页中提供的一种交互式操作手段, 在网页中的使用十分广泛. 比如: 搜索, 网上注册等.
表单主要可以分为两部分, 一是用HTML源代码描述的表单, 可以直接通过插入的方式添加到网页中. 二是提交后的表单处理, 需要调用服务器编写好的脚本对客户端提交的信息作出回应.
<form> </form>表单标记
<form name="表单名称" method="表单发送方法" action="表单处理程序" enctype="表单编码方式" target="表单显示目标"> </form>
method: 表单发送方法, 可以是post,或者get
实例:
<html><head><title>表单标记</title></head><body><form name="form1" method="post" action="mailto:niudongling@163.com" enctype="text/plain"></form></body></html><input>信息输入
是表单中输入信息常用的标记
<form><input name=" " type=" "></form>插入文本框text
<html><head><title>插入文本框</title></head><body><form><input name="text" type="text" maxlength="8" size="5" value="1"></form></body><html><head><title>插入密码框</title></head><body><form><input name="password" type="password" maxlength="8" size="5"></form></body>Code一行或多行的文字域, 用来输入更多的文字信息, 行间可以换行
在表单中插入文字域, 只要插入成对的的文字域标记<textarea></textarea>就可以插入文字域. wap和id为任选项.
<html>
<head>
<title>插入文字域</title>
</head>
<body>
<form>
<textarea name="text" rows="3" cols="3" wrap="" id=""></textarea>
</form>
</body>
</html>
插入下拉菜单<select>和列表项<option><head>
<title>插入文字域</title>
</head>
<body>
<form>
<textarea name="text" rows="3" cols="3" wrap="" id=""></textarea>
</form>
</body>
</html>
SelectForm