前端学习笔记：HTML学习(二)
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：设置单元格垂直合并，设置值是数值
下面是源代码
<html>
<head>
<meta charset="utf-8">
<title>表格title>
head>
<body>
<h1>表格标签h1>
<table border="1" width="600" height="600" align="center">
<tr>
<th>表头标签thth>
<th>表头标签thth>
<th>表头标签thth>
tr>
<tr>
<td align="center" valign="top">1td>
<td align="center" valign="butten">2td>
<td align="center" valign="middle">3td>
tr>
<tr>
<td align="center">1td>
<td align="center">2td>
<td align="center" >3td>
tr>
<tr>
<td align="center">1td>
<td align="center">2td>
<td align="center">3td>
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样式设置单元格中元素的样式。
因为现在还没有学习到下面以传统布局为例子，做一个个人简历把
源代码如下：
<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>oceanh3>td>
tr>
<tr>
<td align="right"><h3>20112939429h3>td>
tr>
<tr>
<td align="right"><h3>[email protected]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>oceantd>
<td><b>籍贯：b>chinatd>
tr>
<tr>
<td><b>性别：b>男td>
<td><b>身高：b>174cmtd>
tr>
<tr>
<td><b>民族：b>汉td>
<td><b>体重：b>70kgtd>
tr>
<tr>
<td><b>出生日期：b>1212年12月12日td>
<td><b>电话：b>123123123123td>
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.12b> 花果山大学 猪类养殖专业td>
tr>
<tr>
<td><b>2020.01-2020.04b> 重庆市家里蹲养猪有限公司 任职养猪人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.12b>优秀养猪达人荣誉证书td>
tr>
<tr>
<td><b>2020.03b> 优秀养猪代表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属性 定义表单元素的名称，此名称时提交数据时的键名
在下面举一个小例子，来观察表单不同类型中的不同用法
-
<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>
<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>
<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 name="info">textarea>
div>
<br />
<div>
<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="重制">
div>
form>
body>
html>
运行程序
以上几乎都涵盖了表单提交的内容，然后html的学习就到这里啦，后面会写一些关于CSS类型的文章。