逐步解說：Visual Studio 中針對 Web Form 網頁的進階 HTML 編輯功能

  • 發行項

Microsoft Visual Studio 為建立網頁提供豐富的 HTML 編輯經驗。 此逐步解說介紹 Visual Studio 中的一些更進階 HTML 編輯功能。 如需 HTML 編輯簡介，請參閱逐步解說：Visual Studio 中針對 Web Form 網頁的基本 HTML 編輯功能。

注意事項注意事項

本主題中的範例是專用於 ASP.NET Web Form 網頁。但是，您可以將 HTML 格式化標記選項用於 Web Form 網頁、ASP.NET MVC (模型檢視控制器) 檢視、ASP.NET 網頁 及 HTML 網頁。

本逐步解說所述的工作包括下列各項：

  • 指定 HTML 編輯器如何在 [原始碼] 檢視中顯示標記的選項。

  • 選取選項，以便建立的 HTML 編輯器與特定的結構描述 (標記標準，如 HTML5) 相容。

  • 建立頁面大綱，也就是在編輯器中建立可摺疊區域來降低雜亂度。

必要條件

若要完成這個逐步解說，您需要：

  • 如何在 Visual Studio 中工作的基本知識。

如需 Visual Studio 的簡介，請參閱逐步解說：Visual Studio 中針對 Web Form 網頁的基本 HTML 編輯功能。

建立網站和網頁

如果您已經在 Visual Studio 中建立 Web Forms 專案 (例如，藉由完成逐步解說：Visual Studio 中針對 Web Form 網頁的基本 HTML 編輯功能的步驟)，請繼續進行下一節的步驟。 否則，請依照下列這些步驟建立 Web 專案和網頁。

若要建立檔案系統網站專案

  1. 開啟 Visual Studio。

  2. 在 [檔案] 功能表上，按一下 [新增網站]。

    [新網站] 對話方塊隨即出現。

    注意事項注意事項

    這個逐步解說會使用網站專案。您可以改用 Web 應用程式專案。如需這些 web 專案類型之間有何差異的詳細資訊，請參閱Web 應用程式專案和網站專案的比較。

  3. 在 [已安裝] 下方，選取您偏好使用的程式語言。

  4. 在範本窗格中，選擇 [ASP.NET Web Form 網站]。

  5. 在 [位置] 方塊中，輸入您想要用來儲存網站頁面的資料夾名稱。

    例如，輸入資料夾名稱 C:\WebSites。

  6. 選擇 [確定]。

  7. 在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後選擇 [加入新項目]。

  8. 在 [已安裝] 下方，選擇您想要使用的語言。

  9. 在 [範本] 窗格中，選擇 [Web Form]。

  10. 選擇 [新增]。

格式化標記

HTML 編輯器提供多種選項，協助您根據自己的偏好設定來格式化頁面中的標記 (Markup)。 格式化選項包括以下所示：

  • 標記 (Tag) 和屬性 (Attribute) 名稱是大寫字母還是小寫字母。 您可以為 HTML 標記和 ASP.NET Web 伺服器控制項分別指定選項。

  • 加入屬性時是否以引號括住。

  • 編輯器是否為您自動關閉項目。 選項包括建立自我結尾標記 (例如，<br />)、建立開頭標記和結尾標記 (<p></p>)，以及自動插入結尾標記。

  • 標記的子項目如何縮排。

  • 分行符號在標記前後所處的位置。

不論設定的格式化選項為何，您最終都能控制編輯器中標記的配置和外觀。 您可以手動格式化項目 (例如，縮排項目)。 編輯器會依現狀保留您的格式，除非您明確要求重新格式化標記。

在本節的逐步解說中，您會更改某些影響標記在編輯器中的顯示方式的設定，並查看這些更改的效果。 您還將學習如何將格式套用至整頁或頁面中的選取範圍。

若要加入具有預設格式化選項的 HTML 項目

  1. 切換至 [設計] 檢視。

  2. 選擇 [表格] 功能表上的 [插入表格]。 不要變更對話方塊中任何預設設定。

  3. 選擇 [確定]。

    設計工具會建立包含兩行兩列的 HTML 表格。

  4. 在表格下方按一下頁面。

  5. 按數次 ENTER 建立一些空格，然後從 [工具箱] 的 [HTML] 群組中，將 Image 控制項拖曳至頁面。

  6. 切換至 [原始碼] 檢視。

    您會看到 <table> 和 <img> 項目已插入頁面。 <img> 項目會反白顯示。

    依照預設，設計工具會建立標記和屬性名稱均為小寫且屬性以引號括住的項目。

