Web前端開發(fā)-簡(jiǎn)單講解課件

Web前端開發(fā)Yan.ju12Web前端開發(fā)Yan.ju121、開發(fā)工具HtmlCssjavaScript2、三要素Notepad++SublimeText222022/11/211、開發(fā)工具Html2、三要素Notepad++22022/1、SublimeText2前言作為一個(gè)前端，有一款好的開發(fā)利器是必不可少的，editplus、notepad++都是不錯(cuò)的工具，體積輕巧，啟動(dòng)迅速（dw太浮腫了）。最近，又有一款新的編輯器誕生，席卷前端界，惹得無(wú)數(shù)喜愛(ài)，不少前端er紛紛拋棄用了數(shù)年的“伙伴”，投入了她的懷抱——SublimeText2。SublimeText2是一款跨平臺(tái)的編輯器，再也不用為換平臺(tái)而找不到合適的、熟悉的編輯器擔(dān)憂了。目前，還是beta版中，不過(guò)功能已經(jīng)很強(qiáng)大了，更新也很快，目前最新是bulid2181。ST2不是免費(fèi)的，但可以永久免費(fèi)使用，只是在保存的時(shí)候，偶爾會(huì)彈出要你購(gòu)買注冊(cè)的對(duì)話框，僅此而已。32022/11/211、SublimeText2前言作為一個(gè)前官網(wǎng)地址：/2。功能 SublimeText2是一款具有代碼高亮、語(yǔ)法提示、自動(dòng)完成且反應(yīng)快速的編輯器軟件，不僅具有華麗的界面，還支持插件擴(kuò)展機(jī)制。界面從上到下：標(biāo)題欄、菜單欄、tab控制欄、編輯區(qū)、狀態(tài)欄從做到右：分別是邊欄、編輯區(qū)、MiniMap菜單欄：各種命令，各種設(shè)置。Tab欄：很多編輯器都有的，如果文件編輯過(guò)未保存，右上角有個(gè)小圓點(diǎn)提示保存，如果未保存關(guān)了也不用害怕，ST2很貼心，會(huì)幫我們自動(dòng)保存。編輯區(qū)：這是我們主要的工作區(qū)域，ST2支持代碼自動(dòng)縮進(jìn)，代碼折疊功能。介紹幾個(gè)常見(jiàn)的功能：自動(dòng)完成：自動(dòng)完成的快捷鍵是Tab，如果在html文件中，輸入cl按下tab，即可自動(dòng)補(bǔ)全為class=””多列編輯：按住ctrl點(diǎn)擊鼠標(biāo)，會(huì)出現(xiàn)多個(gè)閃爍的光標(biāo)，這時(shí)可同時(shí)修改多處42022/11/21官網(wǎng)地址：http://www.sublimetext.co52022/11/2152022/11/21或者按住鼠標(biāo)中鍵拖拽，

