务必下载！！

    今日的代码和讲义 以及思维导图：【点击此链接下载 Day07.zip】

    大纲

    一. 列表元素

    列表的实现方式

    • 事实上现在很多的列表功能采用了不同的方案来实现:

      • 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
      • 方案二: 使用列表元素, 使用元素语义化的方式实现;

    • 事实上现在很多的网站对于列表元素没有很强烈的偏好,更加不拘一格,按照自己的风格来布局:

      • 原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
      • 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
      • 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div;

    • HTML提供了3组常用的用来展示列表的元素

      • 有序列表:ol、li
      • 无序列表:ul、li
      • 定义列表:dl、dt、dd

    1.1. 三种列表

    有序列表 – ol – li

    1
    2
    3
    * ol > li
    * ul > li
    * dl > dt > dd
    • ol( ordered list )
      • 有序列表，直接子元素只能是 li
    • li(list item)
      • 列表中的每一项

    无序列表 – ul - li

    • ul(unordered list)
      • 无序列表，直接子元素只能是li
    • li(list item)
      • 列表中的每一项

    定义列表 – dl – dt - dd

    • dl( definition list )

      • 定义列表，直接子元素只能是dt、dd

    • dt ( definition term )

      • term 是项的意思, 列表中每一项的项目名

    • dd( definition description )

      • 列表中每一项的具体描述，是对 dt 的描述、解释、补充
      • 一个 dt 后面一般紧跟着 1 个或者多个 dd

    1.2. 列表案例

    • 总结思路

    二. table元素

    • 在网页中,对于某些内容的展示使用表格元素更为合适和方便

    2.1. table常见

    1
    2
    3
    * table
    * tr
    * td
    • 编写表格最常见的是下面的元素:
    • table
      • 表格
    • tr(table row)
      • 表格中的行
    • td(table data)
      • 行中的单元格
    • 另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

    2.2. 案例练习

    股票表格

    1
    2
    3
    table {
        border-collapse: collapse;
    }

    • 这里我们需要用到一个非常重要的属性:

      • border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。

      • table { border-collapse: collapse; }

      • 合并单元格的边框

    2.3. table元素

    1
    2
    3
    4
    5
    * thead
    * tbody
    * tfoot
    * caption
    * th
    • thead
      • 表格的表头
    • tbody
      • 表格的主体
    • tfoot
      • 表格的页脚
    • caption
      • 表格的标题
    • th
      • 表格的表头单元格

    2.4. 单元格合并

    1
    2
    3
    * colspan
    * rowspan
    * 练习: 课程表
    • 在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的
      • 一个单元格可能会跨多行或者多列来使用;

    • 这个时候我们就要使用单元格合并来完成;

    如何使用单元格合并呢?

    • 单元格合并分成两种情况:
    • 跨列合并: 使用colspan
      • ✓ 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
    • 跨行合并: 使用rowspan
      • ✓ 在最上面的单元格协商rowspan属性, 并且省略掉后面 tr 中的 td;

    2.5. 作业

    三. 表单元素

    3.1. 常见表单

    1
    2
    3
    4
    5
    * input
    * form
    * label
    * select/option
    * textarea
    • form
      • 表单, 一般情况下，其他表单相关元素都是它的后代元素
    • input
      • 单行文本输入框、单选框、复选框、按钮等元素
    • textarea
      • 多行文本框
    • select、option
      • 下拉选择框
    • button
      • 按钮
    • label
      • 表单元素的标题

    3.2. input元素

    • type
      • text
      • password
      • time
      • date
    • disabled/autofoucs/readonly
    • MDN文档
    • boolean属性写法

    input元素的使用

    • 表单元素使用最多的是 input 元素
    • input元素有如下常见的属性:
    • type: input的类型
      • text:文本输入框(明文输入)
      • password:文本输入框(密文输入)
      • radio:单选框
      • checkbox:复选框
      • button:按钮
      • reset:重置
      • submit:提交表单数据给服务器
      • file:文件上传
    • readonly:只读
    • disabled:禁用
    • checked:默认被选中
      • 只有当 type 为 radio 或 checkbox 时可用
    • autofocus:当页面加载时，自动聚焦
    • name:名字
      • 在提交数据给服务器时，可用于区分数据类型
    • value:取值

    布尔属性(boolean attributes)

    • 常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
    • 布尔属性可以没有属性值，写上属性名就代表使用这个属性
      • 如果要给布尔属性设值，值就是属性名本身

    3.3. input模拟按钮

    1
    2
    3
    4
    5
    * 三种按钮
      * 普通
      * 重置
      * 提交
    * button

    • 表单可以实现按钮效果:

      • 普通按钮(type=button):使用value属性设置按钮文字

      • 重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea、select)

      • 提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select)

    • 我们也可以通过按钮来实现:

    3.4. input和label结合

    • label元素一般跟input配合使用，用来表示input的标题
    • labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

    3.5. radio/checkbox

    1
    2
    * name
    * value

    radio的使用

    • 我们可以将type类型设置为 radio 变成 单选框:
      • name值相同的 radio 才具备单选功能

    checkbox的使用

    • 我们可以将type类型设置为checkbox变成多选框:
      • 属于同一种类型的checkbox，name值要保持一致

    3.6. textarea/select/option

    textarea的使用

    • textarea的常用属性:
      • cols:列数
      • rows:行数
    • 缩放的CSS设置
      • 禁止缩放:resize: none;
      • 水平缩放:resize: horizontal;
      • 垂直缩放:resize: vertical;
      • 水平垂直缩放:resize: both;

    select和option的使用

    • option是select的子元素，一个option代表一个选项
    • select常用属性
      • multiple:可以多选
      • size:显示多少项
    • option常用属性
      • selected:默认被选中

    3.7. form表单

    1
    2
    3
    4
    5
    * action 服务器地址
    * method
      * get/post
    * target
    * 模拟百度一下
    • form通常作为表单元素的父元素:
      • form可以将整个表单作为一个整体来进行操作;
      • 比如对整个表单进行重置;
      • 比如对整个表单的数据进行提交;
    • form常见的属性如下:
    • action
      • 用于提交表单数据的请求URL
    • method
      • 请求方法(get和post)，默认是get
    • target
      • 在什么地方打开URL(参考a元素的target)

    请求方式的对比

    四. Emmet

    1
    了解, 用到的时候知道可以这么写, 提高一点效率即可
    • Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.
      • 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低.
      • VsCode内置了 Emmet语法 ,在后缀为.html/.css中输入缩写后按 Tab/Enter键即会自动生成相应代码

    > (子代)和 + (兄弟)

    * (多个)和 ^ (上一级)

    ()(分组)

    属性(id属性、class属性、普通属性) {}(内容)

    $(数字)

    隐式标签

    CSS Emmet

    结构伪类 - :nth-child

    • :nth-child(1)
      • 是父元素中的第1个子元素
    • :nth-child(2n)
      • n代表任意正整数和0
      • 是父元素中的第偶数个子元素(第2、4、6、8……个)
      • 跟:nth-child(even)同义
    • :nth-child(2n + 1)
      • n代表任意正整数和0
      • 是父元素中的第奇数个子元素(第1、3、5、7……个)
      • 跟:nth-child(odd)同义
    • nth-child(-n + 2)
      • 代表前2个子元素

    结构伪类 - :nth-last-child( )

    • :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
      • :nth-last-child(1)，代表倒数第一个子元素
      • :nth-last-child(-n + 2)，代表最后2个子元素
    • :nth-of-type()用法跟:nth-child()类似
      • 不同点是:nth-of-type()计数时只计算同种类型的元素
    • :nth-last-of-type()用法跟 :nth-of-type() 类似
      • 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

    结构伪类 - :nth-of-type( )、:nth-last-of-type( )

    • 其他常见的伪类(了解):
      • :first-child，等同于:nth-child(1)
      • :last-child，等同于:nth-last-child(1)
      • :first-of-type，等同于:nth-of-type(1)
      • :last-of-type，等同于:nth-last-of-type(1)
      • :only-child，是父元素中唯一的子元素
      • :only-of-type，是父元素中唯一的这种类型的子元素
    • 下面的伪类偶尔会使用:
      • :root，根元素，就是HTML元素
      • :empty 代表里面完全空白的元素

    否定伪类(negation pseudo-class)

    • :not()的格式是:not(x)
      • x是一个简单选择器
      • 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类)
    • :not(x)表示 除x以外的元素