鲸木
鲸木

小白学习前端day2（html）

昨天没写博客有时间补上

今天学习的是表格和表单

一.表格的基本语法

，其中表头单元格要用
标签来表示可达到居中加粗效果
.

td 标签是用来存放单元格数据的；

 table 和 tr 是用来搭建表格结构的，不能存放实际内容。



对齐方式：“align”值，如：align=left（向左）、center（居中）、right（向右）

表格边框：“border”值，如 border="1"（默认无边框）

单元格之间的间距：“cellspacing” 值 默认2像素（px）

单元格内容与边框之间的距离：“cellpadding”值 默认1像素（px）


*table 的属性在 VSCode 中智能提示不够友好，以上属性后续可以通过 CSS 设置。


二.表格结构标签

thead 定义表格头部（标题行），必须拥有 tr 标签，一般位于第一行； 

tbody 定义表格的主体，通常包含标题行下方的表格数据区域。

问题：结构标签能够存放单元格的内容吗？为什么？

不能； thead 和 tbody 只是用来划分表格结构的，用来区分标题行和数据区域。

*表格中实际要显示的内容，需要放在 th 或 td 标签中，其他标签仅是用来搭建 表格结构或者增强表格结构的语义的。

三.合并单元格（"colspan" "rowspan" 属性值写在目标单元格的标签上）

1. 明确合并方式（跨行 / 跨列）； 

2. 找到目标单元格 td 增加合并单元格属性；

        1. 跨行 rowspan="x" （纵向）； 2. 跨列 colspan="y" （横向）； 

3. 删除多余的单元格。


四.列表

列表就是用来布局的，可以整齐、有序的展示数据，用列表做布局会更加自由和方便。

1.无序列表



    • 2.有序列表

        2. 有序列表的的基本语法与无序列表基本一致，只需要把 ul 替换成 ol 即可：

          有序列表除了序号之外，与无序列表的使用及注意事项没有区别；


          3.自定义列表

          网站首页下方的网站导航通常可以使用自定义列表来实现。


          *虽然一个 dl 中可以包含多个 dt ，但是在实际开发中通常只包含一个 dt ，因 为这样更方便布局。

          五.表单：表单域、表单控件（表单元素）、提示信息

          在开发网站时，可以使用表单收集用户信息，统一提交给后台处理。

          问题 ：表单由那几部分组成？ 

          1. 表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性 别等完整的用户信息记录；

           2. 表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓 名；

           3. 提示信息：提示用户每一个表单控件是收集什么信息的。


          1.表单域

          实现用户信息的收集与传递，例如收集用户的完整信息，然后统一传递给后台。



          由表单域、表单控件（表单元素）、提示信息构成

          表单元素：

          1. input输入表单元素

          2. select下拉表单元素

          3. textarea 文本域元素 

          input 标签的基本语法：

          按钮：

          1 提交按钮：submit   里面需要value值  ，提交按钮（submit) 可以把表单域中的数据提交给后台。

          2 重置按钮：reset   重置按钮（reset) 可以把表单域中的数据清空。

          3 单选按钮:  radio   可实现多选一

          4 复选框：checkbox  可实现多选

          5 普通按钮：button 

          6 文件域：file

          其中里面的属性有："name"     "value"   "checked"(可以让单选框和复选框打开页面就处于选中状态    "maxlength" （限制字符数）

          将多个单选按钮设置相同的 name 属性，能够实现用户单选； 提示：同一组单选按钮或复选框， name 属性的值应该一致。


          标签：用于绑定表单元素，增加点击范围。

          标签的for属性应与相关元素的id属性相同。



          1.select 下拉表单元素


          使用 selected 属性能够默认选中某一项；

           与 checked 类似，在 H5 中 selected="selected" 可以简写为 selected 。

          2.文本域标签：textarea