HTML 第二天

这篇文章要讲的是列表、表格、表单。

一、列表

分类：无序列表、有序列表、定义列表

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

无序列表

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

标签：ul嵌套li，ul是无序列表，li是列表条目

注意事项：ul标签里面只能包裹li标签，而li标签里面可以包裹任何内容。

我们来看看代码是怎样的：

再来看看运行效果：

有序列表

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

标签：ol嵌套li，ol是有序列表，li是列表条目

注意事项同无序列表

定义列表

标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述

注意事项同无序列表

二、表格

标签：table嵌套tr,tr嵌套td/th。

table:一整个表格；tr:行；th:表头单元格；td:内容单元格。

我们来看看代码：

  

运行效果：

使用border属性可以给表格添加边框线，数值表示边框线粗细：

合并单元格：

1、明确合并对象。

2、合并行，保留最上单元格，添加属性rowspan，取值是数字，表示需要合并的单元格数量。

     合并列， 保留最左单元格，添加属性colspan，取值是数字，表示需要合并的单元格数量。

3、删除其他单元格。

三、表单

（1）input标签：type属性值不同，则功能不同。

占位文本：placeholder，会用在文本跟密码输入框。

name属性：控件名称，控件分组，同组只能选中一个，实现单选功能；checked属性：默认选中；用在单选框。

multiple属性：实现文件多选功能，用在上传文件。

代码实现：

运行效果：

 

 （2）下拉菜单标签：select嵌套option,select是下拉菜单整体，option是下拉菜单的每一项。

selected属性:默认选中；

代码实现：

 

运行效果：

 

（3）文本域： 多行输入文本的表单控件；

标签：textarea标签，是双标签。

（4)label标签：可以增大文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域的点击范围。

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

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

代码实现：

（5）按钮标签： 

<button type=" ">按钮的名字</button>

type的属性值有：submit（提交数据到后台）、reset（重置按钮）、button（普通按钮）

注意：按钮功能的实现需要用到form标签，一般把表单控件都在form里面统一管理，统一把数据发送到后台。