整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
層疊樣式表(英文全稱：Cascading Style Sheets) *層疊：多個樣式可以作用在同一個html的元素上，同時生效
是一種用來表現(xiàn)HTML或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機(jī)語言。
CSS很像化妝，通過不同的CSS將同樣的HTML內(nèi)容打造為不同的呈現(xiàn)結(jié)果。
所以，前端程序員相互表白的時候可以說：you are the CSS to my HTML.
這是不是CSS是對HTML進(jìn)行美化和布局作用的最好總結(jié)？
根據(jù)定義CSS的位置不同，分為行內(nèi)樣式、內(nèi)部樣式和外部樣式
也稱為內(nèi)聯(lián)樣式
直接在標(biāo)簽中編寫樣式，通過使用標(biāo)簽內(nèi)部的style屬性；
一般在測試的時候使用居多：
語法：
<html標(biāo)簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標(biāo)簽>
案例：
<div style="color: red;">hello my css</div>弊端：只能對當(dāng)前的標(biāo)簽生效，沒有做到內(nèi)容和樣式相分離，耦合度太高。
定義在head標(biāo)簽內(nèi)，通過style標(biāo)簽，該標(biāo)簽內(nèi)容就是CSS代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內(nèi)部樣式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>1、提前定義css資源文件
2、在head標(biāo)簽內(nèi)，定義link標(biāo)簽引入外部樣式文件。
lina.css文件，放在與html頁面同級的css文件夾中：
div {
color: red;
}
html頁面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>作用域的范圍:外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表
優(yōu)先級：外部樣式表<內(nèi)部樣式表<行內(nèi)樣式表;
同樣的樣式作用在同一個標(biāo)簽身上：就近原則；不同樣式作用在同一個標(biāo)簽身上:疊加生效。
基本格式：由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明:
選擇器 {
屬性1:值1;
屬性2:值2;
...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割，不同的屬性之間用分號隔開。例如：
注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。
CSS注釋以 /* 開始, 以 */ 結(jié)束
/*這是CSS的注釋*/
div {
color: red; /*文字顏色是紅色*/
}選擇具有相同id屬性值的元素，建議html頁面中的id值唯一
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
PS： ID屬性不要以數(shù)字開頭，數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
雖然多個元素可以使用同一個id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對多個標(biāo)簽生效，使用class選擇器。
選擇具有相同的class屬性值的元素。
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
PS：類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。
選擇具有相同標(biāo)簽名稱的元素。
定義選擇器語法：標(biāo)簽名稱{}；PS：標(biāo)簽名稱必須是html提供好的標(biāo)簽。
使用標(biāo)簽選擇器：自動使用在所有的同名的標(biāo)簽上
ID選擇器 > 類選擇器 > 標(biāo)簽選擇器
當(dāng)多個選擇器作用在同一個標(biāo)簽上的時候，如果屬性沖突，看優(yōu)先級；如果不沖突，樣式疊加生效。
行內(nèi)樣式 > 內(nèi)部樣式 >外部樣式
同樣，三個樣式表中都有內(nèi)容作用在同一個html標(biāo)簽的時候，如果屬性沖突，看優(yōu)先級；如果不沖突，樣式疊加生效。
跟顏色相關(guān)的取值分3種：
1、顏色的單詞 red blue...
2、rgb(紅，綠，藍(lán))三色的取值范圍是0-255 rgb(255,0,0)
rgba（紅，綠，藍(lán),透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 ：值的范式是00-FF 十六進(jìn)制數(shù)字組成的 例如：#FF0000
PS：只有塊狀元素可以設(shè)置寬高，行級元素設(shè)置不生效。
取值方式有2種：
1：數(shù)值 絕對數(shù)字 單位是像素PX
2：百分比：占據(jù)父元素的比例
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發(fā)者工具調(diào)出以下內(nèi)容。
在elements中可以看到當(dāng)前頁面的所有標(biāo)簽，在styles中可以看到html元素對應(yīng)的樣式。
所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
盒子模型說明圖：
元素的實際寬度和高度：
當(dāng)我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的：
總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--沒有浮動屬性的元素都屬于常規(guī)文檔流：從上往下從左往右依次顯示
浮動的元素都脫離了常規(guī)文檔流；
為了好理解：大家可以認(rèn)為浮動元素屬于一層，非浮動元素屬于一層
如果想要非浮動元素不受浮動元素的影響，需要使用clear屬性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮動，脫離常規(guī)文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮動，常規(guī)文檔流,
<br/>PS:此時div1在div2的上方顯示，因為div1和div2是不同文檔流中的元素，顯示互不影響
如果不想讓div2被浮動元素影響，需要添加clear屬性。
添加clear: left;之后div2就會忽略div1浮動的影響，在div1層后面顯示，不會重疊了，大家可以自己試驗一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮動，脫離常規(guī)文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮動，常規(guī)文檔流,
<br/>PS:此時div3在div4的上方顯示，因為div3和div4是不同文檔流中的元素，顯示互不影響
如果不想讓div4被浮動元素影響，需要添加clear屬性。
添加clear: right;之后div4就會忽略div3浮動的影響，在div3層后面顯示，不會重疊了，大家可以自己試驗一下
clear屬性有三個取值：left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
</div>
<div style="background: lavender;">
div5-未浮動，常規(guī)文檔流,
</div>
</body>
</html>
控制內(nèi)容溢出元素框時顯示的方式。
overflow屬性有以下值：
值 | 描述 |
visible | 默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。 |
hidden | 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。 |
scroll | 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
auto | 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。 |
注意:overflow 屬性只工作于指定高度的塊元素上。
注意: 在 OS X Lion ( Mac 系統(tǒng)) 系統(tǒng)上，滾動條默認(rèn)是隱藏的，使用的時候才會顯示 (設(shè)置 "overflow:scroll" 也是一樣的)。
display屬性設(shè)置一個元素應(yīng)如何顯示，visibility屬性指定一個元素應(yīng)可見還是隱藏。
隱藏一個元素可以通過把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"。但是請注意，這兩種方法會產(chǎn)生不同的結(jié)果。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
CSS樣式有以下三個：
由兩個或多個基礎(chǔ)選擇器，通過不同方式組合而成的。
可以更準(zhǔn)確更精細(xì)的選擇目標(biāo)元素標(biāo)簽。
語法：* {} 一般去掉標(biāo)簽的一些默認(rèn)效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將 * 替換為常用標(biāo)簽的名稱，并用逗號分隔，其實就是使用并集選擇器。
并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。
語法：選擇器1，選擇器2，......選擇器N{}
意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
條件：交集選擇器由兩個選擇器構(gòu)成，找到的標(biāo)簽必須滿足：既有標(biāo)簽一的特點，也有標(biāo)簽二的特點。
語法：h3.class{ color:red; }
其中第一個為標(biāo)簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。
交集選擇器是并且的意思。 即...又...的意思
例如： table.bg 選擇的是： 類名為 .bg 的 表格標(biāo)簽，但用的相對來說比較少。概念：后代選擇器又稱為包含選擇器。
作用：用來選擇元素或元素組的子孫后代。
其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。
格式：父級 子級{屬性:屬性值;屬性:屬性值;}語法：.class h3{color:red;font-size:16px;}
當(dāng)標(biāo)簽發(fā)生嵌套時，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標(biāo)簽。
作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標(biāo)簽寫在前面，子級標(biāo)簽寫在后面，中間跟一個 > 進(jìn)行連接。
語法：.class>h3{color:red;font-size:14px;}
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復(fù)合選擇器</title>
<style>
/*全局選擇器：
一般去掉標(biāo)簽的一些默認(rèn)效果的時候使用，或者整站通用效果時使用。但是不推薦，
*/
*{
color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
}
/*并集選擇器：通常用于集體聲明
替換全局選擇器；
*/
div,p,dldt,dd{
/*去掉瀏覽器的默認(rèn)樣式*/
margin: 0;
padding: 0;
color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
}
/*交集選擇器*/
li.myli{
color: red;
}
/*后代選擇器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微軟雅黑";
}
.myUL li a{
text-decoration: line-through;
}
/*子元素選擇器*/
.demo>h3{
color: red;
}
</style>
</head>
<body>
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444<a href="">點擊我試試</a></li>
<li class="myUL">
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444
<a href="">點擊我試試</a>
</li>
</ul>
</li>
</ul>
<ol>
<li>li11111111111</li>
<li>li22222222222</li>
<li>li33333333333</li>
<li>li44444444444</li>
</ol>
<div class="demo">
div1
<h3>靜夜思</h3>
<ul>
<li><h3>靜夜思----li</h3></li>
</ul>
</div>
</body>
</html>
偽類選擇器：和類選擇器相區(qū)別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。
作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。
因為偽類選擇器很多，比如鏈接偽類，結(jié)構(gòu)偽類等等。我們這里先給大家講解鏈接偽類選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style>
/*偽類選擇器*/
a:link{
color: red;/*默認(rèn)顏色是紅色*/
}
a:visited{
color: blue;/*訪問過的頁面是藍(lán)色*/
}
a:hover{
color: green;/*鼠標(biāo)懸浮是綠色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠標(biāo)不放手是金色*/
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<a href="03-常用樣式.html" target="_blank">常用樣式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-綜合練習(xí).html" target="_blank">綜合練習(xí)</a>
</body>
</html>
注意**
a { /* a是標(biāo)簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */
color: red; /* 鼠標(biāo)經(jīng)過的時候，由原來的 灰色 變成了紅色 */
}選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 p .one |
子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
交集選擇器 | 選擇兩個標(biāo)簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
鏈接偽類選擇器 | 給鏈接更改狀態(tài) | 較多 | 重點記住 a{} 和 a:hover 實際開發(fā)的寫法 |
程序員HTML5培訓(xùn)教程-html和css基礎(chǔ)知識，Html是超文本標(biāo)記語言（英語全稱：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。
Css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來html和xml等文件樣式的計算機(jī)語言，CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
一.基礎(chǔ)內(nèi)容：
標(biāo)記=開始標(biāo)記+內(nèi)容+結(jié)束標(biāo)記
標(biāo)記可以嵌套使用，例如：頁面主體標(biāo)記中含有標(biāo)題標(biāo)記，段落標(biāo)記。
有些標(biāo)記有屬性，具體格式，以a標(biāo)記為例，xxxx其中make為標(biāo)記的屬性。
設(shè)計為沒有任何內(nèi)容的元素稱為void元素，需要使用void元素時，只需要使用一個開始標(biāo)記，這是一種方便的簡寫，可以減少html中的標(biāo)記數(shù)量
二.常用標(biāo)記的使用與意義：
<!doctype html>html5的文檔類型定義，這一行要寫到html文件開頭
<html></html>標(biāo)記html頁面的開始和結(jié)束
<head></head>標(biāo)記頁面的有關(guān)信息
<meta charset="utf-8">標(biāo)記指定字符編碼，這一行要寫到<head>元素中所有其他元素上面
<title></title>為頁面指定一個標(biāo)題，標(biāo)記中的內(nèi)容出現(xiàn)在瀏覽器的頂部
<body></body>標(biāo)記頁面的主體內(nèi)容
<!--xxxxx-->中間xxx的內(nèi)容為注釋的內(nèi)容
編寫html時要把首部和頁面主體分開
<h1></h1>為主標(biāo)題，從<h2>到<h6>依次為副標(biāo)題，字體由大到小
<p></p>開始一個段落
<blockquote> </blockquote> 標(biāo)簽定義塊引用，之間的所有文本都會從常規(guī)文本中分離出來，經(jīng)常會在左、右兩邊進(jìn)行縮進(jìn)（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間
插入一個換行符
<q> 標(biāo)簽定義一個短的引用，瀏覽器經(jīng)常會在這種引用的周圍插入引號
需要了解的內(nèi)容（一些老版本棄置的元素與不建議使用的元素，做到看見了要明白其含義）
<ol></ol>定義一個有序列表
<ul> 標(biāo)簽定義無序列表
<li> 標(biāo)簽定義列表項目，<li> 標(biāo)簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中
<dl> 標(biāo)簽定義一個描述列表，<dl> 標(biāo)簽與 <dt>（定義項目/名字）和 <dd>（描述每一個項目/名字）一起使用
標(biāo)簽告訴瀏覽器把其中的文本表示為強(qiáng)調(diào)的內(nèi)容，對于所有瀏覽器來說，這意味著要把這段文字用斜體來顯示
<body bgcolor="xxx" text="xxxx">,bgcolor屬性設(shè)置頁面顏色，text屬性設(shè)置文本顏色
<font face="arial">xxxx</font>利用font元素改變字體
<center></center>對其包圍的文本進(jìn)行水平居中處理
一些字符實體
<顯示為<
>顯示為>
?right顯示為?
三.一個簡單的html框架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Wrld!</title>
</head>
<body>
<h1>演示文件，頁面顯示hello world！</h1>
<p>
Hello Wrld !
</p>
</body>
</html>
四.在頁面中插入一個鏈接
用于創(chuàng)建指向其它頁面的鏈接，元素中的內(nèi)容就是鏈接文本，在瀏覽器中鏈接文本會顯示有下劃線，指示這是可單擊的，例如：
<a href="(鏈接目標(biāo)文件的路徑或url)"
title="文本描述">（鏈接文本）
href屬性指向鏈接文件的路徑
rirle屬性所需鏈接頁面的文本描述
加入id屬性用于具體指向某個鏈接的某個標(biāo)題，例如：
<a href="index.html#標(biāo)識符">xxxxx</a>
并同步頁面中的標(biāo)題,鏈接所使用的標(biāo)識符要與標(biāo)題的標(biāo)識符設(shè)置一致
<h2 id="標(biāo)識符">xxxxx</h2>
加入target屬性，使瀏覽器打開鏈接時為單獨的窗口，而不是同一窗口，例如：
<a target="_blank" href="xxxxxxxx"
title="xxxxxxxxx">xxxxxxxxx</a>
如果不加入target屬性，點擊鏈接時瀏覽器會在同一窗口打開鏈接，加入此屬性，瀏覽器會在單獨窗口打開鏈接
五.在頁面中插入圖像
<img src="xxxxx">標(biāo)記為在頁面中顯示圖像，xxx為圖片的路徑或url
alt=“xxx”屬性為描述這個圖像內(nèi)容的文本，如果圖像未能顯示，就會使用這個文本來取代它。
width-"xxx"屬性告訴瀏覽器在頁面中顯示圖像的寬度
height="xxx"屬性告訴瀏覽器在頁面中顯示圖像的高度
未完待續(xù)，歡迎繼續(xù)關(guān)注好程序員前端教程分享!
用 Vim 時有一個非常重要的一點需要注意，那就是按鍵的功能取決于編輯器當(dāng)前的“模式”。 -- Himanshu Arora
本文導(dǎo)航
-基本操作 …… 14%
-方向鍵 …… 19%
-瀏覽文檔 …… 31%
-插入文本 …… 37%
-特殊插入 …… 42%
-刪除文本 …… 46%
-簡單替換文本 …… 52%
-復(fù)制/粘貼文本 …… 55%
-撤銷/重做操作 …… 61%
-搜索和替換 …… 64%
-書簽 …… 73%
-選擇文本 …… 77%
-改動選中文本 …… 80%
-保存并退出 …… 85%
-下載 Vim 快捷鍵速查表 …… 92%
編譯自： https://www.maketecheasier.com/vim-keyboard-shortcuts-cheatsheet/作者： Himanshu Arora
譯者： martin2011qi
本文是 Vim 用戶指南[1] 系列的其中一篇：
Vim 初學(xué)者入門指南[2]
Vim 快捷鍵速查表
5 個針對有經(jīng)驗用戶的 Vim 技巧[3]
3 個針對高級用戶的 Vim 編輯器實用技巧[4]
Vim 編輯器是一個基于命令行的工具，是傳奇編輯器 vi 的增強(qiáng)版。盡管圖形界面的富文本編輯有很多，但是熟悉 Vim 對于每一位 Linux 的使用者都能有所幫助——無論你是經(jīng)驗豐富的系統(tǒng)管理員，還是剛上手樹莓派的新手用戶。
這個輕量級的編輯器是個非常強(qiáng)大的工具。在有經(jīng)驗的使用者手中，它能完成不可思議的任務(wù)。除了常規(guī)的文本編輯功能以外，它還支持一些進(jìn)階特性。例如，基于正則表達(dá)式的搜索和替換、編碼轉(zhuǎn)換，以及語法高亮、代碼折疊等的編程特性。
使用 Vim 時有一個非常重要的一點需要注意，那就是按鍵的功能取決于編輯器當(dāng)前的“模式”。例如，在“普通模式”輸入字母j時，光標(biāo)會向下移動一行。而當(dāng)你在“插入模式”下輸入字符，則只是正常的文字錄入。
下面就是速查表，以便于你充分利用 Vim。
| 快捷鍵 | 功能 |
|---|---|
| Esc | 從當(dāng)前模式轉(zhuǎn)換到“普通模式”。所有的鍵對應(yīng)到命令。 |
| i | “插入模式”用于插入文字。回歸按鍵的本職工作。 |
| : | “命令行模式” Vim 希望你輸入類似于保存該文檔命令的地方。 |
| 快捷鍵 | 功能 |
|---|---|
| h | 光標(biāo)向左移動一個字符 |
| j 或 Ctrl + J | 光標(biāo)向下移動一行 |
| k 或 Ctrl + P | 光標(biāo)向上移動一行 |
| l | 光標(biāo)向右移動一個字符 |
| 0 | （數(shù)字 0）移動光標(biāo)至本行開頭 |
| $ | 移動光標(biāo)至本行末尾 |
| ^ | 移動光標(biāo)至本行第一個非空字符處 |
| w | 向前移動一個詞 （上一個字母和數(shù)字組成的詞之后） |
| W | 向前移動一個詞 （以空格分隔的詞） |
| 5w | 向前移動五個詞 |
| b | 向后移動一個詞 （下一個字母和數(shù)字組成的詞之前） |
| B | 向后移動一個詞 （以空格分隔的詞） |
| 5b | 向后移動五個詞 |
| G | 移動至文件末尾 |
| gg | 移動至文件開頭 |
| 快捷鍵 | 功能 |
|---|---|
| ( | 跳轉(zhuǎn)到上一句 |
| ) | 跳轉(zhuǎn)到下一句 |
| { | 跳轉(zhuǎn)到上一段 |
| } | 跳轉(zhuǎn)到下一段 |
| [[ | 跳轉(zhuǎn)到上一部分 |
| ]] | 跳轉(zhuǎn)到下一部分 |
| [] | 跳轉(zhuǎn)到上一部分的末尾 |
| ][ | 跳轉(zhuǎn)到上一部分的開頭 |
| 快捷鍵 | 功能 |
|---|---|
| a | 在光標(biāo)后插入文本 |
| A | 在行末插入文本 |
| i | 在光標(biāo)前插入文本 |
| o | （小寫字母 o）在光標(biāo)下方新開一行 |
| O | （大寫字母 O）在光標(biāo)上方新開一行 |
| 快捷鍵 | 功能 |
|---|---|
| :r [filename] | 在光標(biāo)下方插入文件 [filename] 的內(nèi)容 |
| :r ![command] | 執(zhí)行命令 [command] ，并將輸出插入至光標(biāo)下方 |
| 快捷鍵 | 功能 |
|---|---|
| x | 刪除光標(biāo)處字符 |
| dw | 刪除一個詞 |
| d0 | 刪至行首 |
| d$ | 刪至行末 |
| d) | 刪至句末 |
| dgg | 刪至文件開頭 |
| dG | 刪至文件末尾 |
| dd | 刪除該行 |
| 3dd | 刪除三行 |
| 快捷鍵 | 功能 |
|---|---|
| r{text} | 將光標(biāo)處的字符替換成 {text} |
| R | 進(jìn)入覆寫模式，輸入的字符將替換原有的字符 |
| 快捷鍵 | 功能 |
|---|---|
| yy | 復(fù)制當(dāng)前行至存儲緩沖區(qū) |
| ["x]yy | 復(fù)制當(dāng)前行至寄存器 x |
| p | 在當(dāng)前行之后粘貼存儲緩沖區(qū)中的內(nèi)容 |
| P | 在當(dāng)前行之前粘貼存儲緩沖區(qū)中的內(nèi)容 |
| ["x]p | 在當(dāng)前行之后粘貼寄存器 x 中的內(nèi)容 |
| ["x]P | 在當(dāng)前行之前粘貼寄存器 x 中的內(nèi)容 |
| 快捷鍵 | 功能 |
|---|---|
| u | 撤銷最后的操作 |
| Ctrl+r | 重做最后撤銷的操作 |
| 快捷鍵 | 功能 |
|---|---|
| /search_text | 檢索文檔，在文檔后面的部分搜索 search_text |
| ?search_text | 檢索文檔，在文檔前面的部分搜索 search_text |
| n | 移動到后一個檢索結(jié)果 |
| N | 移動到前一個檢索結(jié)果 |
| :%s/original/replacement | 檢索第一個 “original” 字符串并將其替換成 “replacement” |
| :%s/original/replacement/g | 檢索并將所有的 “original” 替換為 “replacement” |
| :%s/original/replacement/gc | 檢索出所有的 “original” 字符串，但在替換成 “replacement” 前，先詢問是否替換 |
| 快捷鍵 | 功能 |
|---|---|
| m {a-zA-Z} | 在當(dāng)前光標(biāo)位置設(shè)置書簽，書簽名可用一個大小寫字母（{a-zA-Z}） |
| :marks | 列出所有書簽 |
| {a-zA-Z} | 跳轉(zhuǎn)到書簽 {a-zA-Z} |
| 快捷鍵 | 功能 |
|---|---|
| v | 進(jìn)入逐字可視模式 |
| V | 進(jìn)入逐行可視模式 |
| Esc | 退出可視模式 |
| 快捷鍵 | 功能 |
|---|---|
| ~ | 切換大小寫 |
| d | 刪除一個詞 |
| c | 變更 |
| y | 復(fù)制 |
| > | 右移 |
| < | 左移 |
| ! | 通過外部命令進(jìn)行過濾 |
| 快捷鍵 | 功能 |
|---|---|
| :q | 退出 Vim，如果文件已被修改，將退出失敗 |
| :w | 保存文件 |
| :w new_name | 用 new_name 作為文件名保存文件 |
| :wq | 保存文件并退出 Vim |
| :q! | 退出 Vim，不保存文件改動 |
| ZZ | 退出 Vim，如果文件被改動過，保存改動內(nèi)容 |
| ZQ | 與 :q! 相同，退出 Vim，不保存文件改動 |
僅僅是這樣是否還不足以滿足你？別擔(dān)心，我們已經(jīng)為你整理好了一份下載版的速查表，以備不時之需。
點此下載（英文）：http://www.maketecheasier.com/cheatsheet/vim-keyboard-shortcuts-cheatsheet/
via: https://www.maketecheasier.com/vim-keyboard-shortcuts-cheatsheet/
作者：Himanshu Arora[6] 譯者：martin2011qi 校對：wxy
本文由 LCTT[7] 原創(chuàng)編譯，Linux中國 榮譽(yù)推出
[1]: https://www.maketecheasier.com/series/vim-user-guide/
[2]: https://linux.cn/article-8143-1.html
[3]: https://www.maketecheasier.com/vim-tips-tricks-for-experienced-users/
[4]: https://www.maketecheasier.com/vim-tips-tricks-advanced-users/
[5]: http://www.maketecheasier.com/cheatsheet/vim-keyboard-shortcuts-cheatsheet/
[6]: https://www.maketecheasier.com/author/himanshu/
[7]: https://github.com/LCTT/TranslateProject
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
