程序喵正在路上

【前端】Emmet语法、CSS复合选择器、元素显示样式

信仰：一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去
欢迎关注点赞收藏留言
本文由程序喵正在路上原创，CSDN首发！
系列专栏：HTML5+CSS3+移动端前端
首发时间：2022年7月9日
✅ 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

阅读指南

学习目标
Emmet 语法
- ➥ 快速生成 HTML 结构语法
- ➥ 快速生成 CSS 样式语法
- ➥ 快速格式化代码
CSS 的复合选择器
- ➥ 什么是复合选择器
- ➥ 后代选择器（重点）
- ➥ 子选择器（重点）
- ➥ 并集选择器（重点）
- ➥ 伪类选择器
- ➥ 链接伪类选择器
- ➥ :focus伪类选择器
- ➥ 复合选择器总结
CSS 的元素显示样式
- ➥ 什么是元素显示模式
- ➥ 块元素
- ➥ 行内元素
- ➥ 行内块元素
- ➥ 元素显示模式总结
- ➥ 元素显示模式的转换
- ➥ 案例：简洁版小米侧边栏
- - 目标
  - 核心思路
  - 让单行文字垂直居中
  - 源码和效果图

学习目标

✅ 能够使用 emmet 语法
✅ 能够使用 CSS 复合选择器
✅ 能够写出伪类选择器的使用规范
✅ 能够说出元素有几种显示模式
✅ 能够写出元素显示模式的相互转换代码
✅ 能够写出背景图片的设置方式
✅ 能够计算 CSS 的权重

Emmet 语法

Emmet 语法的前身是 Zen coding，它使用缩写，来提高 html/css 的编写速度，Vscode 内部已经集成该语法

➥ 快速生成 HTML 结构语法

生成标签直接输入标签名按 enter 键或者 tab 键即可，比如 div 然后 tab 键，就可以生成
如果想要生成多个相同标签，加上 * 就可以了，比如 div*3 就可以快速生成 3 个 div
如果有父子级关系的标签，可以用 >，比如 ul>li 就可以了
如果有兄弟关系的标签，用 + 就可以了，比如 div+p
如果想要生成带有类名或者 id 名字的标签，直接写 .demo 或者 #two tab 键就可以了，默认是 div 标签；如果想生成自己想要的标签，可以写 p.demo、span#two 等等
如果想要生成的 div 类名是有顺序的，可以用自增符号 $ ，比如 div.demo$*3
如果想要在生成的标签内部写内容，可以用 {} 表示，比如 div{快速生成CSS样式语法} 然后按 enter 键或者 tab 键就可以快速生成；如果想要一次性生成多个，那可以按照 div{快速生成CSS样式语法}*3 这样的格式来写；如果想要生成自增的多个标签，可以按照 div{demo$}*3 这样的格式来写

➥ 快速生成 CSS 样式语法

CSS 基本采取简写形式即可

输入 w200 按 enter 键或者 tab 键就可以生成 width: 200px;
输入 lh26px 按 enter 键或者 tab 键就可以生成 line-height: 26px;
输入 tac 就可以生成 text-align: center;
输入 ti2em 就可以生成 text-indent: 2em;
输入 h200 就可以生成 height: 200px;
输入 tdn 就可以生成 text-decoration: none;

➥ 快速格式化代码

在 IDEA 里面，我们可以通过按 Ctrl + Alt + L 快捷键来格式化我们的代码，让我们的代码看起来更美观；同样地，Vscode 也给我们提供了快速格式化代码的方式，你只需要右击选择 “格式化文档” 或者按下 Shift + Alt + L 快捷键就可以了

也可以设置当我们保存页面的时候自动格式化代码，步骤如下

文件 ➟ 【首选项】➟ 【设置】
搜索 format
点击格式化一栏，然后把 Format On Save 和 Format On Type 勾选上就可以

具体步骤看下图

只需要设置一次即可，以后都可以自动格式化代码

CSS 的复合选择器

➥ 什么是复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的

● 复合选择器可以更准确、更高效地选择目标元素（标签）
● 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
● 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

➥ 后代选择器（重点）

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代

语法格式如下

元素1 元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有元素 2（后代元素）

例如：

ul li { 样式声明 }  /* 选择 ul 里面所有的 li 标签元素 */

