当前位置: 首页 > news >正文

HTML5与CSS3新特性详解

一、HTML5新特性

1.概述

HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。

2.语义化标签 (★★)

以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

发展到了HTML5后,新增了一些语义化标签,这样的话更加有利于浏览器的搜索引擎搜索,也方便了网站的seo(Search Engine Optimization,搜索引擎优化),下面就是新增的一些语义化标签

  • <header> 头部标签

  • <nav> 导航标签

  • <article> 内容标签

  • <section> 定义文档某个区域

  • <aside> 侧边栏标签

  • <footer> 尾部标签

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增语义化标签</title><style>header,nav {height: 120px;background-color: pink;border-radius: 15px;width: 800px;margin: 15px auto;}section {width: 500px;height: 300px;background-color: skyblue;}</style>
</head><body><header>头部标签</header><nav>导航栏标签</nav><section>某个区域</section>
</body></html>

注意:

这种语义化标准主要是针对搜索引擎的

 这些新标签页面中可以使用多次

 在 IE9 中,需要把这些元素转换为块级元素

 其实,我们移动端更喜欢使用这些标签

HTML5 还增加了很多其他标签,我们后面再慢慢学

3.多媒体标签

多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们,我们可以很方便的在页面中嵌入音频和视频,而不再去使用落后的flash和其他浏览器插件了。

因为多媒体标签的 属性、方法、事件比较多,因此我们需要什么功能的时候,就需要去查找相关的文档进行学习使用。

⑴视频标签- video(★★★)

①基本使用

当前 <video> 元素支持三种视频格式: 尽量使用 mp4格式

使用语法:

 <video src="media/mi.mp4"></video>

②兼容写法

由于各个浏览器的支持情况不同,所以我们会有一种兼容性的写法,这种写法了解一下即可

<video  controls="controls"  width="300"><source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" >您的浏览器暂不支持 <video> 标签播放视频
</ video >

上面这种写法,浏览器会匹配video标签中的source,如果支持就播放,如果不支持往下匹配,直到没有匹配的格式,就提示文本

 ③video 常用属性

属性很多,有一些属性需要大家重点掌握:

  • autoplay 自动播放

    • 注意: 在google浏览器上面,默认禁止了自动播放,如果想要自动播放的效果,需要设置 muted属性

  • width 宽度

  • height 高度

  • loop 循环播放

  • src 播放源

  • muted 静音播放

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  
loop="loop" poster="media/mi9.jpg"></video>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增视频标签</title><style>video {width: 100%;}</style>
</head><body><video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" controls="controls"poster="media/mi9.jpg"></video>
</body></html>

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

⑵音频标签- audio

①基本使用

当前 <audio> 元素支持三种视频格式: 尽量使用 mp3格式

使用语法:

<audio src="media/music.mp3"></audio>

②兼容写法

由于各个浏览器的支持情况不同,所以我们会有一种兼容性的写法,这种写法了解一下即可

< audio controls="controls"  ><source src="happy.mp3" type="audio/mpeg" ><source src="happy.ogg" type="audio/ogg" >您的浏览器暂不支持 <audio> 标签。
</ audio>

上面这种写法,浏览器会匹配audio标签中的source,如果支持就播放,如果不支持往下匹配,直到没有匹配的格式,就提示文本

③audio 常用属性

示例代码:

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增音频标签</title>
</head><body><audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body></html>

⑶小结

  • 音频标签和视频标签使用方式基本一致

  • 浏览器支持情况不同

  • 谷歌浏览器把音频和视频自动播放禁止了

  • 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过JavaScript解决)

  • 视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性

4.新增的表单元素 (★★)

在H5中,帮我们新增加了很多类型的表单,这样方便了程序员的开发

课堂案例:在这个案例中,熟练了新增表单的用法

案例代码:

<!-- 我们验证的时候必须添加form表单域 -->
<form action=""><ul><li>邮箱: <input type="email" /></li><li>网址: <input type="url" /></li><li>日期: <input type="date" /></li><li>时间: <input type="time" /></li><li>数量: <input type="number" /></li><li>手机号码: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>颜色: <input type="color" /></li><!-- 当我们点击提交按钮就可以验证表单了 --><li> <input type="submit" value="提交"></li></ul>
</form>

常见输入类型

text password radio checkbox button file hidden submit reset image

新的输入类型

类型很多,我们现阶段**重点记忆三个**: **`number`   `tel`   `search`**

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><!-- 我们验证的时候必须添加form表单域 --><form action=""><ul><li>邮箱: <input type="email" /></li><li>网址: <input type="url" /></li><li>日期: <input type="date" /></li><li>时间: <input type="time" /></li><li>数量: <input type="number" /></li><li>手机号码: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>颜色: <input type="color" /></li><!-- 当我们点击提交按钮就可以验证表单了 --><li> <input type="submit" value="提交"></li></ul></form>
</body></html>