您現在可以變更格式化選項。

若要變更格式化與驗證選項

  1. 在 [工具] 功能表上選擇 [選項]。

  2. 選擇 [文字編輯器]，展開 [HTML]，然後選擇 [驗證]。

  3. 在 [目標] 清單中，選擇 [HTML5]。

    注意事項注意事項

    您可以選擇 [將 doctype 用於驗證結構描述偵測]，而不要手動選擇用來驗證新頁面的預設結構描述。此選項會指示 Visual Studio 使用頁面 DOCTYPE 宣告，決定要用於驗證的結構描述。在本逐步解說中，將此核取方塊清除，以便您可以看到目標結構描述選項如何影響編輯器的運作方式。

  4. 選擇 [格式化]。

    由於您在上一個步驟中選取了 [HTML5]，因此啟用了 [用戶端標記] 和 [用戶端屬性] 下拉式方塊。 如果您讓 [目標] 的設定保持為 [XHTML5]，這兩個下拉式方塊就會設為小寫和停用狀態，因為 [XHTML5] 需要使用小寫。

    注意事項注意事項

    您可以選擇 [標記專用選項]，為特定伺服器標記 (ASP.NET 伺服器控制項) 和用戶端標記 (HTML 項目) 分別設定一些選項。在本逐步解說後面的步驟中，您將使用這項功能。

  5. 將 [用戶端標記] 選項設定為 [大寫]。

  6. 清除 [輸入時插入屬性值引號] 和 [格式化時插入屬性值引號] 核取方塊。

  7. 選擇 [確定] 返回編輯器。

    請注意，雖然您變更了格式化選項，但是頁面中的現有標記不會變更。

您現在可以加入新項目。

若要使用新格式化選項來加入 HTML 項目

  1. 在 [原始碼] 檢視中，捲動至頁面底部。

  2. 從 [工具箱] 的 [HTML] 群組中，將 Table 控制項拖曳至頁面，並將其定位於 </form> 標記上方。

    此時，<TABLE> 項目中的標記均為大寫字母。

  3. 在已建立的資料表下方定位插入點，然後輸入左角括弧 (<) 來啟動新標記。

    清單隨即顯示，其中的所有標記名稱均為大寫，因為這現在是預設值。

  4. 以小寫形式輸入 img。

    IMG 在清單中顯示為大寫，反映標籤新的大小寫預設值。

  5. 按空格鍵。

    <IMG 以大寫形式被輸入到頁面，而且該標記的屬性清單會顯示。 屬性均為小寫，因為設定格式化選項時，您已經將 [用戶端屬性] 的預設設定設為 [小寫]。

  6. 輸入 src=。

    通常，編輯器會在等號後提供一組雙引號。 但是，由於您停用 [輸入時插入屬性值引號] 選項，所以編輯器不提供它們。

    注意事項注意事項

    如果您在 [屬性] 視窗中所輸入的屬性值包含空格，則不論選項如何設定，編輯器都會插入引號。

  7. 輸入 Graphic.gif (虛構檔案名稱)。

    標記現在與下列程式碼相似：

    <IMG src=Graphic.gif

  8. 輸入斜線符號 (/) 和右角括弧 (>) 來關閉 <img> 標記。 您也可以輸入空格和右角括弧，然後編輯器會自動提供斜線。

更改格式化選項時，在頁面上的現有標記不會受影響。 不過，您可以手動將格式設定套用至頁面或頁面的任何部分。

若要將格式套用至現有項目

  1. 在 [原始碼] 檢視中，選取建立的第一個表格 (其中包含小寫標記)。

  2. 從 [編輯] 功能表中選擇 [格式化選取範圍]。

    標記名稱會變更為大寫。

    注意事項注意事項

    編輯器不會移除引號，即使您已經變更選項設定。同樣地，編輯器不會變更現有標記的終止 (Termination)，即使您變更如何關閉標記的選項。

