2021-06-02

最新推荐文章于 2022-05-07 16:52:13 发布

qq_41413469

最新推荐文章于 2022-05-07 16:52:13 发布

阅读量157

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_41413469/article/details/117469007

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML入门知识（二）

掌握HTML结构
掌握HTML常用标签的使用

在 HTML 中，我们使用 table标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。

在以下代码中，我们使用了table、tr、td三个标签：

table表示表格，表格的所有内容需要写在 table> 和 table之间。
tr是 table row 的简称，表示表格的行。表格中有多少个 tr标签就表示有多少行数据。
td 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式，colspan 和 rowspan 属性来实现内容横跨多个行或列。。

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8" />
   	<title>个人简历</title>
   </head>
   <style>
   	td{
   		width: 80px;
   		height: 30px;
   	}
   </style>
   <body>
   	
   	<p align="center" class="te"><strong>个人简历</strong></p>
   	
   	<table border="1"  align="center" cellspacing="0">
   		<tr align="center" style="height: 10px;">
   			<td >姓名</td>
   			<td></td>
   			<td>性别</td>
   			<td></td>
   			<td>出生年月</td>
   			<td></td>
   			<td colspan="1" rowspan="4">
   				<button>选择文件夹</button>
   			</td>
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td >民族</td>
   			<td></td>
   			<td>政治面貌</td>
   			<td></td>
   			<td>身高</td>
   			<td></td>				
   		</tr >
   		
   		<tr align="center" style="height: 10px;">
   			<td >学制</td>
   			<td></td>
   			<td>学历</td>
   			<td></td>
   			<td>户籍</td>
   			<td></td>	
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td>专业</td>
   			<td></td>
   			<td colspan="2">毕业学校</td>
   			<td colspan="2"></td>
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td colspan="7"><strong>技能、特长或爱好</strong></td>
   			
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td>外语等级</td>
   			<td colspan="2"></td>
   			<td>计算机</td>
   			<td colspan="3"></td>
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td colspan="7">个人履历</td>
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td>时间</td>
   			<td colspan="2">单位</td>
   			<td colspan="4">经历</td>
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td ></td>
   			<td colspan="2"></td>
   			<td colspan="4"></td>
   		</tr><tr align="center" style="height: 10px;">
   			<td></td>
   			<td colspan="2"></td>
   			<td colspan="4"></td>
   		</tr>
   		<tr align="center" style="height: 10px;">
   			<td></td>
   			<td colspan="2"></td>
   			<td colspan="4"></td>
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td colspan="7">联系方式</td>
   		</tr>
   	
   	<tr align="center" style="height: 10px;">
   			<td>通信地址</td>
   			<td colspan="2"></td>
   			<td colspan="4">联系电话</td>
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td>E-mail</td>
   			<td colspan="2"></td>
   			<td colspan="4">邮编</td>
   		</tr>
   		
   		<tr align="center" style="height: 10px;">
   			<td colspan="7">自我评价</td>
   		</tr>

   	</table>
   </body>
</html>

from表单是一个包含表单元素的区域。from表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 form 来设置:

文本域通过 input type=“text” 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
密码字段通过标签 input type=“password” 来定义:
input type=“radio” 标签定义了表单单选框选项
复选框（Checkboxes）
nput type=“checkbox” 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
input type=“submit” 定义了提交按钮.当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1><strong>添加新员工</strong></h1>
		<form>
			员工姓名：<input type="text"><br />
			<br />
			初始密码：<input type="text"/><br />
			<br />
			状态：
			<input type="radio" name="1">在职
			<input type="radio" name="1">离职
			<br /><br />
			<span>员工等级：</span>
			<select>
				<option >门店实习生</option>
				<option >门店实习生</option>
				<option >门店实习生</option>
			</select><br /><br />
			
			<span>角色：</span>
			<select>
				<option >管理员</option>
				<option >管理员</option>
				<option >管理员</option>
			</select><br /><br />
			
			<span>部门：</span>
			<select>
				<option >门店部</option>
				<option >门店部</option>
				<option >门店部</option>
			</select><br /><br />
			
			性别：
			<input type="radio" name="sex">男
			<input type="radio" name="sex">女
			<br /><br />
			
			住址：<input type="text"><br />
			<br />
			电话：<input type="text"/><br />
			<br />
			所属店铺：<input type="text"><br />
			<br />
			电子邮箱：<input type="text"/><br />
			<br />
			
			<input type="submit" value="提交">

		</form>
	</body>
</html>

qq_41413469

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-02

HTML入门知识（二）掌握HTML结构掌握HTML常用标签的使用在 HTML 中，我们使用 table标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。在以下代码中，我们使用了table、tr、td三个标签：table表示表格，表格的所有内容需要写在 table> 和 table之间。tr是 table r
复制链接

扫一扫