Sublime Text是一個代碼編輯器,也是HTML和散文先進的文本編輯器。
本文通過實例來介紹項目中常用快捷鍵和插件的用法,熟悉快捷鍵和引用插件可以極大地提高我們的開發(fā)效率。
輸入“html:5”后點擊Tab鍵或輸入“!”后點擊Ctrl+E都能轉換為html5的骨架結構,轉換為的代碼如下圖:
Tips:需安裝Emmet插件;
右下角的文本類型要選為“html”。
輸入“div.wrapper>div.header>span.title{標題}”或“ul.lis>li*5>p.title+p.content”后點擊Tab可以快速生成相應的代碼,轉換為的代碼如下圖:
Tips:上面兩種寫法只是其中的一部分,大家可以自己練習多種組合;
img[src="face/bd/$.gif"] +Tab,bd目錄下自動從1開始到最后,適合于一次性增加從1--多個的圖片。
“Ctrl+Shift+P”用于快速更改文件類型(js/css)(第一圖)、安裝插件(第二圖)等,如下圖:
“Ctrl+G”用于快速定位到行數(shù),比如審查元素知道修改的樣式在那一行,就可以點擊快捷鍵,然后輸入行數(shù),就能定位到相應的位置進行修改;
“Ctrl+C”用于撤回信息,而“Ctrl+Y”用于恢復信息,都可多次操作;
“Ctrl+/”用于注釋信息,可單行也可以多行;
“Ctrl+F”用于查找輸入的內容,可往前、往后或全部查找;
“Ctrl+Shirt+D”用于復制游標所在行;
“Ctrl+D”用于選擇游標所在單詞,連續(xù)“Ctrl+D”實現(xiàn)多個選擇(選擇與第一次選擇相同的單詞);如果中間有要跳過的相同單詞,可以先點擊“Ctrl+K”再點擊“Ctrl+D”;
“Alt+F3”用于選擇所有與游標所在單詞相同的單詞,跟上面一個快捷鍵對于批量修改非常方便。
“Alt+Shift+1/2/3”,后面數(shù)字表示要顯示多少列,如下圖,對于參照html編寫css和js有很大的便利。
Tips:從標題到這塊是最經(jīng)常用到的快捷鍵,一定熟悉記住。
“Ctrl+] ”增加縮進,“Ctrl+] ” 減小縮進,好的排版有利于查看;
“Ctrl+Shift+V”保持縮進粘貼,直接用“Ctrl+V”有時會導致顯示排版亂了,使用該快捷鍵可以保持原來的排版;
“Ctrl+PgUp”往前切換Tab欄的文件,“Ctrl+PgDn”往后切換Tab欄的文件;
“/**+Tab”常用于js的自動補全注釋信息和內容;
“Ctrl+P”用于快速查找并打開文件,點擊快捷鍵后打開命令面板,直接點擊就可以打開文件,也可以進行搜索操作;
“Ctrl+L”用于選擇單行;
“Ctrl+H”用于查找替換,可替換單個或全部替換;
“Ctrl+Shift+Enter”在當前上方添加一行;
右鍵點擊“Open Containing Folder”可以打開該文件的本地目錄。
“Ctrl+Shift+P”打開命令面板,輸入range點擊第一條就會出現(xiàn)了,然后輸入開始和結束數(shù)字,可以批量修改序號,需安裝插件Text Pastry。
“跟蹤函數(shù)ctags”在使用函數(shù)調轉功能前,需要先生成.tags文件,只需在項目文件管理器的項目文件上右鍵點擊Ctags:Rebuild Tags即可(注意,在改動文件之后會重新生成.tags);所有工作都準備充分之后,就可以在函數(shù)名上右鍵點擊navigate 頭definition跳轉到指定函數(shù)了,返回用jump back,需安裝插件ctags。
直接安裝:直接下載安裝包解壓縮到Packages目錄(菜單->preferences->Browse Packages);
使用Package Control組件安裝(在線安裝):點擊“Ctrl+`”,然后輸入“import urllib.request,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())()”回車,下載完畢后,重啟Sublime Text程序;如果在Perferences->中看到package control這一項,則安裝成功。
Tips:輸入代碼為3版本,其他版本代碼可以百度搜索。
用Package Control安裝插件的方法,按下“Ctrl+Shift+P”調出命令面板,輸入install 調出 Install Package 選項并回車,然后在列表中選中要安裝的插件。
比如“Emmet”,在搜索框輸入“Emmet”,列表就會顯示插件“Emmet”,然后點擊該條數(shù)據(jù),就會開始安裝該插件,安裝信息可查看左下角。
Tips:安裝插件時保持網(wǎng)絡暢通,避免插件由于網(wǎng)絡原因奔潰。
常用插件的用法說明:
Emmet(原名 Zen Coding):一種快速編寫html/css的方法;
Autoprefixer:CSS3私有前綴自動補全插件;
AutoFileName:顯示路徑下文件名;
SyncedSidebarBg:自動同步側邊欄底色為編輯窗口底色;
HTML-CSS-JS Prettify:html/css/js格式化工具,依賴node.js,格式化的HTML不能有中文和中文符號等,HTMLPrettify.sublime-settings路徑對應node安裝目錄,使用快捷鍵“Ctrl+Shift+H”;
sublimelinter:檢查js語法;
jQuery:補全JQ代碼;
Text Pastry:可以一次性改批量序號,用法快捷鍵里面有介紹;
ctags:跟蹤函數(shù),用法快捷鍵里面有介紹;
Less2Css:保存less文件時候自動生成css文件,windows下,Less2CSS對lessc.cmd有依賴,請下載:https://github.com/duncansmart/less.js-windows/releases后并將其路徑( E:/Less)添加至系統(tǒng)環(huán)境變量中;一般建議生產環(huán)境不使用less,所以這個還是蠻方便的;
SideBarEnhancements:設置瀏覽器,如下圖。
這里是云端源想IT,幫你輕松學IT”
嗨~ 今天的你過得還好嗎?
生命是什么呢,
生命是時時刻刻不知如何是好。
- 2024.03.06 -
工欲善其事必先利其器,一款好的開發(fā)工具可以讓我們事半功倍。前面我們對HTML的相關概念和基本結構已經(jīng)有了基本的了解,下面我們就來安裝在前端開發(fā)中的需要使用的開發(fā)工具及環(huán)境。
在眾多HTML編輯器中,選擇一個適合自己的工具至關重要。今天我們就來認識一下前端開發(fā)工作中使用的最廣泛的工具 “VS Code” , 并在本地搭建好開發(fā)環(huán)境。
在介紹 “VS Code” 之前,我們先來了解一下什么是 “IDE”。
什么是 “IDE”
IDE 是集成開發(fā)環(huán)境的英文縮寫 (Integrated Development Environment),集成開發(fā)環(huán)境就是將在開發(fā)過程中所需要的工具或功能集成到了一起,比如:代碼編寫、分析、編譯、調試等功能,從而最大化地提高開發(fā)者的工作效率。
IDE 通用特點:
前端開發(fā)IDE
而在前端開發(fā)中我們需要安裝一個“趁手”的IDE,幫助我們更快更高效的開發(fā),一個好的IDE是每個程序員的必備武器。前端開發(fā)IDE有很多種,例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。
我們可以任選一種使用。這幾種IDE的對比如下:
這么多IDE該怎么選呢?對于我們初學者來說,選擇Visual Studio Code,(簡稱VS Code)就可以了。VS code具備內置功能非常豐富、插件很全且安裝簡單、輕量、對電腦的配置要求不算很高,且有MAC版本,應用廣泛等優(yōu)點,很適合新手。
下面就和我一起下載并安裝VS code吧!
1、進入VScode官網(wǎng)
官網(wǎng)地址:https://code.visualstudio.com/
點擊【Download】進入下載,不要點擊【Download for Windows Stable Build】,否則它會自動幫你下載User Installer用戶版本。
2、然后你會看見Windows,Linux,蘋果三個版本,我們選擇Windows版本,選擇System Installer 點擊【x64】進行下載,不要點擊【↓ Windows windows8,10,11】,否則它也會自動默認下載User Installer用戶版本。
其實選哪個版本都無傷大雅,就算你下載了【User Installer】版本也沒事,因為沒人會沒事把自己電腦上的賬戶換成其他人的賬戶登錄,就算換了也可以換回來,只是有時候特殊情況換了個賬戶登錄不能使用就有一點麻煩,所以還是推薦盡量下載【System Installer】版本。
【x86】:32位操作系統(tǒng)。【x64】:64位操作系統(tǒng),如果想知道自己是什么系統(tǒng),可以敲擊Win鍵找到“設置”→“系統(tǒng)”→“關于”→“系統(tǒng)類型”。
3、正在下載
這個下載會比較慢,如果不想等可直接去找個別人下好的安裝包哦!也可找小編領取。
4、下載完后打開文件,會彈出許可協(xié)議彈窗,勾選我同意此協(xié)議,單擊【下一步】。
5、先去D盤里創(chuàng)建一個新文件夾取名叫“VScode”,點擊【瀏覽】按鈕修改安裝路徑,把路徑改到剛剛在D盤里創(chuàng)建的VScode文件夾里。如果覺得麻煩也可以直接默認安裝在C盤,然后單擊【下一步】,但還是建議安裝在D盤里。
6、修改完路徑后,單擊【下一步】。(安裝路徑是這個樣子D:\VScode\Microsoft VS Code)
7、選擇開始菜單文件夾,默認"Visual Studio Code",單擊【下一步】。
8、根據(jù)自己的需求進行勾選,勾選完單擊【下一步】。
【創(chuàng)建桌面快捷方式】:在桌面創(chuàng)建VScode快捷方式。
【將“通過Code打開”操作添加到Windows資源管理器文件上下文菜單】:選中一個文件鼠標右鍵可以通過VScode打開文件。
【將“通過Code打開”操作添加到Windows資源管理器目錄上下文菜單】:選中一個文件夾鼠標右鍵可以通過VScode打開文件夾。
【將Code注冊為受支持的文件類型的編輯器】:對于受支持的文件類型的文件,鼠標右鍵選擇“打開方式”,可以通過“Vscode”打開。
【添加到PATH】:添加VScode文件夾里的bin目錄到PATH環(huán)境變量里,添加完以后可通過系統(tǒng)命令輸入code直接啟動VScode。
9、單擊【安裝】進行安裝。
10、安裝完成后單擊【完成】啟動。
下載完之后,大家可以根據(jù)自己的需求下載插件,這里推薦我用的比較順手的幾個。
1、下載漢化包
點擊擴展,在搜索欄搜索Chinese,選擇Chinese中文簡體點擊【Install】進行安裝。(建議少用,多看英文,這是一位優(yōu)秀的程序員走向成功的標志性成長。)
安裝完后單擊【Change Language and Restart】重啟VScode軟件,刷新一下就變成中文簡體了。
2、下載【會了吧】插件
在搜索欄里搜索【會了吧】,這個是在你敲代碼時會自動識別你敲的單詞進行翻譯,如果你有一個單詞不認識,可以點進“會了吧”看看翻譯,對英語基礎差的人很友好。
3、下載【Open in browser】插件
這個是用來運行代碼,并且在瀏覽器打開,查看運行效果的,這個插件必須下,否則當你寫完HTML網(wǎng)頁時你無法運行,無法預覽頁面,不信你可以先試試能不能運行再回來下載。
4、下載【Live Server】插件
這個是用于實時預覽運行效果,當你使用open in browser運行代碼時,只要你的代碼有改變,你就需要手動刷新重新預覽頁面運行結果,而Live Server是自動刷新運行結果,非常方便,非常滴銀性!
1、先去D盤里創(chuàng)建一個新文件夾取名叫“Workspace”(名字隨便取名)。
2、進入VScode找到左上角的文件選擇點擊打開文件夾。
3、找到剛剛創(chuàng)建的“workspace”文件夾,單擊【選擇文件夾】。
4、找到WORKSPACRE,點擊新建文件,名字輸入“01.html”,然后點擊回車鍵創(chuàng)建。
5、在剛剛創(chuàng)建的01.html文件下輸入以下代碼。
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>HTML</title>
</head>
<body>
<h1>這是我的第一個網(wǎng)頁</h1>
</body></html>
6、鼠標右擊空白處單擊【Open In Default Browser】查看運行結果。
7、運行結果如下 。
以上就是常用的前端開發(fā)工具VS Code的下載和安裝教程了,你的第一個HTML網(wǎng)頁運行成功了嗎?
一個高效的HTML開發(fā)工具和環(huán)境是每個前端開發(fā)者的得力助手。通過合理選擇工具、配置環(huán)境、使用框架和庫、以及不斷的調試和測試,你可以將創(chuàng)意轉化為現(xiàn)實,構建出令人驚嘆的網(wǎng)頁。記住,技術永遠在變,唯有不斷學習和實踐,才能讓你在這個數(shù)字世界中游刃有余。
今天就先講到這里了,
更多前端開發(fā)基礎知識點擊文末閱讀原文查看哦!
記得關注【云端源想IT】一起學編程!
我們下期再見!
END
文案編輯|云端學長
文案配圖|云端學長
內容由:云端源想分享
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標簽,是一種用來制作網(wǎng)頁的語言,這種語言由一個個的標簽組成,用這種語言制作的文件保存的是一個文本文件,文件的擴展名為html或者htm,一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉到另外一個網(wǎng)頁。
html基本結構
一個html的基本結構如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網(wǎng)頁標題</title> </head> <body> 網(wǎng)頁顯示內容 </body> </html>
第一行是文檔聲明,第二行“”標簽和最后一行“”定義html文檔的整體,“”標簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文,定義成中文是’lang=“zh-CN”’,不定義也沒什么影響,它一般作為分析統(tǒng)計用。 “”標簽和“”標簽是它的第一層子元素,“”標簽里面負責對網(wǎng)頁進行一些設置以及定義標題,設置包括定義網(wǎng)頁的編碼格式,外鏈css樣式文件和javascript文件等,設置的內容不會顯示在網(wǎng)頁上,標題的內容會顯示在標題欄,“”內編寫網(wǎng)頁上顯示的內容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個常用的版本,目前許多網(wǎng)站仍然使用此版本。
此版本文檔用sublime text創(chuàng)建方法: html:xt + tab
文檔示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的
此版本文檔用sublime text創(chuàng)建方法: html:5 + tab 或者 ! + tab
文檔示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
兩種文檔的區(qū)別
1、文檔聲明和編碼聲明
2、html5新增了標簽元素以及元素屬性
html注釋:
html文檔代碼中可以插入注釋,注釋是對代碼的說明和解釋,注釋的內容不會顯示在頁面上,html代碼中插入注釋的方法是:
<!-- 這是一段注釋 -->
通過
、
、
、
、
,標簽可以在網(wǎng)頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系,比如說:
,再其次是
,以此類推。搜索引擎會使用標題將網(wǎng)頁的結構和內容編制索引,所以網(wǎng)頁上使用標題是很重要的。
<h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3>
html段落標簽
標簽定義一個文本段落,一個段落含有默認的上下間距,段落之間會用這種默認間距隔開,代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超 文本指的是超鏈接,標記指的是標簽,是一種用來制作網(wǎng)頁的語言,這種語言由一個個的 標簽組成,用這種語言制作的文件保存的是一個文本文件,文件的擴展名為html或者htm。 </p> <p>一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方 式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件渲染成網(wǎng)頁,顯示的網(wǎng) 頁可以從一個網(wǎng)頁鏈接跳轉到另外一個網(wǎng)頁。</p> </body> </html>
html換行標簽
代碼中成段的文字,直接在代碼中回車換行,在渲染成網(wǎng)頁時候不認這種換行,如果真想換行,可以在代碼的段落中插入
來強制換行,代碼如下:
<p> 一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用<br /> 文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件<br /> 渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉到另外一個網(wǎng)頁。 </p>
html字符實體
代碼中成段的文字,如果文字間想空多個空格,在代碼中空多個空格,在渲染成網(wǎng)頁時只會顯示一個空格,如果想顯示多個空格,可以使用空格的字符實體,代碼如下:
<!-- 在段落前想縮進兩個文字的空格,使用空格的字符實體: --> <p> 一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用<br /> 文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件<br /> 渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉到另外一個網(wǎng)頁。</p>
在網(wǎng)頁上顯示 “<” 和 “>” 會誤認為是標簽,想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實體,比如:
<!-- “<” 和 “>” 的字符實體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標簽
1、
標簽 塊元素,表示一塊內容,沒有具體的語義。
2、 標簽 行內元素,表示一行中的一小段內容,沒有具體的語義。
含樣式和語義的標簽
1、 標簽 行內元素,表示語氣中的強調詞
2、 標簽 行內元素,表示專業(yè)詞匯
3、 標簽 行內元素,表示文檔中的關鍵字或者產品名
4、 標簽 行內元素,表示非常重要的內容
語義化的標簽
語義化的標簽,就是在布局的時候多使用有語義的標簽,搜索引擎在爬網(wǎng)的時候能認識這些標簽,理解文檔的結構,方便網(wǎng)站的收錄。比如:h1標簽是表示標題,p標簽是表示段落,ul、li標簽是表示列表,a標簽表示鏈接,dl、dt、dd表示定義列表等,語義化的標簽不多。
html圖像標簽
標簽可以在網(wǎng)頁上插入一張圖片,它是獨立使用的標簽,它的常用屬性有:
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時顯示的文字,搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片,所以此屬性非常重要。
<img src="images/pic.jpg" alt="產品圖片" />
絕對路徑和相對路徑
像網(wǎng)頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表,javascript等等,引用地址分為絕對地址和相對地址。
絕對地址:相對于磁盤的位置去定位文件的地址
相對地址:相對于引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件,相對路徑就沒有這個問題。相對路徑的定義技巧:
“ ./ ” 表示當前文件所在目錄下,比如:“./pic.jpg” 表示當前目錄下的pic.jpg的圖片,這個使用時可以省略。
“ …/ ” 表示當前文件所在目錄下的上一級目錄,比如:“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
標簽可以在網(wǎng)頁上定義一個鏈接地址,它的常用屬性有:
href屬性 定義跳轉的地址
title屬性 定義鼠標懸停時彈出的提示文字框
target屬性 定義鏈接窗口打開的位置
target="_self" 缺省值,新頁面替換原來的頁面,在原來位置打開
target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。