vim的使用
什么是 vim？
Vim是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用。 vim 是一个程序开发工具而不是文字处理软件。
vim 键盘图：
vi/vim 的使用
基本上 vi/vim 共分为三种模式，分别是命令模式（Command mode），输入模式（Insert mode）和底线命令模式（Last line mode）。 这三种模式的作用分别是：
命令模式：
用户刚刚启动 vi/vim，便进入了命令模式。
此状态下敲击键盘动作会被Vim识别为命令，而非输入字符。比如我们此时按下i，并不会输入一个字符，i被当作了一个命令。
以下是常用的几个命令：
i 切换到输入模式，以输入字符。
x 删除当前光标所在处的字符。
: 切换到底线命令模式，以在最底一行输入命令。
若想要编辑文本：启动Vim，进入了命令模式，按下i，切换到输入模式。
命令模式只有一些最基本的命令，因此仍要依靠底线命令模式输入更多命令。
输入模式
在命令模式下按下i就进入了输入模式。
在输入模式中，可以使用以下按键：
字符按键以及Shift组合，输入字符 ...
我与妈妈
c592789d455079f6bc91ceea9c2023b65791dbf22b9953bca453dfd5e0ace53c243a726f081df4cbae74fcb084b28121e7069349af4062b796eea530b8eaa58cb7930660321c341491040ab7ac7466fd91d9f18f16f589fb873a40fea04459429cbfa4c59a76a6bdf922f955c56c8339c6f47480bcd60cb8767480845bc7021f10512ac9163d74cda7ad10219087fbf93eb4fcec6717e93daeb9a2a8907829463cdb240b11a7e49d1b82777634096569df052a923aa4cd13e576bb27a60e02d22f55bf4c4344dbb6819213e367b9e2b29c30dee1f29247433786bf93f02f95af910f17b3ad339cb0baa259503807e617144fe363afd3a4cc7 ...
Linux基础命令(2)
看懂文件属性
Linux系统是一种典型的多用户系统，不同的用户处于不同的地位，拥有不同的权限。为了保护系统的安全性，Linux系统对不同的用户访问同一文件（包括目录文件）的权限做了不同的规定。
在Linux中我们可以使用ll或者ls –l命令来显示一个文件的属性以及文件所属的用户和组，如：
实例中，boot文件的第一个属性用"d"表示。"d"在Linux中代表该文件是一个目录文件。
在Linux中第一个字符代表这个文件是目录、文件或链接文件等等：
当为[ d ]则是目录
当为[ - ]则是文件；
若是[ l ]则表示为链接文档 ( link file )；
若是[ b ]则表示为装置文件里面的可供储存的接口设备 ( 可随机存取装置 )；
若是[ c ]则表示为装置文件里面的串行端口设备，例如键盘、鼠标 ( 一次性读取装置 )。
接下来的字符中，以三个为一组，且均为『rwx』 的三个参数的组合。
其中，[ r ]代表可读(read)、[ w ]代表可写(write)、[ x ]代表可执行(execute)。
要注意的是，这三个权限的位置不会改 ...
Linux基础命令(1)
ls
列出目录
12[root@VM-16-9-centos /]# ls [-aAdfFhilnrRSt]目录文件
-a：全部的文件，连同隐藏文件( 开头为 . 的文件) 一起列出来
-l ：长数据串列出，包含文件的属性与权限等等数据
1[root@VM-16-9-centos www]# ls -al
将目录下的所有文件列出来(含属性与隐藏档)
cd
切换目录 Change Directory
1cd [相对路径或绝对路径]
123456#回到自己的家目录，即/root[root@VM-16-9-centos /]# cd ~#回到根目录[root@VM-16-9-centos ~]# cd /#回到上一级[root@VM-16-9-centos /]# cd ..
pwd
显示目前所在目录 Print Working Directory
12[root@VM-16-9-centos ~]# pwd/root
-P：显示出确实的路径，而非使用连接(link) 路径
123456# 单纯显示出目前的工作目录[root@VM-16-9-centos bin]# pwd/bin# ...
css三大特性：层叠性、继承性、优先级
层叠性
层叠性指当标签被设置了多个重复的样式时，一个属性会被覆盖。
不考虑优先级，层叠性遵循“就近原则”。如下，最终颜色为绿色。
123456div{ color:red;}div{ color:green;}
继承性
继承性是指子标签没有设置样式时，继承父标签样式。
继承性只适用于字体的颜色，大小、行间距等文本类属性，边框、外边距、内边距、定位、元素高度等与块级相关属性不能继承。
1234567891011121314<html><head> <style> div{color:green;font-size:20px;} </style></head><body> <div> <span> 我是绿色的 </span> </div></body></html>
优先级
!importa ...
我与自己
c592789d455079f6bc91ceea9c2023b6816e8598bbae240859d7ba8ac79a2a68448265ea954b1ba6a1303b3ad04833f64e5e0160d156de9924d34a2a4cd8cc17db2fcb23d15eb072e5b98a9eda8fa7c8d7381fd9d1c0a4289db2e8d8a21d326c7dc8d50072c94c6d14f30301c60708bf4488843986f84697d31922deb56af27ddda062fe81af6c86bc046fb0c911610d10d977f7fe1da69f7110103a6d3a21d09dcd89a7dd2d6741e65a79f76594aac260c92438c6aa62a68f68c62213ec96e451e24324d332b28bb6d70a97bbd4562a833fcf569145a70f8d55e712670fea5cdaa561755148752355ecdde127901e14e93d27fbdb6edf5a1 ...
css背景
通过CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
123456background-color: 颜色值; /*背景颜色*/background-image: url(); /*背景图片*/background-repeat: repeat |no-repeat |repeat-x |repeat-y ; /*背景平铺*/background-position: x y; /*背景位置*/background-attachment: fixed|scroll; /*背景附着*/background: rgba(0,0,0,0.3) /*背景色半透明*/
背景图片位置
参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精确单位
如果参数值是精确坐标，那么第一个肯定是x 坐标，第二个一定是y坐标
如果只指定一个数值，那该数值 ...
元素显示模式及转换
元素显示模式就是元素（标签）以什么方式进行显示。比如<div>自己占一行，比如一行可以放多个<span>。HTML元素一般分为块元素和行内元素两种类型
块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
特点：
自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。
注意：
文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、&l ...
css伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，伪类选择器有链接伪类、结构伪类等。
链接伪类
1234a: link /*未访问的链接*/a: visited /*已访问的链接*/a: hover /*鼠标悬停的链接*/a: active /*已选择的链接*/
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html><head><style>/* unvisited link */a:link { color: red;}/* visited link */a:visited { color: green;}/* mouse over link */a:hover { color: hotpink;}/* selected link */a:active { color: blue;}</style></head&g ...
emmet语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
快速生成HTML结构语法
标签
div 然后tab 键
1<div></div>
多个相同标签
div*3
123<div></div><div></div><div></div>
父子级标签
可以用 > ，比如 ul > li
123<ul> <li></li></ul>
兄弟标签
用 + ,比如 div+p
12<div></div><p></p>
有类名或者id名字
直接写 .demo 或者 #two, tab 键
12<div class="demo"></div><div id="demo"></div>
有顺序的div类名
自增符号 ‘div
`div‘d ...