HTML 基础

列表标签

列表的应用场景

• 场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

• 特点：按照行的方式，整齐显示内容

• 种类：无序列表、有序列表、自定义列表

无序列表

场景：在网页中表示一组五顺序之分的列表，例如：新闻列表

标签组成：

• ul，表示无无序列表的的整体，用于包裹li标签

• li，表示无需列表的每一项，用于包含每一行的内容

显示特点：列表前的每一项都由圆点标识（圆点可用CSS属性消除）

注意：

• ul标签只能包裹li标签

• li标签可以包含任何内容

有序列表

场景：在网页中标识一组由顺序的列表，例如：排行榜

标签组成：

• ol，表示无无序列表的的整体，用于包裹li标签

• li，表示无需列表的每一项，用于包含每一行的内容

显示特点：列表前的每一项都由圆点标识（圆点可用CSS属性消除）

注意：

• ol标签只能包裹li标签

• li标签可以包含任何内容

自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现

标签组成：

• dl，表示自定义列表的整体，用于包裹dt/dd标签

• dt，表示自定义列表的主题

• dd，表示自定义列表的针对主题的每一项内容

显示特点：dd前会显示缩进效果

注意：

• dl标签中只允许包裹dt/dd标签

• dt/dd标签可以包含任意内容

总结

总结：无序列表最常用，有序列表偶尔用，自定义列表底部导航用

表格标签

表格的基本标签

场景：在场景中一行列单元格的形式整齐展示数据

基本标签：

• table：表格整体，可用于包裹多个tr

• tr：表格的每行，可用于包裹td

• td：表格的单元格，可用于包裹内容

注意：标签嵌套关系：table > tr > td

表格的基本属性

场景：设置表格的基本属性

常见的相关属性：

• border：属性值为数字，表示边框宽度

• width：属性值为数字，表示表格宽度

• height：属性值为数字，表示表格高度

注意：实际开发时推荐使用CSS设置表格效果

表格标题与表头单元格标签

场景：在表格中表是真题大标题和一列小标题

主要标签：

• caption：表示表格的整体大标题，默认在表格的整体顶部居中显示

• th：表头单元格：表示一列小标题，通用于表格的第一行，默认内部文字加粗并居中显示

注意：

• caption标签书写在table标签内部

• th标签书写在tr标签内部

表格的结构表标签

场景：让表格的内容分组，突出表示表格的不同部分（头部，主体，底部），使语义更加准确

结构标签：

• thead：表示为表格头部

• tbody：表示为表格猪蹄

• tfoot：表示为表格尾部

注意：

• 表格结构标签内部用于包裹tr标签

• 表格的结构表前可以省略

合并单元格

场景：将水平或垂直多个单元格合并成一个单元格

主要单元格属性：

• rowspan：属性值为数字，将多行的单元格垂直合并

• colspan：属性值为数字，将多列的单元格水平合并

步骤：

• 明确合并那几个单元格

• 确定保留谁删除谁

  • 上下合并→只保留最上的，删除其他
  • 左右合并→只保留最左的，删除其他

• 给保留的单元格设置属性：跨行合并（rowspan）和跨列合并（colspan）

注意：只有同一个结构标签才能合并，不能跨结构标签合并

表单标签

input系列标签

场景：在网页中显示用户的表单效果，如登录页，注册页

标签：input，input标签根据type属性值的不同显示不同的效果

input标签-文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：placeholder：占位符，提示用户输入内容的文本

input标签-密码框

场景：在网页中显示宿输入密码的表单控件

type属性值：password

常用属性：placeholder：占位符，提示用户输入内容的文本

input标签-单选框

场景：在网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

• name，分组功能，有相同name属性值的单选框为一组，一组中同时只有一个能选中

• checked，默认选中

input系列标签-复选框

场景：在网页中显示多选多的多选表单控件

type属性值：checkbox

常用属性：checked，默认选中

input系列标签-文件选择

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：multiple，实现多文件选择

input系列标签-按钮

场景：在网页中显示不同功能按钮的表单控件

type属性值：

• submit，提交按钮，点击之后提交数据至后台服务器

• reset，重置按钮，点击之后表单恢复默认值

• button，默认无功能，之后配合js添加功能

注意：

• 如需实现以上按钮功能，需要配合from标签使用

• form使用方法：用from标签将表单标签全部包裹起来即可

value属性于name属性介绍

• value属性：用户输入的内容，提交之后会发送给后端服务器

• name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

• 后端接受到的数据的格式是：name的属性值=value的属性值

button按钮标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值：

• submit，提交按钮，点击之后提交数据至后台服务器

• reset，重置按钮，点击之后表单恢复默认值

• button，默认无功能，之后配合js添加功能

select下拉菜单标签

场景：在网页中提供都哦个选择项的下拉菜单表单控件

标签组成：

• select，下拉菜单的整体

• option，下拉菜单的每一项

常见属性：select，下拉菜单默认选中

textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

• cols，规定了文本域内的可见密度

• rows，规定了文本域内的可见行数

注意：

• 右下角可以通过拖拽改变大小

• 实际开发时针对样式效果推荐使用CSS设置

label标签

场景：用于绑定内容于表单标签的关系

标签名：label

使用方法

• 方法一：

  • 使用label标签把内容包裹起来

  • 在表单标签上添加id属性

  • 在label标签的for属性中设置对应的id属性值

• 方法二：

  • 直接使用label标签把内容和表单标签包裹起来

  • 需要把label标签的for属性删除即可

语义化标签

没有语义的布局标签-div和span标签

场景：实际开发网页时会大量频繁的使用div和span这两个没有语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

有语义的布局标签

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：

• header，网页头部

• nav，网页导航

• footer，网页底部

• aside，网页侧边栏

• section，网页区块

• article，网页文章

注意：以上标签显示特点于div一致，只是比div多了不同的语义

字符实体

场景：如果在html代码中并列出现多个空格，换行，缩进等，最终浏览器指挥解析出一个空格

常见字符实体：空格：&nbsp