继续学习如何使用html,一定要多动手敲代码!!!!
内容列表标签:无序列表、有序列表、定义列表
表格标签:格式、宽高属性、水平对齐、垂直居中、外边距、内边距、细线表格、表格的完整结构
form表单:格式、常见的表单元素
列表标签无序列表(ul-li)格式:
- 需要显示的条目内容
例如:
- 苹果
- 香蕉
- 榴莲
运行结果(alt+b):
样式:我们可以修改前面圆点的形状(一般情况都会使用css将它隐藏)
disc 默认值 实心圆 circle 空心圆 square 实心方块
注意:
ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现
有序列表(ol-li)格式:
例如:
- 螺蛳粉
- 老友粉
- 桂林米粉
运行结果:
样式:
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)
表格标签定义列表(dl-dt-dd)
格式:
dt:definition title-定义列表中的标题 dd:definition description, 定义标题对应的描述
例如:
- 小明
- 是初中生
- 李明
- 是高中生
运行结果:
基础知识:
tr-一行 td-一列或者一个单元格 th-表头标题标签(默认居中加粗效果)
table、tr td可设置水平对齐 ——align:left center right
tr td可设置垂直对齐 ——valign:top mid bottomcellspacing ——单元格和格的外边距
cellpadding ——单元格和内容的内边距width——table的宽
height——table的高
form表单格式:
姓名 性别 年龄 李四 男 3 运行结果:
宽高属性、水平对齐、垂直居中、外边距、内边距(在一个table中统一解释啦):
姓名 性别 年龄 张三 女 3 李四 女 3 运行结果:
完整的table结构:
个人信息 姓名 性别 年龄 张三 女 3 运行结果:
基础知识1.input标签——输入框
当type的值改变时,输入框的类型发生改变
- text——普通输入框
- password——密码框
- radio——单选框
- chexkbox——多选框 (checked默认选中)
- submit——提交按钮(提交至form表单中的action)
- buttion——普通按钮(配合js完成一些操作)
- image——图片按钮(配合js完成一些操作)
- reset——重置按钮(清空表单)
- hidden——隐藏域
name:输入框的名称、value:输入框的值 提交时将name=value 提交至服务器
placholder:给用户提示文字
2、label标签——聚焦作用,点击文字时聚焦到对应的输入框
3、select标签——下拉列表(配合option使用)
运行代码运行结果
总结大家在写表单基本标签的时候,可以一个属性一个属性的完成 这样笔记直观哈(虽然后续我们的学习很少用到原生的表格和表单,大多数都会使用vue、element、vant等组件,但我们也要学会这些基本原理。)



