html表格标签
1.table标签:声明一个表格,它的常用属性如下:
- border属性 定义表格的边框 设置值是数值
- cellpadding属性 定义单元格内容与边框的距离,设置值是数值
- cellspacing属性 定义单元格内容与单元格之间的距离,设置值是数值
- align属性 设置整体表格相对于浏览器窗口水平的对齐方式,设置值有:left|center|right
- tr标签:定义表格中的一行
3.td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格,它们的常用属性如下:- align:设置单元格中内容的水平对其方式,设置值有left|center|right
- valign: 设置单元格内容的垂直对齐方式,设置值有:top|middle|bottom
- colspan: 设置单元格水平合并,设置值是数值
- rowspan:设置单元格垂直合并,设置值是数值
下面是源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!-- table>(tr>td*3)*3 -->
<h1>表格标签</h1>
<table border="1" width="600" height="600" align="center">
<tr>
<th>表头标签th</th>
<th>表头标签th</th>
<th>表头标签th</th>
</tr>
<tr>
<td align="center" valign="top">1</td>
<td align="center" valign="butten">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center" >3</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<table border="1" width="700" height="300" align="center" cellspacing="0">
<tr>
<th colspan="5" height="15%">基本情况</th>
</tr>
<tr>
<td width="15%">姓名</td>
<td width="25%"></td>
<td width="15%">性别</td>
<td width="25%"></td>
<td rowspan="5" width="20%">
<img src="./images/有人要处对象么没有我一会再来问.jpg" alt="图片">
</td>
</tr>
<tr>
<td width="15%">民族</td>
<td width="25%"></td>
<td width="15%">出生日期</td>
<td width="25%"></td>
</tr>
<tr>
<td width="15%">政治面貌</td>
<td width="25%"></td>
<td width="15%">健康情况</td>
<td width="25%"></td>
</tr>
<tr>
<td width="15%">籍贯</td>
<td width="25%"></td>
<td width="15%">学历</td>
<td width="25%"></td>
</tr>
<tr>
<td width="15%">电子信箱</td>
<td width="25%"></td>
<td width="15%">联系电话</td>
<td width="25%"></td>
</tr>
</table>
</body>
</html>
用浏览器运行程序
页面布局概述
语句也可以叫做排版,它指的是把文字和图片等元素按照我们的意思有机的排列在页面上,布局的方式分为两种:
-
1.table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片等元素放入单元格中,隐藏
表格的边框,从而实现布局。这种布局方式也叫做传统布局,目前主要使用在EDM(广告邮件中的页面)中,主流
的布局方式不用这种。 -
2.HTML+CSS布局(DIV+CSS):主要通过css样式是指来布局文字或图片等元素,需要用到css盒子模型、
盒子类型、css浮动、css定位、css背景图定位等知识来布局,它比传统布局要复杂,目前是主流的布局方式。
table布局实例
table来做整体页面的布局,布局的技巧归纳为如下几点:
- 1 按照设计图的尺寸设置表格的宽和高以及单元格的宽高
- 2.将表格border、cellpadding、cellspacing全部设置为0,表格的边框和间距 就不占用页面空间,它只起到划分空间的作用。
- 3 针对局部复杂的布局,可以在单元格里面在嵌套表格,嵌套表格划分局部空间
- 4.单元格中的元素或则嵌套的表格用align和valign设置对齐方式
- 5.通过属性或者css样式设置单元格中元素的样式。
因为现在还没有学习到下面以传统布局为例子,做一个个人简历把
源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body>
<table width="800" height="800" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="200" align="center">
<tr height="100">
<td></td>
</tr>
<tr>
<td align="center" ><img src="./images/有趣.jpg" alt="图片"></td>
</tr>
<tr>
<td align="right"><h3>ocean</h3></td>
</tr>
<tr>
<td align="right"><h3>20112939429</h3></td>
</tr>
<tr>
<td align="right"><h3>ocean@126.com</h3></td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<table width="480" border="0" cellpadding="0" cellspacing="0">
<tr height="80">
<td></td>
</tr>
<tr>
<td align="right">
<img src="./images/用我们宾阳话你就是个压嘿.jpg">
</td>
</tr>
</table>
<br>
<hr>
<br>
<table width="480" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><b>个人基本情况</b></td>
</tr>
<tr>
<td><b>姓名:</b>ocean</td>
<td><b>籍贯:</b>china</td>
</tr>
<tr>
<td><b>性别:</b>男</td>
<td><b>身高:</b>174cm</td>
</tr>
<tr>
<td><b>民族:</b>汉</td>
<td><b>体重:</b>70kg</td>
</tr>
<tr>
<td><b>出生日期:</b>1212年12月12日</td>
<td><b>电话:</b>123123123123</td>
</tr>
<tr>
<td><b>居住地址:</b>花果山</td>
<td><b>专业:</b>猪类养殖</td>
</tr>
</table>
<br />
<br />
<table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><b>教育背景及工作经历</b></td>
</tr>
<tr>
<td><b>2019.05-2019.12</b> 花果山大学 猪类养殖专业</td>
</tr>
<tr>
<td><b>2020.01-2020.04</b> 重庆市家里蹲养猪有限公司 任职养猪人</td>
</tr>
</table>
<br />
<br />
<table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><b>所获证书</b></td>
</tr>
<tr>
<td><b>2019.12</b>优秀养猪达人荣誉证书</td>
</tr>
<tr>
<td><b>2020.03</b> 优秀养猪代表</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>
运行程序,在浏览器中打开。网页效果如下
html表单标签
表单用于手机不同类型的用户输入,表单有不同类型的标签组成,相关标签及属性用法如下:
1.from标签 定义整体的表单区域
- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式, 一般有“get” 和“post”两种方式
- label标签 为表单元素定义文字标注
- input标签 定义通用的表单元素
-
type属性
- type=“text” 定义单行文本输入值
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“submit” 定义提交按钮
- type=“file” 从系统中选入文件
- type=“reset” 定义重制按钮
- type=“image” 定义图片作为提交按钮, 用src属性定义图片地址
- type=“hidden” 第一一个隐藏的表单域,用来存储值
-
value属性 定义表单元素的值
-
name属性 定义表单元素的名称,此名称时提交数据时的键名
在下面举一个小例子,来观察表单不同类型中的不同用法
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="" method="get">
<h1>表单注册</h1>
<div>
<label>用户名:</label>
<input type="text" name="username" />
</div>
<br />
<div>
<label>密  码:</label>
<input type="password" name="password">
</div>
<br />
<div>
<label>性 别:</label>
<!-- type="radio"为选项框,当name="gender"时,单选 -->
<input type="radio" name="gender" value="0"> 男
<input type="radio" name="gender" value="1"> 女
<input type="radio" name="gender" value="2"> 元谋人
</div>
<br />
<div>
<label>爱 好:</label>
<!-- checkbox多选框 -->
<input type="checkbox" name="like" value="girl"> 美女
<input type="checkbox" name="like" value="study"> 学习
<input type="checkbox" name="like" value="python"> python
<input type="checkbox" name="like" value="web"> 前端
</div>
<br />
<div>
<label>照 片:</label>
<input type="file" name="photo">
</div>
<br />
<div>
<label>个人介绍:</label>
<!-- <textarea> 标签可以输入多行文字-->
<textarea name="info"></textarea>
</div>
<br />
<div>
<!-- 下拉表单,一般以select和option连用,option嵌套在select标签中-->
<label>国 家:</label>
<select name="slist">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="han">韩国</option>
<option value="jp">日本</option>
<option value="fd">法国</option>
</select>
</div>
<br />
<div>
<input type="submit" value="上传">
<input type="reset" value="重制">
<!-- 使用图片提交时,可能会出现两重提交的BUG,所以不建议使用,<input type="image" src="images/有趣.jpg" value="提交">-->
</div>
</form>
</body>
</html>
运行程序
以上几乎都涵盖了表单提交的内容,然后html的学习就到这里啦,后面会写一些关于CSS类型的文章。