一、表格标签
- 规则表格
<body>
<!--table:定义表格
常用属性：height：高度
width：宽度
border：边框
cellpadding：内容与单元格之间的距离
cellspacing：单元格和单元格之间的距离
-->
<table border="1" cellpadding="0" cellspacing="0" width="90%" height="200px">
<!--
tr:定义行
常用属性：
align：文本水平方向上的对齐方式,
有三个取值，默认left-左对齐 center-居中对齐 right-右对齐
-->
<tr>
<!--
th和td标签都用来定义单元格，
th：一般用来定义表头单元格，即做标题的那一行中的单元格
td:一般用来定义非表头单元格，即除了标题正文内容的单元格
但是没有严格的限制
常用属性:valign:文本垂直方向上的对齐方式 ，top-顶部对齐 bottom-底部对齐 middle-垂直居中
-->
<th align="center">序号</th><th>商品名称</th><th>价格</th>
</tr>
<tr>
<td>1</td><td valign="top"><img src="img/a.png"/></td><td>125</td>
</tr>
<tr>
<td>2</td><td valign="bottom">Kitty饼干</td><td>96.0</td>
</tr>
</table>
</body>- 不规则表格–跨行和跨列
body>
<!--
单元格标签th和td中的常用属性：
colspan：合并列
rowspan：合并行
类似Excel中的合并单元格。
-->
<table border="1" cellpadding="0" cellspacing="0" height="300px" width="400px">
<tr>
<!--
colspan="3" 意思是它要和合并包括自身在内的本行的三列单元格，
所以本行后面的两个单元格的位置要被它占用，所以要删除后面两个单元格
-->
<td colspan="3"><h3>个人简历</h3></td><!--<td></td><td></td>-->
</tr>
<tr>
<!--
rowspan="3" 意思是它要和合并包括自身在内的本列的三行单元格，
所以本列后面两行的的同样位置的单元格的位置要被它占用，所以要删除后面两行的同位置的单元格
-->
<td>姓名:</td><td>贾宝玉</td><td rowspan="3">个人照片</td>
</tr>
<tr>
<td>出生年月:</td><td>1998-6</td><!--<td></td>-->
</tr>
<tr>
<td>电话:</td><td>137123456789</td><!--<td></td>-->
</tr>
</table>
</body>- 表格的高级标签–标题标签和逻辑分区标签
<body>
<table border="1" cellpadding="10" cellspacing="0" width="90%">
<!--
caption:表格的标题
thead、tbody、tfoot都是逻辑分区的标签，没有编写样式之前对整体的结构没有任何的影响
PS：如果自己没有编写逻辑分区标签，浏览器默认把所有行放入tbody标签中，即table的子节点默认是tbody
-->
<caption>资产负债表</caption>
<thead style="background: lavenderblush;">
<tr>
<th>月份</th><th>负债</th><th>资产</th>
</tr>
</thead>
<tbody style="background: lightblue;">
<tr>
<td>1月份</td><td>10000</td><td>10000</td>
</tr>
<tr>
<td>2月份</td><td>150000</td><td>150000</td>
</tr>
<tr>
<td>3月份</td><td>50000</td><td>50000</td>
</tr>
</tbody>
<tfoot style="background: khaki;">
<tr>
<td>总计</td><td>210000</td><td>210000</td>
</tr>
</tfoot>
</table>
</body>二、表单–非常重要
概念：用于采集用户输入的数据。用于和服务器进行交互。
<!--
form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
常用属性： action：指定提交数据的URL
method:指定提交方式，一共7种，以下2种比较常用
get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
post：
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
3. 请求参数的大小没有限制。
4. 较为安全。
enctype:表单中有上传的文件的时候必备该属性，且取值为multipart/form-data
-->
<form action="dest.html" method="get" enctype="multipart/form-data" autocomplete="on">
<!--添加表单项元素
PS：表单项中的数据要想被提交到服务器后可以获取到value：必须指定其name属性
-->表单项元素中的一些属性：
id:元素的唯一表示，不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色1、文本框
<input type="text" id="userName" name="userName" placeholder="请输入用户名"/><br />
<!--
input：表单元素，其中的type属性的值不同，会出现不同的表现形式
文本框： type="text",text也是input的默认值
id:表示元素的唯一标识，不推荐重复
name：表单元素的名称，很重要，未来提交数据到服务器的时候，服务器端通过name获取value
placeholder：文本框中显示的提示文字，用户输入自己内容的时候提示文字自动消失
-->2、密码框
<input type="password" id="password" name="password" required/><br />
<!--
密码框：type="password"，用户输入内容之后显示的是黑色实心圆，而不是明文显示内容
required：表示用户必须填写此内容，如果没有填写，提交表单的时候失败并给出提示
-->3、单选按钮
性别：<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
<input type="radio" name="gender" value="未知"/>未知<br />
婚姻状态：<input type="radio" name="statu" value="1"/>已婚
<input type="radio" name="statu" value="0" checked/>未婚<br />
<!--
单选按钮：type="radio"
单选按钮都是成组出现，name相同的才表示一组，同组当中的按钮都互斥
value：服务器通过name获取到的值就是value
checked：表示默认选中；值可以省略，直接写一个属性名，也可以写checked="checked"，
-->4、复选框
<!--
复选框：type="checkbox"
复选框都是成组出现，name相同的才表示一组，同组当中的复选框可以选多个
value：服务器通过name获取到的值就是value
checked：表示默认选中；值可以省略，直接写一个属性名，也可以写checked="checked"，
-->
爱好：<input type="checkbox" name="hobby" value="swim" />游泳
<input type="checkbox" name="hobby" value="NBA" />NBA
<input type="checkbox" name="hobby" value="movie" />电影
<input type="checkbox" name="hobby" value="music" />音乐<br />5、文件域
<!--
文件域：文件上传 type="file"
表单中如果有文件上传，表单中最好有enctype="multipart/form-data"
multiple属性：表示可以同时上传多个文件
-->
头像：<input type="file" name="headImg" multiple="multiple"/><br />6、日期-h5中得新特性
<!--
日期-h5新特性：
type="date" 表示年月日
type="datetime-local" 表示既有年月日又有时间
-->
生日：<input type="datetime-local" name="birthday"/><br />7、隐藏域
<!--
隐藏域： type="hidden" 页面上看不到任何效果
作用：隐藏一些用户不关心但是程序员小哥哥小姐姐需要的值
-->
隐藏域：<input type="hidden" name="userId" value="1001"/><br />8、下拉列表框
<!--
下拉列表框： select中写name
option：select中的所有选项，
其中value表示下拉列表中被选中的项的对应值
其中selected表示默认选中
-->
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
</select><br />9、文本域
<!--
textarea:文本域
cols：指定列数，每一行有多少个字符
rows：默认多少行。
readonly：表示只读，内容不可修改
disabled：表示不可用，样式呈现灰色
-->
协议：<textarea rows="15" cols="50" readonly="readonly" disabled="disabled">
条款说明：
1、必须遵守........
2、................
</textarea><br />10、按钮
- 提交按钮
- 图片按钮
- 重置按钮
- 普通按钮
<!--
按钮：value：显示在按钮上的文字
type="submit"：提交按钮，提交到form的action的指定URL
type="image"：等价于提交按钮，没有value属性，多了一个src="按钮图片URL"
type="reset"：重置按钮，清空表单中所有用户输入，货到默认原始状态，相当于刷新了页面
type="button" ：普通按钮，没有任何功能，只有按钮的样子
-->
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
<input type="image" src="img/a.png" /><br />
<!--
button标签与上面的input表示按钮的三个可互换
-->
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">按钮</button>11、标签
<!--
label：指定输入项的文字描述信息
注意：label的for属性一般会和 input 的 id属性值 对应。
如果对应了，则点击label区域，会让input输入框获取焦点。
-->
<label for="userName">用户名：</label>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
