webstorm快捷键大全
html显示特殊字符
JavaScript开发工具WebStorm教程：用户界面简介 概述：WebStorm是一款优秀的JavascriptIDE，在本文中将简要介绍一下WebStorm的用户界面，帮助用户通过自己的工作环境找到合适的工作方式。 ?JavaScript开发工具WebStorm教程：用户界面简介 ?JavaScript开发工具WebStorm教程：WebStorm工具窗口 ?JavaScript开发工具WebStorm教程：配置个人文件编码 ?JavaScript开发工具WebStorm教程：IntelliLang使用示例 ?JavaScript开发工具WebStorm教程：创建和优化导入 ?JavaScript开发工具WebStorm教程：XSLT 支持 WebStorm是一款优秀的Javascript IDE，在本文中将简要介绍一下WebStorm的用户界面，帮助用户通过自己的工作环境找到合适的工作方式。 当用户第一次运行WebStorm或者没有打开项目，在WebStorm显示的欢迎屏幕上，可以快速访问的主要入口点。当打开了一个项目的时候，WebStorm 会显示主窗口，该窗口有六个逻辑领域，分别是菜单、工具栏、导航栏、状态栏、编辑器、WebStorm 工具窗口，如下图所示，图中已用红色的标签标示：
欢迎界面 在WebStorm显示的欢迎界面上，这时还没有项目打开。从这个屏幕上，你可以快速访问WebStorm的主要起始点。当你在WebStorm唯一实例中关闭当前项目时，就会出现欢迎界面。如果说你正在运行多个项目的话，关闭一个项目将会导致关闭项目运行的WebStorm窗口，除了最后一个。
H5前端开发学习笔记 1、在W3C中查询不到但各大浏览器普遍支持的标签： 名称：marquee，跑马灯标签。文字和图片均可以使用 用法： 属性：behavior，内容遇到边界时的运动方式，slide停在边界处，alternate从边界处弹回； direction，内容运动的方向，left\right\up\down，代表左、右、上、下 scrollamount，内容运动的速度 loop，内容运动的次数 2、Html中的标签是用于定义语义的，这是非常重要的概念，在学习过程中，一定只关注语义，不要关注样式 3、很多以前常用的标签已经被废弃了，要特别注意，如
\
webstorm快捷键说明 Editing编辑相关快捷键 ?Ctrl + Space： Basic code completion (the name of any class, method or variable) 基本代码完成（任何类、函数或者变量名称），改为Alt+S ?Ctrl + Shift + Enter： Complete statement 补全当前语句 ?Ctrl + P： Parameter info (within method call arguments) 参数信息包括方法调用参数 ?Ctrl + mouse over code Brief Info 简单信息 ?Ctrl + F1 Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息 ?Alt + Insert Generate code…（Getters, Setters, Constructors）新建一个文件或者生成代码，…构造函数，可以创建类里面任何字段的getter与setter方法 ?Ctrl + O Override methods 重载方法 ?Ctrl + I Implement methods 实现方法
?Ctrl + Alt + T Surround with…（if, else, try, catch, for, etc）用* 来围绕选中的代码行，（* 包括if 、while 、try catch 等） ?Ctrl + / Comment/uncomment with line comment 行注释/取消行注释 ?Ctrl + Shift + / Comment/uncomment with block comment 块注释/取消块注释 ?Ctrl + W Select successively increasing code blocks 选择代码块，一般是增量选择 ?Ctrl + Shift + W Decrease current selection to previous state 上个快捷键的回退，减量选择代码 ?Alt + Q Context info 上下文信息 ?Alt + Enter Show intention actions and quick-fixes 意图行动，快速见效 ?Ctrl + Alt + L Reformat code 根据模板格式对代码格式化 ?Tab/ Shift + Tab Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理 ?Ctrl + X or Shift + Delete Cut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板
Editing编辑 Ctrl + Space Basic code completion (the name of any class, method or variable) 基本代码完成（任何类、函数或者变量名称），改为Alt+S Ctrl + Shift + Enter Complete statement 补全当前语句 Ctrl + P Parameter info (within method call arguments) 参数信息包括方法调用参数 Ctrl + mouse over code Brief Info 简单信息 Ctrl + F1 Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息 Alt + Insert Generate code…（Getters, Setters, Constructors）生成代码，…构造函数，可以创建类里面任何字段的getter与setter方法Ctrl + O Override methods 重载方法 Ctrl + I Implement methods 实现方法 Ctrl + Alt + T Surround with…（if, else, try, catch, for, etc）用* 来围绕选中的代码行，（* 包括if 、while 、try catch 等） Ctrl + / Comment/uncomment with line comment 行注释/取消行注释 Ctrl + Shift + / Comment/uncomment with block comment 块注释/取消块注释 Ctrl + W Select successively increasing code blocks 选择代码块，一般是增量选择 Ctrl + Shift + W Decrease current selection to previous state 上个快捷键的回退，减量选择代码 Alt + Q Context info 上下文信息 Alt + Enter Show intention actions and quick-fixes 意图行动，快速见效 Ctrl + Alt + L Reformat code 根据模板格式对代码格式化 Tab/ Shift + Tab Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理 Ctrl + X or Shift + Delete Cut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板 Ctrl + C or Ctrl + Insert Copy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板 Ctrl + V or Shift + Insert Paste from clipboard 粘贴剪切板上的内容 Ctrl + Shift + V Paste from recent buffers 粘贴缓冲器中最新的内容 Ctrl + D Duplicate current line or selected block 复制当前行或者所选代码块 Ctrl + Y Delete line at caret 删除插入符号位置行 Ctrl + Shift + J Smart line join（HTML and JavaScript only）加入智能行（HTML 和JavaScript） Ctrl + Enter Smart line split（HTML and JavaScript only）分离智能行（HTML 和JavaScript） 以上快捷键是根据webstrom官网给出的pdf翻译而来（只整理了windows下的）
概述 此文章用来记录jetbrain系列工具使用的小技巧。如果没有特别说明的话，这些技巧在webstorm、phpstorm、idea中是通用且是跨平台的。 live edit功能与浏览器实现同步实现步骤 live edit是一个免刷新的功能，能捕捉到页面的改动（css、html、js改动），然后浏览器自动刷新，这样提高了开发的效率。很赞的一个功能，唯一不足的是，要安装JB插件到浏览器中，对于不能安装该插件的浏览器来说，该功能就鸡肋了。 1. 打开WebStore的设置对话框，找到live edit选项，选中Enable live editing。 2. 打开Chrome浏览器，进入Chrome网上商店，搜索JetBrains IDE Suport扩展程序。点击“添加至 Chrome“按钮，安装该扩展程序到Chrome。这时候，Chrome浏览器工具栏上就会出现一个JB图标。 注(有时可能在网上商店里搜索不到，我这里提供了一个地 址：https://https://www.doczj.com/doc/01927691.html,/webstore/detail/jetbrains-ide- support/hmhgeddbohgjknpmjagkdomcpobmllji ) 3. 在WebStorm中新建一个html文件，然后在页面内单击鼠标右键，选择debug选项。
4. 这时，webStorm会启动默认浏览器，并且激活JB浏览器插件。 5. 返回到Webstorm编辑器，尝试修改页面中的内容，然后打开浏览器，看看页面是否自动刷新了没。如 果配置正确的话，一改动代码，浏览器会立刻刷新的，这简直就是重构开发的圣器呀。webstorm内置服务器失效的问题 默认情况下，我们可以直接运行本地的html页面，它内部会开启64432端口来运行我们的页面，这样我们不要配置烦杂的后台环境，也可以简单测试一些需要服务器配合的页面了。启动服务的方式如下：
SublimeText及插件安装 Sublime Text安装 1.准备安装程序：sublimetext.dmg 2.双击安装程序，稍后出现以下画面： 3.将“Sublime Text”拖进“Applications”，稍后 在“Launchpad”中出现程序图标： 4.点击“Sublime Text”图标进入程序，出现以 下画面即安装完成：
5.消息框提示是否更新版本，可以自行选择 6.因为是未注册版，经常会出现要求注册的 消息提示，无需理会，关闭即可 安装插件管理器Package Control 1.在联网状态下，打开“Sublime Text”后，通 过以下菜单：
或快捷键Ctrl+~（键盘左上角esc下面的那个键）打开控制台，如下： 2.将以下代码复制到输入框中后按回车键 import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urll ib.request.install_opener(urllib.request.build_opener(urllib.request.Pr oxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlo pen('https://www.doczj.com/doc/01927691.html,/'+pf.replace(' ','%20')).read()) 3.如果出现以下提示，则退出“Sublime Text” （注意是退出：?+Q，不是关闭）后再打开
WebStorm APICloud 插件的安装和使用说明（一）开源地址：https://https://www.doczj.com/doc/01927691.html,/APICloud 依赖环境：java 当前支持环境 ?WebStorm ?Windows 或Mac ?Android 和ios手机 首先下载插件 1、通过APICloud官方网站下载webStorm-APICloud.zip文件。 2、把webStorm-APICloud.zip解压到WebStorm的工作空间中。
打开WebStorm 的'External Tools'选项 Mac 点击状态栏中WebStorm ,在下拉菜单中，点击Preferences Windows
安装创建新应用插件 1.新建空白应用。在'External Tools'选项中，点击'+' 。在Create Tool中，填写如下内容： name : 新建空白应用 Program : java Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ default
2.新建底部导航应用。在'External Tools'选项中，点击'+' 。在Create Tool中，填写如下内容： name : 新建底部导航应用 Program : java Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ bottom 3.新建首页导航应用。在'External Tools'选项中，点击'+' 。在Create Tool中，填写如下内容： name : 新建首页导航应用 Program : java Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ home 4.新建侧边导航应用。在'External Tools'选项中，点击'+' 。在Create Tool中，填写如下内容： name : 新建侧边导航应用 Program : java Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ slide
WebStorm的优势和常用快捷键 WebStorm相较其他的IDE优势； 1智能的代码补全 支持不同浏览器的提示，还包括所有用户自定义的函数(项目中),代码补全包含了所有流行的库，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。 2.代码格式化 代码不仅可以格式化，而且所有规则都可以自己来定义。 3.html提示 大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。而且html里面还能有js提示。 4.联想查询 只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义；可以全项目查找函数或者变量，还可以查找使用并高亮 5.代码重构 这个操作有些像Resharper，熟悉Resharper的用户应该上手很快，支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。 6.代码检查和快速修复 可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。代码调试 支持代码调试，界面和IDEA相似，非常方便。 7.代码结构浏览 可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。 8.代码折叠 功能虽小，不过胜在方便高效。 9.包裹或者去掉外围代码
自动提示包裹或者去掉外围代码，一键搞定。 配置和使用： 1.主题，把下载好的主题包放在C:\Users\jikey(用户 名)\.WebIde10\config\colors目录下，然后重启webstorm，settings –> colors & fonts –>scheme name中选择主题名。如果出现特别长代码对齐白线，在Editor –> Appearance –> Show vertical indent guides 前面的勾去掉即可。 2.添加VIM插件： File -> Settings -> Plugins -> Browse repositories -> 搜索vim，对它单击右键Download and install，然后重启IDE就可以了。 3.除了webstorm之外，此公司还提供另外一个针对phper的开发工具,phpStorm，主页上说明，phpstorm包括所有webstorm的功能。但是习惯于大括号去方法名在同一行显示，所以还得配置：File -> Settings -> code style -> PHP -> Wrapping and Braces -> Braces placement ->In method declaration : End of line. 4.zencoding默认的快捷键是Tab，如果你需要修改zencoding快捷键的话：File -> Setting -> Live Templates 。 5.在开发js时发现，需要ctrl + return 才能选提示候选项，又需要配置：File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion:’Smart’ 改为 Always 6.注意的地方是：Webstorm的调试不支持中文路径中文文件名。 Webstorm的一些常用快捷键： 1. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。 2. ctrl + j: 输出模板 3. ctrl + b: 跳到变量申明处 4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation) 5. ctrl + []: 匹配 {}[] 6. ctrl + F12: 可以显示当前文件的结构
webstorm常用快捷键 查找/代替 快捷键说明 ctrl+shift+N通过文件名快速查找工程内的文件（必记） ctrl+shift+alt+N通过一个字符快速查找位置（必记） ctrl+F在文件内快速查找代码 F3查找下一个 shift+F3查找上一个 ctrl+R文件内代码替换 ctrl+shift+R指定目录内代码批量替换 ctrl+shift+F指定目录内代码批量查找 ctrl+R文件内代码替换 界面操作 快捷键说明 ctrl+shift+A快速查找并使用编辑器所有功能（必记） alt+[0-9]快速拆合功能界面模块 ctrl+shift+F12最大区域显示代码（会隐藏其他的功能界面模块）alt+shift+F将当前文件加入收藏夹 ctrl+alt+s打开配置窗口 ctrl+tab切换代码选项卡（还要进行此选择，效率差些）alt+<-或->切换代码选项卡 ctrl+shift+N通过文件名快速查找工程内的文件（必记） ctrl+shift+alt+N通过一个字符快速查找位置（必记） ctrl+F在文件内快速查找代码 F3查找下一个 shift+F3查找上一个 ctrl+R文件内代码替换 ctrl+shift+R指定目录内代码批量替换 ctrl+shift+F指定目录内代码批量查找 ctrl+R文件内代码替换 快捷键说明 ctrl+shift+A快速查找并使用编辑器所有功能（必记） alt+[0-9]快速拆合功能界面模块 ctrl+shift+F12最大区域显示代码（会隐藏其他的功能界面模块）alt+shift+F将当前文件加入收藏夹 ctrl+alt+s打开配置窗口 ctrl+tab切换代码选项卡（还要进行此选择，效率差些） alt+<-或->切换代码选项卡 ctrl+F4关闭当前代码选项卡
webstorm的快捷键说明： Editing编辑相关快捷键 Ctrl + Space： Basic code completion (the name of any class, method or variable) 基本代码完成（任何类、函数或者变量名称），改为Alt+S Ctrl + Shift + Enter： Complete statement 补全当前语句 Ctrl + P： Parameter info (within method call arguments) 参数信息包括方法调用参数 Ctrl + mouse over code Brief Info 简单信息 Ctrl + F1 Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息 Alt + Insert Generate code…（Getters, Setters, Constructors）新建一个文件或者生成代码，…构造函数，可以创建类里面任何字段的getter与setter方法 Ctrl + O Override methods 重载方法 Ctrl + I Implement methods 实现方法 Ctrl + Alt + T Surround with…（if, else, try, catch, for, etc）用 * 来围绕选中的代码行，（ * 包括 if 、 while 、 try catch 等） Ctrl + / Comment/uncomment with line comment 行注释/取消行注释 Ctrl + Shift + / Comment/uncomment with block comment 块注释/取消块注释 Ctrl + W Select successively increasing code blocks 选择代码块，一般是增量选择Ctrl + Shift + W Decrease current selection to previous state 上个快捷键的回退，减量选择代码 Alt + Q Context info 上下文信息 Alt + Enter Show intention actions and quick-fixes 意图行动，快速见效 Ctrl + Alt + L Reformat code 根据模板格式对代码格式化 Tab/ Shift + Tab Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理
Web前端开发神器——Webstorm不用多介绍，强大的智能提示只是它的一个功能特性，它还具有许多有用的特性，比如版本控制、本地历史、即时模板等。Webstorm还内置了对SASS、NodeJS、CoffeeScript、Jade 的支持，并且可自定义代码格式化规则。 Plugins（插件） Markdown 支持md，点击下面的Text/Previev可以切换代码/预览视图 AngularJS 支持AngularJS的标签提示
AceJump 快速定位光标位置，有了它你可以丢弃鼠标了 最重要的插件： Webstorm APICloud Plugins
WebStorm扩展插件，包括：应用管理、应用框架、页面模板、代码提示、代码管理、Widget打包、真机同步、日志输出、管理自定义AppLoader等功能，其他的功能插件也在不断增加；所有插件都已开源，开发者可以下载这些插件在自己的WebStorm中安装后使用，开发者也可以在此基础上按需求扩展自己的插件。 常用快捷键 Tab: 生成代码
alt + [0-9]: 快速拆合功能界面模块 alt + <-或->: 切换代码选项卡 alt + F1: 查找代码在其他界面模块的位置，颇为有用 alt + Insert: 新建一个文件或其他 alt + shift + F: 将当前文件加入收藏夹 alt + up/down: 上一个/下一个方法 ctrl + / 或ctrl + shift + /: 注释（// 或者/*…*/ ） ctrl + ]/[: 光标到代码块的前面或后面 ctrl + <-或->: 以单词作为边界跳光标位置 ctrl + Alt + B: Go to implementation(s) 跳转方法实现处 ctrl + alt + enter: 在当前行前面新建行 ctrl + alt + L: 格式化代码 ctrl + alt + s: 打开配置窗口 ctrl + alt + shift + c: 拷贝相关数据包括路径和所在行 ctrl + Alt + T: with…（if, else, try, catch, for, etc）用* 来围绕选中的代码行，（* 包括if 、while 、try catch 等） ctrl + B: 快速打开光标处的类或方法 ctrl + Backspace: Delete to word start 删除文字开始 ctrl + B或ctrl + 鼠标左键单击: 快速打开光标处的类或方法，（NB的功能）ctrl + C: 提交代码 ctrl + D: 复制当前行 ctrl + Delete: Delete to word end 删除文字结束 ctrl + E: 最近打开的文件 ctrl + F: 在文件内快速查找代码 ctrl + F4: 关闭当前代码选项卡 ctrl + G: 到指定行的代码 ctrl + p: 向远程版本库推送更新 ctrl + R: 文件内代码替换 ctrl + shift + A: 快速查找并使用编辑器所有功能（必记） ctrl + shift + alt + N: 通过一个字符快速查找位置（必记） ctrl + shift + c: 拷贝文件路径 ctrl + shift + enter: 新建行 ctrl + shift + F: 指定目录内代码批量查找 ctrl + shift + F12: 最大区域显示代码（会隐藏其他的功能界面模块） ctrl + shift + F7、ALT + F3: 高亮显示所有该文本(选中文本)，按Esc高亮消失。ctrl + shift + I: Open quick definition lookup 打开定义快速查找
《Web前端设计基础》教学大纲 适用专业：计算机科学与技术、软件工程、物联网 课程类别：非学位课，专业基础课 课程学时：51学时（周2+1学时） 课程编号：9051404 课程学分：3学分 一、课程性质 《Web前端设计基础》课程是计算机科学与技术、软件工程、物联网工程专业的一门专业基础课程，以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握HTML5、CSS3以及JavaScript脚本语言的相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计Web站点的基本技能，更要使学生充分了解Web思想，为进一步学习后续课程打下良好的基础。 二、课程教学目标与基本要求 本课程的教学目标是让学生理解HTML5、CSS3以及JavaScript脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用对象的属性方法，使用DOM技术编写页面的客户端程序，通过项目实训，培养学生具备设计实现Web客户端页面的初步能力。 本课程教学基本要求是让学生理解Web设计的基本原则、栏目和网站目录结构定义、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识；能够熟练运用HTML5中的文字、链接、列表、表格、表单、图像、多媒体等标记语言设计制作网页；熟练掌握CSS3对网页进行布局和修饰的基本方法；掌握JavaScript脚本语言的基本语法，理解对象的概念及使用JavaScript来编写客户端脚本程序。 三、课程内容 其中标记★为难点 第1章 Web技术概述 1.1 Internet概述 1.1.1 理解TCP/IP 1.1.2 理解主机和IP地址 1.1.3 理解域名和DNS 1.2 Web概述 1.2.1 了解Web历史 1.2.2 ★掌握Web体系结构 1.2.3 理解基本Web技术 1.2.4 了解Web服务器 1.3 超文本与标记语言 1.3.1 掌握超文本与超媒体 1.3.2 掌握标记语言 1.4 Web标准 1.4.1 掌握Web标准体系 1.4.2 了解采用Web标准的优势