IntelliJ IDEA：使用HTML

2018-08-07 10:34 更新

HTML

IntelliJ IDEA為HTML提供了強(qiáng)大的支持，包括語法和錯誤突出顯示、根據(jù)代碼樣式進(jìn)行格式化、結(jié)構(gòu)驗(yàn)證、代碼完成、調(diào)試會話期間的實(shí)時預(yù)覽（實(shí)時編輯）等等。

HTML規(guī)范可使用IntelliJ IDEA設(shè)置（可以使用Ctrl+Alt+S打開）的“語言和框架|模式和DTD（Languages and Frameworks | Schemas and DTDs）”頁面中的默認(rèn)HTML語言級別首選項(xiàng)進(jìn)行配置。默認(rèn)情況下，假定來自W3C的規(guī)范HTML 5.0。

創(chuàng)建HTML文件

  • 在主菜單上，選擇：文件|新建（File | New），然后在彈出列表中選擇“HTML文件（HTML File）”。IntelliJ IDEA基于HTML文件模板創(chuàng)建存根文件， 并在編輯器中打開它。

在HTML文件中生成引用

IntelliJ IDEA可以<head>中在產(chǎn)生<script>，<link>或<img>標(biāo)簽。對于<img>標(biāo)簽，IntelliJ IDEA還會生成width和height屬性。

  • 在“項(xiàng)目（Project）”工具窗口中選擇JavaScript，CSS或圖像文件，然后將其拖到HTML文件中。

在瀏覽器中預(yù)覽HTML文件的輸出

您可以在IntelliJ IDEA默認(rèn)瀏覽器中或在您選擇的瀏覽器中預(yù)覽包含Web內(nèi)容的文件。

在默認(rèn)瀏覽器中打開頁面預(yù)覽

  • 在編輯器中打開文件，然后在主菜單上選擇：View|瀏覽器中打開（View | Open in Browser ）。
    提示：要在瀏覽器中預(yù)覽PHP頁面，您需要先配置與服務(wù)器的同步。

在您選擇的瀏覽器中打開頁面預(yù)覽

  • 在編輯器中打開文件，在主菜單上選擇：View | 預(yù)覽文件（View | Preview file in），然后從彈出菜單中選擇所需的瀏覽器。
  • 或者，將鼠標(biāo)指針懸停在代碼上以顯示瀏覽器圖標(biāo)欄，然后單擊指示所需瀏覽器的圖標(biāo)： 。
    提示：要隱藏所有圖標(biāo)或其中一些圖標(biāo)，請清除Web瀏覽器頁面上不必要瀏覽器的“活動（Active）”復(fù)選框。

在編輯器中查看網(wǎng)頁的HTML源代碼

  1. 選擇：文件|打開網(wǎng)址（File | Open URL）。
  2. 在打開的“打開URL（Open URL）”對話框中，鍵入網(wǎng)頁的URL地址，或從列表中選擇以前打開的URL。

查看嵌入的圖像

IntelliJ IDEA提供了幾種查看嵌入在HTML文件中的圖像的方法。您可以使用導(dǎo)航來源，在外部圖形編輯器中打開圖像，或者即時預(yù)覽圖像。

提示：在“圖像（Images）”頁面上檢查并配置預(yù)覽外觀。

在IntelliJ IDEA中查看圖像

  • 在“項(xiàng)目（Project）”工具窗口中選擇圖像文件，然后在所選內(nèi)容的上下文菜單中選擇“跳轉(zhuǎn)到源（Jump to Source）”或按F4。
  • 或者，將光標(biāo)放在編輯器中對圖像的引用上，然后在上下文菜單中選擇“跳轉(zhuǎn)到源（Jump to Source）”或按Ctrl+B

在外部編輯器中查看圖像

  1. 在“圖像（Images）”頁面上配置外部編輯器的路徑 ，對于Windows和Linux系統(tǒng)，使用：文件|設(shè)置|編輯器|圖像（File | Settings | Editor | Images）；對于macOS系統(tǒng)，使用IntelliJ IDEA |首選項(xiàng)|編輯器|圖像（IntelliJ IDEA | Preferences | Editor | Images）。
  2. 在“項(xiàng)目（Project）”工具窗口中選擇圖像文件，然后選擇“在外部編輯器中打開（Open in external editor）”或按Ctrl+Alt+F4。

提取包含文件

您可以將HTML或CSS代碼片段提取到單獨(dú)的包含文件中。還可以提取<script>標(biāo)簽內(nèi)的整個JavaScript代碼塊。

  1. 在編輯器中，在主菜單或選擇的上下文菜單中選擇要提取的代碼塊，然后選擇：Refactor | 提取| 提取包含文件（Refactor | Extract | Extract Include File）。
  2. 在打開的“提取包含文件（Extract Include File）”對話框中，在“提取的包含文件的名稱（Name for extracted include file）”文本框中指定目標(biāo)包含文件的名稱。
    提示：鍵入沒有擴(kuò)展名的文件名。
  3. 在“提取到目錄（Extract to directory）”文本框中，指定要存儲包含文件的目錄。保留預(yù)定義目錄或選擇另一個目錄。
  4. 準(zhǔn)備好后，單擊“確定（OK）”。IntelliJ IDEA將選定的源代碼提取到目標(biāo)目錄中的指定文件中，并在源文件中生成相應(yīng)的引用。
    提示：如果所選片段有任何重復(fù)，IntelliJ IDEA將建議更改它們以獲得相應(yīng)的參考。

CSS類的項(xiàng)目范圍代碼完成

IntelliJ IDEA首先從樣式標(biāo)記和鏈接文件中建議類和ID。但是，如果找不到匹配的結(jié)果，IntelliJ IDEA還會建議在項(xiàng)目中的所有樣式表文件中定義的符號。

HTML中CSS項(xiàng)符號的項(xiàng)目范圍完成

要在開始輸入之前立即查看項(xiàng)目中定義的所有類和ID，請按兩次Ctrl+Space。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號