5.HTML5 新增的表单属性

属性说明
requiredrequired表单字段必须填写,否则无法提交(如用户名、密码必填项)。
placeholder文本内容输入框内的灰色提示文字(如 “请输入手机号”),输入内容后自动消失。
autofocusautofocus页面加载后自动聚焦到该输入框(如搜索框自动获得光标,直接输入)。
autocompleteon 或 off启用 / 关闭浏览器自动补全功能(默认on,会显示历史输入记录)。
multiplemultiple允许用户选择多个文件(如上传附件时可选多张图片)。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增表单属性</title><style>input::placeholder {color: pink;}</style>
</head><body><form action=""><input type="search" name="sear" id="" required="required" placeholder="老师" autofocus="autofocus"autocomplete="off"><input type="file" name="" id="" multiple="multiple"><input type="submit" value="提交"></form></body></html>

二、CSS3新特性

1.CSS3 的现状

  • 新增的CSS3特性有兼容性问题,ie9+才支持

  • 移动端支持优于 PC 端

  • 不断改进中

  • 应用相对广泛

  • 现阶段主要学习:新增选择器和盒子模型以及其他特性

2.CSS3 新增选择器

CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。

  • 属性选择器

  • 结构伪类选择器

  • 伪元素选择器

⑴.属性选择器(★★)

属性选择器,按照字面意思,都是根据标签中的属性来选择元素

注意:类选择器、属性选择器、伪类选择器,权重为 10。

①利用属性选择器就可以不用借助于类或者id选择器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text" value="请输入用户名"><input type="text">
</body></html>

添加属性选择器,选择有value属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input[value] {color: pink;}</style>
</head><body><input type="text" value="请输入用户名"><input type="text">
</body></html>

 /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */

②属性选择器还可以选择属性=值的某些元素 重点务必掌握的
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 只选择 type =text 文本框的input 选取出来 */input[type=text] {color: pink;}</style>
</head><body><!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 --><input type="text" name="" id=""><input type="password" name="" id="">
</body></html>

③属性选择器可以选择属性值开头的某些元素

选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */div[class^=icon] {color: red;}</style>
</head><body><!-- 3. 属性选择器可以选择属性值开头的某些元素 --><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div>
</body></html>

④属性选择器可以选择属性值结尾的某些元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>section[class$=data] {color: blue;}</style>
</head><body><!-- 4. 属性选择器可以选择属性值结尾的某些元素 --><section class="icon1-data">我是安其拉</section><section class="icon2-data">我是哥斯拉</section><section class="icon3-ico">哪我是谁</section>
</body></html>

        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */

⑵结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素, 常用于根据父级选择器里面的子元素

注意:类选择器、属性选择器、伪类选择器,权重为 10。

①nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)

 n 可以是数字,关键字和公式

 n 如果是数字,就是选择第 n 个子元素, 里面数字从1开始…

 n 可以是关键字:even 偶数,odd 奇数

 n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 ) 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增结构伪类选择器</title><style>/* 1. 选择ul里面的第一个孩子 小li */ul li:first-child {background-color: pink;}/* 2. 选择ul里面的最后一个孩子 小li */ul li:last-child {background-color: pink;}/* 3. 选择ul里面的第2个孩子 小li */ul li:nth-child(2) {background-color: skyblue;}ul li:nth-child(6) {background-color: skyblue;}</style>