代碼注釋功能：ctrl+/、ctrl+shift+/分別未行注釋和塊注釋，再按一下就能去掉注釋，ST2能夠自動(dòng)識(shí)別是html、css還是js文件，給出不同類型的注釋。行操作：ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行，ctrl+enter，光標(biāo)后插入空行，ctrl+d選擇相似，可以參考后面的快捷鍵列表。右鍵功能：62022/11/21或者按住鼠標(biāo)中鍵拖拽，62022/11/21前3個(gè)，大家都知道，第4個(gè)，showunsavedchanges，顯示未保存的修改，紅色減號(hào)表示刪去的內(nèi)容，綠色加號(hào)表示新增的內(nèi)容72022/11/21前3個(gè)，大家都知道，第4個(gè)，showunsavedchaOpenContainingFolder…，打開包含此文件的文件夾，這個(gè)很方便找到相關(guān)的文件CopyFilePath，復(fù)制文件路徑，方便我們復(fù)制路徑到瀏覽器中查看Auto-FormatTagsonSelection格式化選中的文檔，方便我們更清晰的查看代碼結(jié)構(gòu)，雖然ST2有自動(dòng)縮進(jìn)功能，但是當(dāng)我們粘貼進(jìn)一段沒(méi)有格式化過(guò)的代碼，就需要這個(gè)能了，這個(gè)功能要安裝了Tag這個(gè)插件才會(huì)出現(xiàn)。人性化設(shè)計(jì)：ST2雖然還是beta版中，但是有很多設(shè)計(jì)細(xì)節(jié)還是值得稱贊的，比如點(diǎn)擊一個(gè)標(biāo)簽或者括弧，會(huì)在起始處顯示下劃點(diǎn)線，方便看清代碼結(jié)果，每一層嵌套代碼間都有豎線，起到視覺(jué)輔助的作用。82022/11/21OpenContainingFolder…，打開包含此文92022/11/2192022/11/21Sublimetext2在bulid2181后，對(duì)【設(shè)置】進(jìn)行了合并，現(xiàn)在只有兩個(gè)選項(xiàng)，分別是系統(tǒng)設(shè)置和快捷鍵設(shè)置。一般我們修改設(shè)置的話，最好復(fù)制出來(lái)在user里修改，以免以后升級(jí)default被覆蓋掉。Settings：在此文件里，可以修改很多東西，比如主題，字體，字號(hào)，是否顯示行號(hào)、自動(dòng)縮進(jìn)、自動(dòng)完成。很多都默認(rèn)選中了，我另外修改了兩個(gè)地方：98行——顯示縮略圖邊框101行——光標(biāo)當(dāng)前行高亮顯示有助于我們快速找到光標(biāo)位置。KeyBindings：快捷鍵設(shè)置，ST2的快捷鍵很多，改的時(shí)候注意不要覆蓋了。因?yàn)榭旖萱I眾多，所以有下面這種組合快捷鍵，先按下ctrl+k，松開k，再按下j就可以展開全部代碼了。三、設(shè)置102022/11/21Sublimetext2在bulid2181后，對(duì)【設(shè)置Ctrl+L選擇整行（按住-繼續(xù)選擇下行）Ctrl+KK從光標(biāo)處刪除至行尾Ctrl+Shift+K刪除整行Ctrl+Shift+D復(fù)制光標(biāo)所在整行，插入在該行之前Ctrl+J合并行（已選擇需要合并的多行時(shí)）Ctrl+KU改為大寫Ctrl+KL改為小寫Ctrl+D選詞（按住-繼續(xù)選擇下個(gè)相同的字符串）Ctrl+M光標(biāo)移動(dòng)至括號(hào)內(nèi)開始或結(jié)束的位置Ctrl+Shift+M選擇括號(hào)內(nèi)的內(nèi)容（按住-繼續(xù)選擇父括號(hào)）Ctrl+/注釋整行（如已選擇內(nèi)容，同“Ctrl+Shift+/”效果）Ctrl+Shift+/注釋已選擇內(nèi)容Ctrl+Z撤銷Ctrl+Y恢復(fù)撤銷Ctrl+M光標(biāo)跳至對(duì)應(yīng)的括號(hào)擴(kuò)展主要快捷鍵列表112022/11/21Ctrl+L選擇整行（按住-繼續(xù)選擇下行）擴(kuò)展主要快捷鍵列Alt+.閉合當(dāng)前標(biāo)簽Ctrl+Shift+A選擇光標(biāo)位置父標(biāo)簽對(duì)兒Ctrl+Shift+[折疊代碼Ctrl+Shift+]展開代碼Ctrl+KT折疊屬性Ctrl+K0展開所有Ctrl+U軟撤銷Ctrl+T詞互換Tab縮進(jìn)自動(dòng)完成Shift+Tab去除縮進(jìn)Ctrl+Shift+↑與上行互換Ctrl+Shift+↓與下行互換Ctrl+KBackspace從光標(biāo)處刪除至行首Ctrl+Enter光標(biāo)后插入行Ctrl+Shift+Enter光標(biāo)前插入行Ctrl+F2設(shè)置書簽F2下一個(gè)書簽Shift+F2上一個(gè)書簽擴(kuò)展主要快捷鍵列表122022/11/21Alt+.閉合當(dāng)前標(biāo)簽Ctrl+Shift+↑與上行互換ST2是支持插件擴(kuò)展的，首先，我們需要安裝PackageContro，ctrl+`調(diào)出命令行工具，輸入importurllib2,os;pf='PackageControl.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('/'+pf.replace('','%20')).read())回車即可。點(diǎn)擊Preferences→PackageControl，顯示以下彈窗：四、擴(kuò)展nDisablePackage：禁用插件nenablePackage：?jiǎn)⒂貌寮InstallPackage：安裝插件nListPackage：查看已安裝插件列表nRemovePackage：移除插件nUpgradePackage：升級(jí)插件132022/11/21ST2是支持插件擴(kuò)展的，首先，我們需要安裝PackageC插件推薦142022/11/21插件推薦142022/11/21ZenCoding：前端必備，快速開發(fā)HTML/CSS輸入div.wrapper>div.header+div.main+div.footer按下Tab，立刻變成或者按下ctrl+alt+enter，激發(fā)zencoding控制臺(tái)，可看到整個(gè)動(dòng)態(tài)的過(guò)程。152022/11/21ZenCoding：前端必備，快速開發(fā)HTML/CSS輸入JsFormat，格式化js代碼，這個(gè)插件很有用，我們有時(shí)在網(wǎng)上看到某些效果，想查看是怎么實(shí)現(xiàn)的，但是代碼被壓縮過(guò)，很難閱讀，不用怕，用ST2打開，按下ctrl+alt+5（這是我設(shè)置的快捷鍵），即可讓代碼還原。162022/11/21JsFormat，格式化js代碼，這個(gè)插件很有用，我們有時(shí)在Tag格式化標(biāo)簽，讓亂七八糟的代碼，瞬間整齊清晰。BracketHighlighter，括弧高亮顯示ClipboardHistory，剪切板歷史，可以保存多個(gè)復(fù)制信息，按下ctrl+alt+v，可以選擇歷史剪切板172022/11/21Tag格式化標(biāo)簽，讓亂七八糟的代碼，瞬間整齊清晰。1720Goto-CSS-Declaration，跳轉(zhuǎn)到css文件該class的聲明處，方便修改查看，如圖下所示，注意對(duì)應(yīng)的css文件要同時(shí)打開才行。GotoRecent，打開最近的文件，系統(tǒng)有這個(gè)功能，但只能看最近8個(gè)，有點(diǎn)不爽，按ctrl+e，選擇即可。SCSS，支持scss的語(yǔ)法高亮，里面附帶了好多CSSSnippet，無(wú)論現(xiàn)用或者改造成，都可節(jié)省不少時(shí)間。還有很多插件，jquery語(yǔ)法提示，jsHint等等。182022/11/21Goto-CSS-Declaration，跳轉(zhuǎn)到css文件該總而言之，SublimeText2是一款不錯(cuò)的代碼編寫工具，有好看的ui，人性化的細(xì)節(jié)設(shè)計(jì)，全面的功能和擴(kuò)展機(jī)制，如果你還沒(méi)用過(guò)，請(qǐng)?jiān)囈幌拢粫?huì)讓你失望的。如果說(shuō)有什么缺點(diǎn)的話，ST2目前對(duì)ANSI、GBK的漢字顯示不正常，（使用utf8編碼就沒(méi)問(wèn)題，packagecontrol里有一個(gè)gbk插件）。五、結(jié)語(yǔ)192022/11/21總而言之，SublimeText2是一款不錯(cuò)的代碼Html即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言。結(jié)構(gòu)包括頭部（head）、主體（body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容。Css

層疊樣式表，是一組格式設(shè)置規(guī)則，用于控制web頁(yè)面的外觀。通過(guò)使用css樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離，使html文檔代碼更加簡(jiǎn)練，縮短瀏覽器加載時(shí)間。202022/11/21Html即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言。結(jié)構(gòu)包括頭部Html格式

<!DOCTYPEHTML><html><head><metacharset="UTF-8"></meta><title></title><linkhref="css/index.css"rel="stylesheet"></link><scripttype="text/javascript"src="js/jquery-1.10.2.min.js"></script></head><body></body></html>212022/11/21Html格式

<!DOCTYPEHTML>212022/1Html語(yǔ)法規(guī)則元素必須被正確地嵌套元素必須被關(guān)閉（如<p></p>）、非空標(biāo)簽必須使用結(jié)束標(biāo)簽（<br/>）元素必須小寫（標(biāo)簽名和屬性對(duì)大小寫敏感）（<body><a></a></body>）屬性值必須加引號(hào)（<tablewidth=“100%”></table>）把所有<和&特殊符號(hào)用編碼表示，如（>用>表示，<用<表示）222022/11/21Html語(yǔ)法規(guī)則元素必須被正確地嵌套222022/11/21瀏覽器兼容問(wèn)題IETester:/wiki/IETester/HomePage/（需要已上線）/en-us/index.html1、測(cè)試地址232022/11/21瀏覽器兼容問(wèn)題IETester:http://www.my-2、csshack火狐和IE能識(shí)別“!important” #div{ background:blue;/*firefox藍(lán)色*/

*+background:green!important;/*IE7綠色*/ _background:orange;/*IE6橘色*/background:black\0;/*IE8黑色*/background:red\9\0;/*IE9紅色*/body:nth-of-type(1)background:blue;/*ChromeSafari藍(lán)色*/ }瀏覽器兼容問(wèn)題242022/11/212、csshack火狐和IE能識(shí)別“!important”252022/11/21252022/11/21<metahttp-equiv=“x-ua-compatible”content=“ie=7”/>使ie8、ie9使用ie7模式顯示<!--[if!IE]>除IE外都可識(shí)別<![endif]-->

<!--[ifIE]>所有的IE可識(shí)別<![endif]-->

<!--[ifltIE6]>IE6和IE6以下版本可識(shí)別<![endif]-->

<!--[ifgteIE6]>IE6和IE6以上版本可識(shí)別<![endif]-->

<!--[ifIE6]>僅IE6可識(shí)別<![endif]-->262022/11/21<metahttp-equiv=“x-ua-compatiJavaScript

是一種基于對(duì)象和事件驅(qū)動(dòng)并且具有安全性能的腳本編寫語(yǔ)言。Jquery

輕量級(jí)、文檔說(shuō)明很全、有許多成熟的插件其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。$(function(){ $(“.div1”).click(function(){alert(“顯示對(duì)話框”);});});272022/11/21JavaScript

是一種基于對(duì)象和事件驅(qū)動(dòng)并且具有安全性Web前端開發(fā)Yan.ju282Web前端開發(fā)Yan.ju121、開發(fā)工具HtmlCssjavaScript2、三要素Notepad++SublimeText2292022/11/211、開發(fā)工具Html2、三要素Notepad++22022/1、SublimeText2前言作為一個(gè)前端，有一款好的開發(fā)利器是必不可少的，editplus、notepad++都是不錯(cuò)的工具，體積輕巧，啟動(dòng)迅速（dw太浮腫了）。最近，又有一款新的編輯器誕生，席卷前端界，惹得無(wú)數(shù)喜愛(ài)，不少前端er紛紛拋棄用了數(shù)年的“伙伴”，投入了她的懷抱——SublimeText2。SublimeText2是一款跨平臺(tái)的編輯器，再也不用為換平臺(tái)而找不到合適的、熟悉的編輯器擔(dān)憂了。目前，還是beta版中，不過(guò)功能已經(jīng)很強(qiáng)大了，更新也很快，目前最新是bulid2181。ST2不是免費(fèi)的，但可以永久免費(fèi)使用，只是在保存的時(shí)候，偶爾會(huì)彈出要你購(gòu)買注冊(cè)的對(duì)話框，僅此而已。302022/11/211、SublimeText2前言作為一個(gè)前官網(wǎng)地址：/2。功能 SublimeText2是一款具有代碼高亮、語(yǔ)法提示、自動(dòng)完成且反應(yīng)快速的編輯器軟件，不僅具有華麗的界面，還支持插件擴(kuò)展機(jī)制。界面從上到下：標(biāo)題欄、菜單欄、tab控制欄、編輯區(qū)、狀態(tài)欄從做到右：分別是邊欄、編輯區(qū)、MiniMap菜單欄：各種命令，各種設(shè)置。Tab欄：很多編輯器都有的，如果文件編輯過(guò)未保存，右上角有個(gè)小圓點(diǎn)提示保存，如果未保存關(guān)了也不用害怕，ST2很貼心，會(huì)幫我們自動(dòng)保存。編輯區(qū)：這是我們主要的工作區(qū)域，ST2支持代碼自動(dòng)縮進(jìn)，代碼折疊功能。介紹幾個(gè)常見(jiàn)的功能：自動(dòng)完成：自動(dòng)完成的快捷鍵是Tab，如果在html文件中，輸入cl按下tab，即可自動(dòng)補(bǔ)全為class=””多列編輯：按住ctrl點(diǎn)擊鼠標(biāo)，會(huì)出現(xiàn)多個(gè)閃爍的光標(biāo)，這時(shí)可同時(shí)修改多處312022/11/21官網(wǎng)地址：http://www.sublimetext.co322022/11/2152022/11/21或者按住鼠標(biāo)中鍵拖拽，

代碼注釋功能：ctrl+/、ctrl+shift+/分別未行注釋和塊注釋，再按一下就能去掉注釋，ST2能夠自動(dòng)識(shí)別是html、css還是js文件，給出不同類型的注釋。行操作：ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行，ctrl+enter，光標(biāo)后插入空行，ctrl+d選擇相似，可以參考后面的快捷鍵列表。右鍵功能：332022/11/21或者按住鼠標(biāo)中鍵拖拽，62022/11/21前3個(gè)，大家都知道，第4個(gè)，showunsavedchanges，顯示未保存的修改，紅色減號(hào)表示刪去的內(nèi)容，綠色加號(hào)表示新增的內(nèi)容342022/11/21前3個(gè)，大家都知道，第4個(gè)，showunsavedchaOpenContainingFolder…，打開包含此文件的文件夾，這個(gè)很方便找到相關(guān)的文件CopyFilePath，復(fù)制文件路徑，方便我們復(fù)制路徑到瀏覽器中查看Auto-FormatTagsonSelection格式化選中的文檔，方便我們更清晰的查看代碼結(jié)構(gòu)，雖然ST2有自動(dòng)縮進(jìn)功能，但是當(dāng)我們粘貼進(jìn)一段沒(méi)有格式化過(guò)的代碼，就需要這個(gè)能了，這個(gè)功能要安裝了Tag這個(gè)插件才會(huì)出現(xiàn)。人性化設(shè)計(jì)：ST2雖然還是beta版中，但是有很多設(shè)計(jì)細(xì)節(jié)還是值得稱贊的，比如點(diǎn)擊一個(gè)標(biāo)簽或者括弧，會(huì)在起始處顯示下劃點(diǎn)線，方便看清代碼結(jié)果，每一層嵌套代碼間都有豎線，起到視覺(jué)輔助的作用。352022/11/21OpenContainingFolder…，打開包含此文362022/11/2192022/11/21Sublimetext2在bulid2181后，對(duì)【設(shè)置】進(jìn)行了合并，現(xiàn)在只有兩個(gè)選項(xiàng)，分別是系統(tǒng)設(shè)置和快捷鍵設(shè)置。一般我們修改設(shè)置的話，最好復(fù)制出來(lái)在user里修改，以免以后升級(jí)default被覆蓋掉。Settings：在此文件里，可以修改很多東西，比如主題，字體，字號(hào)，是否顯示行號(hào)、自動(dòng)縮進(jìn)、自動(dòng)完成。很多都默認(rèn)選中了，我另外修改了兩個(gè)地方：98行——顯示縮略圖邊框101行——光標(biāo)當(dāng)前行高亮顯示有助于我們快速找到光標(biāo)位置。KeyBindings：快捷鍵設(shè)置，ST2的快捷鍵很多，改的時(shí)候注意不要覆蓋了。因?yàn)榭旖萱I眾多，所以有下面這種組合快捷鍵，先按下ctrl+k，松開k，再按下j就可以展開全部代碼了。三、設(shè)置372022/11/21Sublimetext2在bulid2181后，對(duì)【設(shè)置Ctrl+L選擇整行（按住-繼續(xù)選擇下行）Ctrl+KK從光標(biāo)處刪除至行尾Ctrl+Shift+K刪除整行Ctrl+Shift+D復(fù)制光標(biāo)所在整行，插入在該行之前Ctrl+J合并行（已選擇需要合并的多行時(shí)）Ctrl+KU改為大寫Ctrl+KL改為小寫Ctrl+D選詞（按住-繼續(xù)選擇下個(gè)相同的字符串）Ctrl+M光標(biāo)移動(dòng)至括號(hào)內(nèi)開始或結(jié)束的位置Ctrl+Shift+M選擇括號(hào)內(nèi)的內(nèi)容（按住-繼續(xù)選擇父括號(hào)）Ctrl+/注釋整行（如已選擇內(nèi)容，同“Ctrl+Shift+/”效果）Ctrl+Shift+/注釋已選擇內(nèi)容Ctrl+Z撤銷Ctrl+Y恢復(fù)撤銷Ctrl+M光標(biāo)跳至對(duì)應(yīng)的括號(hào)擴(kuò)展主要快捷鍵列表382022/11/21Ctrl+L選擇整行（按住-繼續(xù)選擇下行）擴(kuò)展主要快捷鍵列Alt+.閉合當(dāng)前標(biāo)簽Ctrl+Shift+A選擇光標(biāo)位置父標(biāo)簽對(duì)兒Ctrl+Shift+[折疊代碼Ctrl+Shift+]展開代碼Ctrl+KT折疊屬性Ctrl+K0展開所有Ctrl+U軟撤銷Ctrl+T詞互換Tab縮進(jìn)自動(dòng)完成Shift+Tab去除縮進(jìn)Ctrl+Shift+↑與上行互換Ctrl+Shift+↓與下行互換Ctrl+KBackspace從光標(biāo)處刪除至行首Ctrl+Enter光標(biāo)后插入行Ctrl+Shift+Enter光標(biāo)前插入行Ctrl+F2設(shè)置書簽F2下一個(gè)書簽Shift+F2上一個(gè)書簽擴(kuò)展主要快捷鍵列表392022/11/21Alt+.閉合當(dāng)前標(biāo)簽Ctrl+Shift+↑與上行互換ST2是支持插件擴(kuò)展的，首先，我們需要安裝PackageContro，ctrl+`調(diào)出命令行工具，輸入importurllib2,os;pf='PackageControl.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('/'+pf.replace('','%20')).read())回車即可。點(diǎn)擊Preferences→PackageControl，顯示以下彈窗：四、擴(kuò)展nDisablePackage：禁用插件nenablePackage：?jiǎn)⒂貌寮InstallPackage：安裝插件nListPackage：查看已安裝插件列表nRemovePackage：移除插件nUpgradePackage：升級(jí)插件402022/11/21ST2是支持插件擴(kuò)展的，首先，我們需要安裝PackageC插件推薦412022/11/21插件推薦142022/11/21ZenCoding：前端必備，快速開發(fā)HTML/CSS輸入div.wrapper>div.header+div.main+div.footer按下Tab，立刻變成或者按下ctrl+alt+enter，激發(fā)zencoding控制臺(tái)，可看到整個(gè)動(dòng)態(tài)的過(guò)程。422022/11/21ZenCoding：前端必備，快速開發(fā)HTML/CSS輸入JsFormat，格式化js代碼，這個(gè)插件很有用，我們有時(shí)在網(wǎng)上看到某些效果，想查看是怎么實(shí)現(xiàn)的，但是代碼被壓縮過(guò)，很難閱讀，不用怕，用ST2打開，按下ctrl+alt+5（這是我設(shè)置的快捷鍵），即可讓代碼還原。432022/11/21JsFormat，格式化js代碼，這個(gè)插件很有用，我們有時(shí)在Tag格式化標(biāo)簽，讓亂七八糟的代碼，瞬間整齊清晰。BracketHighlighter，括弧高亮顯示ClipboardHistory，剪切板歷史，可以保存多個(gè)復(fù)制信息，按下ctrl+alt+v，可以選擇歷史剪切板442022/11/21Tag格式化標(biāo)簽，讓亂七八糟的代碼，瞬間整齊清晰。1720Goto-CSS-Declaration，跳轉(zhuǎn)到css文件該class的聲明處，方便修改查看，如圖下所示，注意對(duì)應(yīng)的css文件要同時(shí)打開才行。GotoRecent，打開最近的文件，系統(tǒng)有這個(gè)功能，但只能看最近8個(gè)，有點(diǎn)不爽，按ctrl+e，選擇即可。SCSS，支持scss的語(yǔ)法高亮，里面附帶了好多CSSSnippet，無(wú)論現(xiàn)用或者改造成，都可節(jié)省不少時(shí)間。還有很多插件，jquery語(yǔ)法提示，jsHint等等。452022/11/21Goto-CSS-Declaration，跳轉(zhuǎn)到css文件該總而言之，SublimeText2是一款不錯(cuò)的代碼編寫工具，有好看的ui，人性化的細(xì)節(jié)設(shè)計(jì)，全面的功能和擴(kuò)展機(jī)制，如果你還沒(méi)用過(guò)，請(qǐng)?jiān)囈幌?，不?huì)讓你失望的。如果說(shuō)有什么缺點(diǎn)的話，ST2目前對(duì)ANSI、GBK的漢字顯示不正常，（使用utf8編碼就沒(méi)問(wèn)題，packagecontrol里有一個(gè)gbk插件）。五、結(jié)語(yǔ)462022/11/21總而言之，SublimeText2是一款不錯(cuò)的代碼Html即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言。結(jié)構(gòu)包括頭部（head）、主體（body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容。Css

層疊樣式表，是一組格式設(shè)置規(guī)則，用于控制web頁(yè)面的外觀。通過(guò)使用css樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離，使html文檔代碼更加簡(jiǎn)練，縮短瀏覽器加載時(shí)間。472022/11/21Html即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言。結(jié)構(gòu)包括頭部Html格式

<!DOCTYPEHTML><html><head><metacharset="UTF-8"></meta><title></title><linkhref="css/index.css"rel="stylesheet"></link><scripttype="text/javascript"src="js/jquery-1.10.2.min.js"></script></head><body></body></html>482022/11/21Html格式

<!DOCTYPEHTML>212022/1Html語(yǔ)法規(guī)則元素必須被正確地嵌套元素必須被關(guān)閉（如<p></p>）、非空標(biāo)簽