最近开始使用一个新的编辑器,是Adobe开发的开源的项目,与Sublime Text2相比有两点优势:
Adobe Brackets是一个开源的基于HTML/CSS/JavaScript开发,运行在native shell上的集成开发环境。该项目由Adobe创建和维护,根据MIT许可证发布。提供Windows和OS X平台支持。
Brackets的特点是简约、快捷,没有很多的视图或者面板,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。
官方提供简体中文语言包,在菜单栏处选择debug->language->simple chinese就可更换为简体中文版本
左侧目录树顶部会显示你最近打开的正在工作的几个文档,非常的方便。
Brackest会检测文档是否符合html规范,并且还有JS错误提示,点击黄色三角感叹号就会弹出错误提示,如下图
把光标放在一个class或id属性的标签名称上,按下Ctrl/Cmd + E(“编辑”)或退出编辑。Brackets将搜索项目下所有CSS文件,然后打开一个内嵌的编辑器嵌入在HTML文件中,可以让你迅速修改CSS代码。唯一美中不足的是:搜索的是项目下所有的CSS文件,如果能修改成所搜当前文件使用的CSS文件就更好了。
Brackets内建取色器,提供RGBa、HEX、HSLa的颜色编码形式。把光标放在一个颜色编码上,按下Ctrl/Cmd + E(“编辑”),退出取色器窗口需要使用Esc键。
Brackets提供网页即时预览功能。使用该功能时,Brackets调用Chrome浏览器打开当前页面,此后修改html、css、javascript并保存后,所修改的内容会即时响应到浏览器中的页面,无须手动刷新页面。这是Brackets最大的一个亮点,有两个显示器的coder有福了,可以分屏显示Brackets和chrome,即时修改即时预览,无需切换编辑器/浏览器和刷新页面。
目前即时预览功能的一些限制:
它仅适用于Chrome浏览器为目标浏览器,你必须安装Chrome。
它依赖于在Chrome浏览器中的远程调试功能,这是一个命令行标志启用。在Mac上,如果你已经在使用Chrome浏览器,这时启动“即时预览”,Brackets将询问你是否要重新启动Chrome浏览器启用远程调试功能。
只能同时对一个HTML文件进行预览 – 如果切换另一个HTML文件,Brackets将关闭原来的预览。
Ctrl/Cmd+Shift+H 可以呼出与关闭文件树
Ctrl/Cmd + E 快速预览/编辑 css样式/javascript函数
Ctrl/Cmd + +/- 放大缩小编辑区字体大小
Ctrl/Cmd + 0 重置编辑区字体大小
Ctrl/Cmd + Alt + P 打开即时预览功能
Ctrl/Cmd + / 行注释
Ctrl/Cmd + Alt + / 块注释
不足:不支持代码折叠。
1.代码格式化插件:Beautify
直接打开Brackets 插件管理器,搜索安装beautify。
安装完毕后,选择菜单上的编辑→beautify(或使用快捷键ctrl+alt+L)完成代码格式化
2.HTML代码编辑:Emmet
最强大的HTML和CSS快速编辑插件
3.CSS和JS压缩插件:Minify
很强大的插件,集成了CSS和JS的压缩,会在同个目录下自动生成*.min.*格式的文件。
4.css3代码自动补全插件:auto prefix
使用CanIUse上的css3数据,自动补全css3前缀和浏览器兼容,不过可能有些新了。有一些旧版本的浏览器会被抛弃掉。
5.代码折叠插件:brackets-code-folding
安装URL:https://github.com/thehogfather/brackets-code-folding
默认不支持代码的可折叠功能。通过此扩展的安装,对代码添加可折叠功能。
6.当关闭编辑器时自动保存所有打开未保存的文件:Autosave Files on Window Blur
类似Sublime Text2、phpstorm / webstorm的风格,之前提到的不足全部解决了。
7.Brackets主题:theme
安装URL:https://github.com/MiguelCastillo/Brackets-Themes
该扩展为一个用于使用基于CodeMirror的主题集的扩展。安装该扩展后应用程序菜单中出现“Themes”菜单,开发者可以为应用程序界面从中选用一个主题。
其他的等待发现中,如果你发现有优秀的插件,不妨给我推荐一下。
喜欢这篇文章的朋友,欢迎关注、收藏、转发、评论,你的支持,是我每日更新的动力!
喜欢前端的朋友可以点击关注一下,每日分享精彩的前端文章!
起编程,相信很多人都不陌生,立马就会想到像:java、C、C#、C++、SQL等等用的比较广泛的编程语言。网页的编写虽然比不上这些编程语言那么的复杂,但是一个好的网页,是需要大量的:样式设计、利用ps修图、以及JavaScript等等技术相结合。那么今天就为大家简单的说说HTML的编写,对网页的基本编写的操作有个简单的认识,相信看完下面的内容,聪明的你,马上就能写出属于自己的网页呢~
编写工具:
Phase 5、 Programmer’s Notepad、SynWrite、PlainEdit.Net、Notepad++、CoffeeCup、jEdit、Sublime Text 2、Brackets、Aptana Studio 3(这10个都是我从网上搜的,小编除了Notepad++,其他都没用过~~~)其实编写工具一定要适合自己,才是最好的,所以小编一直都喜欢用”记事本”编写,O(∩_∩)O哈哈~,当然推荐一下:Dreamweaver也是相当好用的。
对于初学者来说,记事本绝对是最好的编写工具,因为所有的代码都要自己一个一个写,没有其他编写工具的快捷键提示。
编写方法:
新建文件:
新建一个记事本文件,并将后缀名改为 .html ,然后在鼠标右键选择用记事本打开。因为.html的文件默认的是以网页的形式打开的,所以,修改后缀名这一步也是写网页中重要的一步。
基本框架:基本的网页一般包括网页的标签<html>,网页的头<head>,网页的主体(身体)<body>,并且在网页的编写中有一个原则,就是几乎所有的标签都是一一对应的。即<>...</>。
网页的标题:
添加<title>...</title>标签即可编写网页的标题,随便写啥都可以~
网页内容的编写:
网页的内容只要你能想的到的,都可以写上去,直接在<body>...</body>里随便的输入内容吧~
效果图:
修饰:
利用各种标签来对你想到的内容进行格式、颜色、等内容上的修改,下面我简单列举几个常用的标签,小伙伴们可以自己动手试试达到想要的效果,没有涉及到的还请谅解。
添加背景图片:<body background="图片所在路径+图片全名">
背景颜色:<body color="颜色的英文名称或者颜色代码,可去网上搜索">
添加图片:<img src="图片所在路径+图片全名">
文字设置:<font size=”文字大小” face=”字体” color=”文字颜色”>...</font>
居中:<center>...</center>
换行:<br>
段落:<p>...</p>
超链接:<a href=\"链接的地址\">链接的名字</a>
移动字体:<marquee direction=lift或者right>写上你想写的字</marquee>
字体加粗:<b>添加文字</b>
字体斜体:<i>添加文字</i>
字体下划线:<u>添加文字</u>
字体删除线:<s>添加文字</s>
字体加大:<big>添加文字</big>
可以试试在<head>...<head>中试试加入我的这段代码哦~
<head>
<title>我的网页demo</title>
<div id="boom"><marquee direction=lift>欢迎各位小伙伴转发~关注~赞~评论~有任何错误或是问题都说出来哦
~~~</marquee></div>
<script language="javascript">
function Color()
{
var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
color=color.split("|");
document.getElementById("boom").style.color=color[parseInt(Math.random() * color.length)];
}
setInterval("Color()",400);
</script>
</head>
今天就介绍到这里,欢迎各位看官给予建议和批评,明天我会写一篇关于《局域网内访问他人电脑上的自制网页》的文章,感兴趣的童鞋可以关注一波~感谢大家~
为一个前端工程师,我们平常都会有自己所喜爱、习惯的开发工具。像水猿,比较常用的前端开发工具也就是sublime text和webstorm。接触到brackets也是一次偶然,发现这个工具风格很符合我的胃口,相对webstorm的简介、美观,可以时事浏览。
不过相似于webstorm,都因为集成了很多插件,当项目过大,硬件配置没有更新的情况,不适合做大量页面开发。
*请认真填写需求信息,我们会在24小时内与您取得联系。