美文网首页
HTML5学习笔记 - Sublime Text插件&快

HTML5学习笔记 - Sublime Text插件&快

作者: 大大盆子 | 来源:发表于2017-07-24 10:50 被阅读163次

    前言

    其实早在一年前我就准备系统的去学习前端开发的相关技术,最开始我也是从H5开始学习,学了几个星期,能够写一些简单的网页,准备深入学习的时候,手上又有任务了,结果忙忘了,也没有做笔记,时隔一年多已经忘的差不多了,那就重头再来吧🙃。做前端必须要学会HTML5,CSS,JavaScript,它们分别扮演内容载体,表现样式,交互动效的角色。一般先从内容入手,所以先学HTML5,我习惯上用Sublime Text,那么工欲善其事,必先利其器!


    安装Sublime Text3及插件管理

    • 先下载安装Sublime Text3

    推荐一个Mac破解版下载地址Sublime Text3,顺便mark一下史蒂芬周的博客,里面有非常多Mac破解版的软件工具,我只能说,大神请收下我的膝盖~ 好了,安装的步骤就不提了。

    • 安装Package Control插件管理器

    Package Control是一个管理插件的插件,有了它我们安装插件,删除插件就很方便。而Package Control安装也很方便,control+~进入控制台,复制下面的代码再回车就会自动安装

    import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
    

    安装成功则进入Preferences可以看到如下选项:

    Package Control
    • Package Control使用

    • 安装插件
      快捷键 command+Shift+P(Tools – Command Paletter),输入install,选择install Package,再输入插件名,回车安装即可,比如安装View in Browser插件,只要输入插件名,就会匹配相应插件,点击安装即可。

      安装完成,直接右键选择View in Browser就可以从浏览器打开html文件。

      顺便再Mark一些常用的插件:
      • Beautify HTML:HTML格式化。
      • CSS Format:CSS代码格式化。
      • HTML-CSS-JS Prettify:HTML CSS JS 格式化。
      • Emmet:设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容 ,使用方法参考
      • ColorPicker:颜色选择器。
      • AllAutoComplete:自动提示。
      • Sublime​Code​Intel:代码自动提示补全。
      • DocBlockr:代码快速注释。
    • 删除插件
      快捷键 Ctrl+Shift+P,输入remove,选择remove Package,再输入插件名,回车即可删除安装的插件

    快捷键

    • command+shift+P :打开命令面板,比如输入sshtml进行模糊查询,选中切换到html模式
    • control+~:打开控制台
    • ** command +,**:打开设置文件
    • command+P:查找文件
    • command+F:调出搜索框进行搜索
    • Tab :自动补全
    • ! + Tab :快速生成html头部信息
    • 标签名 + Tab :快速生成标签格式
    • command+Z:撤销
    • command+Y:前进
    • command+shift+L:同时编辑选中的区域
    • command+J:将选中的区域合并成一行
    • command+/:注释
    • command+N:新建文件
    • command+shift+N:新建窗口
    • command+option+F:自动缩进对齐(Beautify HTML)
    • command+K+O:打开本地文件夹
    • command+K+T:折叠所有标签属性
    • command+K+1:折叠所有标签代码
    • command+K+0:展开所有代码

    相关文章

      网友评论

          本文标题:HTML5学习笔记 - Sublime Text插件&快

          本文链接:https://www.haomeiwen.com/subject/sdwskxtx.html