CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）

1_列表元素

1.1_列表的实现方式

两种方案

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

网站对列表元素无强烈偏好，多按照自己的风格来布局

• 原因是列表元素默认的CSS样式, 让它用起来不是非常方便;

• 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;

• 虽然可以通过重置来解决, 但是我们更喜欢自由的div;

常用的3组列表的元素

• 有序列表：ol、li

• 无序列表：ul、li

• 定义列表：dl、dt、dd

1.2_有序列表 – ol – li

ol（ordered list）： 有序列表，直接子元素只能是li

li（list item）： 列表中的每一项

1.3_无序列表 – ul - li

ul（unordered list）： 无序列表，直接子元素只能是li

li（list item）： 列表中的每一项（默认每项前面是黑色小圆点）

1.4_定义列表 – dl – dt - dd

dl（definition list）【大标题】 定义列表，直接子元素只能是dt、dd

dt（definition term）【中标题】 term是项的意思, 列表中每一项 的项目名

dd（definition description）【小标题/正文】

• 列表中每一项的具体描述，是对 dt 的描述、解释、补充

• 一个dt后面一般紧跟着1个或者多个dd

1.5_ 写前端代码逻辑顺序

1. 先完成结构
2. 重置样式(body/a/ul)
3. 先整体, 后局部
4. 顺序: 按照从外往里. 从上往下
5. 去除重复的代码(css)
   • 将重复的逻辑放到一个单独的class中(.icon)
   • 不同的代码抽到不同的class(.new .hot)

• 慢慢来写反而是快！

• 继承样式权重<给后代专门设置样式权重

2_表格元素(不推荐)

2.1_表格常见元素

table： 表格

tr(table row)： 表格中的行

td(table data)： 行中的单元格

表格有很多相关的属性可设置表格的样式, 但已经不推荐使用

2.2_表格其他元素

thead： 表格的表头

tbody： 表格的主体

tfoot： 表格的页脚

caption： 表格的标题

th 表格的表头单元格

2.3_单元格合并

某些情况, 每个单元格占据的大小不是固定的， 一个单元格可能会跨多行或者多列来使用

两种情况:

• 跨列合并: 在最左边的单元格写上colspan属性, 并且省略掉合并的td;

• 跨行合并: 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;

3_表单元素

3.1_input的属性

type

• text：文本输入框（明文输入）

• password：文本输入框（密文输入）

• radio：单选框

• checkbox：复选框

• button：按钮

• reset：重置

• submit：提交表单数据给服务器

• file：文件上传

readonly：只读

disabled：禁用

checked：默认被选中(只有当type为radio或checkbox时可用)

autofocus：当页面加载时，自动聚焦

name：名字(在提交数据给服务器时，可用于区分数据类型)

value：取值【显示给用户看】

3.2_表单按钮

普通按钮（type=button）：使用value属性设置按钮文字

重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）

提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

3.3_input和label的关系

label元素一般跟input配合使用，用来表示input的标题；

labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

3.4_ radio

将type类型设置为radio变成单选框【圆圈框】；

name值相同的radio才具备单选功能

3.5_ checkbox

将type类型设置为checkbox变成多选框【打钩框】；

属于同一种类型的checkbox，name值要保持一致

3.6_ textarea

textarea的常用属性:

​ cols：列数

​ rows：行数

缩放的CSS设置【在style中textarea的设置其样式】

​ 禁止缩放：resize: none;

​ 水平缩放：resize: horizontal; 【文本框水平方向可调长度】

​ 垂直缩放：resize: vertical;【文本框垂直方向可调长度】

​ 水平垂直缩放：resize: both;【文本框水平垂直方向都可调长度】

3.7_ select和option的使用

option是select的子元素，一个option代表一个选项，多个option就有多个选项

select常用属性

multiple：可以多选

size：显示多少项

option常用属性 : elected(默认被选中)

3.8_form常见的属性

form通常作为表单元素的父元素:

​ form可以将整个表单作为一个整体来进行操作;

比如对整个表单进行重置；

比如对整个表单的数据进行提交;

form常见的属性如下:

​ action: 用于提交表单数据的请求URL

​ method： 请求方法（get和post），默认是get

​ target： 在什么地方打开URL（参考a元素的target）

4_Emmet(理解)

4.1_ 认识emmet语法

VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码

4.2_ >（子代） +（兄弟）

div>ul>li

div+div>p>span+i

div+p+ul>li

4.3_ *(多个) ^(上一级）

ul>li*5

div+div>p>span^h1

div+div>p>span^^^^h1

4.4_ 括号分组 ()

div>(header>ul>li*2>a)+footer>p

4.5_ 属性(id、class) {内容}

div#header+div#main>.container>a[href]
“ . ”表示其class名称
“ # ”表示id

a[href=“http://www.baidu.com”]{百度一下}

百度一下

4.6_ $（数字）

*ul>li.item$5

4.7_隐式标签

在一个双标签内容处，用emmet语法缩写快速生成相应标签

4.8_CSS Emmet(css缩写提高代码效率)

• w100 即width: 100px；

• w20+h30+m40+p50 （height/margin/padding）

• dib表示display:inline-block

5_结构伪类

5.1_ :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个子元素。

5.2_ :nth-last-child( )

【不在乎子元素类型是否相同】

:nth-last-child(1)，代表倒数第一个子元素

:nth-last-child(-n + 2)，代表最后2个子元素

:nth-of-type() 计数时只计算同种类型的元素

:nth-last-of-type() 从最后一个这种类型的子元素开始倒数数

5.3_不常用结构伪类

: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代表里面完全空白的元素

5.4_否定伪类

:not()的格式是:not(x)

x是一个简单选择器：元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）

:not(x)表示****除x以外的元素