---
title: "这款 XML 编辑器支持 HTML5 和 CSS3"
date: "2012-01-03"
tags:
- "css3"
- "html-editor"
- "html5"
- "v2012"
- "xmlspy"
description: 了解如何通过Altova的XMLSpy 2012，利用其高级功能，如语法高亮、代码自动补全以及集成浏览器视图，来提升HTML5和CSS3的编辑体验。
---
Status: #blog
Tags: #css3 #html-editor #html5 #v2012 #xmlspy
Categories: [Altova](/blog/zh/category/altova.md)
# 这款 XML 编辑器支持 HTML5 和 CSS3
我们最近发布的2012版本对Altova MissionKit的Web工具进行了重要的更新 [发布](https://www.altova.com/zh/whatsnew.html): 它支持HTML5和CSS3。您会发现，XMLSpy 2012（及更高版本）的代码编辑功能以及StyleVision 2012的图形样式表和报表设计功能，都已更新以支持这些Web标准的最新版本。
[](http://lh4.ggpht.com/-jax0JUfDpzg/TwIafF8lrYI/AAAAAAAAAHM/eN08gQzWlbE/s1600-h/clip_image001%25255B3%25255D.png)
在这里，我们将重点介绍XMLSpy中的HTML5和CSS3编辑器，而StyleVision的功能将在以后的文章中进行介绍。
### HTML5 编辑器
XMLSpy 长期以来一直支持 [HTML4 的编辑](https://www.altova.com/zh/xmlspy/html-editor.html)，当然也支持 XHTML，现在，这些智能编码功能也扩展到了 [HTML5](https://www.altova.com/zh/xmlspy/html-editor.html)。
如果您已经在使用 XMLSpy，那么当您打开 HTML5 文件进行编辑时，您会立即注意到高级文本视图中实用的语法高亮、代码折叠和行号功能。在您输入代码时，下拉菜单和静态输入辅助窗口会提供有效的 HTML5 元素和属性选项，让您可以按照自己喜欢的编码风格完成代码。同时，代码自动补全功能可以帮助您更快地工作，同时确保元素正确闭合。
[](http://lh6.ggpht.com/-RgxgBoIMhPw/TwIafmCNstI/AAAAAAAAAHc/D2LIQP-TWZQ/s1600-h/clip_image002%25255B3%25255D.png)
这些智能编辑功能适用于您正在使用的HTML版本。无论您是打开现有的HTML5文档，还是从头开始创建一个新文件，所有HTML5元素和属性都会立即在辅助窗口和下拉菜单中显示出来。
XMLSpy 包含一个集成的浏览器视图，让您能够立即查看 HTML5 代码的结果。该浏览器视图会直接在 XMLSpy 中，使用您安装的 Internet Explorer 来渲染您的网页……
[](http://lh6.ggpht.com/-0kNO6Tl3YHY/TwIagG5XUSI/AAAAAAAAAHs/6IE-jNjr_08/s1600-h/clip_image004%25255B3%25255D.jpg)
...同时，它还允许您立即在您计算机上安装的任何浏览器中查看您的[HTML5网页](https://www.altova.com/zh/xmlspy/html-editor.html)。
[](http://lh5.ggpht.com/-VSwezP3iNvI/TwIag7aPseI/AAAAAAAAAH8/k2ZG_FSh_EE/s1600-h/clip_image005%25255B3%25255D.gif)
这使得快速测试和调试成为可能，从而确保跨浏览器兼容性。
要了解一些新的 HTML5 功能的实际效果，请查看 XMLSpy 2012 示例文件夹中提供的简单 HTML5 示例文档，该文档可以通过“示例”项目进行访问。 要了解更多关于 HTML 的信息，网上有很多优秀的资源，包括 [http://www.w3.org/TR/html5/](http://www.w3.org/TR/html5/)。
### CSS3 编辑器
与...紧密合作 [HTML5 编辑器](https://www.altova.com/zh/xmlspy/html-editor.html) 是 XMLSpy [CSS3 编辑器](https://www.altova.com/zh/xmlspy/css-editor.html), 它还提供语法高亮显示、代码提示功能，以及在文本视图中提供书签功能和代码折叠功能。
[](http://lh6.ggpht.com/-3bE7my-XCNQ/TwIahUxeFzI/AAAAAAAAAIM/d9Dg6iF9sBk/s1600-h/clip_image006%25255B3%25255D.png)
CSS 概要窗口会显示文档的结构概览，按照其选择器进行分组展示。每个分组都可以折叠和展开，并且点击概要窗口中的某个选择器，会在文档中高亮显示该选择器。此外，CSS 属性和 HTML 元素的相关辅助信息会以窗口和上下文相关的下拉菜单的形式呈现。XMLSpy 甚至还提供了屏幕提示，在您输入时，会提供每个属性及其可能值的定义。
[](http://lh4.ggpht.com/-zNowLSk-LPM/TwIahhG7U1I/AAAAAAAAAIc/CTRfLtZ7D7Y/s1600-h/clip_image007%25255B3%25255D.png)
您也可以利用 XMLSpy 内置的浏览器视图，立即在相关的 HTML 页面上查看您对 [CSS 编辑](https://www.altova.com/zh/xmlspy/css-editor.html) 的结果。
[](http://lh5.ggpht.com/-BWRgsCJ-TCo/TwIaiLS6kRI/AAAAAAAAAIs/yDO9PQ9OFWY/s1600-h/clip_image008%25255B3%25255D.png)
### 为什么选择 XMLSpy 来处理 HTML？
当然，XMLSpy 以其在 XML 方面的强大功能而闻名，但它也是 HTML 开发的理想选择。XMLSpy 对 HTML5 和 CSS3 的编辑功能得益于对相关技术的支持，包括 XML、XSLT、WSDL 等，以及集成的项目管理功能、对主流版本控制系统的支持，以及与 Microsoft® SharePoint® Server 的集成，从而为您提供开发下一代网站和应用程序所需的所有工具。
我们很想了解您目前是如何使用HTML5的——请通过在下方留言的方式与我们分享您的经验。