这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。
这篇笔记记录了HTML与CSS部分的课程内容
一、本堂课重点内容
- HTML标签
- HTML语义化
- CSS属性
- CSS选择器
- CSS页面布局
二、详细知识点介绍
1、HTML标签
- 标题：h1~h6
- 列表
- 有序列表：ol
- 无序列表：ul
- 自定义列表：dl、dt、dd
- 链接：a
- 图片：img
- 多媒体：video、audio
- 输入
- input
- select、option
- textarea
- datalist
2、CSS属性
- 字体属性（font）
- 文本属性
- 背景属性（background）
- 边框属性（border）
- ...
3、CSS选择器
- 通配符选择器
* {
margin: 0;
padding: 0;
}
- 标签选择器
p {
color: black;
font-size: 16px;
}
- id选择器
#submit {
color: white;
border: 1px solid #000;
background-color: #66ccff;
}
- class选择器
.title {
color: black;
font-size: 24px;
font-weight: 700;
}
- 属性选择器
- 除了完全匹配之外，还可以匹配首尾的一部分字符串
[type="button"] {
color: black;
}
[type^="submit"] {
/* 匹配type属性以submit开头的元素 */
background-color: blue;
}
[type$="cancel"] {
/* 匹配type属性以cancel结尾的元素 */
background-color: grey;
}
-
伪类
- 状态伪类：link、visited、hover、active、focus
- 结构性伪类：first-child、last-child、nth-child、before、after
-
派生选择器
- 直接组合：AB，同时满足A和B
- 后代组合：A B，选中A的子孙B
- 亲子组合：A>B，选中A的子元素B
- 兄弟选择器：A~B，选中A之后且与A同级的B
- 相邻选择器：A+B，选中紧跟A之后的B
-
CSS优先级（特异性）计算
- 权重值计算：
(0, 0, 0, 0) (行内样式，ID选择器，class/属性/伪类选择器/，类型/伪元素)- 使用
!important修饰的属性优先级最高 - 权重相同时，定义靠后的优先
-
继承与初始值
- 某些属性会自动继承父元素的计算值，除非显式指定一个值
- 每个属性都有初始值，可以通过initial关键字重置为初始值
-
CSS布局
- 常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
- 浮动
- 绝对定位：relative、absolute、fixed、static
- 常规流
三、课后个人总结
- HTML和CSS的属性和功能繁多，仅凭课程是无法完全掌握的，仍需要积极地阅读各种官方手册和文档，保持时刻学习的心态
- flex布局和grid布局对页面的排版有很大的帮助，需要花时间继续学习理解
- 实践是巩固理论的最好方法，多敲一些代码才能更好地记住HTML和CSS的知识点
