前端学习第二天--列表，表格，表单

列表

作用：布局内容排列整齐的区域。

分类：无序列表，有序列表，定义列表。

无序列表

作用:布局排列整齐的不需要规定顺序的区域。

标签:ul嵌套li，ul 是无序列表, li是列表条目。

• 第一项
• 第二项
• 第三项
• ......

注意事项:

· ul 标签里面只能包裹li标签

· li标签里面可以包裹任何内容

有序列表

作用:布局排列整齐的需要规定顺序的区域

标签:ol嵌套li,ol是有序列表,li是列表

1. 第一项
2. 第二项
3. 第三项
4. ......

注意事项:

· ol 标签里面只能包裹li标签

· li标签里面可以包裹任何内容

定义列表

标签:dl 嵌套dt和dd,dl 是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情。

列表标题

列表描述/详情

......

​ 注意事项:

· dl 里面只能包含dt和dd

· dt和dd里面可以包含任何内容

表格

标签：table（表格）嵌套tr（行），tr嵌套td（表头单元格）/th（内容单元格）

提示：在网页中，表格默认没有边框线，需要用border属性添加

表格结构标签—了解

作用：将内容划分区域，让表格结构更清晰，语义更清晰

合并单元格

作用：将多个单元格合并为一个单元格，以合并同类信息

合并单元格的步骤:

1. 明确合并的目标

2. 保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)

• 跨行合并,保留最上单元格,添加属性rowspan
• 跨列合并,保留最左单元格,添加属性 colspan

3. 删除其他单元格

表单

作用：收集用户信息

使用场景：

1. 登录页面
2. 注册页面
3. 搜索页面

input标签

input标签基本使用

input标签type属性值不同，则功能不同

<input type="...">

type属性值	说明
text	文本框，用于输入单行文本
password	密码框，内容以点的形式显示
radio	单选框
checkbox	多选框
file	上传文件

input标签占位文本

占位文本：提示信息

<input type="…"placeholder=“提示信息”>

单选框 - radio

常用属性：

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个
checked	默认选择	属性名和属性值相同，简写为一个单词

男

女

上传文件 - file

默认情况下，文件上传表单控制只能上传一个文件，所以需要用multiple属性实现文件多选功能

多选框 - checkbox

多选框也叫复选框

默认选中：checked

下拉菜单

标签:select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项，selected默认选择

北京 上海 J)I| 深圳 武汉

文本域

作用：多行输入文本的表单控制，例：评论区

标签：textarea，双标签

特点：一般用css设置尺寸，右下角可拉拽拓宽但一般禁用

label 标签

作用：网页中，某个标签的说明文本

经验：用label标签绑定文字和表单控件的关系，可增大表单控件的点击范围

label 标签-增大点击范围

● 写法一
label 标签只包裹内容,不包裹表单控件
● 设置label 标签的for属性值 和表单控件的id属性值相同

男

● 写法二

● 使用label标签包裹文字和表单控件,不需要属性

T

提示:支持label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮 - button

按钮

type属性值:

type属性值	说明
submit	提交按钮,点击后可以提交数据到后台(默认功能)
reset	重置按钮,点击后将表单控件恢复默认值
button	普通按钮,默认没有功能,一般配合JavaScript使用

无语义的布局标签

作用：布局网页（划分网友区域，摆放内容）

1. div：独占一行（大盒子）
2. span：不换行（小盒子）

字符实体

作用:在网页中显示预留字符。

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>