當您使用 [工具箱] 或 [屬性] 等編輯工具編輯項目時，編輯器會使用格式化選項的目前設定來產生標記。 不過，編輯器不會變更任何現有標記。 若要將新的格式化選項套用至現有標記，請使用 [編輯] 功能表上的 [格式化文件] 和 [格式化選取範圍] 命令。

schs05kd.collapse_all(zh-tw,VS.110).gif設定標記格式化選項

到目前為止您已使用的格式化選項會套用至頁面中的所有項目。 如果需要，也可以為個別標記指定格式化選項。 如果您經常使用某些標記，並想要使用這些標記的非預設格式，這個方法便相當有用。 每個標記的格式化都可讓您設定下列選項：

  • 標記的結尾方式，即未封閉、自我結尾，或使用不同的結尾標記。

  • 分行符號如何在標記前後以及標記中使用。

  • 標記的子項目如何縮排。

    注意事項注意事項

    HTML 編輯器將忽略會更改標記內容在瀏覽器中的呈現方式的任何標記顯示設定。

在這部分的逐步解說中，您會設定幾個標記的格式化選項。 到目前為止，您已使用了 HTML 項目，例如 <table> 項目。 現在，您將使用一些 ASP.NET Web 伺服器控制項，以便查看均等套用至控制項和項目的格式化選項。

透過設定一些套用至特定類型之所有標記的選項來開始。 您可以設定下列類型項目的選項：

  • 不含內容的 HTML 項目，如 br 和 input。

  • 可以含有內容的 HTML 項目，如 table 和 span。

  • 不能含有內容的伺服器項目 (asp:)，如 asp:image。

  • 可以含有內容的伺服器項目，如 asp:textbox。

安全性注意事項安全性提示

TextBox 控制項可接受使用者輸入，但這是可能的安全性威脅。根據預設，ASP.NET Web 網頁會驗證使用者輸入未包含指令碼或 HTML 項目。如需詳細資訊，請參閱指令碼攻擊概觀。

在本章節的第一個部分中，您將加入 HTML 表格。 然後，您將變更表格項目的標記格式化規則，並重新格式化文件以查看變更格式化規則的效果。

若要設定 HTML 表格的標記格式化規則

  1. 在 [原始碼] 檢視中，以滑鼠右鍵按一下視窗的空白部分，然後選擇 [格式化與驗證]。

    注意事項注意事項

    [格式化與驗證] 命令只在 [原始碼] 檢視中可用。

    [選項] 對話方塊隨即出現，其中包含您在前一章節中設定的格式化選項。

  2. 在 [用戶端標記] 清單中，選擇 [小寫] 重設用戶端標記的格式。

  3. 選擇 [確定] 關閉 [選項] 對話方塊。

  4. 從 [工具箱] 的 [HTML] 群組，將 Table 控制項拖曳至 [原始碼] 檢視中的網頁。

    編輯器會建立 <table> 項目，此項目包含三列 (<tr> 項目)，每列包含三個儲存格 (<td> 項目)。 每個標記都位於單獨的行：

    <table>
    <tr>
        <td>
            &nbsp;
       </td>
    </tr>

  5. 以滑鼠右鍵按一下視窗的空白部分，然後選擇 [格式化與驗證]。

  6. 選擇 [標記專用選項]。

  7. 展開 [預設值]。

    標記類型清單隨即出現，並以 [用戶端標記不支援內容] 開頭。 在 [預設值] 底下，您可以設定不同選項，分別用於用戶端和伺服器項目、含有內容的項目 (例如 table 項目)，以及不含內容的項目 (例如 img 項目)。

  8. 選擇 [用戶端標記支援內容]。

    請注意，預設設定為標記使用單獨的結尾標記，以及之前、之中及之後具有分行符號的標記。

  9. 展開 [用戶端 HTML 標記]。

  10. 選擇 [td]。

    您將設定選項來變更格式化 td 標記的方式。

  11. 在 [分行符號] 清單中，選擇 [無]。

  12. 選擇 [確定] 關閉 [標記專用選項] 對話方塊，然後選擇 [確定] 關閉 [選項] 對話方塊。

  13. 從 [編輯] 功能表中選擇 [格式化文件]。

    文件會重新格式化。 您加入之表格中的 <td> 標記會位於同一行：