表格的应用:
表格能将网页分成多个任意的矩形区域, 表格在网页制作中是常用的一种简单布局工具.
<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:顶端间距; width:宽度; height:高度;"> </div>
在定义图层的时候, 需要将层的样式同时定义, 否则在网页中不会显示出来.
框架的应用:
框架是一种在一个网页中显示多个网页的技术, 通过超链接可以为框架之间建立内容之间的联系, 从而实现页面导航的功能.
框架的主要作用是在一个浏览器窗口显示多个网页, 每个区域显示的网页内容也可以不同, 它的这个特性在"厂"字型的网页中使用极为广泛.
基本语法:
<html>
<head>
<title>框架的基本结构</title>
</head>
<frameset>
<frame>
<frame>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
..
</frameset>
<html>在框架集的页面中, <body>标记将被<frameset>标记代替, 然后再利用<frame> 标记去定义框架结构, 常见的分割框架方式有: 左右分割, 上下分割, 嵌套分割.
<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:将网页进行分割, 分割方式可以是百分比, 也可以是具体的数值.
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
frameset
<html>
<head>
<title>框架的基本结构</title>
</head>
<frameset cols="380*,380*">
<frame src="http://www.baidu.com" frameborder="1">
<frame src="http://www.google.com" frameborder="0">
</frameset>
<html><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>name是插入控件的名称, type是插入控件的类型,如文本框,复选框,按钮等
插入文本框text
<html>
<head>
<title>插入文本框</title>
</head>
<body>
<form>
<input name="text" type="text" maxlength="8" size="5" value="1">
</form>
</body>插入密码框password
<html>
<head>
<title>插入密码框</title>
</head>
<body>
<form>
<input name="password" type="password" maxlength="8" size="5">
</form>
</body>插入:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<form>
<input name="file" type="file"> <!插入文件域>
<input name="c1" type="checkbox" value="sport"><!插入复选框>
<input name="r1" type="radio" value="按钮"> <!插入单选按钮>
<input name="b1" type="button" id="c1" value="标准按钮"> <!插入标准按钮,id为可选项>
<input name="submit" type="submit" value="提交"><!插入提交按钮>
<input name="reset" type="reset" value="重置"><!插入重置按钮>
<input name="image" type="image" src="10-3-9.jpg" width="80" height="60" border="0"> <!插入图像域>
<input name="h1" type="hidden" value=" "><!插入隐藏域>
</form>插入文字域textarea
一行或多行的文字域, 用来输入更多的文字信息, 行间可以换行
在表单中插入文字域, 只要插入成对的的文字域标记<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>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Select
<html>
<head>
<title>插入下拉菜单和列表项</title>
</head>
<body>
<form>
<select name="爱好" size="4">
<option value="1">音乐
<option value="2">美术
<option value="3">体育
</select>
<select name="" size="">
<option value="1">唱歌
<option value="2">画画
<option value="3">长跑
</form>
</body>
</html>表单综合实例:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Form
<html>
<head>
<title>表单应用</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="408" border="1" align="center">
<tr>
<td width="34" height="32"> </td>
<td colspan="2">会员注册</td>
</tr>
<tr>
<td> </td>
<td width="83"><div align="right">用户名:</div></td>
<td width="269"><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">密码:</div></td>
<td><input type="password" name="textfield2"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">确认密码:</div></td>
<td><input type="password" name="textfield3"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">性别:</div></td>
<td><input type="radio" name="radiobutton" value="radiobutton">
男
<input type="radio" name="radiobutton" value="radiobutton">
女</td>
</tr>
<tr>
<td> </td>
<td><div align="right">爱好:</div></td>
<td><input type="checkbox" name="checkbox" value="checkbox">
体育
<input type="checkbox" name="checkbox2" value="checkbox">
音乐
<input type="checkbox" name="checkbox3" value="checkbox">
文学
<input type="checkbox" name="checkbox4" value="checkbox">
其它</td>
</tr>
<tr>
<td> </td>
<td><div align="right">特长:</div></td>
<td><select name="select">
</select></td>
</tr>
<tr>
<td> </td>
<td><div align="right">联系电话:</div></td>
<td><input type="text" name="textfield4"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交"></td>
<td><input type="reset" name="Submit2" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>