目录
一、表格
二、表单
一、表格
1、表格属性说明
table标签：在html中表示为表格的意思，用来定义表格整体
<table
</table>
常见作用在表格上的属性：
border：定义表格的边框，不添加或者设置0px时没有表格分割线
width、height：定义表格的宽高
rowspan：融合行单元格，融合并不是说把其他元素的值覆盖了，而是其他元素正常会衍生排版，需要自己加减去掉因为融合导致的冲突单元格
colspan：融合列单元格
cellspacing：设置表格与表格之间的间隔距离，0px表示没有间隔
cellpadding：设置表格元素与表格之间的间隔距离
2、表格配套标签说明
td标签：表格单元格，或者说表格内容，用来包裹元素的
th标签：表格的表头
tr标签：表示表格的行，一行里可以存在多个td
caption标签：表格的名称
td标签：表格单元格，或者说表格内容，用来包裹元素的
<table>
<tr>
<td>内容</td>
</tr>
</table>
th标签：表格的表头
<table>
<tr>
<th>表头</th>
</tr>
</table>
tr标签：表示表格的行，一行里可以存在多个td
<table>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
caption标签：表格的名称
<table>
<caption>内容</caption>
</table>
3.表格实操演练
网上百度随便找了一个表格，模拟下这个表格，先上图
资产负债.jpg
下面是自己写的效果图：
实操练习.png
工程代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表.No1133000 实操练习</title>
<style>
table {
text-align: center;
background-image: linear-gradient(#fff, #87BEE5)
}
td {
font-style: normal;
font-weight: bold;
width: 150px;
}
#left_title {
text-align: left;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0px" cellpadding="10px">
<caption>表.No1133000 实操练习</caption>
<tr>
<td colspan="7">资产负债表水平分析表</td>
</tr>
<tr>
<td rowspan="2">项目</td>
<td rowspan="2">2009年</td>
<td rowspan="2">2008年</td>
<td colspan="2">变动情况</td>
<td rowspan="2">对资产影响（%）</td>
</tr>
<tr>
<td>变动额</td>
<td>变动百分比</td>
</tr>
<tr>
<td id="left_title" colspan="7">流动资产</td>
</tr>
<tr>
<td>货币资金</td>
<td>9,743 152 155.24</td>
<td>8,093,721.891.16</td>
<td>1649.430.264.08</td>
<td>20.38%</td>
<td>10.47%</td>
</tr>
<tr>
<td>应收票据</td>
<td>380760.283.20</td>
<td>170612609.00</td>
<td>210,147.674.20</td>
<td>123.17 %</td>
<td>1.33%</td>
</tr>
<tr>
<td>应收账款</td>
<td>21,386,314.28</td>
<td>34 825.094.84</td>
<td>-13 438 780.56</td>
<td>-38.59%</td>
<td>-0.09%</td>
</tr>
<tr>
<td>预付款项</td>
<td>1,912,600.00</td>
<td>18,12,1.891.16</td>
<td>23.1.264.08</td>
<td>80.38%</td>
<td>11.47%</td>
</tr>
<tr>
<td>应收利息</td>
<td>9,155.24</td>
<td>721.891.16</td>
<td>430.264.08</td>
<td>10.38%</td>
<td>0.47%</td>
</tr>
<tr>
<td>其他应收款</td>
<td>155.24</td>
<td>121.891.16</td>
<td>430.264.08</td>
<td>2.38%</td>
<td>1.47%</td>
</tr>
<tr>
<td>存货</td>
<td>9,99 155.24</td>
<td>891.16</td>
<td>430.264.08</td>
<td>66.38%</td>
<td>11.47%</td>
</tr>
<tr>
<td>一年内到期的非流动资立</td>
<td>123 155.24</td>
<td>666.891.16</td>
<td>264.08</td>
<td>12.38%</td>
<td>11.47%</td>
</tr>
<tr>
<td>流动资产合计埃烦椿唉前甸</td>
<td>9,999 999 999.99</td>
<td>9,999,999.999.99</td>
<td>999.999.999.08</td>
<td>99.99%</td>
<td>99.99%</td>
</tr>
</table>
</body>
</html>
侧重点：
1.如果说存在合并单元格的情况，总数一定是不变的，即合并单元格的部分不能当成一个单元格项。
2.合并单元格的下一行内容对应上一行单元格内容的时候，合并单元格中没有内容的项，是可以省略不写的。
3.css3文本加粗写法 font-style: normal; font-weight: bold;
4.表格线性渐变 background-image: linear-gradient(#fff, #87BEE5)
5.表格内容居中text-align: center;
二、表单
网页上用于采集用户手动输入的数据，常见用于用户注册、信息填报之类的。
1、表单标签
一共就分为三种
input：定义表单项，通过type属性控制文本输入形式，
select：定义下拉列表，
textarea：定义文本域
type值的属性有很多：
1.text：默认值，单行文本输入内容
2.password：密码字段
3.radio：单选按钮
4.checkbox：复选框
5.file：文件上传按钮
6.date/time/datetime-local：日期/时间/日期时间
7.number：数字输入框
8.email：邮件输入框
9.hidden：隐藏块，隐藏域，占位
10.submit/reset/button：提交按钮/重置按钮/可点击按钮
2、表单属性
action：定义提交表单时 向何处发送数据，举例：url传参
method：规定发送表单数据的方式，get、post二选一
3.表单演练
照着type类型全部梳理一遍，展示下对应的最终效果，书写顺序跟上面type值的顺序一致
属性结果.png
代码如下，ui有点丑，有兴趣可以自己敲敲并且处理下css样式，此处只做属性演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="" method="get">
`1.text：默认值，单行文本输入内容` <input type="text" required name="name"><br>
`2.password：密码字段` <input type="password" name="password"><br>
`3.radio：单选按钮`
<label><input type="radio" name="radio" value="1"> AAA</label>
<label><input type="radio" name="radio" value="2"> BBB</label><br>
`4.checkbox：复选框`
<label><input type="checkbox" name="checkbox">AAA</label>
<label><input type="checkbox" name="checkbox">BBB</label>
<label><input type="checkbox" name="checkbox">CCC</label><br>
`5.file：文件上传按钮`
<input type="file" name="file"><br>
`6.date/time/datetime-local：<br> 日期/时间/日期时间`<br>
<input type="date" name="date" id=""><br>
<input type="time" name="time" id=""><br>
<input type="datetime-local" name="datetime-local：日期" id=""><br>
`7.number：数字输入框 `
<input type="number" name="number" id=""><br>
`8.email：邮件输入框`
<input type="email" name="email：邮件输入框" id=""><br>
`9.hidden：隐藏块，隐藏域，占位`
<input type="hidden" name="hidden"><br>
`10.submit/reset/button： <br> 提交按钮/重置按钮/可点击按钮`<br>
<input type="submit" value="submit">
<input type="reset" value="reset">
<input type="button" value="button">
<br><br><br>
11.select -----------------定义下拉列表
<br><br>
<select name="select">
<option value="">选择</option>
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
<option value="d">DDD</option>
</select>
<br><br>
12 .textarea----------文本域
<br><br>
<textarea name="textarea" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>
侧重点
1.label标签是作用于整个区域，如果radio或者checkbox有名称的话，不加label点击选择只能点击选择框才会生效，加了label看做一个整体，点名称也可以勾选上
2.method提交方式，submit提交表单数据的时候，如果是get直接会提交到当前页面的url中，这种提交方式是有长度限制的，常用的post
3.required属性，标记属性 必填
网友评论