购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.7 代码编辑工具Sublime

编辑网页可以选择很多工具软件,如记事本、EditPlus、Dreamweaver、PHPStorm、HBuilder、Sublime等,本书的编辑环境采用Sublime。使用较多的Sublime版本是Text 2和Text 3,本书使用的是 Text 3英文版,打开 Sublime Text 3安装程序,按照默认方式安装即可。成功安装后打开Sublime,会看到Sublime的使用界面,包括常用的命令菜单和编辑区域,如图1-22所示。

图1-22 Sublime使用界面

1.7.1 Sublime的常用操作

1.快速使用Sublime打开已有文档

安装好Sublime后,右键单击想要打开的各种文件格式(html、js、xml、txt等)都可以快速打开文件,如图1-23所示。

图1-23 使用Sublime打开文档

2.创建新文件并选择文件类型

单击“文件”→“新建文件”菜单可以创建一个新文件,默认文件名为 untitled,注意此时文件是没有扩展名的,即没有指定文件类型,在保存此文件之前,需要给出该文件的扩展名,在Sublime编辑环境的右下角可以对文件类型进行选择,如图1-24所示,默认类型为Plain Text。选择文件类型后就可以将文件保存到指定路径下了。

图1-24 选择文件类型

3.打开整个工程

一个网站即为www目录下的一个文件夹,比如我们的课程项目要求完成一个视频信息管理系统的网站,可以在 www 目录下创建一个目录作为网站的根目录,目录命名为 neuvideo,后面编写的所有页面都将存放于该目录下。建议在编辑网页的过程中打开neuvideo目录,这样就可见该目录下所有子目录及文件列表,编辑和维护都比较方便。单击“文件”→“打开文件夹”→“选择自己的工程”菜单,可以打开整个工程,这样就可以在整个工程里查看所有文件了,如图1-25所示。

图1-25 打开整个工程

4.快速注释

选择需要注释的代码,多行或单行都可以,然后使用<Ctrl+/>组合键,或者使用<Ctrl+Shft+/>组合键即可快速注释。再次按一下组合键即可取消注释。

5.快速查找

按住<Ctrl+F>组合键,即可进行快速搜索,在搜索框下面输入要找的变量名称或方法名等,定位很迅速,如图1-26所示。

图1-26 快速查找

6.快速打开文件

使用<Ctrl+P>组合键可以快速打开文件,输入文件名称即可切换文件,我们一次打开的窗口可能比较多,<Ctrl+P>组合键可以快速地切换到相应的文件,如图1-27所示。

图1-27 快速打开文件

1.7.2 在Sublime中安装Emmet

Emmet可以快速地编写HTML、CSS,以及实现其他的功能。在前端开发的过程中,一个最烦琐的工作就是写HTML、CSS代码,比如数量繁多的标签、属性、尖括号、标签闭合等。Emmet提供了一套非常简单的语法规则,书写起来非常快,只需要敲一个快捷键就立刻生成对应的HTML或CSS代码,极大提高了代码书写效率。Emmet的前身是Zen coding,它是一个编辑器插件,需要基于指定的编辑器使用,官方网站提供多编辑器支持,本书使用Sublime Text 3,下面就以Sublime Text 3插件为例,讲解Emmet的安装及基础语法。

1.安装Package Control组件

目前,Emmet 已经可以通过 Package Control安装了。如果你的Sublime Text 3还没有安装Package Control组件,请参照以下方法安装,如果已安装请自行跳过本步骤。

