html表格列表模板,前端基础 - HTML（二） 表格、表单、列表

表格

table标签用于定义表格

tr 必须嵌套在table标签中

td 必须嵌套在tr中

表格的基本语法：

↑---border代表边框线

align代表位置 right左边left(右边)center(中间)

cellspacing规定单元格与单元格之间的空白 默认值为2像素

cellpadding规定单元格与内容之间的空白 默认值为1像素

width 规定表格的宽度

案例一：

案例一

排名	关键词	趋势	今日搜索	最近七日	相关链接
1	鬼吹灯		456	123	贴吧 图片 百科
1	鬼吹灯		456	123	贴吧 图片 百科
3	鬼吹灯		456	123	贴吧 图片 百科
1	鬼吹灯		456	123	贴吧 图片 百科
1	鬼吹灯		456	123	贴吧 图片 百科
1	鬼吹灯		456	123	贴吧 图片 百科

合并单元格：

​ 步骤：1.先确定跨行合并还是跨列合并

​ 2.找到要合并的目标单元格，写上合并方式=合并数量

​ 3.删除多余的单元格

rowspan 跨行合并

colspan 跨列合并

案例二：

合并

序号	王五		李四		孙传		胡平		合计
	语文	数学	语文	数学	语文	数学	语文	数学
1	78	96	67	98	88	75	94	69
2	89	68	77	87	84	76	71	87
3	75	78	89	74	65	68	98	90
4	79	89	65	62	64	87	97	91

列表：

​ 表格显示数据，列表布局

​ 列表分为有序列表、无序列表、自定义列表=

无序列表：项目符号列表项

​ 1.无序列表中的列表项是并列的，无序列表没有顺序之分

​ 2.ul中只能嵌套li

是不允许的

​ 3.li双边标记 容器 li可以容纳所有元素

​ 4.无序列表有自己的样式属性，实际开发中，使用css设置的

语法格式：

• 列表项
• 列表项
• 列表项

有序列表：排列顺序的

​ 1.ol标签定义有序列表。

​ 2.列表的排序默认数字显示

​ 3.使用li列表项

​ 4.无序列表有自己的样式属性，实际开发中，使用css设置的

​ 语法格式：

1. 列表项
2. 列表项
3. 列表项

※自定义列表(重点)

​ 没有任何项目符号

​ 1.dl标签描述定义列表 dt和dd一起使用

​ 2.dl标签中只能包含dt和dd

​ 3.dt和dd的个数没有限制的 经常一个dt对应多个dd

语法格式：

名词

名词解释1

名词解释2

名词解释3

列表总结：

​ ul：无序列表 只能包含li 没有顺序 使用较多 li里面包含任何标签

​ ol：有序列表 只能包含li 有顺序 基本不用 li里面包含任何标签

​ dl：自定义列表 只能包含dt和dd dt和dd里面可以存放任意标签的

表单

​ 目的是为了收集用户的信息

​ 网页中完整的表单分为表单域、表单控件(表单的元素)、提示信息

表单域：一个包含表单元素的区域

HTML中，form标签定义表单域，实现用户信息的收集和传递

form表单元素的信息提交给服务器

单控件：定义各种表单元素，表单元素就是允许用户在表单中输入或者选择的空间

1.input 输入表单元素

​ type属性：根据不同的type属性值，文本输入框、密码、单选、多选、按钮

​ name属性：当前的input表单的名称

​ checked属性：表示默认选中的状态。用于单选和多选

​ lable标签：用于绑定一个表单元素，提升用户体验

2.select 下拉表单元素

​ option 定义selected=“selected” 当前想默认选中

3.textarea 文本域元素

​ 结构：

单行文本输入框

密码框

单选框单选

复选框复选框