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

發行項
11/15/2012

Microsoft Visual Studio 2012 為建立 Web Form 網頁提供豐富的 HTML 編輯經驗。 Visual Studio HTML 編輯器可讓您在 WYSIWYG 模式下工作，還可讓您直接使用 HTML 標記工作，實現更精確的控制。此逐步解說介紹 Visual Studio 的 HTML 編輯功能。

注意事項
本主題適用於 ASP.NET Web Form 網頁。您可以使用 ASP.NET MVC (模型檢視控制器) 或 ASP.NET 網頁應用程式 (.cshtml 檔案) 中的編輯頁面 [原始檔] 檢視，但只能完整支援 Web Forms 網頁的 [設計] 檢視。Web 伺服器控制項只用於 Web Form 網頁。

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

在 [設計] 檢視中建立和編輯 HTML。
在 [原始碼] 檢視中建立和編輯 HTML。
使用 [分割] 檢視。
使用巡覽工具在 HTML 標記 (Tag) 中快速移動。

必要條件

若要完成這個逐步解說，您需要下列項目：

Visual Studio 或 Visual Studio Express for Web 已安裝在您的電腦上。

注意事項
如果您正在使用 Visual Studio，此逐步解說假設您在第一次啟動 Visual Studio 時已選取設定的 [Web 程式開發] 集合。如需詳細資訊，請參閱 HOW TO：選取 Web 開發環境設定。

如何在 Visual Studio 中工作的一般知識。

關於如何在 Visual Studio 中建立 Web Forms 網頁的簡介，請參閱 https://go.microsoft.com/?linkid=9807566逐步解說：在 Visual Studio 中建立基本網頁。

建立網站和 Web Form 網頁

如果您已在 Visual Studio 或 Visual Studio Express for Web 中建立 Web Forms 網站 (例如，完成逐步解說：在 Visual Studio 中建立基本網頁)，則您可使用該網站，並跳至下一節。否則，請依照下列這些步驟建立網站和 Web Form 網頁。

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

若要建立檔案系統網站

開啟 Visual Studio 或 Visual Studio Express for Web。
按一下 [檔案] 功能表上的 [新網站]。

