本文详细介绍了HTML中的列表类型，包括无序列表、有序列表和定义列表的格式、样式及应用场景。接着讲解了表格标签的使用，如表格结构、宽高属性、边距设置以及单元格合并。最后，探讨了Form表单，特别是input标签的用法，如明文输入、暗文输入、单选框、多选框和按钮等。
html功能元素
一.列表
1.1无序列表
给数据添加列表语义，数据没有先后之分
无序列表格式
- 蜜雪冰城
- COCO
- 益禾堂
无序列表样式
- 蜜雪冰城
- COCO
- 益禾堂
disc 默认值 实心圆
circle 空心圆
squre 实行方块
注意点：
ul li是一个整体，不会单独时候ul或者li标签
无序列表应用场景
: 新闻列表，导航栏
1.2有序列表
顾名思义，是由顺序之分的数据
有序列表格式
- 中国
- 美国
- 日本
有序列表属性样式
1 默认值。数字有序列表。（1、2、3、4）
a 按字母顺序排列的有序列表，小写。（a、b、c、d）
A 按字母顺序排列的有序列表，大写。（A、B、C、D）
i 罗马字母，小写。（i, ii, iii, iv）
I 罗马字母，大写。（I, II, III, IV）
1.3定义列表
二 .表格标签
作用：给一堆数据添加表格语义
2.1表格格式
| 姓名 | 年龄 | 身高 |
|---|---|---|
| 小萝卜 | 6 | 120 |
一对table标签就是一个表格
一对tr标签就是 表格中的一行
一对td标签就是一行中的一个单元格
补充：tr与th搭配用来表示表头，字体为居中的粗体文本
tr与td搭配通常表示表体，d元素内的文本通常是左对齐的普通文本。
- 注意点
- 表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
- 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
2.2宽高属性设置
table设置宽高表示表格的整体宽高，
th、td表示单元格的宽高
（都属于块级元素，宽默认100%，高默认由内容撑起）
水平对齐垂直对齐
align是水平对齐 属性值为：left，center，right 可以给table，tr，td设置
valign是垂直对齐 属性值为：top，center，bottom，只能给tr和td设置
2.3.表格中外边距和内边距的属性(在元素中为margin和padding)
只能给table标签使用
-
cellspacing外边距就是单元格和单元格之间的距离,
默认情况下外边距的距离是2px -
cellpadding内边距就是单元格的边框和文字之间的间隙,
默认情况下内边距是1px注意: 以后在企业开发中所有控制样式的都是通过CSS或直接使用组件库中的属性控制，使用表格自带属性控制很少，但是要了解基本的使用。
2.4表格的完整结构
- 表格的标题
- 表格的表头信息
- 表格的主体信息
- 表格的页尾信息
- caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
注意点:
- 如果我们没有编写tbody, 系统会系统给我们添加tbody
- 如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化(chrome下可以，Firefox下不可以)
2.5.单元格合并
水平合并列 colspan （列 column）
垂直合并行 rowspan （行 row）
三、Form表单
表单就是专门用来收集用户信息的
<表单元素>常见的表单元素
input标签
明文输入框
name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成参数名=参数值的结构
placeholder:提示
暗文输入框
单选框
注意点:
1.互斥：
都设置name属性，并且值一样
2.单选框默认选中：
设置checked
3.单选框的value值，才是我们最终需要的值，并不是单选框显示的值。
多选框
多选框默认选中 checked
-提交按钮
作用: 将表单中已经填写好的数据, 提交到远程服务器
操作：1.需要给form表单添加action属性，通过属性指定提交的服务器地址
2.给要提交的表单元素添加name 属性
普通按钮
可以通过value属性来给按钮指定标题
作用: 配合JS完成一些操作
图片按钮
添加了一个src属性放图片地址
重置按钮
作用: 用于清空表单中已经填写好的数据
注意点:
如果想想改重置按钮默认的按钮标题可以通过value属性来修改
隐藏域
隐藏域
作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
