WEB前端代碼常用快捷鍵——Hbuilder

1.文件(4)

新建 Ctrl + N

關(guān)閉 Ctrl + F4

全部關(guān)閉 Ctrl + Shift + F4

屬性 Alt + Enter

2.編輯(13)

激活代碼助手 Alt + /

激活快捷鍵視圖 Ctrl + Shift + L

開啟關(guān)閉注釋整行 Ctrl + /

開啟關(guān)閉注釋已選內(nèi)容 Ctrl + Shift + /

Alt + [ 匹配括號

Alt + ↓跳轉(zhuǎn)到下一個(gè)可編輯區(qū)

Ctrl + Alt + j 合并下一行

Ctrl + Alt + ←選擇助手

Ctrl + 回車 換行

Ctrl + Shift + 回車 向上換行

Ctrl + d 刪除一行

Ctrl + Shift +R 復(fù)制上一行

創(chuàng)建HTML結(jié)構(gòu): h 8 (敲h激活代碼塊列表胞谭,按8選擇第8個(gè)項(xiàng)目鼓拧,即HTML代碼塊,或者敲h t Enter)

中途換行: 'Ctrl+Enter'

設(shè)置charset: m e 6 Enter

引用外部js: s 2 Enter 'Ctrl+Enter'

創(chuàng)建js區(qū)塊: s Enter

創(chuàng)建函數(shù): f u n 3 (或者 f u n n Enter)

為函數(shù)命名:W h o i s E

跳轉(zhuǎn)到函數(shù)末尾: End 'Alt+[' ↓ 'Ctrl+Enter' (Alt+[是跳轉(zhuǎn)到匹配括號的意思)

創(chuàng)建style節(jié)點(diǎn): s t Enter ↓ 'Ctrl+Enter'

引用外部css: l Enter Enter

跳轉(zhuǎn)到下一個(gè)可編輯區(qū): 'Alt+↓'

創(chuàng)建img標(biāo)簽: i m Enter Enter 'Ctrl+Enter'

插入換行符: 'Shift+Enter' Enter

創(chuàng)建div并設(shè)id和class: d i Enter d 1 → Space c Enter Enter (這里提示的class列表是在test.css里定義的)

轉(zhuǎn)到class的定義處:'Ctrl+Alt+D' (按Alt點(diǎn)擊鼠標(biāo)也可以)

關(guān)閉標(biāo)簽頁:'Ctrl+w' (切換標(biāo)簽頁則可以用Ctrl+e)

添加自定義屬性data-test并賦值1: → Space d 7 t e s t Tab 1

合并下行:'Ctrl+Alt+j' 'Ctrl+Enter'

創(chuàng)建超鏈接并設(shè)id: a Enter Enter → Space i Enter a 1

使用選擇助手選中#d1:'Ctrl+Alt+←' 'Ctrl+Alt+←' 'Ctrl+Alt+←' (如果快捷鍵沖突,可使用Alt+S U,或者鼠標(biāo)雙擊引號)

重新修改鏈接指向新創(chuàng)建的a1: BackSpace 'Alt+/' Enter 'Ctrl+Enter'

創(chuàng)建ul: u Enter

折疊代碼:'Ctrl+Alt+-'

向上插入空行:'Ctrl+Shift+Enter' Tab (一般Ctrl+某字母的快捷鍵骇钦,變成Ctrl+Shift+相同字母,大多代表相反意義)

沒有代碼塊時(shí)西疤,使用emmet語法創(chuàng)建標(biāo)簽:n a v Tab (如果不知道emmet技術(shù)币绩,請搜索學(xué)習(xí),前端必學(xué))

使用shift轉(zhuǎn)碼輸入空格:'Shift+Space' (如果與輸入法快捷鍵沖突瘸羡,也可輸入& n 2)

創(chuàng)建按鈕:'Ctrl+Enter' i n Enter Enter Tab Tab w h o Space i s Space e →

添加點(diǎn)擊事件: Space o n c k Enter w h o Enter → (onck是模糊匹配漩仙,不用輸入完整單詞也會模糊匹配,除代碼塊外所有語法提示都支持模糊匹配)

使用轉(zhuǎn)到定義到j(luò)s函數(shù):'Ctrl+Alt+D' ↓

------以下為js部分

定義一個(gè)變量e: v a r Space e ; Enter

為e賦值:e Space = Space d o Enter . g 6 " Enter (可提示樣式列表)

使用回車或Tab跳轉(zhuǎn)光標(biāo)到綠色豎線(若沒有綠色豎線請使用End到行尾):Enter ; Enter

為e賦值2:e Space = Space d o Enter . g 8 " d 8 Enter ; Enter (可提示標(biāo)簽列表)

為e賦值3(這個(gè)代碼塊很常用):e Space = Space $ (或者dg) Enter 2 Enter ; Enter (可提示id列表犹赖,注意選擇d1)

為e設(shè)置algin屬性: e . s e 2 " a l Enter → , " c Enter Enter ; Enter

設(shè)置自定義屬性:e . s e 2 " d Enter → , " 2 Enter ; Enter

提示字體列表: e . s t Enter . f o 2 = " Enter Enter ; Enter

提示圖片列表: e . s t Enter . b 7 = " h b Enter Enter ; Enter

還能這么寫css: e . s t Enter . c s 2 = " b 7 h b Enter → ; Enter

寫switch對e判斷:s w 2 e . s t Enter . d i s Enter Tab

case處提示display的值域:" - w e Enter

跳轉(zhuǎn)到switch結(jié)尾(有綠色豎線):Enter Enter

寫if代碼塊:i f f Enter (或者使用i f 2)

為if添加條件判斷屬性里的樣式:e . g e t a t Enter " c Enter Enter ! = " Enter ↓

設(shè)置e的樣式:e . c l 2 (此處也可以用c l n Enter) = " Enter Enter ; ↓ Enter

js里可以提示html: e . i n n Enter = " < f o Enter Space c o Enter Enter Enter ; Enter

e賦值改為超鏈接:e Space = Space $ Enter Enter Enter ; Enter

給a1加鏈接地址:e . h r Enter = " Enter Enter ; Enter

給a1加target:e . t 5 = " Enter Enter ; Enter

e賦值改為image對象:e Space = Space n e w Space i m 6 Enter ; Enter

為img增加圖片: e . s r Enter = " Enter Enter ; Enter

e賦值改為indexedDB對象:e Space = Space w i Enter . i Enter Space | | Space w i Enter . i n d e x e d 5 Space | | Space w i Enter . i n d e x e d 3 Space | | Space w i Enter . i n d e x e d 2 ; Enter

確認(rèn)e可被瀏覽器識別:i f f Enter (也可以使用i f 2) t y 4 e Enter ↓

執(zhí)行indexdb的方法:e . o p Enter " t e s t Enter ; ↓ Enter

------以下為刪除又添加上外部css引用

定義head變量:v a r Space h e a d Space = Space d o Enter . g 8 " h e Enter Enter [ 0 → ; Enter

with里也可以提示: w i t h h (或者w i t 2) Enter h Enter ↓

獲取head的最后一個(gè)子節(jié)點(diǎn):v a r Space l Space = Space l e c Enter ; Enter (with里的head可直接識別子對象)

去掉該子節(jié)點(diǎn):r e m 6 l → ; ↓ Enter (head的lastElementChild就是外部引用的css)

動態(tài)生成一個(gè)css文件引用:e Space = Space d c Enter l 5 Enter ; Enter

添加屬性:e . r 3 = " s t y Enter Enter ; Enter

設(shè)置type: e . t y Enter = " c Enter Enter ; Enter

設(shè)置href:e . h r Enter = " . c Enter Enter ; Enter

將e加入head中:h Enter . a p Enter e Enter Enter ; Enter

------演示重構(gòu)队他,即重命名變量

用代碼塊定義一個(gè)變量s:v a r s Enter Tab e Space i s Space 'Ctrl+Enter'

判斷e的屬性:i f e(或i f 3) Enter e . g 2 " d Enter Enter = = n u 2 ↓

為s賦值:s = s + e . o u Enter ; 'Alt+↓'

為s賦值:s = s + " u n k n o w → ; ↓ Enter

將s打印出來:a l Enter s

選擇s并轉(zhuǎn)到定義:'Shift+←' 'Ctrl+Alt+D'(按Alt點(diǎn)擊鼠標(biāo)也可以)

重構(gòu)s的命名為ss:'Ctrl+F2' Enter s s Enter Enter (彈出對話框可預(yù)覽重構(gòu)結(jié)果)

跳轉(zhuǎn)到函數(shù)末尾:'Alt+↓' 'Alt+↓' Enter

添加一個(gè)啟動事件: a d Enter " d o m l o Enter → , f u n a Enter (此處也可以是f u 6) ↓

提示自定義函數(shù)的jsdoc: f i n i Enter 1

------css部分

跳轉(zhuǎn)到CSS:'Alt+↓'

給body加樣式:b o Enter { Enter

emmet方式增加textalign:t c Tab Enter

模糊匹配增加user-select:u s e r s 4 5

寫下一個(gè)樣式:↓ Enter

為input增加樣式:i n Enter [ t y Enter = Enter → { Enter

使用代碼塊設(shè)置寬度:w 9 9 0 ↓ Enter

為ul加樣式:u l { d n Enter 'Ctrl+Enter'

ID也可以提示:# 2 { Enter

提示字體列表:f f Enter Enter Enter

回車自動補(bǔ)行尾分號:Enter

增加background-image:b i Enter h b Enter

大功告成,保存并運(yùn)行起來看看:'Ctrl+s' 'Ctrl+r'

如果你屏幕夠?qū)捑澹部梢渣c(diǎn)擊右上角視圖切換麸折,換到邊改邊看視圖Ctrl+P,左邊保存右邊自動刷新

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末粘昨,一起剝皮案震驚了整個(gè)濱河市磕谅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌雾棺,老刑警劉巖膊夹,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異捌浩,居然都是意外死亡放刨,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進(jìn)店門尸饺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來进统,“玉大人,你說我怎么就攤上這事浪听∶椋” “怎么了?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵迹栓,是天一觀的道長掉分。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么酥郭? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任华坦,我火速辦了婚禮,結(jié)果婚禮上不从,老公的妹妹穿的比我還像新娘惜姐。我一直安慰自己,他們只是感情好椿息,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布歹袁。 她就那樣靜靜地躺著,像睡著了一般寝优。 火紅的嫁衣襯著肌膚如雪条舔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天倡勇,我揣著相機(jī)與錄音逞刷,去河邊找鬼嘉涌。 笑死妻熊,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的仑最。 我是一名探鬼主播扔役,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼警医!你這毒婦竟也來了亿胸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤预皇,失蹤者是張志新(化名)和其女友劉穎侈玄,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吟温,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡序仙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鲁豪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片潘悼。...
    茶點(diǎn)故事閱讀 39,703評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖爬橡,靈堂內(nèi)的尸體忽然破棺而出治唤,到底是詐尸還是另有隱情,我是刑警寧澤糙申,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布宾添,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏辞槐。R本人自食惡果不足惜掷漱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望榄檬。 院中可真熱鬧卜范,春花似錦、人聲如沸鹿榜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽舱殿。三九已至奥裸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間沪袭,已是汗流浹背湾宙。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留冈绊,地道東北人侠鳄。 一個(gè)月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像死宣,于是被迫代替她去往敵國和親伟恶。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Alt + [ 匹配括號Alt + ↓跳轉(zhuǎn)到下一個(gè)可編輯區(qū)Ctrl + Alt + j 合并下一行Ctrl + A...
    jianghu000閱讀 1,800評論 0 0
  • 這個(gè)就是電腦上鍵盤所有鍵的功能。 saber_7755 CTRL組合鍵 Ctrl + A 全選 Ctrl + B ...
    皧爍寶貝閱讀 17,379評論 0 33
  • 《紅樓夢》第五十四回賈府舉行宴會慶祝元宵節(jié)眶掌,賈母對才子佳人小說有一段精辟的評論挡育,她認(rèn)為這些書都是一個(gè)“套子”。用現(xiàn)...
    生于十月閱讀 703評論 2 8
  • 上海被稱為魔都朴爬,或許我們走在高樓大夏之間即寒,只能感受到它的繁華,但從高處遠(yuǎn)看整個(gè)上海寝殴,真的會有一種震撼的視覺沖擊感~...
    一一和向日葵閱讀 342評論 3 4