2020-10-31

              ## HTML学习第二天
 
  预习，一定要预习，不预习的话第二天学的时候会不知道那里是重点，而且就算之前学过也会跟不上老师的思路，走神会跟不上老师的思路，学起来吃力`在这里插入代码片`

1表格的常用标签即属性**

表格的作用

主要用来显示数据、展示数据，因此它可以让数据显示的非常的规整，可读性非常好

pink老师总结 表格不是用来布局页面的，而是用来展示数据的

表格基本语法

用于定义表格的标签 标签用于定义表格中的行，必须嵌套在 中 用于定义表格中的单元格，必须嵌套再中

字母td志表格数据（table data），即数据单元格内容

：表格内容是写在哪个标签中的？
td 标签是用来存放单元格数据的；
table 和 tr 是用来搭
建表格结构的，不能存放实际内容。
表头单元格
表头标签的作用是什么？标签是什么？
在大多数表格中，第一行通常用来显示标题而不是实际的数据，这样可以方便用户阅读和理解下方表格数据的含义；
表头单元格的标签是th。
表头单元格能存放内容吗？与 td 的显示有什么区别？
th 标签同样可以存放内容；
相比较 td 标签，内容会被加粗并且居中显示
快捷键 替换 ctrl+H
1：表格属性应该写在哪一个标签中？为什么？
属性是用来描述标签的特征（显示效果）的，因此属性应该写在 table 标签中；
属性语法复习

cellpadding 是谁和谁之间的距离？
1.内容与边框之间的距离，默认 1 像素。
cellspacing 是谁和谁之间的距离？
单元格之间的间距，默认 2 像素

1.书写制作表格结构
1.第 1 行使用 th 表头单元格；
2.第 2 行开始使用 td 普通单元格；
3.单元格中可以放任何元素：文字、链接、图片等。
2.书写表格属性
1.用到 width、height、border、cellpadding 和 cellspacing；
2.使用 align 属性实现表格在浏览器中居中对齐

就语义而言，表格可以被划分成哪两个区域？分别对应什么标签
1.thead 定义表格头部（标题行），必须拥有 tr 标签，一般位于第一行；
2.tbody 定义表格的主体，通常包含标题行下方的表格数据区域。
结构标签能够存放单元格的内容吗？为什么？
不能；
thead 和 tbody 只是用来划分表格结构的，用来区分标题行和数据区域。
TIP
表格中实际要显示的内容，需要放在 th 或 td 标签中，其他标签仅是用来搭建表格结构或者增强表格结构的语义的
合并单元格有哪两种方式？
1.跨行合并（rowspan），把多个行的单元格合并 → 纵向合并；
2.跨列合并（colspan），把多个列的单元格合并 → 横向合并。
合并单元格的步骤是什么？
1.明确合并方式（跨行 / 跨列）；
2.找到目标单元格 td 增加合并单元格属性；
1.跨行 rowspan=“x”（纵向）；
2.跨列 colspan=“y”（横向）；
3.删除多余的单元格。
问题 3：合并单元格的属性写在哪一个标签上？
目标单元格。

列表
列表就是用来布局的
分为三大类 有序列表 无序列表 自定义列表
无序列表

