列表、表格与表单

一、列表

1.无序列表

1）作用：布局排列整齐的不需要规定顺序的区域

2）标签：ul嵌套li

ul里面只能包裹li
li里面可以包裹任何内容

    ul->无序列表  li->列表条目

2.有序列表

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

2）标签：ol嵌套li

ol里面只能包裹li
li里面可以包裹任何内容

    ol->有序列表  li->列表条目

3.定义列表

1）有标题，有描述，常用于网页底部帮助中心等区域

2）标签：dl嵌套dt和dd

dl里面只能包裹dt/dd
dt/dd里面可以包裹任何内容

    dt->定义列表的标题  dd->定义列表的描述/详情

二、表格

1.表格的基本使用

1）作用：用于展示数据，与Excel表格类似

2）标签：table嵌套tr | tr嵌套td和th

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

表格默认没有边框，可使用border添加边框 table border="..."

2.表格结构标签

1）作用：用表格结构标签把内容划分区域，让表格结构、语义更清晰

2）标签：

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

结构标签包裹相应内容

3.合并单元格

1）作用：将多个单元格合并成一个，以达到合并同类信息的效果

2）步骤

明确合并的目标
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并：保留最上单元格，添加属性rospan
跨列合并：保留最左单元格，添加属性colspan

删除其他单元格

不能跨结构合并

三、表单

1.input标签

1）作用：收集用户信息，常用于登录、注册、搜索等页面

2）基本使用：input type="..." type属性不同，则功能不同

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

input标签占位文本

1）作用：用于文本框、密码框内提示信息

2）属性：placeholder

1.1 type属性值——radio

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

1.2 type属性值——checkbox

默认选中：checked

1.3 type属性值——file

添加属性multiple实现文件多选

2.下拉菜单

1）作用：提供有限的选项选择的同时节省空间

2）标签：select嵌套option

默认选中：selected

    select->下拉菜单整体  option->下拉菜单的每一项

3.文本域

1）作用：多行输入文本的表单控件

2）标签：textarea

右下角的拖拽功能在浏览器中一般禁止使用

4.label标签

1）作用：网页中某个标签的说明文本，还可以增大点击范围

2）增大点击范围方式：

label只包裹内容，不包裹表单控件：设置label标签的for属性值和表单控件的id属性值相同

例如：

<input type="radio" id="man">
<label for="man">男</label>

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

例如：

    <label><input type="radio">女</label>

列表、表格与表单的相关内容