[新網站] 對話方塊便會顯示。
按一下 [已安裝] 底下的 [Visual Basic] 或 [Visual C#]，然後選取 [ASP.NET 空網站]。

在此逐步解說中，您將建立不包含預先建立之網頁和其他資源的網站。
選取 [Web 位置] 方塊中的 [檔案系統]，然後輸入您想要用來保存網站網頁的資料夾名稱。

例如，輸入資料夾名稱 C:\WebSites。
按一下 [確定]。

Visual Studio 就會建立包括 Web.config 檔案的網站專案。
在 [方案總管] 中，以滑鼠右鍵按一下網站根目錄，然後按一下 [加入新項目]。
選取 [Web Form]，並將檔案命名為 Default.aspx，然後按一下 [加入]。

在設計檢視中工作

在這部分的逐步解說中，您將學習如何在 [設計] 檢視中工作，該檢視提供類似於 WYSIWYG 的 Web Form 頁面檢視。您可以如同在文字處理程式中一樣，透過輸入來加入文字。您也可以直接使用格式化命令或透過建立內嵌樣式來格式化文字。

[設計] 檢視顯示網頁的方式類似於其在瀏覽器中所顯示，但也有些不同。第一個不同之處在於，在 [設計] 檢視中，文字和項目是可以編輯的。第二個不同之處在於，為了您協助編輯網頁，[設計] 檢視會顯示一些在瀏覽器中不會出現的項目和控制項。此外，例如 HTML 表格等一些項目會呈現特殊的 [設計] 檢視，可以為編輯器加入其他空間。整體而言，[設計] 檢視可以協助您視覺化網頁，但其並非網頁在瀏覽器中呈現的精確表示。

若要在設計檢視中加入並格式化靜態 HTML

如果未處於 [設計] 檢視，請按一下位於視窗左下方的 [設計]。
在頁面頂部，輸入 ASP.NET Web Page。
反白文字以進行選取，然後在 [格式] 工具列上，按一下 [標題 1]。
在 [ASP.NET Web Page] 後按 ENTER 鍵，然後輸入 This page is powered by ASP.NET。
反白文字，然後按一下 [格式] 功能表上的 [新樣式]。

[新樣式] 對話方塊便會出現。
選取 [套用新樣式到文件選取範圍] 選項。
從 [字型系列] 下拉式清單中選取一種字型，然後按一下 [套用]。

這時該字型系列已經套用到選取的文字。
按一下 [分類] 下的 [區塊]，再從 [字型高度] 下拉式清單中選取 [(值)]。請輸入字型高度的值。
從 [字型間距] 下拉式清單中選取 [(值)]。請輸入字型間距的值。按一下 [套用]，即可看到值已套用到選取的文字。
按一下 [確定]。

檢視標記資訊

當在 [設計] 檢視中工作時，您可能會想要查看不具有視覺化呈現的標記 (例如 div 和 span)。

若要在設計檢視中查看 HTML 設計介面標記

在 [檢視] 功能表中指向 [視覺輔助工具]，確定選取了 [ASP.NET 隱藏式控制項]。

設計工具會顯示段落符號、分行符號以及其他不呈現文字的標記。符號不會同時全部顯示，但當您按一下某個視覺化項目，該項目前面的隱藏式項目就會顯示出來。

加入控制項和項目

在 [設計] 檢視中，可以將控制項從工具箱拖曳至網頁。您可以使用對話方塊加入一些項目，例如 HTML 表格。在本章節中，您將加入一些控制項和表格，以便在稍後的逐步解說中有項目可供使用。

若要加入控制項和表格

將游標放在 [This page is powered by ASP.NET.] 文字的右側，然後按 ENTER。
從 [工具箱] 的 [標準] 群組中，將 TextBox 控制項拖曳至網頁，將其置於先前步驟所建立的空間中。

注意事項

您現在可以透過按兩下控制項將其加入。
將 Button 控制項拖曳至網頁上，並放在先前步驟中加入的 TextBox 控制項右側。

TextBox 和 Button 控制項是 ASP.NET Web 伺服器控制項，並非 HTML 項目。
將游標放在 Button 控制項右側，然後按 ENTER。
按一下 [表格] 功能表上的 [插入表格]。

[插入表格] 對話方塊隨即出現。
按一下 [確定]。

[插入表格] 對話方塊提供用於設定正在建立之表格的選項。但在此逐步解說中，您可以使用預設表格配置。

注意事項
您現在可以透過按兩下控制項將其加入。

建立超連結

[設計] 檢視提供產生器和其他工具，協助您建立要求屬性設定的 HTML 項目。

若要建立超連結

在文字 [This page is powered by ASP.NET] 中，反白顯示 [ASP.NET] 以將其選取。
在 [格式] 功能表上，按一下 [轉換成超連結]。

[超連結] 對話方塊隨即出現。
在 [URL] 對話方塊中，輸入 https://www.asp.net。
按一下 [確定]。

在屬性視窗中設定屬性

您可以透過在 [屬性] 視窗中設定值，變更網頁上項目的外觀和行為。

若要使用屬性視窗設定屬性

選取在此逐步解說先前之＜加入控制項和項目＞中加入的 Button 控制項。
在 [屬性] 中，將 [文字] 設定為 [按這裡]，並且將 [前景色彩] 設定為其他色彩。
將游標置於前一章節建立的 [ASP.NET] 超連結中。

請注意，在 [屬性] 視窗中，a 項目的 hreef 屬性設定為您為超連結提供的 URL。

測試網頁

您可以透過在瀏覽器中檢視網頁以查看編輯結果。

若要從外部在瀏覽器中啟動網頁

以滑鼠右鍵按一下網頁，然後再按 [在瀏覽器中檢視]。

如果您接到儲存變更的提示，請按一下 [是]。

Visual Studio 會啟動 IIS Express，該伺服器是本機 Web 伺服器，可用於測試網頁，而無需使用完整的 IIS 伺服器。

注意事項
您可以利用下列幾種方式執行頁面。如果按 CTRL+F5，Visual Studio 會執行啟始動作，該動作設定於屬性頁面上的 [起始選項]。CTRL+F5 的預設起始選項是執行目前網頁，即在 [原始碼] 或 [設計] 檢視內目前作用中的網頁。您也可以在偵錯工具中執行網頁。如需詳細資訊，請參閱逐步解說：在 Visual Web Developer 中進行 Web 網頁偵錯。

您可以利用下列幾種方式執行頁面。如果按 CTRL+F5，Visual Studio 會執行啟始動作，該動作設定於屬性頁面上的 [起始選項]。CTRL+F5 的預設起始選項是執行目前網頁，即在 [原始碼] 或 [設計] 檢視內目前作用中的網頁。您也可以在偵錯工具中執行網頁。如需詳細資訊，請參閱逐步解說：在 Visual Web Developer 中進行 Web 網頁偵錯。

變更預設檢視

依照預設，Visual Studio 會在 [原始碼] 檢視中開啟新網頁。

若要將預設網頁檢視變更為設計檢視

在 [工具] 功能表上按一下 [選項]。
確定已選取對話方塊下方的 [顯示所有設定] 選項。
開啟 [HTML 設計工具] 節點，然後選取 [一般]。在 [頁面起始位置] 底下按一下 [設計] 檢視。

在原始碼檢視中工作

[原始碼] 檢視允許您直接編輯網頁的標記。 [原始碼] 檢視編輯器提供了多種可以協助您建立 HTML 和 ASP.NET 控制項的功能。您可以如同在 [設計] 檢視中一樣，在 [原始碼] 檢視中使用工具箱將新項目加入至網頁。

若要將項目加入至原始碼檢視

透過按一下位於視窗下方的 [原始碼]，切換至 [原始碼] 檢視。

所加入的控制項會做為 <asp:> 項目建立。例如，Button 控制項是 <asp:button> 項目。所做的屬性 (Property) 設定會保留為開頭 <asp:button> 標記中的屬性 (Attribute) 設定。
從 [工具箱] 的 [HTML] 群組 (非 [標準] 群組) 中，將 Table 項目拖曳至網頁，將其恰好置於 </form> 標記的上方。

編輯器也可以協助您手動輸入標記。例如，編輯器會在您輸入時提供即時線上選項，完成 HTML 標記和屬性。編輯器還透過在有問題的標記下加波浪線的方式，提供標記的錯誤和警告資訊。將滑鼠定位於標記文字上，即可看到錯誤或警告資訊。

若要在原始碼檢視中編輯 HTML

將游標定位於結尾 </form> 標記的上方，然後輸入左角括弧 (<)。

請注意，編輯器會提供適用於目前內容之標記的清單。

輸入 "a" 建立錨點標記，然後按空格鍵。

編輯器會顯示適用於錨點標記之屬性的清單。

注意事項
依據網站或網頁所設定的驗證目標而定，字母 [a] (錨點項目) 可能不會出現在選項中。不過，您仍然可以透過輸入 "a" 來建立錨點項目，無須從下拉式清單中選取項目。本主題稍後會討論驗證目標。

顯示 <a> 的屬性。

在清單中，按一下 [href]，然後輸入等號 (=) 和雙引號 (")。

編輯器提供目前可以連結之網頁的清單。
在檔案清單中，按兩下 Default.aspx，然後按空格鍵，再輸入一個右角括弧 (>) 關閉標記。

編輯器會插入結尾 [</a>] 標記。
在開始和結尾標記之間輸入文字 Home，完成錨點項目。

此項目現在會類似下列範例：
```
<a href="Default.aspx">Home</a>
```
將游標置於結尾 </form> 標記上方，然後輸入 <invalid>。

編輯器會在標記下加波浪線，表示該標記並非認可的 HTML 標記。
移除在先前步驟中建立的標記。

檢查 HTML 格式

網頁設計工具的一個重要功能是，它會保留套用至網頁的 HTML 格式。但是，您可以您明確指定編輯器重新格式化文件。

若要檢查 HTML 格式

重新格式化 Button 控制項的屬性，方法是透過對齊屬性，使宣告式語法類似下列所示：
```
<asp:Button
    id="Button1"
    runat="server"
    Font-Bold="True"
    ForeColor="Blue"
    Text="Click Here" />
```
請注意，縮排第一個屬性後，在標記中按 ENTER 時，後續行會被縮排以與其相符。
切換至 [設計] 檢視。
以滑鼠右鍵按一下 Button 控制項，然後按一下 [複製]。
將游標定位於新 Button 控制項的下方，然後按一下滑鼠右鍵，再按 [貼上]。

Visual Studio 會建立 ID 屬性設為 Button2 的按鈕。
從 Toolbox 的 [標準] 群組中，將第三個 Button 控制項拖曳至網頁，這樣會建立名為 Button3 的按鈕。
切換至 [原始碼] 檢視。

請注意，格式化 Button2 的方式與格式化 Button1 的方式完全相同。另一方面，Button3 的格式化會使用 Button 控制項的預設格式。

注意事項

如需如何自訂個別項目之格式的詳細資訊，請參閱逐步解說：Visual Studio 中針對 Web Form 網頁的進階 HTML 編輯功能。
編輯文件，讓 Button1 和 Button2 處於同一行，之間不含空格，如以下範例所示：
```
<asp:Button ID="Button1" runat="server" Font-Bold="True" 
ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
```
項目可以換行，但是 Button2 的開頭必須緊接在 Button1 的結尾後面 (即 /> 字元)。
切換至 [設計] 檢視。

請注意，Button1 和 Button2 需恰好連在一起，之間沒有空格。
切換至 [原始碼] 檢視。
在 [編輯] 功能表的 [進階] 子功能表中，按一下 [格式化文件]。

文件會重新格式化，但 Button1 和 Button2 會保持在同一行。如果編輯器分隔按鈕，其將在呈現期間引入空格。因此，編輯器不會變更您建立的格式。

注意事項
如需如何自訂個別項目之格式的詳細資訊，請參閱逐步解說：Visual Studio 中針對 Web Form 網頁的進階 HTML 編輯功能。

在分割檢視中工作

利用 [分割] 檢視，可以讓您同時看到 [設計] 檢視及 [原始碼] 檢視的視窗。

若要在分割檢視中檢視頁面

按一下視窗左下方的 [分割]，切換至 [分割] 檢視。請注意，[原始碼] 檢視視窗佔據視窗的上半部，[設計] 檢視視窗佔據視窗的下半部。此外，請注意兩個檢視會同步處理。如果在其中一個檢視按兩下某個項目以選取它，另一個檢視中的對應項目會反白顯示。

在項目之間巡覽

隨著網頁變得更大、更複雜，能夠快速找到標記並降低網頁的雜亂度將非常有用。在 [原始碼] 檢視中工作時，Visual Studio 會提供下列工具協助您完成這些工作：

文件大綱，提供文件的完全檢視。
標記導覽，提供目前所選取之標記以及其所處網頁階層架構中之位置的相關資訊。

若要開始，請在網頁中加入更多項目，以便檢查巡覽功能。

若要加入項目

切換至 [設計] 檢視。
從 [工具箱] 的 [HTML] 群組中，將 Table 控制項拖曳至此逐步解說先前的＜在原始碼檢視中工作＞中所建立之表格的儲存格。
從 [工具箱] 的 [標準] 群組中，將 Button 控制項拖曳至巢狀資料表的中間儲存格。

當網頁上存在數個巢狀項目時，您可以查看 [文件大綱] 如何提供網頁中標記的快速巡覽。

若要使用文件大綱進行巡覽

切換至 [原始碼] 檢視。
在 [檢視] 功能表上，按一下 [文件大綱]。
在 [文件大綱] 中，按一下 [Button4]。

在編輯器中，選取在先前程序中所加入的 <Button4> 控制項。

標記導覽提供目前所選取之標記以及其所處網頁階層架構中之位置的相關資訊。

若要使用標記導覽進行巡覽

將游標放置在 Button 項目內部。

請注意，標記導覽位於視窗底部，顯示 <asp:button> 標記及其父標記。標記導覽包含項目的 ID (如果有的話)，因此可以識別正在顯示的項目。標記導覽也顯示指派的階層式樣式表 (如果有的話)，該樣式表以 Class 屬性設定。
在標記導覽中，按一下最接近 <asp:button#Button4> 標記的 <table> 標記。

標記導覽會移至內部 <table> 項目並將其選取。

在標記導覽中，按一下位於選取之 <table> 標記左邊的 <td> 標記。

包含巢狀資料格的整個儲存格隨即選取。

注意事項
透過使用標記導覽標記中的下拉式清單，可以按一下以選取標記或其內容。依照預設，按一下標記導覽中的標記會選取該標記及其內容。

您也可以使用標記導覽協助移動或複製項目。

若要使用標記導覽移動或複製項目

使用標記導覽，選取包含 Button4 控制項的 <tr> 標記。
按 CTRL+C 複製標記。
使用標記導覽移至外部表格。
在 [原始碼] 檢視中，將游標置於 <table> 標記和第一個 <tr> 標記之間。
按 CTRL+V 將複製的列貼入表格。
切換至 [設計] 檢視。

請注意，已加入了新列，包括 Button 控制項。

格式化文字

[格式] 工具列會為大多數設定套用內嵌樣式。粗體和斜體格式會使用 b 和 i 標記套用。段落格式則套用區塊標記，例如 p (適用於標準項)、pre (適用於格式化項) 等等。段落對齊的套用使用內嵌樣式以符合 XHTML 1.1 標準。
設計工具也可讓您建立 style 區塊以及至階層式樣式表的連結。如需詳細資訊，請參閱逐步解說：建立和修改 CSS 檔。
依照預設，編輯器會建立與 XHTML5 標準相容的標記。編輯器會將所有 HTML 標記名稱轉換為小寫，即使以大寫輸入。編輯器也會以雙引號括住屬性 (Attribute/Property) 值。如需詳細資訊，請參閱逐步解說：Visual Studio 中針對 Web Form 網頁的進階 HTML 編輯功能。

若要變更預設標記驗證

在 [原始碼] 檢視中，以滑鼠右鍵按一下網頁，然後按一下 [格式化與驗證]。
在 [選項] 對話方塊中，依序展開 [文字編輯器]、[HTML]，然後按一下 [驗證]。
在 [目標] 清單中，按一下驗證類型。

後續步驟

此逐步解說已提供了網頁編輯器之 HTML 功能的概觀。其中包括如何在 [設計] 檢視和 [原始碼] 檢視中建立 HTML，以及基本格式化和巡覽。若要了解 Visual Studio 中之編輯功能的詳細資訊，請參考以下資源。

若要了解 HTML 編輯器的其他功能，包括自訂格式化選項、大綱和 HTML 驗證，請參閱逐步解說：Visual Studio 中針對 Web Form 網頁的進階 HTML 編輯功能。
若要了解如何使用階層式樣式表中的樣式，請參閱逐步解說：建立和修改 CSS 檔。

請參閱

工作

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

概念

設計檢視

共用方式為