演练：Visual Studio 中用于 Web 窗体页的基本 HTML 编辑

项目
11/15/2012

Microsoft Visual Studio 2012 为 Web 窗体页提供了丰富的 HTML 编辑经验。 Visual Studio HTML 编辑器使您可以在 WYSIWYG（所见即所得）模式中工作，还使您可以直接使用 HTML 标记以便进行更好的控制。本演练介绍 Visual Studio 的 HTML 编辑功能。

备注

本主题应用于 ASP.NET Web 窗体页。您可以使用“源”视图来编辑 ASP.NET MVC（模型视图控制器）或 ASP.NET Web 页应用程序（.cshtml 文件），但是“设计”视图仅在 Web 窗体页中受到完全支持。Web 服务器控件仅在 Web 窗体页中使用。

本演练涉及以下任务：

在**“设计”**视图中创建和编辑 HTML。
在**“源”**视图中创建和编辑 HTML。
使用**“拆分”**视图。
使用导航工具在 HTML 标记之间快速移动。

系统必备

若要完成本演练，您需要：

在您计算机上安装的 Visual Studio 或 Web Visual Studio 学习版。

备注

如果使用 Visual Studio, 则本演练假设您在首次启动 Visual Studio时，已选择“Web 开发” 设置集合。有关更多信息，请参见如何：选择 Web 开发环境设置。
基本了解如何在 Visual Studio 中进行操作。

有关如何在 Visual Studio 中创建网页的说明，请参见演练：在 Visual Studio 中创建基本 Web 窗体页。

创建网站和 Web 窗体页

如果您已在 Visual Studio 或 Web Visual Studio 学习版中创建了一个 Web 窗体网站（例如，通过完成演练：在 Visual Studio 中创建基本 Web 窗体页），则可以使用网站并转到下一节。否则，按照下面的这些步骤创建一个网站和 Web 窗体页。

备注

本演练使用网站项目。您可以改为使用 web 应用程序项目。有关这些 web 项目类型之间的差异的信息，请参见 Web 应用程序项目与网站项目。

创建文件系统网站

打开 Visual Studio 或 Visual Studio Web 学习版。
在**“文件”菜单中，单击“新建网站”**。

显示**“新建网站”**对话框。
在**“已安装”下，单击“Visual Basic”** 或 “Visual” “C#” 然后选择 “ASP.NET 空网站”。

对于本演练，将创建一个不包含预生成的页面和其他资源的网站。
在**“Web”“位置”框中，选择“文件系统”**，然后输入用于保存网站页面的文件夹的名称。

例如，键入文件夹名“C:\WebSites”。
单击**“确定”**。

Visual Studio 将创建一个包含 Web.config 文件的网站项目。
在**“解决方案资源管理器”中，右击网站的根，然后单击“添加新项”**。
选择**“Web 窗体”，将文件命名为“Default.aspx”，然后单击“添加”**。

在“设计”视图中工作

在本演练的此部分中，您将了解如何在**“设计”**视图（该视图提供页的类似于 WYSIWYG 的视图）中工作。可以通过键入添加文本，如同在字处理程序中那样。可以使用格式设置命令直接设置文本格式或通过创建内联样式设置文本格式。

**“设计”视图显示页的方式与页在浏览器中的显示方式类似，但是也存在一些差异。第一个差异是：在“设计”视图中，文本和元素是可编辑的。第二个差异是：为了帮助编辑页，“设计”视图会显示一些在浏览器中不显示的元素和控件。此外，某些元素（例如 HTML 表）具有特殊的“设计”视图呈现，这种呈现为编辑器增加了额外的空间。总之，“设计”**视图帮助您对页进行可视化处理，但是不会精确地表示页在浏览器中的呈现方式。

在“设计”视图中添加静态 HTML 并设置其格式

如果未处于**“设计”视图中，请单击位于窗口左下角的“设计”**。
在页的顶端，键入“ASP.NET 网页”。
突出显示该文本以将其选定，然后在**“格式设置”工具栏上单击“标题 1”**。
在**“ASP.NET 网页”**出现后按 Enter，然后键入“此页由 ASP.NET 管理。”
突出显示该文本，然后在**“格式”菜单上，单击“新建样式”**。

**“新建样式”**对话框随即显示。
选中**“将新样式应用于文档选择内容”**选项。
从**“字体系列”下拉列表中选择一种字体，然后单击“应用”**。

