本文介绍了HTML中的表格标签，包括table,tr,td,th及其属性，展示了如何进行单元格合并。接着讲解了表单标签form和input的用法，如文本框、密码框、单选框、复选框、按钮等，并提到了label和select,textarea的使用。文章还提及了无语义标签div和span的基本概念。最后提供了一个简单的简历信息填写表的综合练习例子。
目录
前言
对于html零基础的小白,这里建议先看上一篇博客 HTML基础(上),看完之后再来看本篇博客,本篇博客是继续上一篇博客的内容,继续介绍一些基础标签,并且最后出一个综合练习,一起练习以下这些基础标签.
一 表格标签
1.1 基础标签
- table 标签: 表示整个表格
- tr 标签: 表示表格的一行
- td 标签: 表示表格中的一个单元格
- th 标签: 表示表头单元格, 会居中加粗
- thead 标签: 表格的头部区域, (这里注意和 th 标签区分, th标签 是表头单元格,而该标签是头部区域, 范围更大)
- tbody 标签: 表格的主体部分
1.2 表格属性
提醒: 表格的这些属性可以设置大小以及边框的属性等,但是在前端开发的过程中我们一般都是使用CSS 来实现界面美化,因此不建议大家使用设置以下属性的方法来美化界面.
- align: 表格相对于周围元素的对齐方式,主要有 left, right, center三个属性值.
- border: 边框属性, 属性值为 1 表示有边框(数字越大,边框越粗), 属性值为 "" 表示无边框
- cellpadding: 内容距离边框的距离, 默认为 1px.
- cellspacing: 单元格之间的距离, 默认为 2px.
- width / height: 设置单元格的尺寸
代码示例
<table align="center" border="1" cellpadding="20"
cellspacing="0" width="500" height="200">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
</table>效果如下
1.3 合并单元格
- 跨行合并: rowspan="n"
- 跨列合并: colspan="n"
合并单元格的步骤
- 先确定跨行还是跨列合并
- 找好合并的目标单元格 (跨列合并, 最左侧的单元格是目标单元格; 跨行合并,最上方的单元格是目标单元格)
- 删除多余的单元格
代码示例
<table align="center" border="1" cellpadding="20" cellspacing="0"
width="500" height="200">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">跨列合并</td>
<td rowspan="2">跨行合并</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>效果如下:
二 表单标签
表单是让用户输入信息的重要途径, 主要分为以下两个部分:
- 表单域: 包含表单元素的区域, 重点是form标签.
- 表单控件: 表单域中的各种控件,如按钮,输入框等, 重点是input标签.
2.1 form标签
基本用法如下
<from action="表单提交给的url">
<-- from中的各种控件和内容 -->
</from>from标签主要是描述数据要按照什么方式,提交到哪个页面中,即form标签主要在 服务器和网络编程中使用,这里不做过多解释.
2.2 input标签
input 标签可以实现很多输入控件,如单行文本框, 单选框, 复选框, 按钮等.
input 标签的主要属性如下:
- type 属性(必须有): 指明当前 input 标签代表的控件, 取值有 button, checkbos, text, file, image, password, radio等
- name 属性: 给当前标签起一个名字, 这个对于单选框很有用,因为单选框是具有相同的 name 才能实现多选一
- value 属性: input 中的默认值
- checked 属性: 默认被选中, 主要用于单选按钮和多选按钮
- maxlength 属性: 设定文本最大长度
1) 文本框
代码示例
<input type="text" value="这是一个文本框">效果如下
2) 密码框
代码示例
<input type="password" value="123456">效果如下
3) 单选框
代码示例
性别:
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女效果如下
4) 复选框
代码示例
以下人物你喜欢谁: <br>
<input type="checkbox">唐僧
<input type="checkbox">孙悟空
<input type="checkbox">猪八戒
<input type="checkbox">沙悟净效果如下
5) 普通按钮
这里只是简单的在页面上实现个按钮,想让按钮按完之后有反应,应该搭配 javascript来实现.
代码示例
<input type="button" value="按钮">效果如下
6) 提交按钮
代码示例
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>效果如下
注意: 提交按钮必须放到form标签中,当我们点击提交按钮后,就会尝试给from中action指定的url发送该表单的数据.
7) 清空按钮
代码示例
<form action="test.html">
<input type="text" name="username">
<input type="reset" value="清空">
</form>效果如下
注意: 清空按钮必须放到form标签中,点击后会将该清空按钮所在的from表单中的用户输入全部重置
8) 文件选择
代码示例
<input type="file">效果如下
2.3 label标签
label标签主要是搭配 input标签使用的, 可以实现点击label也能选中对应的单选 / 复选框,提升用户的体验
- for 属性: 指定当权label和哪个相同id的input标签对应
代码示例
性别:
<input type="radio" name="sex" id="male" checked="checked">
<label for="male">男</label>
<input type="radio" name="sex" id="famale">
<label for="famale">女</label>效果展示
这样子设计之后,我们不用点击⭕, 点击 男 或者 女 就可以选中.
2.4 select标签
select标签主要搭配 option标签 一起使用
代码示例
<select>
<option selected="selected">年份</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>效果如下
2.5 textarea标签
代码示例
<textarea cols="30" rows="10">
这是一个文本域
</textarea>效果如下
提醒: textaera标签中的内容就是默认内容.
三 无语义标签
3.1 div标签
div标签,其中div 是 division 的缩写, 意义是 分割, 同时div是独占一行的,是一个大盒子,在日常书写前端代码的时候, div常用来划分区域, 使得CSS可以很好的选中该区域并调整该区域的样式.
代码示例
<div>
这是第一个区域
</div>
<div>
这是第二个区域
</div>效果如下
3.2 span标签
span标签, 意思是跨度, span标签和div标签不同的是span标签不独占一行,是一个小盒子,利用span标签可以做到对局部样式的控制.
代码示例
<div>
<!-- 这里使用到一点CSS的知识,不会的可以去查一下 -->
我是一个<span style="color: blue;">程序员</span>
</div>效果如下
总之,div标签和span标签在CSS的学习中我们就会对他们有深刻的理解,这里不做过多解释.
五 综合练习
前面已经学习了这么多的标签,这里让我们一起使用这些标签来实现一些简单的页面,提醒: 这个页面较丑且为静态的,后续我们想让其动起来需要的是 javascript 代码, 而想让其更美观需要的是 CSS 代码.
5.1 目标界面
5.2 界面源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简历信息填写表</title>
</head>
<body>
<table width="500px" cellspacing="0">
<thead>
<h2>请填写简历信息</h2>
</thead>
<tr>
<td>
姓名
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<!-- 这里的label的for属性需要和其对应单选框的id相对应,否则无法实现点击文字就选中对应选项 -->
<input type="radio" name="sex" id="male" checked="checked">
<label for="male">男</label>
<input type="radio" name="sex" id="female">
<label for="female">女</label>
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<select id="year">
<option>--请选择年份--</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
</select>
<select id="month">
<option>--请输入月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select id="day">
<option>--请选择日期--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>
就读学校
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
应聘岗位
</td>
<td>
<!-- 这里的 label 中的for属性需要和其匹配的多选框的id相对应, 否则无法实现点击对应文本选中对应选项-->
<input type="checkbox" id="1">
<label for="1">前端开发</label>
<input type="checkbox" id="2">
<label for="2">后端开发</label>
<input type="checkbox" id="3">
<label for="3">测试开发</label>
<input type="checkbox" id="4">
<label for="4">运维开发</label>
</td>
</tr>
<tr>
<td>
掌握的技能
</td>
<td>
<textarea name="skill" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>
项目经历
</td>
<td>
<textarea name="experience" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<!-- 这里不可以使用单选框 radio, 虽然界面基本相同,但是若是单选框,选中后无法取消-->
<input type="checkbox" id="lisence">
<label for="lisence">我已经仔细阅读过公司的招聘要求</label>
</td>
</tr>
<tr>
<td></td>
<td>
<!-- 这里使用#占位,表示空链接,这个只是为了实现界面,因此不需要真的超链接 -->
<a href="#">查看我的状态</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>请应聘者确认:</h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早去公司实习</li>
<li>能接收公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>总结
以上就是本篇博客的所有内容了, 如果本篇博客对您有帮助,希望您可以 点赞 关注 评论 支持以下小编,感谢 ! !
扫一扫
2081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
