理解 CSS
本文主要补充作者不了解的一些知识
CSS是如何工作的
选择器
属性选择器
CSS 属性选择器通过已经存在的属性名或属性值匹配元素。
12345678910111213141516171819202122<input type="text" disabled><input type="password" value=""><p><a href="#top">TOP</a></p><p><a href="a.jpg">查看图片</a></p><style> [disabled] { background-color: blue; } /* 以# 号开头 */ a[href^="#"] { color: red; } /* 以.jpg 结尾 */ a[href$= ...
前端与HTML
什么是前端
解决GU1人机交互问题
跨终端
PC/移动浏览器
客户端小程序
VR/AR等
Web 技术栈
_Web 入门_是一个简要的系列,向你介绍 Web 开发的实用性。你将设置你需要的工具来构建一个简单的网页,并发布你自己的简单代码。
Web 入门
前端边界
开发环境
HTML
MDN 文档
HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。
“超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网,并将其与他人创建的页面相链接,你就成为了万维网的积极参与者。
DOM 树
语义化的标签
语义化是什么
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义化来编写 HTML
有序使用 ol,无序使用 ul
lang属性表示内容所使用的语言 (提示浏览器 ...
npm常用命令
npm英文全称:node package manager,npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。 我们平时开发项目都是需要使用npm下载依赖,常见的npm命令总结如下:
npm -v:查看npm版本。
npm init:初始化后会出现一个package.json配置文件。可以在后面加上-y ,快速跳过问答式界面。
npm install:会根据项目中的package.json文件自动下载项目所需的全部依赖。
npm install 包名 --save-dev(npm install 包名 -D):安装的包只用于开发环境,不用于生产环境,会出现在package.json文件中的devDependencies属性中。
npm install 包名 --save(npm install 包名 -S):安装的包需要发布到生产环境的 ...
字符串
字符串
KMP 算法
定义
KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R.Pratt提出的,因此人们称它为克努特—莫里斯—普拉特操作(简称KMP算法)。KMP算法的核心是利用匹配失败后的信息,尽量减少模式串与主串的匹配次数以达到快速匹配的目的。具体实现就是通过一个 next 数组实现,函数本身包含了模式串的局部匹配信息。KMP算法的时间复杂度 O(m+n)。
队列和栈
栈和队列
栈
定义
栈 是一种遵循 后进先出(LIFO) 原则的线性表。新添加和待删除的数据都保存在栈的同一端栈顶,另一端就是栈底。新元素靠近栈顶,旧元素靠近栈底
栈的操作只能在这个线性表的表尾进行。
顺序栈 (常用)
不可扩展
使用数组实现
typedef struct SeqStack{
ElemType datas [MAXSIZE];
int top; // 栈顶指针
}*Stack;
<!--code0-->
这里定义了一个顺序存储的栈,它包含了三个元素:base, top, stackSize。其中base 是指向栈底的指针变量,top 是指向栈顶的指针变量, stackSize 指示栈的当前可使用的最大容量。
// 初始化栈
#define STACK_INIT_SIZE 20
#define STACKINCREMENT 10
typedef char ElementType;
void initStack(sqStack *s) {
s->base = ...
线性表
线性表
线性表的定义
线性表:由零个或多个数据元素组成的有限序列
首先它是一个序列,也就是说元素之问是有个先来后到的。
若元素存在多个,则第一个元素无前驱,而最后一个元素无后继,其他元素都有且只有一个前驱和后继。
另外,线性表强调是有限的,事实上无论计算松发展到多强大,它所处理的元素都是有限的。
顺序存储结构
线性表的顺序存储结构具有随机存储结构的特点 时间复杂度为 O(1)
顺序结构的优缺点
线性表的顺序存储结构,在存、读数据肘,不管是哪个位置,时间复杂度都是O(1)。
而在插入或删除时,时间复杂度都是O(n)。
这就说明,它比较适合元素个数比较稳定,不经常插入和删除元素,而更多的操作是存取数据的应用。
优点
无须为表示表中元素之间的逻辑关糸而增加额外的存储空间。
可以快速地存取表中任意位置的元素
缺点
插入和删除操作需要移动大量元素。
当线性表长度变化较大肘,难以确定存储空间的容量。
容易造成存储空间的 “碎片”。
线性表的顺序存储结构,它最大的缺点就是插入和删除肘需要移动大量元素,这显然就需要耗费肘间。
链式存储结构
定义
我们 ...
浮动
浮动
浮动的影响
相当设置了 inline-block
inline-block
默认按内容显示宽高 可以设定宽高
行内摆放
浮动 float:left/right
浮动的空挡会被后续块元素填充
行内元素会环绕浮动元素 ( 文本 … )
12345<p style="float: left;height: 100px;width: 100px; background-color: #ff4d4f;">元素1</p><p style="background-color: #ffec3d;">元素2</p><a style="background-color: #13c2c2;">元素3</a><a style="background-color: #eb2f96;">元素4</a><p style="background-color: #adc6ff;&quo ...
网页布局
网页布局
弹性布局(flex)
display: flex
常见属性
容器属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
123.box { flex-direction: row | row-reverse | column | column-reverse;}
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
123.box{ flex-wrap: nowrap | wrap | wrap-revers ...
正则
什么是正则表达式?
正则表达式是一组由字母和符号组成的特殊文本,它可以用来从文本中找出满足你想要的格式的句子。
一个正则表达式是一种从左到右匹配主体字符串的模式。
“Regular expression”这个词比较拗口,我们常使用缩写的术语“regex”或“regexp”。
正则表达式可以从一个基础字符串中根据一定的匹配模式替换文本中的字符串、验证表单、提取字符串等等。
想象你正在写一个应用,然后你想设定一个用户命名的规则,让用户名包含字符、数字、下划线和连字符,以及限制字符的个数,好让名字看起来没那么丑。
我们使用以下正则表达式来验证一个用户名:
以上的正则表达式可以接受 john_doe、jo-hn_doe、john12_as。
但不匹配Jo,因为它包含了大写的字母而且太短了。
目录
1. 基本匹配
2. 元字符
2.1 点运算符 .
2.2 字符集
2.2.1 否定字符集
2.3 重复次数
2.3.1 * 号
2.3.2 + 号
2.3.3 ? 号
2.4 {} 号
2.5 (…) 特征标群
2.6 | 或运算符
2.7 转码特殊字符
2.8 锚点
2 ...
Vue 3 学习笔记
Vue 3 学习笔记
Composition API(常用部分)
setup
新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
ref
作用: 定义一个数据的响应式
语法: const xxx = ref(initValue):
创建一个包含响应式数据的引用(reference)对象
js中操作数据: xxx.value
模板中操作数据: 不需要.value
一般用来定义一个基本类型的响应式数据
reactive
作用: 定义多个数据的响应式
const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”:会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
12345678910111213const obj = { name: "xiao", age: 18, wife: { ...