● 元素 1 和元素 2 中间用空格隔开
● 元素 1 是父级，元素 2 是子级，最终选择的是元素 2
● 元素 2 可以是儿子，也可以是孙子等，只要是元素 1 的后代即可
● 元素 1 和元素 2 可以是任意基础选择器

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之后代选择器title>
    <style>
        /* 怎么把ol里面的小li选出来改变颜色呢 */
        ol li {
            color: red;
        }

        ol li a {
            color: gold;
        }

        .nav li a {
            color: pink;
        }
    style>
head>

<body>
    <ol>
        <li>我是ol的孩子li>
        <li>我是ol的孩子li>
        <li>我是ol的孩子li>
        <li><a href="#">我是孙子a>li>
    ol>
    
    <ul>
        <li>我是ul的孩子li>
        <li>我是ul的孩子li>
        <li>我是ul的孩子li>
        <li><a href="#">不会变化的a>li>
    ul>
    
    <ul class="nav">
        <li>我是ul的孩子li>
        <li>我是ul的孩子li>
        <li>我是ul的孩子li>
        <li><a href="#">不会变化的a>li>
    ul>
body>

html>

➥ 子选择器（重点）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素

语法格式如下

元素1>元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有直接后代（子元素）元素 2

例如：

div>p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

● 元素 1 和元素 2 中间用大于号隔开
● 元素 1 是父级，元素 2 是子级，最终选择的是元素 2
● 元素 2 必须是亲儿子，其孙子、重孙之类都不归它管，你也可以叫他亲儿子选择器

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器title>
    <style>
        .nav>a {
            color: red;
        }
    style>
head>

<body>
    <div class="nav">
        <a href="#">我是儿子a>
        <p>
            <a href="#">我是孙子a>
        p>
    div>
body>

html>

➥ 并集选择器（重点）

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明

并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法格式如下

元素1,元素2 { 样式声明 }

上述语法表示选择元素 1 和元素 2

例如：

ul,div { 样式声明 } /* 选择 ul 和 div 标签元素 */

● 元素 1 和元素 2 中间用逗号隔开
● 逗号可以理解为和的意思
● 并集选择器通常用于集体声明

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器title>
    <style>
        /* 1. 将熊大、熊二改为红色 */
        /* div,
        p {
            color: red;
        } */

        /* 2. 将熊大、熊二改为红色，吉吉国王、毛毛改为红色 */
        div,
        p,
        .monkey li {
            color: red;
        }
    style>
head>

<body>
    <div>熊大div>
    <p>熊二p>
    <span>光头强span>
    <ul class="monkey">
        <li>吉吉国王li>
        <li>毛毛li>
    ul>
body>

html>

➥ 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第 1 个，第 n 个元素

伪类选择器书写最大的特点是用冒号表示，比如 :hover、:first-child

伪类选择器有很多，比如有链接伪类、结构伪类等

➥ 链接伪类选择器

语法格式如下

a:link 		/* 选择所有未被访问的链接 */
a:visited 	/* 选择所有已被访问的链接 */
a:hover 	/* 选择鼠标指针位于其上的链接 */
a:active 	/* 选择活动链接（鼠标按下未弹起的链接） */

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接伪类选择器title>
    <style>
        /* 未访问过的链接 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 访问过的链接 */
        a:visited {
            color: red;
        }

        /* 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 选择鼠标按下但还没有弹起的链接 */
        a:active {
            color: pink;
        }
    style>
head>

<body>
    <a href="#">夏目友人帐a><br>
    <a href="http://www.baidu.com" target="_blank">度娘a>
body>

html>

链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的顺序声明 :link、:visited、:hover、:active
记忆法：love hate 或者 lv 包包 hao
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

链接伪类选择器实际工作开发中的写法

/* a 是标签选择器，所有的链接  */
a {
	color: gray;
}
/* :hover 是链接伪类选择器，鼠标经过 */
a:hover {
	color: red;	/* 鼠标经过的时候，由原来的灰色变成了红色 */
}

➥ :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况类表单元素才能获取，因为这个选择器也主要针对于表单元素来说

语法格式如下

input:focus {
	background-color: yellow;
}

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>focus伪类选择器title>
    <style>
        input:focus {
            background-color: skyblue;
        }
    style>
head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
body>

html>

