一、导出HTML的方法
Axure RP是一款流行的低保真原型设计工具，使用它可以快速制作交互原型，同时也支持将原型导出为HTML文件。导出HTML文件的方法如下：
1、在Axure软件内选择菜单“发布”->“生成HTML文件”； 2、设定要导出的页面数量和导出路径； 3、设定是否包含Axure生成的JS和CSS文件，是否包含Axure预设的Web字体文件； 4、点击“生成”按钮，Axure会按照设定生成HTML文件。
值得注意的是，导出的HTML文件可能在不同的浏览器和设备上会存在显示效果上的差异。
二、整体HTML文件结构
当导出HTML文件后，可以看到生成的文件的整体HTML文件结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/repeater.js"></script>
</head>
<body>
<div id="base">
<div id="page_DIV" class="ax_default" data-footable-mode="client" data-footable-breakpoint="640" >
<!-- 页面所有部件的HTML代码 -->
</div>
</div>
</body>
</html>
导出的HTML文件包含了一个DOCTYPE声明，meta标签，title标签和body标签。在head标签中，引用了导出的CSS、JavaScript文件。HTML文件中页面所有部件的HTML代码都在div id="page_DIV"的div标签内。
三、页面HTML代码结构
除了整体HTML文件之外，也需要观察单个页面的HTML代码结构，观察单个页面HTML代码可通过以下步骤实现：
1、在Axure RP中双击要导出的页面，在“页面”选项卡下找到“页面样式”； 2、找到页面样式中的“添加注释”，在“代码注释”中点击“HTML”，然后点击“保存”； 3、在生成HTML文件后，在项目文件夹内找到“document.html”文件，用文本编辑器打开，找到页面名称所对应的HTML代码片段。
可以发现，页面代码由多个div包裹构成，每个div代表一个页面的部件。在每个div中，可以看到如下代码：
data-label="Page" class="ax_default" data-left="0" data-top="0" data-width="1280" data-height="960">
这些代码代表了部件自身的宽度、高度、坐标和绑定的Axure默认类名。如果需要样式定制，可以修改已有类或自定义类，定制CSS文件。
四、Axure页面部件的CSS类名
在导出的HTML文件中，每个部件都会被赋予一个CSS类名，这个类名是Axure“预设样式”的结果。这里列出一些常见的Axure样式类名及其对应的样式：
1、ax_default：表示部件没有自定义的样式； 2、ax_shape：表示图形部件，如矩形、圆形等； 3、ax_table_cell：表示表格单元格； 4、ax_image：表示图片部件； 5、ax_text_cell：表示文本部件； 6、ax_checkbox：表示复选框部件； 7、ax_radio：表示单选框部件； 8、ax_listbox：表示下拉选择框部件； 9、ax_text_area：表示文本框部件。
五、HTML文件中加入JavaScript
在导出的HTML文件中，Axure也会通过JavaScript生成一些功能，比如按钮的点击事件、导航菜单的展开与收起。在需要实现交互的元素上，选择“添加交互”后，Axure将会在页面底部的JavaScript中添加相应的代码。如果需要添加自定义的JavaScript代码，可以通过添加HTML注释进行实现：
1、在Axure RP中的“页面”选项卡下找到“页面样式”；
2、找到页面样式中的“添加注释”，在“代码注释”中点击“HTML”，然后点击“保存”；
3、在代码注释中添加script标签，定义自定义的JavaScript代码；
4、在HTML代码中需要执行JavaScript代码的部件上添加指向定义好的JavaScript代码标注的axure标注。比如：
<div id="menu_DIV" class="ax_default" data-label="menu" data-left="10" data-top="10" data-width="100">
<!-- 对应JS代码注释: <!--JS menu--> -->
<div id="menu_Image" class="ax_image"></div>
</div>
