IntelliJ IDEA:使用HTML

2018-08-07 10:34 更新

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源代码

  1. 选择:文件|打开网址(File | Open URL)。
  2. 在打开的“打开URL(Open URL)”对话框中,键入网页的URL地址,或从列表中选择以前打开的URL。

查看嵌入的图像

IntelliJ IDEA提供了几种查看嵌入在HTML文件中的图像的方法。您可以使用导航来源,在外部图形编辑器中打开图像,或者即时预览图像。

提示:在“图像(Images)”页面上检查并配置预览外观。

在IntelliJ IDEA中查看图像

  • 在“项目(Project)”工具窗口中选择图像文件,然后在所选内容的上下文菜单中选择“跳转到源(Jump to Source)”或按F4。
  • 或者,将光标放在编辑器中对图像的引用上,然后在上下文菜单中选择“跳转到源(Jump to Source)”或按Ctrl+B

在外部编辑器中查看图像

  1. 在“图像(Images)”页面上配置外部编辑器的路径 ,对于Windows和Linux系统,使用:文件|设置|编辑器|图像(File | Settings | Editor | Images);对于macOS系统,使用IntelliJ IDEA |首选项|编辑器|图像(IntelliJ IDEA | Preferences | Editor | Images)。
  2. 在“项目(Project)”工具窗口中选择图像文件,然后选择“在外部编辑器中打开(Open in external editor)”或按Ctrl+Alt+F4。

提取包含文件

您可以将HTML或CSS代码片段提取到单独的包含文件中。还可以提取<script>标签内的整个JavaScript代码块。

  1. 在编辑器中,在主菜单或选择的上下文菜单中选择要提取的代码块,然后选择:Refactor | 提取| 提取包含文件(Refactor | Extract | Extract Include File)。
  2. 在打开的“提取包含文件(Extract Include File)”对话框中,在“提取的包含文件的名称(Name for extracted include file)”文本框中指定目标包含文件的名称。
    提示:键入没有扩展名的文件名。
  3. 在“提取到目录(Extract to directory)”文本框中,指定要存储包含文件的目录。保留预定义目录或选择另一个目录。
  4. 准备好后,单击“确定(OK)”。IntelliJ IDEA将选定的源代码提取到目标目录中的指定文件中,并在源文件中生成相应的引用。
    提示:如果所选片段有任何重复,IntelliJ IDEA将建议更改它们以获得相应的参考。

CSS类的项目范围代码完成

IntelliJ IDEA首先从样式标记和链接文件中建议类和ID。但是,如果找不到匹配的结果,IntelliJ IDEA还会建议在项目中的所有样式表文件中定义的符号。

HTML中CSS项符号的项目范围完成

要在开始输入之前立即查看项目中定义的所有类和ID,请按两次Ctrl+Space。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号