➥ 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及其用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 `.nav a`
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于号 `.nav>p`
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 `.nav, .header`
链接伪类选择器	选择不同状态的链接	跟链接有关	较多	重点记住 `a {}` 和 `a:hover {}` 实际开发的写法
:focus 选择器	选择获得光标的表单	跟表单有关	较少	input:focus 记住这个用法

CSS 的元素显示样式

了解元素的显示模式可以更好地让我们布局页面

➥ 什么是元素显示模式

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好地布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示，比如

让自己占一行，比如一行可以放多个

HTML 元素一般分为块元素和行内元素两种类型

➥ 块元素

常见的块元素有

、

等，其中

标签是最典型的块元素

块元素的特点

自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的 100%
是一个容器及盒子，里面可以放行内元素或者块元素

注意
● 文字类的元素内不能使用块级元素
● 比如说

标签主要用于存放文字，因此

里面不能放块级元素，特别是不能放

● 同理， ~

等都是文字类块级标签，里面也不能放其他块级元素

➥ 行内元素

常见的行内元素有、、、、、、~~、、、等，其中标签是最典型的行内元素，有的地方也将行内元素称为内联元素~~

行内元素的特点

相邻行内元素在一行上，一行可以显示多个

高、宽直接设置是无效的

默认宽度就是它本身内容的宽度

行内元素只能容纳文本或其他行内元素

注意
● 链接里面不能再放链接
● 特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全

➥ 行内块元素

在行内元素中有几个特殊的标签 —— 、、，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素

行内块元素的特点

和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）

默认宽度就是它本身内容的宽度（行内元素特点）

高度、行高、外边距以及内边距都可以控制（块级元素特点）

➥ 元素显示模式总结

元素模式元素排列设置样式默认宽度包含

块级元素一行只能放一个块级元素可以设置宽和高度容器的 100% 容器级可以包含任何标签

行内元素一行可以放多个行内元素不可以直接设置宽和高度它本身内容的宽度容纳文本或者其他行内元素

行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度

➥ 元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性

比如想要增加链接的触发范围

● 转换为块元素：display:block;
● 转换为行内元素：display:inline;
● 转换为行内块元素：display:inline-block;

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素显示模式转换title> <style> a { width: 150px; height: 50px; background-color: skyblue; /* 把行内元素a转换为块级元素 */ display: block; } div { width: 300px; height: 100px; background-color: aqua; /* 把块元素div转换为行内元素 */ display: inline; } span { width: 300px; height: 30px; background-color: chartreuse; display: inline-block; } style> head> <body> <a href="#">我是行内元素a> <a href="#">我是行内元素a> <div>我是块级元素div> <div>我是块级元素div> <span>行内元素转换为行内块元素span> <span>行内元素转换为行内块元素span> body> html>

➥ 案例：简洁版小米侧边栏

目标

实现小米购物商城的导航侧边栏

核心思路

把链接 a 转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度

鼠标经过 a 时给链接设置背景颜色

让单行文字垂直居中

CSS 没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

之前我们知道：行高是由上间隙、字体高度和下间隙组成的

简单理解：行高的上间隙和下间隙把文字挤到中间，如果行高小于盒子高度，文字会偏上；行高大于盒子高度，则文字偏下

