HTML 第 02 天 —— HTML 基础

一:表格常用标签及属性

表格标签基本使用 :

1:表格的主要作用是什么?

以行、列的方式(表格)整齐地展示数据,例如:股票价格。

提示:非常老的前端人员会用表格布局页面(后续讲到布局会给大家扩展)。

2:表格的基本语法是什么?

 3:常用的表格标签有几个?分别代表什么含义?


4:表格内容是写在哪个标签中的?

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

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

表头单元格标签 

1:表头标签的作用是什么?标签是什么?

在大多数表格中,第一行通常用来显示标题而不是实际的数据,这样可以方便用户阅读

和理解下方表格数据的含义;

表头单元格的标签是 th 。

 2:表头单元格能存放内容吗?与 td 的显示有什么区别?

th 标签同样可以存放内容;

相比较 td 标签,内容会被加粗并且居中显示。

表格相关属性(了解)

1:表格属性应该写在哪一个标签中?为什么?

属性是用来描述标签的特征(显示效果)的,因此属性应该写在 table 标签中;

属性语法复习:

属性名不需要引号;

属性值必须要用引号,通常使用双引号;

属性="值" 这种定义方式又被称为键值对 —— 属性名(键)和属性值(值)成对出现;

每一个键值对之间使用空格分隔

2.表格中常用的属性



3.cellpadding 是谁和谁之间的距离?

内容与边框之间的距离,默认 1 像素。

 4: cellspacing 是谁和谁之间的距离?

单元格之间的间距,默认 2 像素。

表格结构标签

1:就语义而言,表格可以被划分成哪两个区域?分别对应什么标签?

thead 定义表格头部(标题行),必须拥有 tr 标签,一般位于第一行;

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

2:结构标签能够存放单元格的内容吗?为什么?

不能;

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

注意: thead 和 tbody 只是用来划分表格结构的,不能替代 tr 、 th 、 td 标签的 作用。 表格中实际要显示的内容,需要放在 th 或 td 标签中,其他标签仅是用来搭建 表格结构或者增强表格结构的语义的。  

合并单元格 

在开发中,有时候需要:

1. 把一行中的多个单元格合并,在横向上显示更多的内容;

2. 把一列中的多个单元格合并,在纵向上显示更多的内容。

 1:合并单元格有哪两种方式?

①跨行合并( rowspan ),把多个行的单元格合并 → 纵向合并;

2. ②并。

 2:合并单元格的步骤是什么?

①明确合并方式(跨行 / 跨列);

② 找到目标单元格 td 增加合并单元格属性;

       1. 跨行 rowspan="x" (纵向);

        2. 跨列 colspan="y" (横向);

           3. 删除多余的单元格。

3:合并单元格的属性写在哪一个标签上?

目标单元格。

表格标签



表格属性



合并单元格

1. 明确合并方式(跨行 / 跨列);

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

1. 跨行 rowspan="x" (纵向);

2. 跨列 colspan="y" (横向);

3. 删除多余的单元格

二、 三种列表

无序列表

1:列表的主要是用来做什么的?

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

2:我们一共要学习几种列表?

1. 无序列表: ul ; 2. 有序列表: ol ; 3. 自定义列表: dl 。 

3:无序列表一共有几个标签?分别是什么,作用是什么?有什么注意事项?



有序列表

1:有序列表和无序列表有什么区别?

有序列表 ol 会在列表项前面自动增加数字排序,并且排序依次递增;

2:有序列表除了序号之外,与无序列表的使用及注意事项有区别吗?

         

  • 列表项内容
  •        

  • 列表项内容
  •        

  • 列表项内容
  •           ...

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

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

自定义列表

1:自定义列表的应用场景是什么?

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

2:自定义列表的标签有几个?分别代表什么含义?


3:自定义列表的内容是写在哪个标签中的?

dt 存放关键词(term)的内容;

dd 存放前面 dt 关键词对应的列表项内容。

列表总结



三、表单

表单使用场景以及分类

1:表单的应用场景是什么?

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

2. 问题 2:表单由那几部分组成?

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

