时间戳

首页 > 技术文章 > HTML的表格、表单和框架

HTML的表格、表单和框架

cgj1994 2018-08-08 20:51 原文

表格元素

  • <table></table>表格是由table标签定义的，有以下几个属性：width：宽度 加px是以像素为单位，加百分比是以百分比放大；border：设置边框粗细；cellspacing：设置单元格与table边框的距离；cellpadding设置单元格与单元格之间的距离；bordercolor：设置边框颜色。
  • <tr></tr>表格的行
  • <td></td>表格的列，有以下几个属性：width：宽度； height：高度；align：水平对齐方式；valign：垂直对齐方式；bgcolor：背景颜色；rowspan：上下合并； colspan：左右合并。

align有以下几个属性：left：左； right：右；center：居中；

valign有以下几个属性：top：上；bottom下；middle：中间；

  • <th></th>通常做表头
		<table border="1" cellspacing="0" cellpadding="" width="490">
			<tr>
				<td align="center" valign="middle" width="70" height="40">姓名</td>
				<td width="70"></td>
				<td align="center" valign="middle" width="70">性别</td>
				<td width="70"></td>
				<td align="center" valign="middle" width="70">出生年月</td>
				<td width="70"></td>
				<td width="70" rowspan="4"></td>
			</tr>
			<tr>
				<td align="center" valign="middle" height="40">民族</td>
				<td></td>
				<td align="center" valign="middle">政治面貌</td>
				<td></td>
				<td align="center" valign="middle">身高</td>
				<td></td>			
			</tr>
			<tr>
				<td align="center" valign="middle" height="40">学制</td>
				<td></td>
				<td align="center" valign="middle">学历</td>
				<td></td>
				<td align="center" valign="middle">户籍</td>
				<td></td>
			</tr>
			<tr>
				<td align="center" valign="middle" height="40">专业</td>
				<td></td>
				<td align="center" valign="middle" colspan="2">毕业学校</td>
				<td colspan="2"></td>
			</tr>
		</table>
		<table border="" cellspacing="0" cellpadding="" width="490">
			<tr>
				<th height="40">技能、特长或爱好</th>	
			</tr>
		</table>
		<table border="" cellspacing="0" cellpadding="" width="490">
			<tr>
				<td align="center" valign="middle" width="70" height="40">外语等级</td>
				<td width="140"></td>
				<td align="center" valign="middle" width="70">计算机</td>
				<td width="210"></td>
			</tr>
		</table>

 

表单元素

  • <form></form>标签定义表单有以下几个属性：action：提交给哪个页面 method： 数据提交的方式（ get：显示提交 post：隐式提交） target：页面打开方式（ _blank：在新窗口打开页面  _self：在自身的页面打开）
  • 文本类
文本框<input type="text" name="uid" id="" value=""  placeholder="请输入用户名"/>

密码框<input type="password" name="pwd" id="" value="" placeholder="请输入密码"/>

文本域<textarea rows="10" cols="10"></textarea>

隐藏域<input type="hidden" name="hid" id="" value="123" />

文本框与密码框的区别是tpye属性不一样，form传值时，都是以name = value 的形式去传值。placeholder:默认在文本框中显示的文字

 

  • 按钮类
普通按钮<input type="button" id="" value="普通登录" />
重置按钮<input type="reset" value="重置" />
图片按钮<input type="image" src="img/4_5b613b6b22e220.jpg" name="你好" width="20" height="20" />
提交按钮<input type="submit" id="" name="uid" value="提交" />

普通按钮没有动作显示，重置按钮是将表单重置，图片按钮和提交按钮有提交功能。

 

  • 选择类

单选框

性别：<input type="radio" name="" id="" value="" checked="checked" />男<br /> 
<input type="radio" name="" id="" value="" />女

 

性别：<input type="radio" name="sex" id="" value="" checked="checked" />男<br /> 
<input type="radio" name="sex" id="" value="" />女

 

当name值一样时，实现单选的切换

  • 复选框
<input type="checkbox" name="" id="" value="" />张店
<input type="checkbox" name="" id="" value="" />桓台
<input type="checkbox" name="" id="" value="" />沂源
<input type="checkbox" name="" id="" value="" />高青
<input type="checkbox" name="" id="" value="" />临淄

 

  • 下拉框
<select name="喜好">
<option>玩游戏</option>
<option>听音乐</option>
<option>看电影</option>
<option>运动</option>

 

  • 文件选择
<input type="file" name="tp" />

 

  • 其他属性

readonly ="readonly" ：只读，只提交value值

disabled="disabled"：不可用，不能提交value值

账户<input type="text" id="" value=""readonly="readonly" />
账户1<input type="text" id="" value="" disabled="disabled" />

 

cheched ="checked"  :是单选框radio和多选框checkbox的默认选中

<p>
性别：<input type="radio" name="sex" id="" value="" checked="checked" />男<br /> 
<input type="radio" name="sex" id="" value="" />女
</p>
<p>
家庭住址：<input type="checkbox" name="" id="" value="" checked="checked" />张店
<input type="checkbox" name="" id="" value="" />桓台
<input type="checkbox" name="" id="" value="" />沂源
<input type="checkbox" name="" id="" value="" />高青
<input type="checkbox" name="" id="" value="" />临淄
</p>

 

selected = "selected" 用在下拉列表中，设置哪一项选中

<select name="喜好">
	<option>玩游戏</option>
	<option selected="selected">听音乐</option>
	<option>看电影</option>
	<option>运动</option>
</select>

 

框架

<iframe></iframe>框架：可以嵌在普通页面里面。有以下几个属性：src ：框架里面显示的页面的地址；width ：框架的宽度  ；height：框架的高度 ； frameborder：框架的边  ； scrolling ：滚动条

<div>
	这是我的页面
</div>
<iframe src="http://biaozhu.baidu.com/" width="300"height="300" >
</iframe>
<iframe src="http://biaozhu.baidu.com/" width="300"height="300"  frameborder="no" >
</iframe>
<iframe src="http://biaozhu.baidu.com/" width="300"height="300"  frameborder="no" scrolling="yes">
</iframe>

 

<frameset></frameset>标签：将窗口分割的框架集，如果使用此框架，当前页面不能由<body></body>标签。有以下几个属性：：cols ：左右拆分，rows：上下拆分， frameborder ：边框。

 

<frameset>内涵<frame />标签，有src：框架要显示的页面地址；scrolling：滚动条几个属性。

<frameset cols="400,*">
	<frame src="https://www.baidu.com/>
	<frame src="4.html" />
</frameset>
<frameset rows="400,*">
	<frame src="https://www.baidu.com/>
	<frame src="4.html" />
</frameset>

 

其他

<marquee></marquee>标签，文字滚动标签。direction：滚动方向

<marquee direction="up">北京你好！！！</marquee>
<marquee direction="left">北京你好！！！</marquee>

 

<mark></mark> 标记标签

<hr>做分隔线

<marquee direction="left"> 北京你好！！！</marquee>
<hr />
<p><mark>北京</mark>真好</p>

 

页面嵌入视频 vedio标签
 

推荐阅读