閱讀(19.2k) 書簽贊(0) 我要糾錯(cuò)

IntelliJ IDEA：使用HTML

2018-08-07 10:34 更新

HTML

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

HTML規(guī)范可使用IntelliJ IDEA設(shè)置（可以使用Ctrl+Alt+S打開）的“語(yǔ)言和框架|模式和DTD（Languages and Frameworks | Schemas and DTDs）”頁(yè)面中的默認(rèn)HTML語(yǔ)言級(jí)別首選項(xiàng)進(jìn)行配置。默認(rèn)情況下，假定來(lái)自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)簽。對(duì)于<img>標(biāo)簽，IntelliJ IDEA還會(huì)生成width和height屬性。

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

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

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

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

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

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

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

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

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

查看嵌入的圖像

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

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

在IntelliJ IDEA中查看圖像

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

在外部編輯器中查看圖像

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

提取包含文件

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

在編輯器中，在主菜單或選擇的上下文菜單中選擇要提取的代碼塊，然后選擇：Refactor | 提取| 提取包含文件（Refactor | Extract | Extract Include File）。
在打開的“提取包含文件（Extract Include File）”對(duì)話框中，在“提取的包含文件的名稱（Name for extracted include file）”文本框中指定目標(biāo)包含文件的名稱。
提示：鍵入沒有擴(kuò)展名的文件名。
在“提取到目錄（Extract to directory）”文本框中，指定要存儲(chǔ)包含文件的目錄。保留預(yù)定義目錄或選擇另一個(gè)目錄。
準(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還會(huì)建議在項(xiàng)目中的所有樣式表文件中定義的符號(hào)。

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

以上內(nèi)容是否對(duì)您有幫助：

← 在瀏覽器中打開GWT應(yīng)用程序

IntelliJ IDEA中Java的基礎(chǔ)使用 →

寫筆記

我要補(bǔ)充