前端学习- 常用标签（table表格与form表单）
1、表格
合并单元格： 注意：合并的本质不是侵占，而是给自身添加了位置。 table的属性： 表格的行属性： 表格的单元格属性： 综合实例 注意： 表单存在于浏览器中，用来收集用户信息。收集完成后，提交到服务器 表单属性： 向服务器提交数据的方式： 在以下情况中，请使用post请求： 综合实例
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
元素定义表格行，
元素定义表头(如果有需要的话，表格的第一行替代所有的td),
td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 、 以及 (tbody标签即使没有在html文件中书写，在浏览器页面查看源代码时，显示已经将tbody自动添加到table中了 ) 元素。
rowspan : 垂直合并 （跨行）,在当前行，自身多占了一个单元格
clospan: 水平合并 （跨列），占用了下一行的一个单元格<table>
<tr>
<!--第一行的第一个单元格多占了一个单元格，占了横向的两个单元格的空间-->
<td rowspan ="2">语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<!--第二行的第一个单元多占了下一行的一个单元格，占了纵向两个单元格-->
<td colspan ="2"></td>
<td></td>
<td></td>
</tr>
</table>
<table border="边框宽度" bordercolor="边框颜色" cellspacing="内框宽度值" cellpadding="文字与边框距离值"></table>
<table bgcolor="背景颜色" background="背景图像地址"></table>
<tr height="行的高度" bgcolor="背景颜色" background="背景图片" align="文字水平对齐方式" valign="文字垂直对齐方式"></tr>
的valign属性用来控制表格当前行的垂直对齐方式。
垂直对齐方式有3种，分别是：
向上对齐 top
居中对齐 middle（center）
向下对齐 bottom
<td width="单元格宽度" height="单元格高度" bordercolor="边框的颜色" bgcolor="背景颜色"
background="背景图片" align="文字水平对齐方式" valign="文字垂直对齐方式">
</td>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
table{
width: 600px;
text-align: center;
}
td{
white-space: nowrap;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0">
<tr>
<th colspan="9">苍南乐果包装生产计划单</th>
</tr>
<tr>
<td>客户名称</td>
<td colspan="2"></td>
<td>订货日期</td>
<td colspan="2"></td>
<td>编号</td>
<td colspan="2"></td>
</tr>
<tr>
<td>产品名称</td>
<td colspan="3"></td>
<td>交货日期</td>
<td colspan="4"></td>
</tr>
<tr>
<td>订货数量</td>
<td colspan="3"></td>
<td>数量控多</td>
<td>最多</td>
<td></td>
<td>最少</td>
<td width="50px"></td>
</tr>
<tr>
<td>条形码</td>
<td colspan="3"></td>
<td>内容物</td>
<td colspan="4"></td>
</tr>
<tr>
<td>产品规格</td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="5">材料结构</td>
<td>层数</td>
<td>材料名称</td>
<td>膜宽(cm)</td>
<td>厚度(s)</td>
<td>供应商</td>
<td>重量</td>
<td colspan="2">米数</td>
</tr>
<tr>
<td>第一层</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>第二层</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>第三层</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>第四层</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="5">印刷顺序</td>
<td>版号</td>
<td colspan="2"></td>
<td>版规格</td>
<td colspan="2"></td>
<td>白墨面积</td>
<td></td>
</tr>
<tr>
<td>印刷基材</td>
<td colspan="2"></td>
<td>排版方式</td>
<td colspan="2"></td>
<td>色墨面积</td>
<td></td>
</tr>
<tr>
<td>印刷颜色</td>
<td colspan="5"></td>
<td>油墨类型</td>
<td></td>
</tr>
<tr>
<td colspan="2">新，老版，改版内容</td>
<td colspan="3"></td>
<td>新版</td>
<td colspan="2"></td>
</tr>
<tr>
<td>印刷</td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="4">复合工序</td>
<td>第一层胶水</td>
<td colspan="2"></td>
<td>网昆线数</td>
<td></td>
<td>胶水配比</td>
<td colspan="2"></td>
</tr>
<tr>
<td>第二层胶水</td>
<td colspan="4"></td>
<td>胶水配比</td>
<td colspan="2"></td>
</tr>
<tr>
<td>第三层胶水</td>
<td colspan="4"></td>
<td>胶水配比</td>
<td colspan="2"></td>
</tr>
<tr>
<td>复合要求</td>
<td colspan="4"></td>
<td>熟化时间</td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="6">制袋工序</td>
<td>上封口</td>
<td colspan="5"></td>
<td colspan="2" rowspan="7"></td>
</tr>
<tr>
<td>下封口</td>
<td></td>
<td>背封</td>
<td></td>
<td>袋型</td>
<td></td>
</tr>
<tr>
<td>打孔要求</td>
<td colspan="2"></td>
<td>打孔位置</td>
<td colspan="2"></td>
</tr>
<tr>
<td>撕口型号</td>
<td colspan="2"></td>
<td>撕口位置</td>
<td colspan="2"></td>
</tr>
<tr>
<td>拉链位置</td>
<td colspan="2"></td>
<td>包装箱</td>
<td colspan="2"></td>
</tr>
<tr>
<td>其他要求</td>
<td colspan="4"></td>
<td></td>
</tr>
<tr>
<td rowspan="2">分切工序</td>
<td>分切宽度</td>
<td></td>
<td>cm</td>
<td>分切直径</td>
<td></td>
<td>cm</td>
<tr/>
<tr>
<td>出卷方向</td>
<td colspan="8"></td>
<tr/>
<tr>
<td>备注</td>
<td colspan="8"></td>
<tr/>
<tr>
<td>经办人</td>
<td></td>
<td>审核</td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<tr/>
</table>
</body>
</html>
上述所有内容(table,tr,td),如果没有指定宽高的话，以内容来撑开2、表单
使用场景： 登录，注册，搜索等
表单控件类型：<!--单行文本输入框-->
<input type = "text"/>
<!--密码框-->
<input type = "password"/>
<!--单选按钮-->
<input type = "radio"/>
<!--复选按钮-->
<input type = "checkbox"/>
<!--上传文件-->
<input type = "file"/>
<!--普通按钮-->
<input type = "button"/>
<!--提交按钮-->
<input type = "submit"/>
<!--重置按钮-->
<input type = "reset"/>
<!--label标签-->
<!--包裹住单(复)选框和文字时，点击文字，单(复)选框可以被选中-->
<label></label>
<!--下拉列表-->
<select>
<option>列表选项1</option>
<option>列表选项2</option>
<option>列表选项3</option>
</select>
<!--多行文本输入框-->
<textarea>多行文本框</textarea>
1.type: 样式（每个Input必须填写的属性，默认为text）
2.value: 指定的默认值
3.size: 文本框显示的长度
4.maxlength： 用户可以输入最多的字符
5.name: 用于给input取别名，别名在css或js 以及服务器收集数据时可以使用
6.disabled: 使表单禁用 （可直接写属性名，不写属性值）
7.readOnly: 只可以查看和获取表单的值，但无法修改（可直接写属性名，不写属性值）
8.required: 规定该项input为必须填写，否则整个form表单无法提交（可直接写属性名，不写属性值）
9.placeholder: 用户提示信息
10.action=”表单的提交地址"
11.method=“表单的提交方式”get和post
get
post
速度快
相对get较慢
安全性较低
安全性较高
适用于普通数据的请求,一般用于信息获取，使用 URL 传递参数
适用于账号密码一类保密性数据的传递,一般用于修改服务器上的资源
对所发送信息的数量也有限制，一般在2000 个字符
对所发送的信息没有限制
使用 Request.QueryString 来取得变量的值
通过 Request.Form 来获取变量的值
通过地址栏来传值
通过提交表单来传值
（1）无法使用缓存文件（更新服务器上的文件或数据库）
（2）向服务器发送大量数据（POST 没有数据量限制）
（3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<style type="text/css">
.sub{
margin-left: 45px;
}
.res{
margin-left: 50px;
}
</style>
</head>
<body>
<form method="get" action="表格.html">
用户名：<input type="text" placeholder="请输入用户名" maxlength="20" required="true" />
<!-- password密码框 ，为了保密，在密码框中输入的内容是不可见的-->
密码： <input type="password" placeholder="请输入密码"/>
性别：
<!--单选框，还有下面的复选框都被label标签包裹，作用是当用户点击它们时，鼠标点到框外的文本也会被选中-->
<label>
<!-- radio单选框
name名字相同两者选其一，单选框按钮要加name属性，并且属性值要相同，不然当选中其中一个单选框按钮后，再点另一个也会被选中，不能再点第二次了，没有切换的效果-->
<input type="radio" name="m" checked="true" />男
</label>
<label>
<input type="radio" name="m" />女
</label>
<br/>
爱好：
<!-- checkbox复选框 -->
<label>
<input type="checkbox" />跑步
</label>
<label>
<input type="checkbox" />绘画
</label>
<label>
<input type="checkbox" />打球
</label>
<label>
<input type="checkbox" />音乐
<label/>
<br/>
作品：
<!--file上传文件 -->
<input type="file" />
<br/>
学历：
<!-- select下拉列表 -->
<select name="xueli">
<option>选择你的学历</option>
<option>大专</option>
<option>本科</option>
<!--selected设为true，设置当前下拉选项为选中状态-->
<option selected="true">研究生</option>
</select>
<br/>
简介：
<!-- textarea多行文本框
cols宽度
rows高度-->
<textarea cols="20" rows="10"></textarea><br/>
<!-- submit提交按钮 -->
<input type="submit" value="提交" class="sub" />
<!-- reset重置按钮 -->
<input type="reset" value="重置" class="res" />
</form>
</body>
</html>
你可能感兴趣的:(HTML与CSS)