0

0

使用Brackets_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:36:32

|

1859人浏览过

|

来源于php中文网

原创

 

Solvely
Solvely

AI学习伴侣,数学解体,作业助手,家教辅导

下载

立即学习前端免费学习笔记(深入)”;

Brackets功能还是很强大的。


官网:brackets.io
常见问题解决:https://github.com/adobe/brackets/wiki/Troubleshooting
快捷键:https://github.com/adobe/brackets/wiki/Brackets-Shortcuts

首次打开Brackets

 

立即学习前端免费学习笔记(深入)”;

首次打开有一个默认页面,右上角的波浪按钮用来预览,被打开的文件出现在左上角的Working Files选项下,Working Files同行右侧还有一个排序按钮,点击左上角Getting Started右侧的下拉按钮可以打开另外的工程,在Getting Started下显示了所有的工程文件,单击工程文件是预览,双击工程文件开始对文件编辑,在右下角可以改变文件的格式,如果文件有语法错误右下角还有一个圆形提示按钮,鼠标放到css文件上的颜色样式还可以预览颜色,如果是图片点击图片可在界面中预览图片以及图片相关信息。

 

立即学习前端免费学习笔记(深入)”;

汉化

 

立即学习前端免费学习笔记(深入)”;

dubug菜单→language→simple chinese

 

立即学习前端免费学习笔记(深入)”;

有关预览页面

 

立即学习前端免费学习笔记(深入)”;

● 预览页面显示不全

如果出现这种情况,就在chrome中打开:chrome://flags/, 并启用DirectWrite Windows项,启用之后还需重新启动浏览器。

 

立即学习前端免费学习笔记(深入)”;

● 打开预览页面

除了可以点击右上角的预览按钮,还可以用快捷键ctrl+alt+p

 

立即学习前端免费学习笔记(深入)”;

● 预览页面,审查某个元素,再此点击Brackets的预览按钮,原先的预览页面就失效了

此时,应该关闭或重新刷新原先的预览页面。


View 菜单项

 

立即学习前端免费学习笔记(深入)”;

● Increase Font Size,放大字体,快捷键ctrl++
● Decrease Font Size, 缩小字体,快捷键ctrl+-
● Restore Font Size, 恢复字体,快捷键ctrl+0
● Line Numbers
● Word Wrap
● Hightlight Active Line
● Hide Sidebar, 快捷键ctrl+alt+H
● Themes,右上角的Extension Manager可以获取到更多的themes

 

立即学习前端免费学习笔记(深入)”;

打开菜单项

 

立即学习前端免费学习笔记(深入)”;

● 快速导航:ctrl+shift+O
● 转到某行:ctrl + G
● 转到定义:ctrl + T
● tab跳转:ctrl + tab 和 ctrl + shift + tab

 

立即学习前端免费学习笔记(深入)”;

打开工程和文件

 

立即学习前端免费学习笔记(深入)”;

● 打开工程,即文件夹

→ 方法一:点击当前项目右侧,下拉箭头(快捷键ctrl+alt+R),点击"Open Folder"
→ 方法二:点击当前项目右侧,下拉箭头(快捷键ctrl+alt+R),点击选择其他工程,当在不同的工程切换的时候,Working Files会记录下切换前的打开文件
→ 方法三:File菜单下的Open Folder
→ 方法四:把工程文件夹直接拖到软件界面区域

 

立即学习前端免费学习笔记(深入)”;

● 打开文件

→ 方法一:打开工程中的文件
→ 方法二:右键文件,选择Brackets这种打开方式
→ 方法三:直接把文件拖动到软件界面区域
→ 方法四:File菜单下的Open

 

立即学习前端免费学习笔记(深入)”;

文件相关

 

立即学习前端免费学习笔记(深入)”;

● 新建文件:右键左侧面板,New File,或ctrl+N。如果新建一个文件,保存为hello.js,Brackets会自动为我们检测语法错误,右下角的文件类型自动变为JavaScript,
● 重命名:单击文件名进行重命名
● 在资源管理器中打开:右键文件,Show in Explorer
● 快速打开某个文件:ctrl+shift+o
● 在文件中查找关键字:右键文件,Find in
● 在文件中替换:邮件文件,Replace in

 

立即学习前端免费学习笔记(深入)”;

插件

 

立即学习前端免费学习笔记(深入)”;

→ 点击右上角的"扩展管理器"
→ 搜索emmet
→ 点击"安装",安装成功后,关闭"扩展管理器"
→ 在菜单栏上出现"Emmet"菜单项
  