2. 表单控件(表单元素):与用户交互,允许用户输入或者选择单个具体的信息,例如姓 名;

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

表单域

1:表单域的作用是什么?

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

 2:表单域的标签是什么?

form

文本框和密码框 

1:表单控件的作用是什么?

用户通过表单控件能够输入或者选择内容,以达到通过表单收集信息的目的。

 2:表单控件可以分为几大类?

①input 输入

②select 选择

③textarea 文本域

 3:input 标签的必须属性是什么?有什么作用?

type 属性是 input 标签的必须属性,用来指定 input 控价的类型;

input 标签的基本语法:

input 标签 type 的常用属性值:


4:input 标签是单标签还是双标签?为什么?

单标签

因为 input 标签的类型、内容都是通过属性设置的。

提交和重置按钮

1:提交按钮的作用是什么?

提交按钮(sumbit) 可以把表单域中的数据提交给后台。

2:重置按钮的作用是什么?

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

 3:视频中的 value 属性有什么用处?

通过 value 属性可以指定提交按钮或重置按钮中的文字。

单选按钮和复选框

单选按钮和复选框

1:单选框的应用场景是什么?

在多选一的时候,使用单选框(radio),例如:性别;

2:复选框的应用场景是什么?

在多选多的时候,使用复选框(checkbox),例如:爱好。 


name 和 value 属性

1:哪一个属性能够把表单控件区分开?(不同的控件负责收集不同的信息)

name 属性可以把表单控件区分开。

2:怎样能够在多个单选按钮中,只允许用户选择一项?

将多个单选按钮设置相同的 name 属性,能够实现用户单选;

提示:同一组单选按钮或复选框, name 属性的值应该一致。

 3:哪一个属性可以记录用户在表单中输入的值?

value 属性可以记录用户在控件中输入的值或者选择结果。

checked 和 maxlength 属性

1: checked 属性的应用场景是什么?

如果用户要修改之前保存过的信息, checked 属性可以选中用户之前的选择,例如:

修改个人信息;

用 checked 属性可以帮助用户默认同意用户协议。

 2: maxlength 属性的应用场景是什么?

某写输入项有长度限制时,可以使用 maxlength 属性。

input 标签的属性有哪些?作用是什么?



input 表单元素四个属性使用场景课堂问答 

1. 打开页面就有值(用户之前输入的信息 / 按钮的默认文字) —— value

2. 区分控件 —— name

3. 多个单选怎么做到多选一 —— 相同的 name

4. 打开页面就选中 —— checked

5. input 标签的形态 —— type

普通按钮和文件域

1:哪一个属性可以设置普通按钮的显示文字?

用 value 属性可以设置普通按钮的属性值。

2:上传文件的 type 属性值是什么?

上传文件的 type 属性值是 file 。

 3:点击普通按钮能提交表单吗?

点击普通按钮不能提交表单,后续学习了 JavaScript 之后普通按钮就非常有用了。

label 标签

1: label 标签的作用是什么?

label 可以和表单中的元素绑定,增加点击范围,提高用户体验。

 2: label 标签的使用步骤是什么?

①给要绑定的 input 标签设置唯一的 id 属性值;

②使用 让 label 标签与对应控件绑定。

 3: label 标签和 input 标签是父子关系还是兄弟关系?

兄弟关系,通过 label 标签的 for 属性和对应 id 的 input 标签建立联系。

select 下拉表单

1:下拉列表的应用场景是什么?

选项太多,希望节约空间,提升用户体验时可以使用下拉列表。

2:下拉列表的标签有几个?分别代表什么含义?


下拉列表的基本语法:

3.要默认选中某一个选项,使用哪一个属性?能优化吗?

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

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

textarea 文本域标签

1:文本域的应用场景是什么?

如果需要输入大量文字并且需要换行时,可以使用文本域,例如:个人简介、留言板、 评论。

2. 问题 2:如何设置文本域的默认值? 写在双标签内部的文字就是文本域的默认值,一般默认值从后台加载,开发时无需指定 初始值。 文本域的基本语法: �A��F�KA��A��

你可能感兴趣的:(HTML 第 02 天 —— HTML 基础)