CSS字体属性
CSS字体属性
CSS Fonts（字体）属性用于定义：字体系列、大小、粗细、和 文字样式（如：斜体）。
字体族
font-family 字体族（字体的格式）
CSS 使用 font-family 属性定义文本的字体系列。
1234567p { font-family: "Microsoft YaHei";}div { font-family: Arial, "Microsoft YaHei";}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常用的字体：body {font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";}
Apple 官网字体：
123body ...
CSS的元素显示模式
CSS 的元素显示模式
什么是元素显示模式
作用： 网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式 就是元素（标签）以什么方式进行显示，比如 <div> 自己占一行，比如一行可以放多个 <span>。
HTML 元素一般分为 块元素 和 行内元素 两种类型。
块、行内、行内块
块元素
常见的块元素有 <h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<table>、<tr>、<form> 等，其中 <div> 标签是最典型的块元素。
块级元素的特点：
比较霸道，自己独占一行
高度，宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的 100%
是一个容器及盒子，里面可以放行内或者块级元素
注意：
文字类的块级元素内不能放置块级元素，会发生语法错误
<p> 标 ...
CSS引入方式
CSS引入方式
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（外链式）
行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式。
123<div style="color: red; font-size: 12px;"> 青春不常在，抓紧谈恋爱</div>
style 其实就是标签的属性
在双引号中间，写法要符合 CSS 规范
可以控制当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内样式表设定 CSS，通常也被称为 行内式引入
问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）
内部样式表
将样式编写到head中的style标签里然后通过 ...
CSS选择器
CSS选择器
CSS选择器的作用
选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用，简单来说，就是：选择标签用的。
1234h1 { color: red; font-size: 25px;}
以上 CSS 做了两件事：
找到所有的 h1 标签。（选对人）
设置这些标签的样式：颜色为红色、字体大小为 25 像素。（做对事）
选择器的分类
在 CSS 中，可以根据选择器的类型把选择器分为：基础选择器 和 复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
基础选择器是由 单个 选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器、通配符选择器
复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等
标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：
123456标签名 { 属性1: ...
CSS简介
CSS简介
什么是CSS
CSS 是 层叠样式表 的简称。
有时我们也会称之为 CSS样式表 或 级联样式表。
CSS 也是一种 标记语言。
CSS 主要用于设置 HTML 页面中的文本样式（字体、大小、颜色、对齐方式……）、图片样式（宽高、边框样式、边距……）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS 可以美化 HTML，让 HTML 更漂亮，同时让页面布局更简单。
层叠样式表
网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层
总之一句话，CSS用来设置网页中元素的样式
总结：
HTML 搭建结构，填入元素内容
CSS 美化 HTML，布局网页元素
CSS 最大价值：由 HTML 专注去做结构呈现，样式交给 CSS，即：结构 与 样式 分离
CSS语法规范
使用 HTML 时，需要遵从一定的规范，CSS 也是如此，要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。
CSS 规则由两个主要的部分构成：选择器 以及 一条或多条声明。
选择器 ...
语义标签(下)
语义标签(下)
表格
表格的主要作用
表格主要用于显示、展示数据。因为它可以让数据显示得非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理（合理的使用表格也能够有效提高 SEO）。
注意： 表格不是用来布局页面的，而是用来展示数据的。表格常用于表单数据的 “布局”。
特别强调，表格是用于表单数据的 “布局”，而不是页面的布局！
表格的基本语法
1234567<table> <tr> <td>单元格</td> ... </tr> ...</table>
<table> </table> 是用于定义表格的标签
<tr> </tr> 用于定义表格中的行，必须嵌套在 <table> </table> 标签中
<td> </td> 用于定义表格中的单元格，必须嵌套在 <tr> </t ...
字符实体与语义标签(上)
字符实体
有些时候，在HTML中不能直接书写一些特殊符号，如：
多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）
比如字母两侧的大于小于号（可能会被认为是标签并解析）
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）实体的语法：&实体的名字;，如：
实体名称
显示结果
描述
``
空格
>
>
大于号
<
<
小于号
&
&
与
©
©
版权
®
®
注册商标
™
™
商标
×
×
乘号
÷
÷
除号
¿
¿
倒问号
更多的字符实体，可参考：HTML 字符实体、HTML ISO-8859-1 参考手册
meta标签
个人理解name里面的值是指定的，然后content里的内容会在根据name中的值发挥不同的作用
以京东网站为例，右键单击，选择查看网页 ...
HTML简介
【HTML简介】
网页
什么是网页？
网站： 利用前端技术制作的网页集合。
网页： 构成网站的基本元素，通常是 HTML 格式的文件（.htm 或 .html）必须通过浏览器来阅读。
什么是HTML?
超文本： 由图片、声音、动画、视频……构成且可以相互链接的文本。
HTML： 超文本标记语言（HTML 不是编程语言，而是由一套标记标签构成的标记语言）。
网页的形成
前端代码开发 ——> 浏览器解析、渲染代码 ——> 呈现 Web 页面。
Web标准的构成
主要包括三个方面： 结构、表现、行为。
结构html
结构是页面的整体结构，哪里是标题，哪里是段落，哪里是图片
结构使用HTML来编写
123456789<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> </head> <body> < ...
MybatisPlus
转载 飞书
大家在日常开发中应该能发现，单表的CRUD功能代码重复度很高，也没有什么难度。而这部分代码量往往比较大，开发起来比较费时。
因此，目前企业中都会使用一些组件来简化或省略单表的CRUD开发工作。目前在国内使用较多的一个组件就是MybatisPlus.
官方网站如下：
https://www.baomidou.com/
当然，MybatisPlus不仅仅可以简化单表操作，而且还对Mybatis的功能有很多的增强。可以让我们的开发更加的简单，高效。
通过今天的学习，我们要达成下面的目标：
能利用MybatisPlus实现基本的CRUD
会使用条件构建造器构建查询和更新语句
会使用MybatisPlus中的常用注解
会使用MybatisPlus处理枚举、JSON类型字段
会使用MybatisPlus实现分页
快速入门
为了方便测试，我们先创建一个新的项目，并准备一些基础数据。
环境准备
复制课前资料提供好的一个项目到你的工作空间（不要包含空格和特殊字符）：
然后用你的IDEA工具打开，项目结构如下：
注意配置一下项目的JDK版本为JDK11。首先点击项目结构设置：
在弹 ...
函数编程-速查表
Java Stream API Cheat Sheet
body {
font-family: 'consolas','思源宋体 CN';
margin: 0;
padding: 0;
background-color: #f7f7f7;
color: #333;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
/ ...
