1.1开发工具-页面制作

开发工具

文本编辑器

• Sublime Text
• Notepad++
• EditPlus

IDE(集成开发环境)

• WebStorm
• IntelliJ IDEA
• Eclipse

Sublime Text优点

• Sublime Text轻量级开发工具，跨平台，启动快
• 多行选择
• 各种实用插件
• Snippets可以新建代码片段
• 支持VIM兼容模式

Sublime Text常用快捷键

• 查找（Ctrl+P)
  举例子：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名(ctrl+r)，3、输入：和数字，跳转到文件中该行代码(ctrl+g)4、输入#和关键字，查找变量名(ctrl+;)。
• 命令面板 （Ctrl+Shift+P）
  举例子：1、输入sider 可以选择view:Toggle Sider Bar打开或关闭侧边栏
• 多行选择（Ctrl+D,Ctrl+Shift+L）
• 全部选择 （Alt+F3）

常用插件

• Package Control
  package 管理工具，通过这个插件可以添加、卸载其他的插件。
  安装地址:https://packagecontrol.io/ ,打开View -> Showconsole (ctrl+`)，输入复制过来的安装命令。
• Emmet
  可以快速的编写html和css代码
  具体安装方法：1.Ctrl+shift+p 输入PCI 2.选择Package Control:Install Package
  3.等待输入安装插件的名称，提示中会出现，选择安装。4.重启Sublime。
• DocBlockr
  可以方便产生函数的注释
• SideBarEnhancements
  右键菜单增强工具
• Termail
  在Sublime中可以直接打开命令行终端

实践操作

• 1.新建Html文件
  Ctrl+n (新建) -> ctrl+shift+p (命令面板) 中输入ssh(设置新建文件的类型) ->选择 set syntax:html -> 输入 "!"后按 "Tab "键，就可以生成一个Html文件的框架了。
• 2.html代码书写的快捷方式
  例如：输入 div>#nav>ul>li*4>a 后按 tab 键，后生成代码

• 3.添加JS的注释模板

Snippets 代码片段

• tools -> New Snippets (新建代码片段)

    
    
    hello
    
    source.html

开启VIM兼容模式

• Preferences -> settings user

{
    "font_size": 11,
    "ignored_packages":
    [

    ]
}

Sublime text 快捷键补充

Ctrl+N 新建窗口
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+Shift+c转换为utf8
Ctrl+R 搜索指定文件的函数标签
Ctrl+G 跳转到指定行
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+T 词互换
Ctrl+U 软撤销
Ctrl+W 关闭当前编辑窗口
Ctrl+X 删除当前行
Tab 缩进 自动完成
Shift+Tab 去除缩进
Ctrl+Enter 光标后插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签
shift+鼠标右键 列选择
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑
Alt+. 闭合当前标签
F6 检测语法错误
F9 行排序(按a-z)
F11 全屏模式
Ctrl+Shift+Enter 光标前插入行
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
Ctrl+Shift+K 删除整行, 同Ctrl+X
Ctrl+Shift+L 鼠标选中多行（按下快捷键），即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+Shift+P 打开命令面板
Ctrl+Shift+/ 注释已选择内容
Ctrl+Shift+Enter 光标前插入行
Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换
Ctrl+鼠标左键 可以同时选择要编辑的多处文本
Shift+鼠标右键（或使用鼠标中键）可以用鼠标进行竖向多行选择
Alt+Shift+1~9（非小键盘）屏幕显示相等数字的小窗口