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

前言

其实早在一年前我就准备系统的去学习前端开发的相关技术，最开始我也是从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：展开所有代码