该字体系列随即应用于选定的文本。
在**“类别”下，单击“块”，然后从“行高”下拉列表中选择“（值）”**。输入行高值。
从**“字母间距”下拉列表中选择“(值)”。输入字母间距值。单击“应用”**，查看应用于选定文本的值。
单击**“确定”**。

查看标记信息

在**“设计”**视图中工作时，您可能会发现查看设计图面标记（如 div 和 span）以及其他没有可视化呈现功能的标记是十分有用的。

在“设计”视图中查看 HTML 设计图面标记

在**“视图”菜单上，指向“可视辅助”，然后确保选中“ASP.NET 非可视控件”**。

设计器显示段落、分行符和其他不呈现文本的标记的符号。这些符号不会同时全部显示，但当您单击某个可视元素时，位于它前面的非可视元素将会显示。

添加控件和元素

在**“设计”**视图中，可以将控件从工具箱拖动到页上。可以使用对话框添加某些元素（如 HTML 表）。在本节中，将添加一些控件和一个表以供您稍后在演练中使用。

添加控件和表

将光标放在文本**“此页由 ASP.NET 管理”**的右侧，然后按 Enter。
从**“工具箱”的“标准”**组中，将TextBox 控件拖到页上，并将其放在您在上一步创建的空间中。

备注

也可以通过双击一个控件进行添加。
将 Button 控件拖到页上，并将其放在您在上一步添加的 TextBox 控件的右侧。

TextBox 和 Button 控件是 ASP.NET Web 服务器控件，而不是 HTML 元素。
将光标放在 Button 控件的右侧，然后按 Enter。
在**“表”菜单上，单击“插入表”**。

出现**“插入表”**对话框。
单击**“确定”**。

**“插入表”**对话框提供用于配置所创建的表的选项。但是对于本演练，您可以使用默认表布局。

创建超链接

**“设计”**视图提供生成器和其他工具以帮助创建需要进行属性设置的 HTML 元素。

创建超链接

在文本**“此页由 ASP.NET 管理”中，突出显示“ASP.NET”**以选择它。
在**“格式”菜单上，单击“转换为超链接”**。

出现**“超链接”**对话框。
在**“URL”**框中，键入 https://www.asp.net。
单击**“确定”**。

在“属性”窗口中设置属性

可通过在**“属性”**窗口中设置值来更改页上元素的外观和行为。

使用“属性”窗口设置属性

选中在本演练的前面部分“添加控件和元素”中添加的 Button 控件。
在**“属性”窗口中，将“Text”设置为“单击此处”，并将“ForeColor”**设置为另一种颜色。
将光标放在您在上一节创建的**“ASP.NET”**超链接中。

注意，在**“属性”**窗口中，a 元素的 hreef 属性设置为向该超链接提供的 URL。

测试该页

通过在浏览器中查看页可以看到编辑的结果。

以外部方式在浏览器中启动页

右击该页，然后单击**“在浏览器中查看”**。

如果提示您保存更改，则单击**“是”**。

Visual Studio 启动 IIS Express，该服务器是可以用于在不使用完全版 IIS 的情况下测试页的本地 Web 服务器。

备注

可以通过多种方式运行页。如果按 Ctrl+F5，则 Visual Studio 会执行在属性页上为“启动选项”配置的启动操作。Ctrl+F5 的默认启动选项为运行当前页；即“源”视图或“设计”视图中当前活动的页。也可以在调试器中运行页。有关更多信息，请参见演练：在 Visual Web Developer 中调试网页。

更改默认视图

默认情况下，Visual Studio 在**“源”**视图中打开新页。

将默认页面视图更改为“设计”视图

在**“工具”菜单上单击“选项”**
确保选中对话框底部的**“显示所有设置”**选项卡。
打开**“HTML 设计器”节点，然后选择“常规”。在“起始页位置”下，单击“设计”**视图。

在“源”视图中工作

**“源”**视图使您可以直接编辑页的标记。 **“源”视图编辑器为您提供了许多在创建 HTML 和 ASP.NET 控件时有所帮助的功能。如同在“设计”视图中一样，可以在“源”**视图中使用工具箱向页中添加新元素。

在“源”视图中添加元素

通过单击位于窗口底部的**“源”切换到“源”**视图。