创建一个文件,保存命名为main.html。输入p,按tab键,就自动补全为

。输入div.hello按tab键,就自动补全为
。输入span*4,再输入tab,会出现4对span。

 

立即学习前端免费学习笔记(深入)”;

常用的插件

 

立即学习前端免费学习笔记(深入)”;

● Brackets Git:集成Git
● Code Folding:代码折叠,比如折叠js的function
● Beautify:会出现在"编辑"菜单项下
● Emmet:html,css自动补全
● Documents Toolbar:出现横向的tab
● HTMLHint:有关html的错误提示
● Minimap:界面右侧出现缩略导航

 

立即学习前端免费学习笔记(深入)”;

插件更新

 

立即学习前端免费学习笔记(深入)”;

当"扩展管理器"出现绿色提示,就说明有安装的插件更新了。

 

立即学习前端免费学习笔记(深入)”;

Emmet更多的用法

 

立即学习前端免费学习笔记(深入)”;

● ul>li自动补全为:

 

立即学习前端免费学习笔记(深入)”;


       

 

立即学习前端免费学习笔记(深入)”;

● ul#item>li*4,自动补全为:

 

立即学习前端免费学习笔记(深入)”;


       

  •    

  •    

  •    

 

立即学习前端免费学习笔记(深入)”;

● ul.menu>li*4>{Item $},自动补全为:


  

 

立即学习前端免费学习笔记(深入)”;

● table>tr*4>td+td+td,自动补全为:

 

立即学习前端免费学习笔记(深入)”;


   
       
       
       
   
   
       
       
       
   
   
       
       
       
   
   
       
       
       
   

 

立即学习前端免费学习笔记(深入)”;

● p*4>lorem,自动补全为:

 

立即学习前端免费学习笔记(深入)”;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure impedit ducimus culpa quisquam eaque veritatis, reprehenderit quia numquam asperiores cupiditate consectetur eligendi libero corporis quibusdam, porro voluptatem, aperiam repellendus vitae!


Dolorem quis laudantium odit modi excepturi officiis amet atque dolor sint, ut officia illum ratione qui aut magni molestias ipsa error assumenda quae voluptas in vero numquam aspernatur. Veniam, commodi?


Totam quibusdam ipsam, assumenda maxime hic repudiandae ipsa, unde sunt. Necessitatibus reiciendis, doloribus nihil quisquam quasi, non voluptas ipsam ducimus dolor pariatur maiores, cum tempora laboriosam dolorem fugit, officiis aspernatur.


Architecto praesentium harum aspernatur nesciunt deleniti quis repellendus, dignissimos facere tenetur provident iure est quae et voluptas numquam iusto minus ab saepe odio vitae soluta cum enim veritatis. Ea, recusandae.

 

立即学习前端免费学习笔记(深入)”;

● 在css文件中,m10,自动补全为:

 

立即学习前端免费学习笔记(深入)”;

margin: 10px;

 

立即学习前端免费学习笔记(深入)”;

● 在css文件中,m10e,自动补全为:

 

立即学习前端免费学习笔记(深入)”;

margin: 10em;

 

立即学习前端免费学习笔记(深入)”;

● 更多在这里:http://docs.emmet.io/

 

立即学习前端免费学习笔记(深入)”;

主题

 

立即学习前端免费学习笔记(深入)”;

在"扩展管理器"安装主题,在"视图"菜单下的"主题"中设置。

 

立即学习前端免费学习笔记(深入)”;

Lint for css

 

立即学习前端免费学习笔记(深入)”;

→ 点击右上角的"扩展管理器"
→ 搜索csslint
→ 点击"安装",安装成功后,关闭"扩展管理器"

 

立即学习前端免费学习笔记(深入)”;

其它快捷键

 

立即学习前端免费学习笔记(深入)”;

● ctrl+A 全选
● ctrl+S 保存
● ctrl+C 复制
● ctrl+V 粘帖
● // 注释,或快捷键ctrl+/
● 复制行,把鼠标放在行的任意处,ctrl+D
● 复制多个连续字母,拖选要选择的的字母,ctrl+D
● 在文件中查找款关键字:ctrl+F
● ctrl+E, 把光标放在类名或元素上后ctrl+E

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

36

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

34

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

14

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

5

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.1万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.1万人学习

Kotlin 教程
Kotlin 教程

共23课时 | 2.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号