网页设计HTML--（三）

表格

表格边框控制
table中border控制边框的有无和粗细

参数	解释
border=‘1’	表示边框1个像素的宽度
width=‘300’	宽度300像素
width=‘300%’	加上百分号表示高度
cellspacing=‘4’	单元格之间的间距，默认一般给0
cellpadding=‘10’	控制文字和边框之间的距离，一般给0

<table>	表格属性align='center'单元各种字体居中
<tr>
<td></td> 单元格属性align='center'单元各种字体居中
</tr>行
</table>

属性：align='center’单元格中字体居中

参数	功能
left	左对齐
right	右对齐
valign	垂直方向的控制属性
top	顶部
middle	居中
bottom	底部

表格的横跨跨列
colspan=‘3’ 从前往后合并3列，属性
rowspan=‘3’ 从上往下合并3行，属性

内联框架

<iframe>内联框架
语法：
<iframe src='path' name='mainframe' frameborder='x' scrolling='yes/no' width='x' height='y'></iframe>

属性	功能
src	引用页面地址
name	框架标识名
frameborder=‘0’	边框的有无
scrolling=‘0’	无滚动条 是否出现滚动条
width	框架高度
height	框架宽度

示例：

	<a href="https://www.baidu.com" target="content">百度</a>
	<a href="https://www.sina.com" target="content">新浪</a>
	<a href="https://www.qq.com/" target="content">腾讯</a>
	<br>
	<iframe name="content" width='800' height='600'></iframe>

超链接网页的打开页面也可在内敛框架中打开，如上述例子：
显示结果：

表单

表单元素必须位于<form></form>标签中
form标签的两个属性:

属性	功能
method	规定如何发送表单数据
action	表示向何处发送表单数据

示例：

<form method="post" action="">
	<p>名字：<input name="name" type="text"></p>
	<p>密码：<input name="pass" type="password"></p>
	<p>
		<input type="submit" name="Button" value="提交">
		<input type="reset" name="Reset" value="重填">
	</p>
</form>

显示结果：

输入框：
<input type="" name="" value="">
input包含的属性有 type、name、value、size、maxlength、checked

属性	功能
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符
checked	type为radio或checkbox时，指定按钮是否是被选中

属性： type属性对应的值

参数	功能
text	文本框
password	密码框
checkbox	多选按钮
radio	单选按钮
submit	提交按钮
reset	重置按钮
file	文件上传的元素
hidden	隐藏表单域
image	图像按钮
button	普通按钮
默认为text

示例：1、单选

 <!--单选-->
  <p>性别：
	<input name="gen" type="radio" value="boy" checked="checked"/ >男
	<input name="gen" type="radio" value="gril"/>女
  </p>

效果：

说明：

1、checked 属性表示默认状态下选中的内容。
2、多组单选标签的name不可相同。

2、多选

 <!--多选-->
<p>
	爱好：
	<input type="checkbox" name="likes" value ="read" checked="checked"/>读书
	<input type="checkbox" name="likes" value ="playball" checked="checked"/>打球
	<input type="checkbox" name="likes" value ="game"/>游戏
</p>
 checked 属性表示默认状态下选中的内容

效果：

3、列表框

 <!--列表框-->
<p>
  <select name="list" size="3">
  <!--- size="3"  属性是将所有的数据以一个列表的形式全部显示出来，如不写此属性则是一个窗口通过点击展开来进行选择-->
  <option value="1" >1</option>
  <option value="2" >2</option>
  <option value="3" selected="selected">3</option>
  </select>
  </p>
  <!--selected="selected" 此属性是设置默认选项的功能-->

效果：

图片按钮
<input type="image" src="../picture/timg.jpg"/>
提交按钮
<input type="submit" value="注册"/>
value=“注册” 按钮上显示的提示信息
重置按钮
<input type="reset" value="重置"/>
普通按钮
<input type="bollon" value="普通按钮"/>

多行文本域

<p>
	协议：
	<textarea name="xiyi" cols="10" rows="2">
	的沙发沙发沙发事件发生的
	的沙发沙发沙发事件发生的
	</textarea>
  </p>

效果：
cols=“10” 一行十个字符
rows=“2” 高度两个字符

文件域

  <p>
	照片
	<input type="file" name="photo"/>
  </p>

效果：

如果要上传，要在form表单除加上
enctype =“multipart/form-data” 这个属性

隐藏表单域–暂时无作用
<input type="hidden" value='666' name="userid">

只读和禁用 属性
<input name ="name" type="text" value ="张三" readonly="readonly">
只能读取文本框数据不可修改
<input type="submit" disabled="disabled" value="保存">
禁用不可选中disabled=“disabled”，不可点击，一般只在按钮上使用禁用属性。

域 <fieldset>
域标题 <legend>用户信息</legend>

<form action="" maethod="post">
	<fieldset>
	<legend>用户信息</legend>
		姓名：<input type="text"/>
		......
	</fieldset>
</form>

效果：

增强鼠标的可用性
作用：

自动将焦点转移到与该标注相关的表单元素上
<label for="id"#表单元素的id > 姓名：</label> ：<input type="text" id="uname" #表单元素id# name="uname"/>

END!