已添加的控件是作为 <asp:> 元素创建的。例如，Button 控件为 <asp:button> 元素。所进行的属性设置作为特性设置保留在开始 <asp:button> 标记中。
从**“工具箱”的“HTML”组（而不是“标准”**组）中将一个 Table 元素拖到页上，并将其放在结束 </form> 标记的正上方。

编辑器在您手动键入标记时也有所帮助。例如，编辑器在您键入时提供用于完成 HTML 标记和特性的上下文相关选项。通过在有问题的标记下方标记波浪线，编辑器还提供有关标记的错误和警告信息。将鼠标放在标记文本上可以看到错误或警告信息。

在“源”视图中编辑 HTML

将光标放在结束 </form> 标记上方，然后键入一个左尖括号 (<)。

注意，编辑器提供了在当前上下文中适用的标记的列表。
输入“a”以创建一个定位点标记，然后按空格键。

编辑器列表显示适用于定位点标记的特性。

备注

字母“a”（定位点元素）可能不会显示为选项，具体情况视为网站或页设置的验证目标而定。不过，您仍然能够通过输入“a”而不在下拉列表中选择项来创建定位点元素。验证目标将在本主题的后面部分加以讨论。
在列表中，单击**“href”**，然后键入一个等号 (=) 和一个双引号 (")。

编辑器提供当前可链接到的页的列表。
在文件列表中，双击**“Default.aspx”**，按空格键，然后键入一个右尖括号 (>) 以结束标记。

编辑器插入一个 </a> 结束标记。
通过在开始和结束标记之间输入文本“Home”来完成定位点元素。

该元素现在类似于下面的示例：
```
<a href="Default.aspx">Home</a>
```
将光标放在结束 </form> 标记的正上方，然后键入<无效>。

编辑器在该标记下方标记波浪线，指示该标记不是已识别的 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 窗体页的高级 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 提供了以下工具，可帮助您在**“源”**视图中工作时完成这些任务：

“文档大纲”，提供文档的完整视图。
标记导航器，提供有关当前选择的标记和该标记在页层次结构中的位置的信息。

要开始，请向页添加更多元素以便您可以检查导航功能。

添加元素

切换到**“设计”**视图。
从**“工具箱”的“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 标记名称转换为小写形式，即使您用大写形式键入。编辑器还用双引号将特性（属性）值括起来。有关更多信息，请参见演练：Visual Studio 中用于 Web 窗体页的高级 HTML 编辑。

更改默认标记验证

在**“源”视图中，右击页，然后单击“格式设置与验证”**。
在**“选项”对话框中，展开“文本编辑器”, 展开“HTML”**,然后单击 “验证”。
在**“目标”**列表中，输入验证类型。

后续步骤

本演练已为您提供了网页编辑器的 HTML 功能的概述。这包括如何在**“设计”视图和“源”**视图、基本格式设置和导航中创建 HTML。若要了解 Visual Studio 中更多的编辑功能信息，请参考下列资源。

若要了解 HTML 编辑器的附加功能，包括对格式设置选项、大纲显示和 HTML 验证进行自定义，请参见演练：Visual Studio 中用于 Web 窗体页的高级 HTML 编辑。
若要了解如何使用级联样式表样式，请参见演练：创建和修改 CSS 文件。

通过

演练：Visual Studio 中用于 Web 窗体页的基本 HTML 编辑

系统必备

创建网站和 Web 窗体页

创建文件系统网站

在“设计”视图中工作

在“设计”视图中添加静态 HTML 并设置其格式

查看标记信息

在“设计”视图中查看 HTML 设计图面标记

添加控件和元素

添加控件和表

创建超链接

创建超链接

在“属性”窗口中设置属性

使用“属性”窗口设置属性

测试该页

以外部方式在浏览器中启动页

更改默认视图

将默认页面视图更改为“设计”视图

在“源”视图中工作

在“源”视图中添加元素

在“源”视图中编辑 HTML

检查 HTML 格式设置

检查 HTML 格式设置

在“拆分”视图中工作

在“拆分”视图中查看页面

在元素之间导航

添加元素

使用“文档大纲”进行导航

使用标记导航器进行导航

使用标记导航器移动或复制元素

设置文本格式

更改默认标记验证

后续步骤

请参见

任务

概念

其他资源