</head>
<body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增结构伪类选择器-nth-child</title><style>/* 1.把所有的偶数 even的孩子选出来 */ul li:nth-child(even) {background-color: #ccc;}/* 2.把所有的奇数 odd的孩子选出来 */ul li:nth-child(odd) {background-color: gray;}</style>
</head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul></body></html>

②CSS3新增选择器nth-of-type
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增选择器nth-type-of</title><style>ul li:first-of-type {background-color: pink;}ul li:last-of-type {background-color: pink;}ul li:nth-of-type(even) {background-color: skyblue;}/* nth-child 会把所有的盒子都排列序号 *//* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */section div:nth-child(1) {background-color: red;}/* nth-of-type 会把指定元素的盒子排列序号 *//* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */section div:nth-of-type(1) {background-color: rgb(0, 255, 153);}</style>
</head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul><!-- 区别 --><section><p>光头强</p><div>熊大</div><div>熊二</div></section>
</body></html>

区别:

1. nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配

2. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子 

⑶ 结构伪类选择器小结

 结构伪类选择器一般用于选择父级里面的第几个孩子

 nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配

 nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子

 关于 nth-child(n) 我们要知道 n 是从 0 开始计算的,要记住常用的公式

 如果是无序列表,我们肯定用 nth-child 更多

 类选择器、属性选择器、伪类选择器,权重为 10。

3.伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

注意:

before after 创建一个元素,但是属于行内元素

 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素

 语法: element::before {}

 before 和 after 必须有 content 属性

 before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素

伪元素选择器标签选择器一样,权重为 1 

⑴.什么是伪元素选择器?

伪元素选择器(Pseudo-elements)是CSS中用于选择或操作元素的特定部分生成虚拟内容的选择器。它们不是HTML中实际存在的元素,而是通过CSS定义的“虚拟元素”,允许我们对元素的某些部分(如首字母、首行)或元素前后的内容进行样式控制。

⑵. 伪元素与伪类的区别

伪元素(Pseudo-elements):

作用于元素的特定部分或生成内容,例如首字母、首行,或在元素前后插入内容。

语法:::pseudo-element(双冒号)。

伪类(Pseudo-classes):

作用于元素的状态或逻辑分组,例如链接的悬停状态(:hover)、第一个子元素(:first-child)。 语法::pseudo-class(单冒号)。

⑶. 常用伪元素选择器

以下是CSS中最常用的伪元素及其用法:

① ::before 和 ::after

div::before 权重是2

作用: 在元素内容的前/后插入虚拟内容,常用于添加图标、边框装饰或文字。

语法:

selector::before { /* 样式 */ }
selector::after { /* 样式 */ }

关键点:

必须配合 content: "  " 属性使用(即使内容为空)。

默认显示为行内元素,可通过 display 改为块级元素。

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>在段落前添加图标</title><style>/* 在段落前添加图标 */p::before {content: "💡";color: orange;margin-right: 5px;}</style>
</head><body><p>这是第一个段落,前面会显示一个橙色的灯泡图标。</p><p>这是第二个段落,同样前面会有橙色灯泡图标。</p><p>这是第三个段落,效果与前面段落一致。</p>
</body></html>

② ::first-letter

作用: 为元素的第一个字符添加特殊样式,常用于文章的首字母设计。

语法

selector::first-letter { /* 样式 */ }

关键点:

仅对块级元素(如 p、div)生效。

可设置字体、颜色、边框等属性。

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>段落首字母样式设置</title><style>p::first-letter {font-size: 3em;color: #666;float: left;margin-right: 5px;}</style>
</head><body><p>在这个示例中,每个段落的首字母都会应用特定的样式。首字母会变得更大,并且颜色为灰色,同时会浮动到左侧,这样后续文本会围绕它排列。这是一种常见于书籍排版中的设计技巧,能增强文本的可读性和视觉吸引力。</p><p>这种使用 CSS 伪元素的方法可以轻松实现对段落首字母的样式定制,而无需额外修改 HTML 结构。只需要简单地在 CSS 中定义 `::first-letter` 伪元素的样式,就能让网页的文本排版更加美观。</p>
</body></html>

③ ::first-line

作用: 为元素的首行文本添加样式,常用于标题或段落的首行强调。

语法

selector::first-line { /* 样式 */ }

关键点:

仅对块级元素生效。

可设置字体颜色、背景、行高等属性。

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>段落首行样式设置</title><style>p::first-line {font-weight: bold;color: #00f;}</style>
</head><body><p>这是一段示例文本,用于展示段落首行样式的效果。当你在浏览器中打开这个页面时,你会看到段落的第一行文本会变得加粗,并且颜色变为蓝色。这种样式可以增强段落开头部分的视觉吸引力,帮助用户更快速地识别段落的起始内容。</p><p>另一个段落也会应用相同的首行样式。通过 CSS 的伪元素选择器 `::first-line`,我们可以轻松地对段落的首行进行样式定制,而无需修改 HTML 结构,这体现了 CSS 强大的样式控制能力。</p>
</body></html>

④ ::selection

作用: 定义用户选中文本时的样式。

语法

::selection {background: yellow;color: red;
}

关键点:

无需与具体元素结合,直接使用 ::selection 即可。

浏览器兼容性较好,但部分属性(如 border)可能不生效。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义选中文本样式</title><style>/* 自定义选中文本样式 */::selection {background: yellow;color: red;}/* 兼容 Firefox 浏览器 */::-moz-selection {background: yellow;color: red;}</style>
</head><body><p>在这个示例中,你可以选中文本试试看。当你用鼠标拖动选中文本时,被选中的文本背景会变成黄色,而文本颜色会变成红色。这是通过 CSS 的 `::selection` 伪元素来实现的。</p><p>使用 `::selection` 伪元素可以让网页的交互效果更加个性化,提升用户体验。不同的颜色搭配可以让选中文本在页面中更加突出。</p>
</body></html>

⑷. 伪元素的注意事项

双冒号 vs 单冒号:

推荐使用双冒号(::before)以区分伪类(如 :hover),但单冒号(:before)在旧版CSS中也有效。

content 属性的必要性:

::before 和 ::after 必须定义 content: "  ",否则无效。

布局影响:

::before 和 ::after 生成的内容会占用布局空间,可通过 display: none 隐藏。

不可操作性:

伪元素生成的内容是虚拟的,无法通过JavaScript直接操作。

⑸.伪元素选择器使用场景1:伪元素字体图标

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素选择器使用场景-字体图标</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1lv3na');src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1lv3na') format('truetype'),url('fonts/icomoon.woff?1lv3na') format('woff'),url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;font-family: 'icomoon';/* content: ''; */content: '\e91e';color: red;font-size: 18px;}</style>
</head><body><div></div>
</body></html>

⑹.伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.tudou::before {content: '';/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 当我们鼠标经过了 土豆这个盒子,就让里面before遮罩层显示出来 */.tudou:hover::before {/* 而是显示元素 */display: block;}</style>
</head><body><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div>
</body></html>

⑺.伪元素选择器使用场景3:伪元素清除浮动

1. 额外标签法也称为隔墙法,是 W3C 推荐的做法。

2. 父级添加 overflow 属性

3. 父级添加after伪元素

4. 父级添加双伪元素

1. 额外标签法也称为隔墙法,是 W3C 推荐的做法。

注意: 要求这个新的空标签必须是块级元素。

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

4.CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box、border-box,这样我们 计算盒子大小的方式就发生了改变。

可以分成两种情况:

1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)

2. box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box , 那padding和border就不会撑大盒子了(前提padding 和border不会超过width宽度)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3盒子模型</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div {width: 200px;height: 200px;background-color: pink;border: 20px solid red;padding: 15px;box-sizing: content-box;}p {width: 200px;height: 200px;background-color: pink;border: 20px solid red;padding: 15px;/* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */box-sizing: border-box;}</style>
</head>
<body><div>小猪乔治</div><p>小猪佩奇</p>
</body>
</html>

5. CSS3 其他特性(了解)

1. 图片变模糊

2. 计算盒子宽度 width: calc 函数

⑴.CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数(); 例如: filter: blur(5px); 
blur模糊处理 数值越大越模糊

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片模糊处理filter</title><style>img {/* blur是一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位 */filter: blur(15px);}img:hover {filter: blur(0);}</style>
</head><body><img src="images/pink.jpg" alt="">
</body></html>

⑵.CSS3 calc 函数:

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

width: calc(100% - 80px);

括号里面可以使用 + - * / 来进行计算。

CSS3 还增加了一些 动画 2D 3D 等新特性,我们就业班会继续学习。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3属性calc函数</title><style>.father {width: 300px;height: 200px;background-color: pink;}.son {/* width: 150px; *//* width: calc(150px + 30px); */width: calc(100% - 30px);height: 30px;background-color: skyblue;}</style>
</head><body><!-- 需求我们的子盒子宽度永远比父盒子小30像素 --><div class="father"><div class="son"></div></div>
</body></html>

6. CSS3 过渡(重点)

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或
JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响
页面布局。
我们现在经常和 :hover 一起 搭配使用。

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

1.属性 : 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都 变化过渡, 写一个all 就可以。

2. 花费时间: 单位是 秒(必须写单位) 比如 0.5s

3. 运动曲线: 默认是 ease (可以省略)

4.何时开始 :单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3 过渡效果</title><style>div {width: 200px;height: 100px;background-color: pink;/* transition: 变化的属性 花费时间 运动曲线 何时开始; *//* transition: width .5s ease 0s, height .5s ease 1s; *//* 如果想要写多个属性,利用逗号进行分割 *//* transition: width .5s, height .5s; *//* 如果想要多个属性都变化,属性写all就可以了 *//* transition: height .5s ease 1s; *//* 谁做过渡,给谁加 */transition: all 0.5s;}div:hover {width: 400px;height: 200px;background-color: skyblue;}</style>
</head><body><div></div>
</body></html>

⑴.进度条案例

1. 进度条如何布局

2. 过渡的使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3过渡练习-进度条</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;/* 谁做过渡给谁加 */transition: all .7s;}.bar:hover .bar_in {width: 100%;}</style>
</head><body><div class="bar"><div class="bar_in"></div></div>
</body></html>