源码和效果图

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单版小米侧边栏title> <style> /* 1. 把链接a转换为块级元素 */ a { display: block; width: 230px; height: 40px; background-color: #444346; text-decoration: none; font-style: 14px; color: #FFFFFF; text-indent: 2em; /* 让文字居中 */ line-height: 40px; } /* 2.经过链接变换背景颜色 */ a:hover { background-color: #FF6700; } style> head> <body> <a href="#">手机a> <a href="#">电视a> <a href="#">笔记本平板a> <a href="#">出行穿戴a> <a href="#">耳机音箱a> <a href="#">家电a> <a href="#">智能路由器a> <a href="#">电源配件a> <a href="#">健康儿童a> <a href="#">生活箱包a> body> html>

这次的分享就到这里啦，继续加油哦ꩵ
有出错的地方欢迎在评论区指出来，共同进步，谢谢啦

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽和高度	容器的 100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽和高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

你可能感兴趣的:(css,前端,html5,vscode)

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery

day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的

js操作样式郝加升
DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge

用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准

vue element 封装表单影子信息 vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进

前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss

前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.

【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）笙囧同学 java 前端状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认

从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是

14.tornado操作之应用Websocket协议实现聊天室功能孤寒者 Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二

为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。

小架构step系列25：错误码秋千码途架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有

2025.07 Java入门笔记01 殷浩焕笔记
一、熟悉IDEA和Java语法（一）LiuCourseJavaOOP1.一直在用C++开发，python也用了些，Java是真的不熟，用什么IDE还是问的同事；2.一开始安装了jdk-23，拿VSCode当编辑器，在cmd窗口编译运行，也能玩；但是想正儿八经搞项目开发，还是需要IDE；3.安装了IDEA社区版：（1）IDE通常自带对应编程语言的安装包，例如IDEA自带jbr-21（和jdk是不同的

Java朴实无华按天计划从入门到实战（强化速战版-66天）岫珩 Java 后端 java 开发语言学习 Java 时间安排学习计划
致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1

《跨域资源共享CORS的深层逻辑与前端实践精要》
不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了

深入了解 Kubernetes（k8s）：从概念到实践
目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带

大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记前端缓存 ai
大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文

26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不

Windows系统第一次运行C语言程序，环境配置，软件安装等遇到的坑及解决方法灬爱码士灬 windows c语言开发语言
明确需要编辑器和编译器，并选择自己要用什么（我选的编辑器是VSCode：VisualStudioCode；编译器是gcc）下载VSCode并配置环境变量（这里没啥问题），安装C/C++的拓展安装Cygwin，用来在Windows操作系统上模拟Unix/Linux环境（Cygwin官网：https://www.cygwin.com/。）安装过程中镜像可以选择https://mirrors.aliyu

H5UI微信小程序前端框架实战指南 ai
本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下

Ubuntu安装LAMP L_h1 测试 ubuntu linux
在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud

震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript 前端 javascript html5
一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入

11. HTML 中 DOCTYPE 的作用 yqcoder 前端面试-CSS html 前端
总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT

Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析代码简单说 2025开发必备(限时特惠)架构人工智能 Coze Studio 架构 AI Agent 开发平台全栈 AI 工程化图解架构
CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于

关于前端的性能优化
性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C

Grid布局参考资料 kiterumer
Grid布局张鑫旭-写给自己看的display:grid布局教程阮一峰-CSSGrid网格布局教程在Grid布局中，float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的。这个可以说是Grid布局中的常识，面试经常会问的，一定要记得。Grid布局则适用于更大规模的布局（

linux网卡显示未知未托管,linux有线网络显示设备未托管
NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理

页面开发样式和布局入门：Vite + Vue 3 + Less
页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践

推客系统小程序机构版开发上线全攻略（2025年最新版） vx_qutudy 推客小程序推客系统开发推客系统源码
一、开发前准备：筑牢基础，合规先行1.1注册与认证账号注册：登录微信公众平台注册小程序账号，选择“机构版”类型，获取唯一AppID。资质认证：基础资质：企业营业执照、法人身份证、对公账户信息。特殊资质：涉及支付功能：需办理《增值电信业务经营许可证》（ICP证）。涉及教育/医疗内容：需《互联网信息服务许可证》或相关行业资质。1.2技术选型：高效与扩展并重模块推荐方案前端框架微信原生框架（WXML+W

网络安全第14集不灭锦鲤 web安全安全
前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后

ios内付费 374016526 ios 内付费
近年来写了很多IOS的程序，内付费也用到不少，使用IOS的内付费实现起来比较麻烦，这里我写了一个简单的内付费包，希望对大家有帮助。具体使用如下: 这里的sender其实就是调用者，这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa

20 款优秀的 Linux 终端仿真器 brotherlamp linux linux视频 linux资料 linux自学 linux教程
终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。（LCTT 译注：终端仿真器原意指对大型机-哑终端方式的模拟，不过在当今的 Linux 环境中，常指通过远程或本地方式连接的伪终端，俗称“终端”。）你能从开源世界中找到大量的终端仿真器，它们

Solr Deep Paging(solr 深分页) eksliang solr深分页 solr分页性能问题
转载请出自出处：http://eksliang.iteye.com/blog/2148370 作者：eksliang(ickes) blg:http://eksliang.iteye.com/ 概述长期以来，我们一直有一个深分页问题。如果直接跳到很靠后的页数，查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr

数据库面试题 18289753290 面试题数据库
1.union ,union all 网络搜索出的最佳答案： union和union all的区别是,union会自动压缩多个结果集合中的重复结果，而union all则将所有的结果全部显示出来，不管是不是重复。 Union：对两个结果集进行并集操作，不包括重复行，同时进行默认规则的排序； Union All：对两个结果集进行并集操作，包括重复行，不进行排序； 2.索引有哪些分类？作用是

Android TV屏幕适配酷的飞上天空 android
先说下现在市面上TV分辨率的大概情况两种分辨率为主 1.720标清，分辨率为1280x720. 屏幕尺寸以32寸为主，部分电视为42寸 2.1080p全高清，分辨率为1920x1080 屏幕尺寸以42寸为主，此分辨率电视屏幕从32寸到50寸都有适配遇到问题，已1080p尺寸为例：分辨率固定不变，屏幕尺寸变化较大。如：效果图尺寸为1920x1080，如果使用d

Timer定时器与ActionListener联合应用永夜-极光 java
功能:在控制台每秒输出一次代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){

Ubuntu14.04系统Tab键不能自动补全问题解决随便小屋 Ubuntu 14.04
Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全，解决办法如下： 1、利用vi编辑器打开/etc/bash.bashrc文件（需要root权限） sudo vi /etc/bash.bashrc 接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if

学会人际关系三招轻松走职场 aijuans 职场
要想成功，仅有专业能力是不够的，处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢？在此，教您简单实用的三个窍门。　　第一，多汇报最近，管理学又提出了一个新名词“追随力”。它告诉我们，做下属最关键的就是要多请示汇报，让上司随时了解你的工作进度，有了新想法也要及时建议。不知不觉，你就有了“追随力”，上司会越来越了解和信任你。　　第二，勤沟通团队的力

《O2O：移动互联网时代的商业革命》读书笔记 aoyouzi 读书笔记
移动互联网的未来：碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。 O2O：Online to OffLine 线上线下活动 O2O就是在移动互联网时代，生活消费领域通过线上和线下互动的一种新型商业模式。手机二维码本质：O2O商务行为从线下现实世界到线上虚拟世界的入口。线上虚拟世界创造的本意是打破信息鸿沟，让不同地域、不同需求的人

js实现图片随鼠标滚动的效果百合不是茶 JavaScript 滚动属性的获取图片滚动属性获取页面加载
1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p

ajax同步异步参数async bijian1013 jquery Ajax async
        开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。         格式： $.ajax({ type: 'POST', ur

Webx3框架（1） Bill_chen eclipse spring maven 框架 ibatis
Webx是淘宝开发的一套Web开发框架，Webx3是其第三个升级版本；采用Eclipse的开发环境，现在支持java开发；采用turbine原型的MVC框架，扩展了Spring容器，利用Maven进行项目的构建管理，灵活的ibatis持久层支持，总的来说，还是一套很不错的Web框架。 Webx3遵循turbine风格，velocity的模板被分为layout/screen/control三部

【MongoDB学习笔记五】MongoDB概述 bit1129 mongodb
MongoDB是面向文档的NoSQL数据库，尽量业界还对MongoDB存在一些质疑的声音，比如性能尤其是查询性能、数据一致性的支持没有想象的那么好，但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能，而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩)，同时它提供的近似于SQL的查询能力，也是在做NoSQL技术选型时，考虑的一个重要因素。Mo

spring/hibernate/struts2常见异常总结白糖_ Hibernate
Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar，该jar包常用于spring aop中 ②java.lang.ClassNotFoundException: org.sprin

jquery easyui表单重置(reset)扩展思路 bozch form jquery easyui reset
在jquery easyui表单中尚未提供表单重置的功能，这就需要自己对其进行扩展。扩展的时候要考虑的控件有： combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法，reset方法就是把初始化的值赋值给当前的组件，这就需要在组件的初始化时将值保存下来。在所有的reset方法添加完毕之后，就需要对fo

编程之美-烙饼排序 bylijinnan 编程之美
package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是：搜索+剪枝。有点像是写下棋程序：当前情况下，把所有可能的下一步都做一遍；在这每一遍操作里面，计算出如果按这一步走的话，能不能赢（得出最优结果）。 *《编程之美》上代码有很多错误，且每个变量的含义令人费解。因此我按我的理解写了以下代码： */

Struts1.X 源码分析之ActionForm赋值原理 chenbowen00 struts
struts1在处理请求参数之前，首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性，却找不到对应的ActionForm类也不会报错，只是不会处理本次请求的请求参数。如果找到了对应的ActionForm类，则先判断是否已经存在ActionForm的实例，如果不存在则创建实例，并将其存放在对应的作用域中。作用域由配置文件action节点的s

[空天防御与经济]在获得充足的外部资源之前,太空投资需有限度 comsci 资源
      这里有一个常识性的问题:       地球的资源,人类的资金是有限的,而太空是无限的.....       就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... &

ORACLE临时表—ON COMMIT PRESERVE ROWS daizj oracle 临时表
ORACLE临时表转临时表：像普通表一样，有结构，但是对数据的管理上不一样，临时表存储事务或会话的中间结果集，临时表中保存的数据只对当前会话可见，所有会话都看不到其他会话的数据，即使其他会话提交了，也看不到。临时表不存在并发行为，因为他们对于当前会话都是独立的。创建临时表时，ORACLE只创建了表的结构（在数据字典中定义），并没有初始化内存空间，当某一会话使用临时表时，ORALCE会

基于Nginx XSendfile+SpringMVC进行文件下载 denger 应用服务器 Web nginx 网络应用 lighttpd
    在平常我们实现文件下载通常是通过普通 read-write方式，如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp

scanf接受char类型的字符 dcj3sjt126com c
/* 2013年3月11日22:35:54 目的：学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("%

学编程的价值 dcj3sjt126com 编程
发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助像这位朋友学习: http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html VirtualGS教程 (By @林泰前): 几十年的老程序员，资深的

二维数组（矩阵）对角线输出飞天奔月二维数组
今天在BBS里面看到这样的面试题目, 1，二维数组（N*N），沿对角线方向，从右上角打印到左下角如N=4： 4*4二维数组 { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序 4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要

Ehcache（08）——可阻塞的Cache——BlockingCache 234390216 并发 ehcache BlockingCache 阻塞
可阻塞的Cache—BlockingCache        在上一节我们提到了显示使用Ehcache锁的问题，其实我们还可以隐式的来使用Ehcache的锁，那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类，可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.

mysqldiff对数据库间进行差异比较 jackyrong mysqld
mysqldiff该工具是官方mysql-utilities工具集的一个脚本，可以用来对比不同数据库之间的表结构，或者同个数据库间的表结构    如果在windows下，直接下载mysql-utilities安装就可以了，然后运行后，会跑到命令行下： 1）基本用法    mysqldiff --server1=admin:12345

spring data jpa 方法中可用的关键字 lawrence.li java spring
spring data jpa 支持以方法名进行查询/删除/统计。查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x) 修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna

Spring的ModelAndView类 nicegege spring
项目中controller的方法跳转的到ModelAndView类，一直很好奇spring怎么实现的？ /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo

搭建 CentOS 6 服务器(13) - rsync、Amanda rensanning centos
（一）rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait

Learn Nodejs 02 toknowme nodejs
（1）npm是什么 npm is the package manager for node 官方网站：https://www.npmjs.com/ npm上有很多优秀的nodejs包，来解决常见的一些问题，比如用node-mysql，就可以方便通过nodejs链接到mysql，进行数据库的操作在开发过程往往会需要用到其他的包，使用npm就可以下载这些包来供程序调用 &nb

Spring MVC 拦截器 xp9802 spring mvc
Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java 1 public abstract class HandlerInterceptorAdapter implements HandlerIntercep

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

【前端】Emmet语法、CSS复合选择器、元素显示样式

阅读指南

学习目标

Emmet 语法

➥ 快速生成 HTML 结构语法

➥ 快速生成 CSS 样式语法

➥ 快速格式化代码

CSS 的复合选择器

➥ 什么是复合选择器

➥ 后代选择器（重点）

➥ 子选择器（ 重点）

➥ 并集选择器（重点）

➥ 伪类选择器

➥ 链接伪类选择器

➥ :focus伪类选择器

➥ 复合选择器总结

CSS 的元素显示样式

➥ 什么是元素显示模式

➥ 块元素

~

等都是文字类块级标签，里面也不能放其他块级元素

➥ 行内元素

➥ 行内块元素

➥ 元素显示模式总结

➥ 元素显示模式的转换

➥ 案例：简洁版小米侧边栏

目标

核心思路

让单行文字垂直居中

源码和效果图

你可能感兴趣的:(css,前端,html5,vscode)

➥ 子选择器（重点）