• 
  列表总结
  第 3 节课 / 02’54’’
  标签名 说明
  ul 无序列表，只允许包含多个 li 标签
  ol 有序列表，只允许包含多个 li 标签
  li 用于存放列表项内容
  dl 自定义列表，只允许包含 dt 和 dd 标签
  dt 用于存放关键词（term）的内容，与 dd 是兄弟关系，不过后续的 dd 都跟随前面的 dt
  dd 用于存放前面 dt 关键词对应的列表项内容

  3.1.2 「表单使用场景以及分类」答案
  问题 1：表单的应用场景是什么
  1.在开发网站时，可以使用表单收集用户信息，统一提交给后台处理。
  问题 2：表单由那几部分组成？
  1.表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性别等完整的用户信息记录；
  2.表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓名；
  3.提示信息：提示用户每一个表单控件是收集什么信息的。
  属性 属性值 作用
  action URL 地址 用于指定接收并处理表单数据的服务器程序的 URL 地址。
  method GET / POST 用于设置表单数据的提交方式，取值为 GET、POST 等。
  name 名称 用于指定表单名称，用以区分同一个页面中的多个表单域。

  、

  问题 1：表单控件的作用是什么？
  1.用户通过表单控件能够输入或者选择内容，以达到通过表单收集信息的目的。
  2：表单控件可以分为几大类？
  1.input 输入
  2.select 选择
  3.textarea 文本域
  问题 3：input 标签的必须属性是什么？有什么作用？
  type 属性是 input 标签的必须属性，用来指定 input 控价的类型；
  input 标签的基本语法：
  

  控价特点 属性值 描述
  输入 text 输入文字
  输入 password 密码
  选择 radio 单选按钮，多选一
  选择 checkbox 复选框（打勾）
  点击选择文件 file 文件上传使用
  点击 button 按钮
  点击 image 按钮
  表单操作 submit 提交，会把数据发送给服务器
  表单操作 reset 重置，会清空表单所有数据
  input 标签是单标签还是双标签？为什么？
  单标签
  因为 input 标签的类型、内容都是通过属性设置的。
  特殊符号   是一个全角的中文空格，在界面布局时有时候非常有用

  1.提交按钮的作用是什么？
  1.提交按钮（sumbit) 可以把表单域中的数据提交给后台。
  2：重置按钮的作用是什么？
  1.重置按钮（reset) 可以把表单域中的数据清空。
  3.视频中的 value 属性有什么用处？
  1.通过 value 属性可以指定提交按钮或重置按钮中的文字。

  1：单选框的应用场景是什么？
  1.在多选一的时候，使用单选框（radio），例如：性别；
  2：复选框的应用场景是什么？
  1.在多选多的时候，使用复选框（checkbox)，例如：爱好。
  name 和 value 属性
  1.哪一个属性能够把表单控件区分开？（不同的控件负责收集不同的信息）
  1.name 属性可以把表单控件区分开。
  2：怎样能够在多个单选按钮中，只允许用户选择一项？
  1.将多个单选按钮设置相同的 name 属性，能够实现用户单选；
  2.提示：同一组单选按钮或复选框，name 属性的值应该一致。
  3，哪一个属性可以记录用户在表单中输入的值？
  1.value 属性可以记录用户在控件中输入的值或者选择结果。
  3.7 checked 和 maxlength 属性
  「checked 和 maxlength 属性」答案
  1：checked 属性的应用场景是什么？
  1.如果用户要修改之前保存过的信息，checked 属性可以选中用户之前的选择，例如：修改个人信息；
  2.用 checked 属性可以帮助用户默认同意用户协议。

  属性 描述
  type 类型
  name 名称，用于区分控件
  value 值，用于记录或设置控件的值
  checked 默认选中某个单选或复选框
  maxlength 输入框最大输入长度

  ☆3.8 input 表单元素四个属性使用场景课堂问答
  input 标签属性要点总结，其中包括：
  1.打开页面就有值（用户之前输入的信息/按钮的默认文字）-----value
  例如 用户名:

  2.区分控件----name
  3.多个单选怎么做到多选—相同name
  例如 吃饭 做饭
  睡觉

  4.打开页面就选中-----checkde
  例如 男
  女

  5.Input标签的形态—type

  「普通按钮和文件域」
  1.哪一个属性可以设置普通按钮的显示文字？
  用 value属性可以设置普通按钮的属性值
  例如
  2.上传文件的type属性是哪个？

  上传文件type属性是 file

  例如 上传图像
  

  ☆3.10 label 标签
  label标签的作用是什么？
  label可以和表单中的元素绑定，增加点击范围，提高用户体验
  label的步骤是什么
  直接在绑定的input外面套上即可
  例如
  例如 用户名:

  使用 label 标签增加性别的点击范围。

  例如
  性 别：
  小帅
  
  小美
  
  

  ☆3.11 select 下拉表单

  下拉列表的应用场景是什么？
  选项太多，希望节节约空间
  下拉列表的标签有几个？

  标签名 说明
  select 下拉列表
  option 下拉列表选项，用于存放选项内容

  下拉列表的基本语法

  选项 1 选项 2 选项 3 ...

  要默认选中其中某一个选项，使用哪一个属性？能优化嘛？
  使用selected属性能够默认选其中的某一项；
  与checkde类似，在h5中 selected=”selected”可以简写为selected

  籍 贯：
  安徽
  北京
  火星
  

  3.12 textarea 文本域标签
  1：文本域的应用场景是什么？
  如果需要输入大量文字并且需要换行时，可以使用文本域，例如：个人简介、留言板、评论。
  2：如何设置文本域的默认值？
  写在双标签内部的文字就是文本域的默认值，一般默认值从后台加载，开发时无需指定初始值。
  文本域的基本语法：
  

  文本域双标签内部的空格与其他位置的空格有什么区别吗？
  文本域双标签内部的空格会被完全还原，所以开始标签和结束标签需要写在一行。
  ☆3.13 表单元素几点总结
  表单元素相关的几个知识点总结视频，其中包括：
  1.三大组表单元素：
  1.input 输入表单元素；
  2.select 下拉表单元素；
  3.textarea 文本域表单元素。
  2.表单元素都应该包含在 form 表单域中；
  3.表单元素应该有 name 属性以区别于其他的表单元素；
  4.三个名字相似的标签：
  1.form 表单域：汇总区域内表单元素的值并提交给服务器；
  2.file 文件域：是 input 标签 type 的属性值，上传文件时使用；
  3.textarea 文本域：输入多行文本时使用。
  4. 查阅文档的方法
  #4.1 学会查阅文档
  现代社会更需要的是对知识的检索能力，学习要善于利用工具而不要死记硬背。
  1.百度: https://www.baidu.com
  2.W3C: https://www.w3school.com.cn
  3.MDN: https://developer.mozilla.org/zh-CN/
  分享是程序员重要的美德
  1.可以在掘金发表自己的学习感悟，文章不需要很长，但是需要是干货，而且要保持更新频率；
  2.github.com 注册一个账号，可以把自己的练习代码发布到 github.com 开源（万一火了呢）；
  3.MDN 注册一个账号，有能力的情况下，尝试翻译其中的文章片段。
  6. 附录
  #6.1 标签
  #6.1.1 表格标签
  序号 标签名 说明
  1 table 表格标签，用于包含多个 tr
  2 tr 定义表格中的行，用于包含多个 td
  3 td 定义表格中的单元格，用于存放单元格内容
  4 th 定义表头中的单元格，用于存放单元格内容，默认会加粗并居中显示
  5 thead 定义表格头部（标题行），必须拥有 tr 标签
  6 tbody 定义表格的主体，通常包含标题行下方的表格数据区域
  #6.1.2 列表标签
  序号 标签名 说明
  1 ul 无序列表，只允许包含多个 li 标签
  2 ol 有序列表，只允许包含多个 li 标签
  3 li 用于存放列表项内容
  4 dl 自定义列表，只允许包含 dt 和 dd 标签
  5 dt 用于存放关键词内容，与 dd 是兄弟关系，不过后续的 dd 都跟随前面的 dt
  6 dd 用于存放前面 dt 关键词的列表项内容
  #6.1.3 表单标签及属性
  
  表单标签
  
  序号 标签名 说明
  1 form 定义表单域，统一收集传递数据
  2 input 输入控件，可以是文本框、单选、复选、选择文件、按钮等
  3 select 下拉列表
  4 option 下拉列表选项，用于存放选项内容
  
  
  input 标签的常用属性：
  
  属性 描述
  type 类型
  name 名称，用于区分控件
  value 值，用于记录或设置控件的值
  checked 默认选中某个单选或复选框
  id 控件标识，与 label 标签联用
  maxlength 输入框最大输入长度
  
  
  input 标签 type 的常用属性值：
  
  类型 属性值 描述
  输入 text 输入文字
  输入 password 密码
  选择 radio 单选按钮，多选一
  选择 checkbox 复选框（打勾）
  点击选择文件 file 文件上传使用
  点击 button 按钮
  点击 image 按钮
  表单操作 submit 提交，会把数据发送给服务器
  表单操作 reset 重置，会清空表单所有数据
  
  #6.2 单词表
  #6.2.1 重点单词
  序号 英语 中文
  1 table 表格
  2 row 行
  3 data 数据
  4 align 对齐
  5 left 左
  6 center 中
  7 right 右
  8 cell 单元格
  9 spacing 外部彼此间的间距
  10 padding 内边距（填充物）内容距离边框的距离
  11 row 行
  12 col / column 列
  13 term 术语
  14 input 输入
  15 select 选择
  16 selected 已选中
  17 area 区域
  18 type 类型
  19 submit 提交
  20 reset 重置
  21 name 姓名、名称
  22 value 值
  23 radio 单选框
  24 checkbox 多选框
  25 option 选项