三、狭义的HTML5 CSS3 

广义的HTML5 

1. 广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。

2. 这个集合有时称为 HTML5 和朋友,通常缩写为 HTML5 。

3. 虽然 HTML5 的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势。

4. HTML5 MDN 介绍: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

相关文章:

HTML5与CSS3新特性详解

一、HTML5新特性 1.概述 HTML5 的新增特性主要是针对于以前的不足&#xff0c;增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题&#xff0c;基本是 IE9 以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量使用这些新特…...

Redis常用进阶 存储原理和主从思路

Redis常用进阶 存储原理和主从思路 简介 此篇用于需要时随时查阅的知识. 由于不断的学习总是会忘记一些 所以用于记录 笔记对应视频为黑马redis https://www.bilibili.com/video/BV1Pu411Y7bq 单点redis的问题 : 数据丢失问题 持久化并发能力弱 主从集群存储能力问题 ES故…...

本地部署DeepSeek-R1(Dify升级最新版本、新增插件功能、过滤推理思考过程)

下载最新版本Dify Dify1.0版本之前不支持插件功能&#xff0c;先升级DIfy 下载最新版本&#xff0c;目前1.0.1 Git地址&#xff1a;https://github.com/langgenius/dify/releases/tag/1.0.1 我这里下载到老版本同一个目录并解压 拷贝老数据 需先停用老版本Dify PS D:\D…...

