前端HTML第二天学习笔记

#HTML学习第二天笔记:

  1. 表格常用标签及属性:
    表格的基本语法:
    前端HTML第二天学习笔记
    1>三个基本的表格标签如下:
    前端HTML第二天学习笔记
    2>表头单元格标签:
    在大多数表格中,第一行通常用来显示标题而不是实际的数据,这样可以方便用户阅读
    和理解下方表格数据的含义;
    表头单元格的标签是 th 。
    th 标签同样可以存放内容;
    相比较 td 标签,内容会被加粗并且居中显示。
    3>表格的常用属性:
    前端HTML第二天学习笔记
    4>表格结构标:
    thead 定义表格头部(标题行),必须拥有 tr 标签,一般位于第一行;
    tbody 定义表格的主体,通常包含标题行下方的表格数据区域。
    thead 和 tbody 只是用来划分表格结构的,用来区分标题行和数据区域,不能够存放单元格的内容
    5>合并单元格:
    跨行合并( rowspan ),把多个行的单元格合并 → 纵向合并;
    跨列合并( colspan ),把多个列的单元格合并 → 横向合并。
    明确合并方式(跨行 / 跨列)
    找到目标单元格 td 增加合并单元格属性
    跨行 rowspan=“x” (纵向);
    跨列 colspan=“y” (横向);
    删除多余的单元格。
    合并单元格的属性写在目标单元格标签上。
    标签总结:
    前端HTML第二天学习笔记
    前端HTML第二天学习笔记
    前端HTML第二天学习笔记
    前端HTML第二天学习笔记
  2. 三种列表:
    列表就是用来布局的,可以整齐、有序的展示数据,用列表做布局会更加*和方便
    我们一共要学习3种列表
    无序列表: ul
    有序列表: ol
    自定义列表: dl
    1>无序列表:
    前端HTML第二天学习笔记
    前端HTML第二天学习笔记

2>有序列表:
有序列表 ol 会在列表项前面自动增加数字排序,并且排序依次递增
有序列表的的基本语法与无序列表基本一致,只需要把 ul 替换成 ol 即可:
有序列表除了序号之外,与无序列表的使用及注意事项没有区别;
前端HTML第二天学习笔记
3>自定义列表:
网站首页下方的网站导航通常可以使用自定义列表来实现
前端HTML第二天学习笔记
前端HTML第二天学习笔记
dt 存放关键词(term)的内容;
dd 存放前面 dt 关键词对应的列表项内容。
列表总结
前端HTML第二天学习笔记

  1. 表单
    表单在开发网站时,可以使用表单收集用户信息,统一提交给后台处理
    表单由那几部分组成?
    1)表单域:整个表单区域,统一汇总要收集的数据,统一提交给后台,例如包含姓名、性 别等完整的用户信息记录;
    2)表单控件(表单元素):与用户交互,允许用户输入或者选择单个具体的信息,例如姓 名;
    3)提示信息:提示用户每一个表单控件是收集什么信息的。
    1>表单域:
    实现用户信息的收集与传递,例如收集用户的完整信息,然后统一传递给后台
    前端HTML第二天学习笔记
    2>input 标签:
    type 属性是 input 标签的必须属性,用来指定 input 控价的类型
    前端HTML第二天学习笔记
    前端HTML第二天学习笔记
    前端HTML第二天学习笔记
    3>select 下拉表单:
    前端HTML第二天学习笔记
    前端HTML第二天学习笔记
    使用 selected 属性能够默认选中某一项;
    与 checked 类似,在 H5 中 selected=“selected” 可以简写为 selected 。
    4> textarea 文本域标签:
    如果需要输入大量文字并且需要换行时,可以使用文本域,例如:个人简介、留言板、评论。
    前端HTML第二天学习笔记
    文本域双标签内部的空格会被完全还原,所以开始标签和结束标签需要写在一行。

表格标签
前端HTML第二天学习笔记
表单标签及属性
前端HTML第二天学习笔记
前端HTML第二天学习笔记
input 标签的常用属性:
前端HTML第二天学习笔记
input 标签 type 的常用属性值:
前端HTML第二天学习笔记
前端HTML第二天学习笔记