使用<Ctrl+`>组合键打开控制台或通过“View”→“Show Console”菜单打开命令行,粘贴以下代码到底部命令行并按<Enter>键。

import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();
urllib.request.install_opener(urllib.request.build_opener(urllib.request.Proxy Handler())); open
(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+ pf.replace
(' ', '%20')).read())

重启Sublime Text 3,如果在“Perferences”→“Package Settings”中看到Package Control,则表示安装成功。

2.使用Package Control安装Emmet插件

在“Package Control”中选择“lnstall package”或按<Ctrl+Shift+P>组合键,打开命令板,输入“pci”,然后选择“lnstall Package”,输入Emmet的搜索,找到Emmet Css Snippets,单击即可自动完成安装。

3.快速体验 Emmet

举个例子,如果编写下面这个HTML结构,你需要多长时间?

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

其实,这一切你只需要编写下面这条按照Emmet语法写出来的语句,然后用Emmet编译一下(按下<TAB>键),就可以生成了!

#page>div.logo+ul#navigation>li*5>a

把上述代码复制到Sublime Text 3中已经打开的HTML文件中,这时候紧跟着敲击一下<TAB>键,仅仅写一行代码,就可以生成这个复杂的HTML结构,而且还可以生成对应的class、id和有序号的内容。

又如,快速编写HTML代码,HTML文档需要包含一些固定的标签,如doctype、html、head、body及meta等,现在你只需要1 s就可以输入这些标签。比如输入“!”或“html:5”,然后按<TAB>键,就可以得到如下代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title>Document</title>
</head>
<body>
</body>
</html>

这就是一个HTML5的标准结构,也是默认的HTML结构。

4.Emmet的基础语法

(1)生成带有id、class的HTML标签

Emmet默认的标签为div,如果不给出标签名称,则默认生成div标签。如果要生成id为page的div标签,则只需要编写以下指令。

div#page->tab键

或者使用默认标签的方式:

#page

如果编写一个class为content的p标签,只需要编写以下指令。

p.content->tab键

同时指定标签的id和class,如生成id为navigation、class为nav的ul标签,代码如下。

ul#navigation.nav

指定多个class,如上面还需要给ul指定一个class为dropdown。

ul#navigation.nav.dropdown->tab键

生成的HTML结构如下。

<ul id="navigation" class="nav dropdown">
</ul>

(2)兄弟标签:+

生成标签的兄弟标签,即平级元素,使用指令“+”,如下。

div+ul+bq->tab键

生成的HTML结构如下。

<div></div>
<ul></ul>
<blockquote></blockquote>

(3)后代:>

“>”表示后面要生成的内容是当前标签的后代。例如,要生成一个无序列表,而且被class为nav的div包裹,那么可以使用以下指令。

div.nav>ul>li->tab键

生成的HTML结构如下。

<div class="nav">
    <ul>
      <li></li>
    </ul>
</div>

(4)上级元素:^

上级(Climb-up)元素是什么意思呢?前面介绍了生成下级元素的符号“>”,在使用div>ul>li指令之后,再继续写下去,那么后续内容都是在li下级的。如果想编写一个与ul平级的span标签,那么需要先用“^”提升层次,如下。

div.nav>ul>li^span

生成的结构如下。

<div  class="nav">
    <ul>
      <li></li>
    </ul>
    <span></span>
</div>

如果想相对于div生成一个平级元素,那么再上升一个层次,多用一个“^”符号。

div.nav>ul>li^^span

结果如下。

<div  class="nav">
    <ul>
      <li></li>
    </ul>
</div>
<span></span>

(5)重复多份:*

针对一个无序列表,ul下面的li必然不只是一份,通常要生成很多个li标签。那么可以直接在li后面的“*”之后加一些数字。

ul>li*5->tab键

这样就直接生成5个项目的无序列表了。如果想要生成多份其他结构,方法类似。

又如,要生成一个1行3列的表格,可以使用如下指令。

table>tr>td*3->tab键

生成的HTML结构如下。

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

(6)编号:$

例如,无序列表,想为5个li增加一个class属性值item1,然后依次递增从1到5,那么需要使用“$”符号。

ul>li.item$*5->tab键

结构如下。

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

“$”表示一位数字,如果只出现一个,就从1开始;如果出现多个,就从0开始。

如果要想生成3位数的序号,那么要写3个“$”。

ul>li.item$$$*5->tab键

输出如下。

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

1.7.3 设置文档的自动提示与补全

单击菜单栏的首选项菜单“Preferences”,选择“Setting-User”项,然后在大括号内输入以下内容,设置完成后保存,再重启Sublime。

{
    "auto_complete": true,
    "auto_match_enabled": true,
    "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
    "font_size": 21,
    "ignored_packages":
    [
        "Vintage"
    ]
}

例如,在PHP文件中输入php+Tab键,会自动补全PHP标签,如图1-28所示。在PHP标签中输入if,就可以自动加载if(){};在PHP标签中输入foreach,就可以自动加载for循环的结构foreach(){},如图1-29所示,可见,这种方式可以加快程序的开发速度。

图1-28 补全php标签

图1-29 补全流程结构 HUwhHyqDFT1N/GRuFeuNFuUPGmQou0E6FwwIpFqFFdrKKPGyfB5dGIvxvbuKWUF1

点击中间区域
呼出菜单
上一章
目录
下一章
×