演练：使用 HTML 代码段

  • 项目

本演练演示如何使用 HTML 代码段向页面中添加标记。 在**“源”**视图中创建网页标记时，可以使用 Visual Studio 中的 HTML 代码段以节省时间和减少键入工作。

备注

本主题中的示例特定于 ASP.NET Web 窗体页。但是，可以使用为 Web 窗体创建的页面中的 HTML 代码段、ASP.NET MVC（模型视图控制器）和 ASP.NET 网页 web 应用程序。

本主题包含以下各节：

  • 系统必备

  • 代码段的工作方式

  • 打开现有项目或创建新项目

  • 插入 HTML 代码段

  • 运行该页

  • 后续步骤

系统必备

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

  • Visual Studio 或 Visual Studio Express for Web。

代码段的工作方式

Visual Studio 包括 200 多个 C#、Visual Basic、XML 和 HTML 代码段（含 ASP.NET 标记）。 代码段由预编写的编程代码或标记组成。 在某些情况下，代码段中包含可以在插入代码段后指定的信息占位符（如属性名称） 可以使用代码编辑器中的代码段，当创建网页时，也可以使用 HTML 编辑器的**“源”**视图中的代码段。

在本演练中，您将向 Web 窗体页中添加 HTML 和 ASP.NET 标记。 几乎所有代码段都有快速插入代码的方法。 例如，若要将 ASP.NET Button 服务器控件插入 Web 窗体页，则可键入 <bu，然后按两次 TAB 键。 或者，可以键入按钮，然后按一次 TAB 键。 当您执行操作后，编辑器会插入以下标记，以完成 Button 控件的标记：

<asp:Button Text="text" runat="server" />

本演练演示如何更快插入代码段。 不过，您也可以通过以下方式插入代码段：

  • 将光标放在要显示所插入代码段的位置，右击该页，然后选择**“插入代码段”**。

  • 将光标放在要显示所插入代码段的位置，然后按键盘快捷键 Ctrl+K、Ctrl+X。 这样会显示一个列表，可供您选择代码段。

  • 选择要添加外侧代码段的单词，右击所选的单词，然后单击**“外侧代码”**。

  • 在**“编辑”菜单中选择“IntelliSense”，然后选择“插入代码段”**。

在 Visual Studio 中，若要查看哪些代码段可用或添加代码段，可以使用**“代码段管理器”**。

备注

代码段管理器功能在 Visual Studio Express for Web 中不可用。

下图显示了**“代码段管理器”**对话框。

“代码段管理器”对话框

“代码段管理器”对话框

在下面的过程中，您将了解可用于 HTML 元素的代码段。

使用代码段管理器查看可用的 HTML 代码段

  1. 打开 Visual Studio。 不必打开项目即可查看**“代码段管理器”**。

  2. 在**“工具”菜单中，选择“代码段管理器”**。

    将显示**“代码段管理器”**对话框。

  3. 在**“语言”列表中，选择“HTML”**。

    请注意，有几个文件夹中包含与 HTML 有关的代码段，如 ASP.NET、ASP.NET MVC 和 HTML。

  4. 在**“位置”下，展开“HTML”**文件夹。

  5. 选择**“div”**。

    请注意，**“备选快捷键”**列表中包含相关 HTML 元素，如 p、h1 和 h2。 相关元素还具有可通过使用快捷方式 <div、<p、<h1 等插入的代码段。

打开现有项目或创建新项目

如果您还没有 Visual Studio 或 Visual Studio Express for web 应用程序项目，请使用以下步骤为本演练创建一个。在本演练中，您将在 Default.aspx 页上处理代码段，但您可以在现有项目页面上执行相同步骤。

创建 Web 应用程序项目

  1. 在**“文件”菜单中，单击“新建项目”**。

    将显示**“新建项目”**对话框。

  2. 选择**“Web”节点，然后从“Visual Studio 已安装的模板”节中选择“ASP.NET Web 应用程序”**。

  3. 在**“名称”**字段中键入 SnippetTest。

  4. 单击**“确定”**。

    Visual Studio 将创建一个 Web 应用程序项目。

插入 HTML 代码段

IntelliSense 显示可用的 HTML 代码段，就像显示其他 HTML 元素一样。 代码段的多种功能能让您快速插入和编辑代码段。 此外，有些代码段还包含占位符，您不必将插入点移至特性即可输入占位符的值。

在此过程中，您将插入 ASP.NET 元素。 这些元素包含在**“代码段管理器”**中的 HTML 节。

在标记中插入 HTML 代码段

  1. 打开 Default.aspx 页（如果它还未打开的话）。

  2. 切换到**“源”**视图。

  3. 将光标放在结束 </asp:Content> 标记之前。

  4. 键入 <che。

    下拉列表显示元素名称和代码段。 包含尖括号的图标表示 HTML 元素，如下图所示：

    HTML 元素图标

    如下图所示，纸张图标表示代码段：

    代码段图标

    有些代码段和其 HTML 元素同名，而且既有代码段图标，也有标记图标。

  5. 连按两次 Tab 键。

    即会显示 CheckBox 控件的标记，而且 text 属性值突出显示。

    备注

    如果光标不在元素的开始和结束标记之间，则可能得到不同的结果。

  6. 键入 Check box，然后按 Enter 完成该元素。

    光标会移至元素的结尾；不必使用 Tab 键即可完成该元素。

  7. 按 Enter 转至下一行。

  8. 将光标放在该行的开头，然后右击该页。

  9. 选择**“插入代码段”**以显示可用的代码段文件夹。

  10. 双击 HTML 代码段文件夹。

  11. 键入 br，然后按 Tab。

    即会显示换行符 (br) 元素的标记。

  12. 按 Enter 转至下一行。

  13. 将光标放在该行的开始位置，然后按键盘快捷键 Ctrl+K、Ctrl+X。

    出现代码段文件夹列表。

  14. 按 TAB 选择**“ASP.NET”**代码段文件夹。

  15. 键入 ra，然后按 TAB。

    出现 RadioButton 控件的标记，并突出显示 text。

  16. 键入单选按钮。 按 ENTER 完成该元素。

  17. 按 Enter 转至下一行。

  18. 键入 <br，然后按两次 TAB。

  19. 按 Enter 转至下一行。

  20. 在**“编辑”菜单中选择“IntelliSense”，然后选择“插入代码段”**。

    将显示代码段文件夹列表。

  21. 双击 ASP.NET 代码段文件夹。

  22. 键入 la，然后按两次 TAB。

    即会显示 Label 控件的标记。 属性值 text 将突出显示。

  23. 键入文本框，并按 ENTER。

  24. 转至下一行。

  25. 键入 <textb，然后按两次 TAB。

    出现 TextBox 控件的标记。

运行该页

最后一步是测试该页。 若要测试页，则可以使用 IIS Express，它在本地运行，并且不需要 IIS。

运行该页

  1. 按 Ctrl+F5 运行该页。

  2. 向下滚动到底部。 复选框、单选按钮、标签和文本框控件位于页面底部。

后续步骤

在本演练中，您学习了如何将 HTML 代码段添加到 Visual Studio 项目中。 有关如何使用代码段的更多信息，请参见 代码段 页面上的主题。