阅读(4044)
赞(11)
IntelliJ IDEA：使用HTML
2018-08-07 10:11:10 更新
HTML
IntelliJ IDEA为HTML提供了强大的支持，包括语法和错误突出显示、根据代码样式进行格式化、结构验证、代码完成、调试会话期间的实时预览（实时编辑）等等。
HTML规范可使用IntelliJ IDEA设置（可以使用Ctrl+Alt+S打开）的“语言和框架|模式和DTD（Languages and Frameworks | Schemas and DTDs）”页面中的默认HTML语言级别首选项进行配置。默认情况下，假定来自W3C的规范HTML 5.0。
创建HTML文件
- 在主菜单上，选择：文件|新建（File | New），然后在弹出列表中选择“HTML文件（HTML File）”。IntelliJ IDEA基于HTML文件模板创建存根文件， 并在编辑器中打开它。
在HTML文件中生成引用
IntelliJ IDEA可以<head>中在产生<script>，<link>或<img>标签。对于<img>标签，IntelliJ IDEA还会生成width和height属性。
- 在“项目（Project）”工具窗口中选择JavaScript，CSS或图像文件，然后将其拖到HTML文件中。
在浏览器中预览HTML文件的输出
您可以在IntelliJ IDEA默认浏览器中或在您选择的浏览器中预览包含Web内容的文件。
在默认浏览器中打开页面预览
- 在编辑器中打开文件，然后在主菜单上选择：View|浏览器中打开（View | Open in Browser ）。
提示：要在浏览器中预览PHP页面，您需要先配置与服务器的同步。
在您选择的浏览器中打开页面预览
- 在编辑器中打开文件，在主菜单上选择：View | 预览文件（View | Preview file in），然后从弹出菜单中选择所需的浏览器。
- 或者，将鼠标指针悬停在代码上以显示浏览器图标栏，然后单击指示所需浏览器的图标：
。
提示：要隐藏所有图标或其中一些图标，请清除Web浏览器页面上不必要浏览器的“活动（Active）”复选框。
在编辑器中查看网页的HTML源代码
- 选择：文件|打开网址（File | Open URL）。
- 在打开的“打开URL（Open URL）”对话框中，键入网页的URL地址，或从列表中选择以前打开的URL。
查看嵌入的图像
IntelliJ IDEA提供了几种查看嵌入在HTML文件中的图像的方法。您可以使用导航来源，在外部图形编辑器中打开图像，或者即时预览图像。
提示：在“图像（Images）”页面上检查并配置预览外观。
在IntelliJ IDEA中查看图像
- 在“项目（Project）”工具窗口中选择图像文件，然后在所选内容的上下文菜单中选择“跳转到源（Jump to Source）”或按F4。
- 或者，将光标放在编辑器中对图像的引用上，然后在上下文菜单中选择“跳转到源（Jump to Source）”或按Ctrl+B
在外部编辑器中查看图像
- 在“图像（Images）”页面上配置外部编辑器的路径 ，对于Windows和Linux系统，使用：文件|设置|编辑器|图像（File | Settings | Editor | Images）；对于macOS系统，使用IntelliJ IDEA |首选项|编辑器|图像（IntelliJ IDEA | Preferences | Editor | Images）。
- 在“项目（Project）”工具窗口中选择图像文件，然后选择“在外部编辑器中打开（Open in external editor）”或按Ctrl+Alt+F4。
提取包含文件
您可以将HTML或CSS代码片段提取到单独的包含文件中。还可以提取<script>标签内的整个JavaScript代码块。
- 在编辑器中，在主菜单或选择的上下文菜单中选择要提取的代码块，然后选择：Refactor | 提取| 提取包含文件（Refactor | Extract | Extract Include File）。
- 在打开的“提取包含文件（Extract Include File）”对话框中，在“提取的包含文件的名称（Name for extracted include file）”文本框中指定目标包含文件的名称。
提示：键入没有扩展名的文件名。 - 在“提取到目录（Extract to directory）”文本框中，指定要存储包含文件的目录。保留预定义目录或选择另一个目录。
- 准备好后，单击“确定（OK）”。IntelliJ IDEA将选定的源代码提取到目标目录中的指定文件中，并在源文件中生成相应的引用。
提示：如果所选片段有任何重复，IntelliJ IDEA将建议更改它们以获得相应的参考。
CSS类的项目范围代码完成
IntelliJ IDEA首先从样式标记和链接文件中建议类和ID。但是，如果找不到匹配的结果，IntelliJ IDEA还会建议在项目中的所有样式表文件中定义的符号。
要在开始输入之前立即查看项目中定义的所有类和ID，请按两次Ctrl+Space。