四、表格table
1. 创建表格
<table>
<tr>
<td>单元格内的文字</td>
......
</tr>
......
</table>
- table用于定义一个表格标签
- tr标签用于定义表格中的行,必须嵌套在table标签中
- td用于定义表格中的单元格,必须嵌套在tr标签中
- 字母td指表格数据(table data),即数据单元格的内容
2. 表格属性
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框(默认border=0无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2像素) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1像素) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
我们经常有个说法,是三参为0,平时开发的我们这三个参数border、cellspacing、cellpadding为0
3. 表头单元格标签th
作用: 一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
语法: 只需要用表头标签th替代相应的单元格标签td即可
4. 表格标签caption
语法:
<table>
<caption>我是表格标题</caption>
</table>
注意:
- caption元素定义表格标题,通常这个标题会被居中且显示于表格之上
- caption标签必须紧随table标签之后
- 这个标签只存在表格里面才有意义
5. 合并单元格
5.1 合并单元格两种方式
- 跨行合并: rowspan=“合并单元格的个数”
- 跨列合并: colspan=“合并单元格的个数”
5.2 合并单元格顺序
合并顺序我们按照先上后下,先左后右的顺序
5.3 合并单元格三部曲
- 先确定是跨行还是跨列合并
- 根据先上后下,先左后右的原则找到目标单元格,然后写上合并方式还有要合并的单元格数量,比如:<td colspan=“3”></td>
- 删除多余的单元格
6. 总结
标签名 | 定义 | 说明 |
---|---|---|
<table></table> | 表格标签 | 就是一个四方的盒子 |
<tr></tr> | 表格行标签 | 行标签要在table标签内部才有意义 |
<td></td> | 单元格标签 | 单元格标签是一个容器级元素,可以放任何东西 |
<th></th> | 表头单元格标签 | 它还是一个单元格,但是里面的文字会居中且加粗 |
<caption></caption> | 表格标题标签 | 表格的标题,跟着表格一起走,和表格居中对齐 |
colspan和rowspan | 合并属性 | 用来合并单元格的 |
7. 拓展阅读
7.1 表格划分结构
注意:
- <thead></thead>用于定义表格的头部,用来放标题之类的东西。<thead>内容必须拥有<tr>标签
- <tbody></tbody>用于定义表格的主体,放数据本体
- <tfoot></tfoot>放表格的脚注之类
- 以上标签都是放在table标签中的
五、列表和表单
1. 列表标签
1.1 无序列表ul
基本语法:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
1.2 有序列表ol
基本语法:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
1.3 自定义列表dl
基本语法:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
......
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
......
</dl>
1.4 列表总结
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序列表 | 里面只能包含li,没有顺序,布局中最常用的列表 |
<ol></ol> | 有序列表 | 里面只能包含li,有顺序,使用情况较少 |
<dl></dl> | 自定义列表 | 里面有2个兄弟,dt和dd |
2. 表单标签
2.1 input控件
- 基本语法:
<input type="属性值" value=“你好” />
- input输入的意思
- <input />标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
- 除了type属性还有别的属性
- 常用属性
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
password | 密码输入框 | |
radio | 单选按钮 | |
checkbox | 复选框 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式的提交按钮 | |
file | 文件域 | |
name | 由用户自定义 | 控件的名称 |
value | 由用户自定义 | input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示的宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
2.1 label标签
目标:
label标签主要目的是为了提高用户体验,为用户提供最优秀的服务
概念:
label标签为input元素定义标注(标签)
作用:
用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点
如何绑定元素呢?
- 第一种用法就是用label直接包括input表单
<label>
用户名:<input type="text" name="username" value="请输入用户名" />
</label>
适合单个表单选择
- 第二种用法for属性规定label与哪个表单元素绑定
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
2.3 textarea控件(文本域)
语法:
<textarea clos="每行中的字符数" rows=“显示的行数”>
文本内容
</textarea>
作用:
通过textarea控件可以轻松地创建多行文本输入框
文本框和文本域区别
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
---|---|---|---|---|
<input type=“text” /> | 文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
2.4 select下拉列表
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
......
</select>
注意:
- <select>中至少包含一对option
- 在option中定义select=“select”时,当前项即为默认选中项
3. form表单域
目的: 在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中所有内容都会被提交给服务器
语法:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称 ,以区分用一个页面中的多个表单 |
注意:每个表单都应该由自己的表单域
团队约定
元素属性
- 元素属性值使用双引号语法
- 元素属性值可以写上的都写上
推荐:<input type=“text” />
<input type=“radio” name=“name” checked=“checked” />