前端HTML第二天学习笔记
#HTML学习第二天笔记:
- 表格常用标签及属性:
表格的基本语法:
1>三个基本的表格标签如下:
2>表头单元格标签:
在大多数表格中,第一行通常用来显示标题而不是实际的数据,这样可以方便用户阅读
和理解下方表格数据的含义;
表头单元格的标签是 th 。
th 标签同样可以存放内容;
相比较 td 标签,内容会被加粗并且居中显示。
3>表格的常用属性:
4>表格结构标:
thead 定义表格头部(标题行),必须拥有 tr 标签,一般位于第一行;
tbody 定义表格的主体,通常包含标题行下方的表格数据区域。
thead 和 tbody 只是用来划分表格结构的,用来区分标题行和数据区域,不能够存放单元格的内容
5>合并单元格:
跨行合并( rowspan ),把多个行的单元格合并 → 纵向合并;
跨列合并( colspan ),把多个列的单元格合并 → 横向合并。
明确合并方式(跨行 / 跨列)
找到目标单元格 td 增加合并单元格属性
跨行 rowspan=“x” (纵向);
跨列 colspan=“y” (横向);
删除多余的单元格。
合并单元格的属性写在目标单元格标签上。
标签总结: - 三种列表:
列表就是用来布局的,可以整齐、有序的展示数据,用列表做布局会更加自由和方便
我们一共要学习3种列表
无序列表: ul
有序列表: ol
自定义列表: dl
1>无序列表:
2>有序列表:
有序列表 ol 会在列表项前面自动增加数字排序,并且排序依次递增
有序列表的的基本语法与无序列表基本一致,只需要把 ul 替换成 ol 即可:
有序列表除了序号之外,与无序列表的使用及注意事项没有区别;
3>自定义列表:
网站首页下方的网站导航通常可以使用自定义列表来实现
dt 存放关键词(term)的内容;
dd 存放前面 dt 关键词对应的列表项内容。
列表总结
- 表单
表单在开发网站时,可以使用表单收集用户信息,统一提交给后台处理
表单由那几部分组成?
1)表单域:整个表单区域,统一汇总要收集的数据,统一提交给后台,例如包含姓名、性 别等完整的用户信息记录;
2)表单控件(表单元素):与用户交互,允许用户输入或者选择单个具体的信息,例如姓 名;
3)提示信息:提示用户每一个表单控件是收集什么信息的。
1>表单域:
实现用户信息的收集与传递,例如收集用户的完整信息,然后统一传递给后台
2>input 标签:
type 属性是 input 标签的必须属性,用来指定 input 控价的类型
3>select 下拉表单:
使用 selected 属性能够默认选中某一项;
与 checked 类似,在 H5 中 selected=“selected” 可以简写为 selected 。
4> textarea 文本域标签:
如果需要输入大量文字并且需要换行时,可以使用文本域,例如:个人简介、留言板、评论。
文本域双标签内部的空格会被完全还原,所以开始标签和结束标签需要写在一行。
表格标签
表单标签及属性
input 标签的常用属性:
input 标签 type 的常用属性值: