目标
- 目标一、掌握Brackets前端开发工具的使用
- 目标二、开发第一个BootStrap网页（模板，步骤）
- 目标三、了解基于Brackets 的10款常用插件
- 目标四、掌握Emment插件的使用
内容
一、Brackets开发工具的下载、安装、使用技巧
1.1 简介
Brackets - 强大免费的开源跨平台Web前端开发工具IDE(HTML/CSS/Javascript代码编辑器)是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持 Windows、Linux 以及 OS X 平台。
Brackets 的特点是简约、优雅、快捷！它没有很多的视图或者面板，也没太多花哨的功能，它的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等等。和 Sublime Text、Everedit 等通用代码编辑器不一样，Brackets 是专门针对 WEB 前端开发而生…….
1.2 下载并安装
官网：http://brackets.io/ 目前最新版本是1.1。
1.3 使用
参考：http://www.iplaysoft.com/brackets.html。
1.4 Brackets的十款常用插件简介
Brackets 10款常用插件：1、显示你打开文件对应的图标
2、javascript 全局变量高亮
3、皮肤插件
4、javascript 代码审查，建议所写的代码都检查一
下
5、更改代理，Brackets安装扩展是被墙了，如果用gae，那么这个插件将会很好用
6、emmet 打代码飞起
7、为你的编辑器增加工作空间管理
8、代码格式化
9、代码备份
10、代码快折叠
二 第一个BootStrap网页
2.1、下载BootStrap文件
2.2、了解一下BootStrap下载的文件内容
2.3、BootStap基本模板
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2.4、模板说明
1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中。
2. <meta name="viewport" content="width=device-width, initial-scale=1">在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。<meta name="viewport" content="width=device-width, initial-scale=1">
3、在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
三、Brackets强大的Emment插件的使用
Emment的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度. 去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。
3.1、快速编写HTML代码
1. 初始化
HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入"!"或"html:5"，然后按Tab键：
html:5 或!：用于HTML5文档类型
html:xt：用于XHTML过渡文档类型
html:4s：用于HTML4严格文档类型
2. 轻松添加类、id、文本和属性
连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：
连续输入类和id，比如p.bar#foo，会自动生成
Html代码
<p class="bar" id="foo"></p>
下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：
Html代码
<h1>foo</h1>
<a href="#"></a>
3. 嵌套
现在你只需要1行代码就可以实现标签的嵌套。
>：子元素符号，表示嵌套的元素
+：同级标签符号
^：可以使该符号前的标签提升一行
4. 分组 你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：
Html代码
1. <div class="foo">
2. <h1></h1>
3. </div>
4. <div class="bar">
5. <h2></h2>
6. </div>
5. 隐式标签
声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。
在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。
下面是所有的隐式标签名称：
li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
6. 定义多个元素
要定义多个元素，可以使用*符号。比如，ul>li*3可以生成如下代码：
Html代码
<ul>
<li></li>
<li></li>
<li></li>
</ul>
7. 定义多个带属性的元素
如果输入 ul>li.item$*3，将会生成如下代码：
Html代码
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
3.2、CSS缩写
1. 值
比如要定义元素的宽度，只需输入w100，即可生成
Css代码
width: 100px;
除了px，也可以生成其他单位，比如输入h10p+m5e，结果如下：
Css代码
height: 10%;
margin: 5em;
2. 附加属性
可能你之前已经了解了一些缩写，比如 @f，可以生成：
Css代码
@font-face {
font-family:;
src:url();
}
一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过"+"符号来生成，比如输入@f+，将生成：
Css代码
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
单位别名列表：
p 表示%
e 表示 em
x 表示 ex
3. 模糊匹配
如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：
Css代码
overflow: hidden;
4. 供应商前缀 如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：
Css代码
1. -webkit-transform: ;
2. -moz-transform: ;
3. -ms-transform: ;
4. -o-transform: ;
5. transform: ;
你也可以在任意属性前加上"-"符号，也可以为该属性加上前缀。比如输入-super-foo：
Css代码
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：
Css代码
-webkit-transform: ;
-moz-transform: ;
transform: ;
前缀缩写如下：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
5. 渐变
输入lg(left, #fff 50%, #000)，会生成如下代码：
Css代码
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
3.3、附加功能
生成Lorem ipsum文本
Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，比如lorem10，将生成：
引用
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
更多关于Emment插件内容请参考：
四、总结
1. BootStrap网页的开发流程与准备
2. Brackets前端开发工具的介绍
3. Emment插件的详细介绍
本文暂时没有评论，来添加一个吧(●'◡'●)