演练：Visual Web Developer 中的高级 HTML 编辑
更新：2007 年 11 月
Microsoft Visual Web Developer Web 开发工具提供了丰富的用于创建网页的 HTML 编辑体验。 本演练介绍 Visual Web Developer 的一些更高级的 HTML 编辑功能。
.gif "说明") 说明： |
|---|
有关 HTML 编辑功能的介绍，请参见 演练：Visual Web Developer 中的基本 HTML 编辑。 |
本演练阐释以下任务：
指定用于确定 HTML 编辑器如何设置页中元素格式的选项。
选择相应的选项以便创建的 HTML 编辑器与特定浏览器兼容。
以大纲方式显示页，即在编辑器中创建可折叠区域以减少混乱。
先决条件
若要完成本演练，您需要：
- 对 Visual Web Developer 的使用有大致了解。
有关 Visual Web Developer 的介绍，请参见演练：Visual Web Developer 中的基本 HTML 编辑。
创建网站和网页
如果已在 Visual Web Developer 中创建了一个网站（通过完成演练：Visual Web Developer 中的基本 HTML 编辑），请转到下一部分。 否则，按照下面的步骤创建一个新的网站和网页。
创建文件系统网站
打开 Visual Web Developer。
在**“文件”菜单上指向“新建”，然后单击“网站”**。
出现**“新建网站”**对话框。
在**“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”**。
在**“位置”**框中输入要保存网站页面的文件夹的名称。
例如，键入文件夹名“C:\WebSites”。
在**“语言”**列表中，单击您想使用的编程语言。
单击**“确定”**。
Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。
说明：默认情况下，Visual Web Developer 使用代码隐藏模型创建 ASP.NET 网页。 有关更多信息，请参见 ASP.NET 网页代码模型。 在本演练中，将不使用代码隐藏页。
设置标记格式
HTML 编辑器提供了多种选项，帮助您根据自己的喜好设置页中标记的格式。 格式设置选项包括以下各项：
标记和属性名是大写还是小写字母。 可以分别为 HTML 标记和 ASP.NET Web 服务器控件指定选项。
是否通过将属性括在引号中进行添加。
元素是否由编辑器自动结束。选项包括创建自结束标记（例如 <br />），创建开始标记和结束标记 (<br />)，以及自动插入结束标记。
标记的子元素的缩进方式。
标记周围的换行符的放置位置。
无论设置哪些格式设置选项，HTML 格式设置的一个重要功能是您对页中标记的布局和外观具有最终控制。 您可以手动设置元素格式（例如，通过缩进元素），并且除非您明确要求重新设置标记格式，否则编辑器将保留您的格式设置。
在本部分演练中，将使用不同的格式设置选项并查看不同设置的效果。 还将了解如何对整个页或页的选定区域应用格式设置。
| 说明： |
|---|
本演练仅演示使用 HTML 时特有的格式设置功能。 作为 Visual Web Developer 文本编辑器，HTML 编辑器还支持各种适用于所有文本编辑的选项，如设置制表符大小和换行。 有关一般文本编辑选项的信息，请参见 编辑文本、代码和标记。 |
在本部分演练中，将向页添加一些简单的 HTML，更改格式设置选项，然后添加更多 HTML。 这将演示更改设置如何影响 HTML 格式设置。
添加具有默认格式设置选项的 HTML 元素
切换到“设计”视图。
在**“表格”菜单上单击“插入表”，然后单击“确定”**。
不要更改对话框中的任何默认设置。
设计器创建一个具有两列和两行的 HTML 表。
在表下方单击页。
按几次 Enter 创建一些空白空间，然后从工具箱的**“HTML”**组中将 Image 控件拖动到页上。
切换到“源”视图。
您将看到 <table>和 <img> 元素已插入到页中。
默认情况下，设计器创建的元素中的标记和属性名是小写的，并且属性括在引号内。
现在可以更改格式设置选项。
更改格式设置与验证选项
在**“工具”菜单上单击“选项”**。
单击**“文本编辑器”，展开“HTML”，然后单击“验证”**。
在**“目标”列表中单击“XHTML 1.0 Transitional”**。
单击**“格式”**。
单击**“标记专用选项”**按钮可以分别为服务器标记（ASP.NET 服务器控件）和客户端标记（HTML 元素）设置一些选项。
在**“客户端标记”列表中单击“大写”**。
清除**“设置格式时插入属性值引号”和“键入时插入属性值引号”**复选框。
单击**“确定”**返回编辑器。
注意，尽管更改了格式设置选项，但页中的现有标记并不更改。
现在可以添加新元素。
使用新格式设置选项添加 HTML 元素
在“源”视图中，滚动到页面底部。
从工具箱的**“HTML”**组中，将 Table 控件拖到该页上并将该控件放在 </form> 标记上方。
此时，<TABLE> 元素中的标记为大写字母。
在刚创建的表下方放置插入点，然后键入右尖括号 (<) 开始新标记。
将显示一个列表，其中的标记名称均为大写，因为这是由您已设置的格式设置选项决定的。
在列表中双击**“IMG”**，然后按空格键。
<img> 标记的属性列表显示。 这些属性均为小写，因为您在设置格式设置选项时，保留了**“客户端属性”的默认设置“小写”**。
在“属性”中，将**“Src”**设置为“graphic.gif”（即虚构的图形文件名），并确保标记现在类似下面这样：
<IMG src=graphic.gif因为在前面的步骤中禁用了**“键入时插入属性值引号”**选项，所以编辑器不会自动将属性括在引号内。
说明：无论这些选项设置如何，只要属性需要括在引号内时（如属性值包含空格时），编辑器就会自动插入引号。
键入正斜杠 (/) 和右尖括号 (>) 结束 <img> 标记。
如本节前面提到的，设置的格式设置选项不影响页中的现有标记。 但是，如果需要，可以对页或页中的个别元素应用格式设置选项。
对现有元素应用格式设置
在“源”视图中，突出显示以选择创建的第一个表。
在**“编辑”菜单上指向“高级”，然后单击“设置选定内容的格式”**。
标记名称更改为大写。
说明：即使更改选项设置，编辑器也不会移除引号。 同样，即使更改用于确定如何关闭标记的选项，编辑器也不会更改现有标记的终止方式。
可以从此示例中看到格式设置在 HTML 编辑器中的工作方式。 使用编辑工具（如“工具箱”或“属性”）编辑元素时，编辑器使用当前这些格式设置选项生成标记。 但是，编辑器不更改任何现有标记。 如果要对现有标记应用新的格式设置选项，可以通过使用**“编辑”**菜单命令手动应用。
设置标记格式设置选项
到现在所使用的格式设置选项都应用于页中的所有元素。 如果需要，还可以为各个标记指定格式设置选项。 当频繁使用某些标记并需要对这些标记使用非默认格式设置时，这样做很有用。 使用基于标记的格式设置可设置以下格式设置选项：
标记的结束方式，即不结束、自终止或以单独的结束标记结束。
换行符在标记周围及内部的使用方式。
标记的子元素的缩进方式。
说明：指定的特定于标记的格式设置规则可由这样的规则重写：HTML 编辑器将不更改标记呈现方式。 如果某一标记格式设置规则将更改标记呈现方式，则忽略该规则。
在本部分演练中，将设置一些标记格式设置选项并了解编辑器处理这些选项的方式。到现在为止，处理的都是 HTML 元素，如 <table> 元素。 现在，您将处理一些 ASP.NET 服务器控件，以便您可以看到格式设置选项等同应用于控件和元素。
将通过设置一些应用于特定类型的全部标记的选项开始。 可以为以下类型的元素设置选项：
没有内容的 HTML 元素，如 br 和 input。
可以具有内容的 HTML 元素，如 table 和 span。
不能具有内容的服务器元素 (asp:)，如 asp:image。
可以具有内容的服务器元素，如 asp:textbox。
.gif "安全说明") 安全说明： |
|---|
TextBox 控件接受用户输入，这是一个潜在的安全威胁。 默认情况下，ASP.NET 网页验证用户输入是否不包括脚本或 HTML 元素。 有关更多信息，请参见脚本侵入概述。 |
这一节的开始部分将添加一个 HTML 表。 然后将更改表元素的标记格式设置规则，并重新设置文档格式以查看更改格式设置规则的效果。
为 HTML 表设置标记格式设置规则
在“源”视图中，右击窗口的空白部分，然后单击“格式设置与验证”。
**“选项”**对话框显示，并带有在前面部分设置的格式设置选项。
在**“客户端标记”列表中单击“小写”**，重置客户端标记的格式设置。
单击**“确定”关闭“选项”**对话框。
从工具箱的**“HTML”**组中，将 Table 控件拖动到该页上。
编辑器创建一个 <table> 元素，该元素具有两行（<tr> 元素），每行有两个单元格（<td> 元素）。 每个标记自成一行：
<table> <tr> <td> </td> </tr>右击窗口的空白部分，然后单击**“格式设置与验证”**。
单击**“标记专用选项”**按钮。
展开**“默认设置”**。
显示一个标记类型列表，列表中的类型以**“客户端标记不支持内容”**开始。 通过选择列表中的项，可以为客户端和服务器元素、具有内容的元素（如 table 元素）和没有内容的元素（如 img 元素）设置不同的选项。
单击**“客户端标记支持内容”**。
注意，默认设置是标记使用单独的结束标记，并且标记前、标记中和标记后有换行符。
展开**“客户端 HTML 标记”**。
单击**“td”**。
设置选项以更改 td 标记的格式设置方式。
在**“换行符”列表中单击“无”**。
单击**“确定”关闭“标记专用选项”对话框，然后单击“确定”关闭“选项”**对话框。
在**“编辑”菜单上指向“高级”，然后单击“设置文档的格式”**。
文档格式被重新设置。添加的表中的 <td> 标记放置在一行中：
<table> <tr> <td></td><td></td><td></td>
可以对 ASP.NET 服务器控件使用标记专用的选项。
设置 ASP.NET 服务器控件的格式设置选项
切换到“设计”视图。
从工具箱的**“标准”**组中，将一个 ListBox 控件拖到页上。
在**“ListBox 任务”对话框中单击“编辑项”**。
出现**“ListItem 集合编辑器”**对话框。
单击两次**“添加”**添加两项。
在**“成员”下单击第一个“ListItem”，然后在“ListItem 属性”下将“文本”**设置为“Item 1”。
在**“成员”下单击第一个“ListItem”，然后在“ListItem 属性”下将“文本”**设置为“Item 2”。
单击**“确定”关闭“ListItem 集合编辑器”**对话框。
切换到“源”视图。
注意，控件格式已按照下面的方式设置：
<asp:Listbox ID="ListBox1" runat="server"> <asp:ListItem>Item 1</asp:Listitem> <asp:ListItem>Item 2</asp:Listitem> </asp:Listbox>右击窗口的空白部分，然后单击**“格式设置与验证”**。
单击**“标记专用选项”**按钮。
在**“标记专用选项”对话框中单击“ASP.NET 控件”，然后单击“新建标记”**。
在**“标记名”**框中键入“asp:listitem”。
不要键入左右尖括号（< 和 >）作为标记名的一部分。
您正在为在 ListBox 控件内使用的 asp:ListItem 元素设置选项。 而不是在为 asp:ListBox 元素设置选项，因为您需要控制 asp:ListBox 元素的内容（子元素）的格式设置方式。
单击**“确定”关闭“新建标记”**对话框。
在**“换行符”列表中单击“无”**。
这将使得控件中没有换行符。
单击**“确定”关闭“标记专用选项”对话框，然后单击“确定”关闭“选项”**对话框。 现在可看到新格式设置选项的效果。
使用新格式设置选项添加 ASP.NET 服务器控件
切换到“设计”视图。
从工具箱的**“标准”**组中，再将一个 ListBox 控件拖到页上。
在**“ListBox 任务”菜单上单击“编辑项”**。
对于 ListBox 控件，按照之前的过程创建两项。
切换到“源”视图。
注意，<asp:ListItem> 元素都在一行上。</asp:ListBox> 元素显示在下一行上，因为标记换行设置为 80 个字符。 可以在**“选项”**对话框中修改此值。 尽管仅处理两个控件并仅更改一个格式设置选项（换行符），但可以看到如何对通常处理的任何元素应用选项。
以大纲方式显示元素
在“源”视图中，可以以大纲方式显示元素（折叠和展开），以便在不处理元素时可以不显示它们。 这对于常占用大量空间的元素（如表）特别有用。 还可以对页中的任何元素使用折叠功能。
以大纲方式显示元素
切换到“源”视图。
选择一个此前添加的表。
- 如果还没有表，请从工具箱的**“HTML”**组拖动一个表到页上。
在**“编辑”菜单上指向“大纲显示”，然后单击“隐藏选定内容”**。
<table> 标记将折叠起来，并且旁边显示加号 (+)。
单击加号展开表元素。 还可以配置元素，以便当元素超过特定大小时自动在旁边显示加号 (+) 和减号 (-)。
配置如何自动以大纲方式显示元素
右击页面，依次单击**“格式设置与验证”、“格式”和“标记专用选项”**按钮。
在**“标记专用选项”对话框中展开“客户端 HTML 标记”，然后单击“表”**。
在**“代码编辑器中的大纲显示”下的“最小行数”**框中输入“5”。
单击**“确定”，然后单击“确定”**。
对于现有表和任何添加的新表，如果表超过五行，则自动以大纲方式显示。
验证 HTML
HTML 编辑器可以验证 HTML 或确保其符合特定浏览器或标准的规则，如 XHTML。 例如，编辑器可以找到 Netscape Navigator 4.0 不接受或不符合 XHTML 标准的标记和属性。 在本部分演练中，将处理不同的架构（浏览器类型或标准）并引入各种小错误以了解编辑器如何标记错误。
在编辑器中测试验证
在“源”视图中，打开或切换到 Default.aspx 页。
在“HTML 源编辑”工具栏上的列表中单击**“Internet Explorer 3.02/Netscape Navigator 3.0”**。
滚动到页底部。
在 </form> 标记中键入下面的 HTML：
<font face=arial> <a href=Default.aspx >Default Page </a> </font>键入时，Microsoft IntelliSense 技术会帮助完成标记。
在“HTML 源编辑”工具栏上的列表中单击**“XHTML 1.0 Transitional (Netscape 7, Opera 7, Internet Explorer 6)”**。
短暂停顿后（因为验证作为后台任务执行），将看到标记各个部分下面的红色曲线。 像拼写检查器一样，HTML 验证功能会查找页中不为当前选择的浏览器接受的标记。
在 <font> 标记中，将鼠标指针停留在单词 <font> 上。
会有一个工具提示通知您，font 元素被视为已过时。 当前标准现在建议对文本格式设置使用级联样式表样式。例如 <span style="font-name:Arial;">。
在 href 标记的 <a> 属性中，将鼠标指针悬停在 Default.aspx 上。
会有一个工具提示通知您，在当前架构中属性必须括在引号中。
将 Default.aspx 括在引号中。
href 属性的值不再带有下划线。 如果对定位点标记或其他需要 URL 的标记使用相对引用，验证将确定目标元素是否可用。
在所编辑的 HTML 的下一行中，键入右尖括号 (<)。
显示 IntelliSense 下拉列表，但这次不提供 font，因为 font 元素在 XHTML 架构中无效。
删除右尖括号 (<)。
设置验证选项
您可以控制验证显示的错误类型。 如果需要验证找出特定类型的错误（即使这些错误在特定架构中是允许的），这一功能很有用。
设置验证选项
在“源”视图中，右击页中的任意位置，然后单击**“格式设置与验证”**。
说明：“格式设置与验证”命令仅在“源”视图中可用。
在**“选项”对话框中，单击“验证”**。
注意，无论选择或清除**“显示错误”**复选框，都不会启用错误显示类型复选框。 这是因为当前架构为 XHTML，它已经显示了所有可能的验证错误。
在**“目标”列表中单击“Internet Explorer 6”**。
确保选择了**“显示错误”复选框，然后在“显示错误”**下选择所有复选框。
单击**“确定”**返回编辑器。
选择在以前步骤中输入的 HTML，然后在**“编辑”菜单上单击“转换为大写”**。
短暂停顿后，标记名称带上下划线。 将鼠标指针停留在标记名称上时，会有一个工具提示指示名称包含大写字母。 通常，Internet Explorer 6 允许大写形式的标记名称，但因为更改了该架构的验证选项，所以现在会看到此验证错误。
验证还可以找出许多其他类型的错误，如重复的控件 ID、交叉的开始和结束标记（例如 <b><i></b></i>）等。 但是，编辑器中的验证不会阻止您创建需要的任何 HTML 代码。 验证仅标识出不符合指定浏览器规则的标记。
您应了解当 ASP.NET 页运行时，生成的输出不仅包含创建的 HTML 元素，还包含 ASP.NET 服务器控件以及写入到页中的任何代码呈现的 HTML。 验证无法检查这些动态元素的输出；即，编辑器无法检查所生成输出的有效性。 默认情况下，ASP.NET 控件生成符合 XHTML 1.1 标准的输出。 这意味着输出适合大多数浏览器。有关 ASP.NET 控件生成的标记的更多信息，请参见 ASP.NET 和 XHTML。
后续步骤
本演练已经介绍了 HTML 编辑器的一些更高级的功能。 尽管本演练没有演示每个功能，但您已经了解了格式设置选项、大纲显示和验证可如何帮助您生成格式良好的自定义格式的标记，同时仍使您可以最终控制标记。