Python HTML和CSS 2：表格、传统布局以及表单 介绍
总体内容
1、html 表格
2、传统布局
3、html 表单
一、表格
-
1.1、
<table>标签：声明一个表格(默认是看不到的，我们需要设置它的属性、行以及具体的表格)，它的常用属性如下：-
border属性 定义表格的边框，设置值是数值 -
cellpadding属性 定义单元格内容与边框的距离，设置值是数值 -
cellspacing属性 定义单元格与单元格之间的距离，设置值是数值 -
align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left|center|right
-
-
1.2、
<tr>标签：定义表格中的一行 -
1.3、
<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格(默认有加黑的样式)，它们的常用属性如下：-
align设置单元格中内容的水平对齐方式,设置值有：left|center|right -
valign设置单元格中内容的垂直对齐方式top|middle|bottom -
colspan设置单元格水平合并，设置值是数值 -
rowspan设置单元格垂直合并，设置值是数值
-
-
1.4、光说不练假把戏，我们用一个例子对表格制作练习，如下效果
表格的效果
-
<1>、定义一个表格，设置一些属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <h1>表格</h1> <table border="1" width="600" height="500" align="center"> </table> </body> </html> -
<2>、定义6行5列，行用
<tr>标签标示，行中的每个小格子用<td>标示<table border="1" width="600" height="500" align="center"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> -
<3>、合并第一行和最后一列
<table border="1" width="600" height="500" align="center"> <tr> <td colspan="5"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td rowspan="5"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>
合并第一行和最后一列
-
<4>、设置宽度比例，以最多列为例
<tr> <td width="15%"></td> <td width="23%"></td> <td width="15%"></td> <td width="23%"></td> <td rowspan="5" width="24%"><img src="images/吉多.png" alt="图片" width="100%"></td> </tr>
设置宽度比例，以最多列为例
-
二、传统布局
- 2.1、页面布局概述
布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：- <1>、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫 传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。
- <2>、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
-
2.2、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> <!--topmargin 顶格处理--> <body topmargin="0"> <table width="800" height="800" border="0" align="center" cellspacing="0" cellpadding="0"> <tr> <td width="260" bgcolor="#f2f2f2" valign="top"> <table width="200" border="0" cellspacing="0" cellpadding="0" align="center"> <tr height="100"></tr> <tr> <td align="right"><img src="images/吉多.png" width="200"></td> </tr> <tr> <td align="right">小虎</td> </tr> <tr> <td align="right">18500652881</td> </tr> <tr> <td align="right">2318151015@qq.com</td> </tr> </table> </td> <td width="30"></td> <td width="480" valign="top"> <table width="480" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="80"></td> </tr> <tr> <td align="right"><img src="images/resume.png" width="238"></td> </tr> </table> <br> <hr/> <br> <table width="480" height="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"><b>个人基本情况</b></td> </tr> <tr> <td><b>姓名：</b>小虎</td> <td><b>籍贯：</b>河南商丘</td> </tr> <tr> <td><b>性别：</b>男</td> <td><b>身高：</b>175</td> </tr> <tr> <td><b>民族：</b>汉</td> <td><b>体重：</b>70kg</td> </tr> <tr> <td><b>出生日期：</b>1992.02.02</td> <td><b>电话：</b>18500652881</td> </tr> <tr> <td><b>现居地址：</b>海淀区中关村</td> <td><b>专业：</b>计算机技术</td> </tr> </table> <br> <table> <tr> <td><b>教育背景及工作经历</b></td> </tr> <tr> <td><b>2008.09-2011.06</b> 北京大学 计算机专业</td> </tr> <tr> <td><b>2011.06-2013.09</b> 希艾欧管理技术有限公司 iOS开发工程师</td> </tr> </table> <br> <table> <tr> <td><b>所获证书</b></td> </tr> <tr> <td><b>2009：</b> 荣获高级计算机证书</td> </tr> <tr> <td><b>2008：</b> 荣获优秀学生</td> </tr> </table> </td> <td width="30"></td> </tr> </table> </body> </html>提示：图片自己找个替换的，也可以找我要源码
-
三、html 表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
-
3.1、
<form>标签 定义整体的表单区域(表单内容都放到<form></from>里面就好)action属性 定义表单数据提交地址,空内容表示提交到本地
method属性 定义表单提交的方式，一般有“get”方式和“post”方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h1>表单</h1> <from action="" method="post"> 表单内容 </from> </body> </html> -
3.2、
<label>标签 为表单元素定义文字标注(与下面的3.3配合使用) -
3.3、<input>标签 定义通用的表单元素
-
type属性(name=""是在提交时候的一个字段名)-
type="text"定义单行文本输入框
`type="text"` 定义单行文本输入框
<div> <label>用户名：</label> <input type="text" name="userName"> </div> -
type="password"定义密码输入框
`type="password"` 定义密码输入框
<div> <label>密 码：</label> <input type="password" name="password"> </div> -
type="radio"定义单选框
`type="radio"` 定义单选框
<div> <label>性 别：</label> <input type="radio" name="gender" value="0"> 男 <input type="radio" name="gender" value="1"> 女 </div> -
type="checkbox"定义复选框（多选）
`type="checkbox"` 定义复选框（多选）
<div> <label>爱 好：</label> <input type="checkbox" name="like" value="0"> 打游戏 <input type="checkbox" name="like" value="1"> 打篮球 <input type="checkbox" name="like" value="2"> 打网球 </div> -
type="file"定义上传文件
`type="file"` 定义上传文件
<div> <label>照 片：</label> <input type="file" name="photo"> </div> -
type="submit"定义 提交 按钮<div> <input type="submit" name="" value="提交"> </div> -
type="reset"定义 重置 按钮<div> <input type="reset" name="" value="重置"> </div> -
type="button"定义一个普通按钮<input type="button" name="" value="普通的按钮"> -
type="image"定义图片作为提交按钮，用src属性定义图片地址<input type="image" src="images/logo.png" name="">提示：一般会导致提交两次，不建议使用，建议使用
submit -
type="hidden"定义一个隐藏的表单域，用来存储值<input type="hidden" name="hidenValue" value="2">
-
value属性 定义表单元素的值name属性 定义表单元素的名称，此名称是提交数据时的键名
-
-
3.4、
<textarea>标签 定义多行文本输入框
`<textarea>` 标签 定义多行文本输入框
<div> <label>个人介绍：</label> <textarea></textarea> </div> -
3.5、
<option>标签 与<select>标签配合，定义下拉表单元素中的选项
<option>标签 与<select>标签配合，定义下拉表单元素中的选项
<div> <label>籍 贯：</label> <select> <option>北京</option> <option>上海</option> <option>杭州</option> <option>广州</option> </select> </div>
补充：把label与其他标签关联起来，也就是，点击label与点击相关联的标签效果一样，如下：在点击 密码 与 输入框 的效果一样
<div>
<label for="password">密 码：</label>
<input type="password" name="password" id="password">
</div>
提示：
for的内容与id的内容保持一直即可
