整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Sublime Text是一個代碼編輯器，也是HTML和散文先進的文本編輯器。
本文通過實例來介紹項目中常用快捷鍵和插件的用法，熟悉快捷鍵和引用插件可以極大地提高我們的開發效率。
輸入“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”用于快速定位到行數，比如審查元素知道修改的樣式在那一行，就可以點擊快捷鍵，然后輸入行數，就能定位到相應的位置進行修改；
“Ctrl+C”用于撤回信息，而“Ctrl+Y”用于恢復信息，都可多次操作；
“Ctrl+/”用于注釋信息，可單行也可以多行；
“Ctrl+F”用于查找輸入的內容，可往前、往后或全部查找；
“Ctrl+Shirt+D”用于復制游標所在行；
“Ctrl+D”用于選擇游標所在單詞，連續“Ctrl+D”實現多個選擇（選擇與第一次選擇相同的單詞）；如果中間有要跳過的相同單詞，可以先點擊“Ctrl+K”再點擊“Ctrl+D”；
“Alt+F3”用于選擇所有與游標所在單詞相同的單詞，跟上面一個快捷鍵對于批量修改非常方便。
“Alt+Shift+1/2/3”，后面數字表示要顯示多少列，如下圖，對于參照html編寫css和js有很大的便利。
Tips：從標題到這塊是最經常用到的快捷鍵，一定熟悉記住。
“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點擊第一條就會出現了，然后輸入開始和結束數字，可以批量修改序號，需安裝插件Text Pastry。
“跟蹤函數ctags”在使用函數調轉功能前，需要先生成.tags文件，只需在項目文件管理器的項目文件上右鍵點擊Ctags:Rebuild Tags即可（注意，在改動文件之后會重新生成.tags）；所有工作都準備充分之后，就可以在函數名上右鍵點擊navigate 頭definition跳轉到指定函數了，返回用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”，然后點擊該條數據，就會開始安裝該插件，安裝信息可查看左下角。
Tips：安裝插件時保持網絡暢通，避免插件由于網絡原因奔潰。
常用插件的用法說明：
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：跟蹤函數，用法快捷鍵里面有介紹；
Less2Css：保存less文件時候自動生成css文件，windows下，Less2CSS對lessc.cmd有依賴，請下載：https://github.com/duncansmart/less.js-windows/releases后并將其路徑（ E:/Less）添加至系統環境變量中；一般建議生產環境不使用less，所以這個還是蠻方便的；
SideBarEnhancements：設置瀏覽器，如下圖。
人在校生一枚，希望可以找到志同道合的小伙伴一起進步，不定期的更新自己的收獲，如果有大神的話可以指出我的不足，我用的是VS code軟件來寫代碼的
HTML 是個縮寫，全稱Hyper Text Markup Language，譯為超文本標記語言。它是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
在<hard>頭部標簽中你可以 插入腳本（scripts）,樣式文件（CSS），以及各種meta信息。可以添加在頭部區域的元素有：<title>，<style>，<meta>，<link>等等
注釋快捷鍵：CTRL+? （注釋是不被運行的，作用就是幫助程序員記東西）
<!--這是一個注釋-->HTML完整結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--頭部，js和css寫在這里面-->
</head>
<body>
<!--內容主體-->
</body>
</html>
可能我寫的會有些不清楚，到后面有代碼的時候就會清楚了
節課開始前，我們先回憶一個事情，我們小時候寫作文時，老師都會教我們一些“規矩”，比如說：題目要在中間寫，也就是居中，要分段，要有標點符號，第一段要空兩個格子等等。那同樣的！ HTML文件也有他們的書寫規則 ？那他們都有什么規則呢？我來慢慢告訴你！
通過上節課學習，你已經認識了，在瀏覽器中運行的文件就是網頁，那么這個文件到底是什么呢？其實就是一個以 html 為后綴的普通文件，說到這，你可能會出現疑問了，這個文件我也沒見過，應該怎么創建和書寫呢？
先來嘗試一下，新建一個 test.html 文件（注意是html為后綴名哦！如果不能改后綴名的話，度娘查一下，如何顯示文件后綴名，就可以更改了），右鍵點擊文件， 使用記事本打開。
可以看到 html 文件可以直接在這里面進行讀寫了 但是記事本的功能比較少 不夠強大 ，就像我們要編輯一個文字文件需要Word一樣，我們需要用到一個專業讀寫 html 文件的軟件 我們叫它代碼編輯器
市面上有各種各樣的代碼編輯器 比如說 Notepad++， sublime， DreamWeaver， webStorm， Hbuilder， 等等。
今天為大家推薦的一款編輯器 是開發工程師們使用頻率比較高的一款軟件 vscode 它是一款輕量級編輯器 上手方便 操作簡單
只需要來到官網（Visual Studio Code - Code Editing. Redefined） 點擊下載 下載好以后雙擊安裝 你可以自己選擇安裝路徑 也可以用默認安裝路徑 安裝好以后 桌面上會出現一個圖標 這就是我們的VScode代碼編輯器了
那我們吃飯的家伙有了 我們先來認識一下它，雙擊圖標 打開軟件一看是是英文的，根本看不懂！沒關系 我們只需要安裝一個漢化插件就好了。
首先點擊左側這個按鈕 在輸入框內輸入 Chinese 對應搜索結果的第一個 點擊 install 稍等一會 即可安裝完成 此時 我們只要重啟 vscode 這個編輯器 會發現 英文變成中文了
接下來就可以使用這個vscode 來進行 html 文件的創建和編輯了
首先在電腦桌面上面點擊鼠標右鍵 新建一個文件夾 命名為千鋒學習 這個文件夾用來存儲其他文件夾和網頁相關的文件，用編輯器打開文件夾可以右擊選擇→通過code打開，也可以直接直接將文件夾拖到編輯器里直接打開
接下來新建一個文件，在這里關于文件的命名 希望你遵循以下規范
根據文件命名規則 我們在 vscode 里創建一個文件，點擊這里的新建文件圖標 書寫文件名 start.html 注意 你要手動寫上文件后綴 這樣一個標準的 html 文件就創建好了
點擊文件 我們看到在右側打開了這個文件 目前內容還是空白的 我們直接寫入 hello world 點擊這里的保存按鈕 也可以使用快捷鍵 ctrl + s 完成文件保存 此時 一個簡單的 html 文件就寫好了 我們趕緊到瀏覽器內運行一下吧
返回到文件夾——右鍵點擊文件——打開方式——用瀏覽器打開
好啦！我們的第一個網頁運行成功了。
到這里 細心的小朋友發現了 每次這樣打開文件豈不很麻煩 其實可以在 vscode 內安裝一個的插件 直接打開瀏覽器 就像安裝 Chinese 漢化版插件一樣。
再次點擊 擴展 按鈕 搜索 open in browser 點擊安裝 在文件位置點擊右鍵 選擇 open in default browser 就可以直接在瀏覽器打開了 或者你可以直接使用快捷鍵 alt + b
回到編輯器的 start.html 再來寫點內容 前端培訓界的扛把子——千鋒HTML5大前端 首先記得ctrl+s保存文件，然后打開瀏覽器
點擊刷新按鈕—看到新增的文字也出現了，仔細觀察發現：所有的文字格式都一樣，如果你想把某些文字變得不一樣。該怎么辦呢？
這時候就需要用到標簽了 比如：我們來書寫一個 < h1 >再寫一個</h1> 兩個組合在一起形成一個完整標簽 ，這個標簽對中間可以書寫一段內容，把我們的這一段內容復制進去，再次打開瀏覽器刷新，這一段內容變得不一樣了 這就是 h1 標簽的作用
在HTML 中 有很多不同的標簽 各自有不同的作用 我們就是用這些標簽來組成頁面的骨架。
這節課你學會了編寫一個簡單的網頁 并了解了文件的書寫規范，我們也只是了解了冰山一角，九牛一毛。那其他的標簽，都有什么呢？標簽又有什么書寫規范呢？
我們下一篇文章等你哦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