分治-快速排序系列一>快速排序

目录 题目方法&#xff1a;优化方法&#xff1a;代码&#xff1a; 题目方法&#xff1a; 忘记快速排序看这里&#xff1a;链接: link 优化方法&#xff1a; 代码&#xff1a; public int[] sortArray(int[] nums) {qsort(nums,0,nums.length-1);return nums;}private void qso…...

【spring对bean Singleton和Prototype的管理流程】

在 Spring 框架中&#xff0c;Bean 的作用域决定了 Bean 的生命周期和创建方式。Spring 支持多种作用域&#xff0c;其中最常用的是 单例&#xff08;Singleton&#xff09; 和 原型&#xff08;Prototype&#xff09;。以下是 Spring 对单例和原型 Bean 的管理流程详解&#x…...

【Java】grpc-java在IDEA中build不成功的相关问题,Android,codegen C++语言排除

一、解决Android依赖问题 在当前grpc-java项目根目录下创建gradle.properties文件,输入以下内容: skipAndroid=true或者 android.useAndroidX=true二、com.google.cloud.tools.appengine插件找不到的问题 Plugin [id: ‘com.google.cloud.tools.appengine’, version: ‘…...

十七、实战开发 uni-app x 项目(仿京东)- 后端指南

前面我们已经用uniappx进行了前端实战学习 一、实战 开发uni-app x项目(仿京东)-规划-CSDN博客 二、实战 开发uni-app x项目(仿京东)-项目搭建-CSDN博客 三、实战开发 uni-app x 项目(仿京东)- 技术选型-CSDN博客 四、实战开发 uni-app x 项目(仿京东)- 页面设计-C…...

SpringSecurity——基于角色权限控制和资源权限控制

目录 基于角色权限控制 1.1 自定义 UserDetailsService 1.2 加载用户角色 1.3. 给角色配置能访问的资源&#xff08;使用切面拦截&#xff0c;使用注解&#xff09; 总结 资源权限控制 2.2. 需要有一个用户&#xff1b;&#xff08;从数据库查询用户&#xff09; 2.2 基…...

经历过的IDEA+Maven+JDK一些困惑

注意事项&#xff1a;由于使用过程中是IDEA绑定好另外2个工具&#xff0c;所以报错统一都显示在控制台&#xff0c;但要思考和分辨到底是IDEA本身问题导致的报错&#xff0c;还是maven导致的 标准配置 maven Java Compiler Structure 编辑期 定义&#xff1a;指的是从open pr…...

基于Arduino控制的温室蔬菜园环境监控系统(论文+源码)

2.1系统总体方案设计 本课题为基于Arduino控制的温室蔬菜园环境监控系统&#xff0c;在硬件上结合Arduino 控制器&#xff0c;土壤湿度传感器&#xff0c;ESP8266模块&#xff0c;环境温湿度传感器&#xff0c;光敏电阻&#xff0c;液晶等来构成整个系统&#xff0c;其可以实现…...

关于HAL库的知识1----MSP函数

在 HAL 库中&#xff0c;大部分外设在初始化时都会调用一个对应的 MSP 初始化函数&#xff0c;这个函数的主要作用就是配置与外设相关的底层硬件资源&#xff0c;比如时钟、GPIO、中断、DMA 等。常见的外设及其对应的 MSP 函数包括&#xff1a; UART/USART&#xff1a;对应 HA…...

QT 磁盘文件 教程04-创建目录、删除目录、遍历目录

【1】新建目录 bool CreateDir(QString name){QString fileName name ;QDir dir(fileName);if (dir.isEmpty()) {dir.mkdir(fileName);return true;}else{qDebug()<<"文件夹已存在";return false;} } 【2】删除目录 bool DeleteDir(QString fileName){if (…...

高级java每日一道面试题-2025年3月06日-微服务篇[Eureka篇]-Eureka Server和Eureka Client关系?

如果有遗漏,评论区告诉我进行补充 面试官: Eureka Server和Eureka Client关系? 我回答: 在微服务架构中&#xff0c;Eureka作为Netflix开源的服务发现组件&#xff0c;由Eureka Server&#xff08;服务端&#xff09;和Eureka Client&#xff08;客户端&#xff09;两大部分…...

MAC-在使用@Async注解的方法时,分布式锁管理和释放

在使用 @Async 注解的异步方法中管理分布式锁时,需要特别注意 ​锁的获取、释放与异步执行的生命周期匹配。以下是结合 Spring Boot 和 Redis 分布式锁的实践方案: 1. 为什么需要分布式锁? 异步方法可能被多个线程/服务实例并发执行,若访问共享资源(如数据库、缓存),需…...

Kafka 八股文

一、基础概念 1. Kafka 是什么&#xff1f;它的核心组件有哪些&#xff1f; Kafka 的定义 Kafka 是一个 分布式流处理平台&#xff0c;最初由 LinkedIn 开发&#xff0c;后成为 Apache 顶级项目。它主要用于 高吞吐量的实时数据流处理&#xff0c;支持发布-订阅模式的消息传递…...

现代前端开发框架对比:React、Vue 和 Svelte 的选择指南

引言 在当今快速发展的 Web 开发领域&#xff0c;前端框架的选择往往直接影响项目的开发效率、维护成本和用户体验。React、Vue 和 Svelte 作为当前最受关注的三大框架&#xff0c;各自拥有独特的设计哲学与技术实现。本文将通过 5000 字的深度解析&#xff0c;从架构设计、开…...

ffmpeg(库编译) 01 搭建环境和安装依赖

创建目录在home目录下创建 ffmpeg_sources:用于下载源文件 ffmpeg_build: 存储编译后的库文件 bin:存储二进制文件(ffmpeg,ffplay,ffprobe,X264,X265等) mkdir ffmpeg_sources ffmpeg_build bin安装依赖 先执行sudo apt-get update进行更新,再往下走sudo apt-get -…...

Java后端开发技术详解

Java作为一门成熟的编程语言&#xff0c;已广泛应用于后端开发领域。其强大的生态系统和广泛的支持库使得Java成为许多企业和开发者的首选后端开发语言。随着云计算、微服务架构和大数据技术的兴起&#xff0c;Java后端开发的技术栈也不断演进。本文将详细介绍Java后端开发的核…...

Python高级:GIL、C扩展与分布式系统深度解析

文章目录 &#x1f4cc; **前言**&#x1f527; **第一章&#xff1a;Python语言的本质与生态**1.1 **Python的实现与版本演进**1.2 **开发环境与工具链** &#x1f527; **第二章&#xff1a;元编程与动态特性**2.1 **描述符协议&#xff08;Descriptor Protocol&#xff09;*…...

数学之握手问题

问题描述 小蓝组织了一场算法交流会议&#xff0c;总共有 50人参加了本次会议。在会议上&#xff0c;大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进行一次握手 (且仅有一次)。但有 7 个人&#xff0c;这 7 人彼此之间没有进行握手 (但这 7 人与除这 …...

【Nodejs】2024 汇总现状

之前已经调研了容器、nexus-public&#xff0c;实现了本地构建应用镜像和基础设施的镜像。为实现分布式一体化协作开发的目标&#xff0c;还需要配套的线上协作开发环境。故而重回前端调研现状&#xff0c;比较 5 年前的 nodejs 快好的啊。 以下是针对 Node.js 工具链的深度解析…...

人工智能之数学基础:矩阵的降维

本文重点 在现实世界中,我们经常会遇到高维数据。例如,图像数据通常具有很高的维度,每个像素点都可以看作是一个维度。高维数据不仅会带来计算和存储上的困难,还可能会导致 “维数灾难”,即随着维度的增加,数据的稀疏性和噪声也会增加,从而影响数据分析的效果。因此,我…...

数仓开发那些事(10)

某神州优秀员工&#xff1a;&#xff08;没错&#xff0c;这个diao毛被评为了优秀员工&#xff09;一闪&#xff0c;听说你跑路了&#xff0c;不做零售行业了 一闪&#xff1a;没错&#xff0c;老东家的新it总监上任后大家都开始躺平&#xff0c;失去了当年的动力&#xff0c;所…...

【手工】早教游戏:下楼的猴子

一、效果 二、准备材料 吸管: 10.4 c m 10.4cm 10.4cm&#xff1b;棉签&#xff1a; 6 6 6 根双头棉签&#xff1b;硬币&#xff1a;1角&#xff1b;纸皮人: 2.0 c m 4.0 c m 2.0cm4.0cm 2.0cm4.0cm&#xff1b;纸板&#xff1a; 12.0 c m 30.0 c m 12.0cm30.0cm 12.0cm30…...

力扣刷题46. 全排列

46. 全排列 - 力扣&#xff08;LeetCode&#xff09; 使用dfs搜索&#xff0c;查找所有的情况&#xff0c;首先定义所有的链表集合list&#xff0c;在定义每一种情况的链表res&#xff0c;在主函数中遍历所有的初始元素&#xff0c;首先初始化res&#xff0c;并且添加到res中&…...

【工作记录】pytest使用总结

1、 fixture夹具 可参考&#xff1a; python3.x中 pytest之fixture - 漂泊的小虎 - 博客园 fixture是指夹具&#xff08;把用例夹在中间&#xff09;&#xff0c;它包括前置工作和后置工作&#xff0c;前置是用例代码的准备阶段&#xff0c;后置是用例执行之后的清理阶段,用…...

linux 命令 mkdir

以下是 Linux mkdir 命令的简明总结&#xff0c;适合快速查阅和实际场景应用&#xff1a; 基础语法 mkdir [选项] 目录名... 常用选项速查 选项作用-p自动创建父目录&#xff08;解决多级目录问题&#xff09; mkdir -p a/b/c-m直接设置权限&#xff08;替代chmod&#xff0…...

浏览器对一个资源设置了缓存,如何清除缓存,且后续请求不命中缓存

方式1、浏览器端强制刷新 方式2、修改资源url eg&#xff1a;如下图&#xff0c;添加了查询参数 <link rel"stylesheet" href"style.css?v1.2.1"> <script src"app.js?t20231010"></script> 原理&#xff1a;1、在资源的…...

k8s的存储

一 configmap 1.1 configmap的功能 configMap用于保存配置数据&#xff0c;以键值对形式存储。 configMap 资源提供了向 Pod 注入配置数据的方法。 镜像和配置文件解耦&#xff0c;以便实现镜像的可移植性和可复用性。 etcd限制了文件大小不能超过1M 1.2 configmap的使用…...

[JavaScript]如何利用作用域块避免闭包内存泄漏?

出自《你不知道的JavaScript》上卷 以下是本书给出的反例: function process (data) {...} var bigdata{...} process(bigdata); var btn document.getElementById(x); btn.addEventListener(click, function click{...});click会被回调在其他位置, 在addEventListener函数内…...

Pytorch使用手册—扩展 TorchScript 使用自定义 C++ 操作符(专题五十三)

提示 本教程自 PyTorch 2.4 起已弃用。有关 PyTorch 自定义操作符的最新指南,请参阅 PyTorch 自定义操作符。 PyTorch 1.0 版本引入了一种名为 TorchScript 的新编程模型。TorchScript 是 Python 编程语言的一个子集,可以被 TorchScript 编译器解析、编译和优化。此外,编译后…...

CellOracle|基因扰动研究基因功能|基因调控网络+虚拟干预

在gzh“生信小鹏”同步文章 论文来源: 发表期刊:Nature发表时间:2023年2月23日论文题目:Dissecting cell identity via network inference and in silico gene perturbation研究团队:Kenji Kamimoto 等,华盛顿大学医学院1. 研究背景与问题提出 细胞身份(Cell Identit…...

深入探索JVM字节码增强技术与调优实践

引言 Java虚拟机(JVM)是Java程序运行的基石,而字节码增强技术则是JVM生态中一项强大的工具。通过字节码增强,开发者可以在不修改源代码的情况下,动态地修改或增强类的行为。本文将深入探讨字节码增强技术的原理、常用工具,并结合JVM调优和排错实践,帮助开发者更好地理解…...

vue 中常用操作数组的方法

操作数组方法 记录一下自己常用到的操作数组的方法 1.forEach() 遍历数组 在回调函数中对原数组的每个成员进行修改&#xff08;不用 return&#xff09; 方法接收一个回调函数 回调函数接收两个参数 第一个是遍历的当前元素 第二个是元素的索引 const arr [{name: 张三},…...

envoy 源码分析

整体架构 Envoy 的架构如图所示: Envoy 中也可能有多个 Listener&#xff0c;每个 Listener 中可能会有多个 filter 组成了 chain。 Envoy 接收到请求后&#xff0c;会先走 FilterChain&#xff0c;通过各种 L3/L4/L7 Filter 对请求进行微处理&#xff0c;然后再路由到指定的集…...

c++基础知识--返回值优化

在 C 中&#xff0c;Named Return Value Optimization&#xff08;NRVO&#xff0c;具名返回值优化&#xff09; 是一种编译器优化技术&#xff0c;用于消除函数返回一个局部对象时的拷贝或移动操作。它是 返回值优化&#xff08;RVO&#xff09; 的一种更复杂的变体&#xff0…...

【第14节】windows sdk编程:进程与线程介绍

目录 一、进程与线程概述 1.1 进程查看 1.2 何为进程 1.3 进程的创建 1.4 进程创建实例 1.5 线程查看 1.6 何为线程 1.7 线程的创建 1.8 线程函数 1.9 线程实例 二、内核对象 2.1 何为内核对象 2.2 内核对象的公共特点 2.3 内核对象句柄 2.4 内核对象的跨进程访…...

实测 Gemini 2.0 Flash 图像生成:多模态 AI 的创作力边界

近日&#xff0c;Google 发布了 Gemini 2.0 Flash 的实验性图像生成功能&#xff08;Gemini 2.0 Flash (Image Generation) Experimental&#xff09;。我也第一时间体验了这一功能&#xff0c;再次感受到 AI 技术对传统图像处理工具的颠覆性冲击。 引言 Gemini 2.0 Flash 的…...

每日一题——买卖股票的最佳时机

买卖股票的最佳时机 问题描述示例示例 1示例 2 提示 问题分析难点分析 算法设计思路 代码实现复杂度分析测试用例测试用例 1测试用例 2测试用例 3 总结 问题描述 给定一个数组 prices&#xff0c;其中第 i 个元素 prices[i] 表示一支给定股票在第 i 天的价格。你可以选择某一天…...

以太坊节点间通信机制 DEVp2p 协议

文章目录 概要1. 协议概述2. 协议栈与关键技术3. RLPx 协议核心机制3.1 数据包结构3.2 加密握手流程 4. 核心子协议与消息类型4.1 基础控制消息4.2 以太坊子协议示例4.3 网络 ID 列表 5. 安全与防攻击机制6. 节点标识与声誉管理7. 对比其他区块链通信协议8. 总结 概要 1. 协议…...

YOLO+OpenCV强强联手:高精度跌倒检测技术实战解析

目录 关于摔倒检测 摔倒检测核心逻辑 摔倒检测:联合多种逻辑判断 原理详细解释 1. 导入必要的库 2. 定义函数和关键点连接关系 3. 筛选有效关键点并计算边界框 4. 计算人体上下半身中心点和角度 5. 绘制关键点和连接线 6. 绘制角度标注和检测跌倒 7. 返回处理后的图…...

HyperAD:学习弱监督音视频暴力检测在双曲空间中的方法

文章目录 速览摘要1. 引言2. 相关工作弱监督暴力检测双曲空间中的神经网络 3. 预备知识双曲几何切空间&#xff08;Tangent Space&#xff09;指数映射与对数映射&#xff08;Exponential and Logarithmic Maps&#xff09;3.1 双曲图卷积网络&#xff08;Hyperbolic Graph Con…...

网络协议抓取与分析(SSL Pinning突破)

1. 网络协议逆向基础 1.1 网络协议分析流程 graph TD A[抓包环境配置] --> B[流量捕获] B --> C{协议类型} C -->|HTTP| D[明文解析] C -->|HTTPS| E[SSL Pinning突破] D --> F[参数逆向] E --> F F --> G[协议重放与模拟] 1.1.1 关键分析目标…...

基于C#的以太网通讯实现:TcpClient异步通讯详解

基于C#的以太网通讯实现&#xff1a;TcpClient异步通讯详解 在现代工业控制和物联网应用中&#xff0c;以太网通讯是一种常见的数据传输方式。本文将介绍如何使用C#实现基于TCP协议的以太网通讯&#xff0c;并通过异步编程提高通讯效率。我们将使用TcpClient类来实现客户端与服…...

通过C#脚本更改材质球的参数

// 设置贴图Texture mTexture Resources.Load("myTexture", typeof(Texture )) as Texture;material.SetTexture("_MainTex", mTexture );// 设置整数material.SetInt("_Int", 1);// 设置浮点material.SetFloat("_Float", 0.1f);// 设…...

SpringBoot常用注解

SpringBoot常用注解 SpringBoot框架提供了丰富的注解&#xff0c;极大地简化了应用开发。本文将SpringBoot常用注解按功能分组&#xff0c;并提供详细说明和使用示例。 一、核心注解 1. SpringBootApplication 这是SpringBoot应用的核心注解&#xff0c;标记在主类上&#…...

Vim 编辑器复制文件所有内容

Vim 编辑器复制文件所有内容 在 Vim 的可视化模式下复制所有内容&#xff0c;可以通过以下步骤完成&#xff1a; 方法 1&#xff1a;可视化模式全选复制 进入可视化模式 按下 V&#xff08;大写 V&#xff09;进入 行可视化模式。 全选内容 依次按下 gg&#xff08;跳转到文件…...

MySQL 安全传输

Doris 开启 SSL 功能需要配置 CA 密钥证书和 Server 端密钥证书&#xff0c;如需开启双向认证&#xff0c;还需生成 Client 端密钥证书&#xff1a; 默认的 CA 密钥证书文件位于Doris/fe/mysql_ssl_default_certificate/ca_certificate.p12&#xff0c;默认密码为doris&#xf…...

【速览】数据库

一、课程性质和特点 数据库系统原理是高等教育自学考试计算机信息管理专业(独立本科段)、计算机网络专业(独立本科段)、计算机及应用专业(独立本科段)、计算机通信工程专业(独立本科段)考试计划的一门专业基础课。本课程的设置目的是为了使应考者掌握数据库系统的基本原理、方法…...

MySQL 中利用 mysql.help_topic 实现行转列的深入剖析

MySQL 中利用 mysql.help_topic 实现行转列的深入剖析 在数据库操作中&#xff0c;我们常常会遇到数据格式转换的需求。其中&#xff0c;行转列是一种常见的数据处理任务&#xff0c;它能将数据从一种便于存储的行结构&#xff0c;转换为更便于分析和展示的列结构。在 MySQL 数…...