【前端】HTML列表、表格及表单知识整理

一、列表标签

2.1 无序列表

1. 标签的组成：

• ul: 表示无序列表的整体，用于包裹li标签
• li: 表示无需列表的每一项，用于包含每一行的内容

3.1 有序列表

1. 标签的组成：

• ol: 表示有序列表的整体
• li：表示有序列表的每一项，用于包含每一项内容

4.1 自定义列表

1. 自定义标签的组成

• dl: 表示自定义列表的整体，用于包裹dt/dd标签
• dt: 表示自定义列表的主题
• dd: 表示自定义列表针对主题的每一项内容

2. dl只允许包含dt/dd标签，dt/dd可以包含任何标签

二、表格标签

1.1 表格的基本标签

1. 表格标签

• table 表格整体，可包裹多个tr
• tr 表格每行，可用于包含多个td
• td 表格单元个，可用于包裹内容

2. 标签关系

• table>tr>td

2.1 表格相关属性

1. 常见属性

• border: 表格边框宽度
• width: 表格宽度
• height: 表格高度
• 注意：实际代码中表格样式通过CSS样式设置

3.1 表格标题和表头单元格标签

1. 其他标签

• caption: 表格大标题，表示表格整体大标题
• th: 表头单元格，表示一列小标题
• 注意点：caption标签写在table标签内，th标签书写在tr标签内

4.1 表格的结构标签

1. 结构标签

• thead: 表格头
• tbody: 表格主体
• tfoot: 表格底部

5.1 单元格合并

1. 将水平或者垂直的单元个进行合并

5.2 合并单元格，代码实现

1. 明确合并哪几个单元格
2. 通过左上原则，确保留谁，删谁

• 上下合并，保留上，删除下
• 左右合并，保留左，删除右

3. 保留单元格设置，跨行合并(rowspan),跨列合并，colspan
4. 注意点：只有同一结构标签中的单元格才能合并

三、表单标签

1. 目标：能够使用表单想改标签和属性

1.1 input系列标签的基本使用

1. 标签名： input
2. type属性

• text:文本框
• password: 密码
• radio: 单选框
• checkbox: 多选框
• file: 文件选择
• submit：提交按钮
• reset: 重置按钮
• button: 普通按钮，默认无功能，之后配合js使用

1.2 input 系列标签常用属性

1. 属性名： placeholder: 占位符提示用户输入内容的文本

1.4 input 系列单选框

1. type 属性 radio
2. 常用属性

• name: 分组，有相同name属性的单选框为一组
• checked: 默认选中

1.6 input 系列文件选择

1. type：file
2. 常用属性

• multiple: 多文件选择

1.7 input 系列 中的按钮

1. type属性值：

• submit：提交
• reset: 重置
• button: 普通按钮

2.1 button 按钮

1. type 属性

• submit 提交功能
• reset 重置功能
• button 普通按钮
• 谷歌浏览器默认botton 为提交

3.1 select 下拉菜单标签

• select 标签：下拉菜单的整体
• option 标签：下拉菜单的每一项
• 常见属性：select 下拉菜单默认选中

4.1 textarea 文本域标签

1. 常见属性

• cols:规定了文本域内可见宽度
• rows:规定了文本域内可见行数

5.1 label标签

1. 使用方法：

• 使用label标签吧内容包裹起来
• 在表单标签上添加id属性
• 在label标签的for属性上设置对应的id属性值

2. 使用方法2：

• 直接使用label 标签把内容和表单标签一起包裹起来
• 直接把label 标签的for 属性删除即可

四、语义化标签

1.1 没有语义的标签 div和span

1. div标签：一行只显示一个
2. span标签：一行可以显示多个

2.1 有语义的标签

1. 标签

• header 网页头部
• nav 网页导航
• footer 网页底部
• aside 网页侧边栏
• section 网页区块
• article 网页文章

2. 注意点：以上标签显示的特点和div一致，但比div多了不同的语义

五、字符实体

通过字符实体在网页中显示特殊符号

1. html中的空格合并现象
2. 常见字符实体

• 显示结果： 空格：