| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> |
| <html> |
| <head> |
| <title>HTML5 Web 开发支持</title> |
| <meta http-equiv="content-language" content="en"> |
| <meta name="description" content="DESCRIPTION HERE"> |
| <link rel="stylesheet" type="text/css" href="../../features.css"> |
| <link rel="stylesheet" type="text/css" href="/images_www/js/colorbox/colorbox.css"> |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| <body> |
| <script type="text/javascript" src="/images_www/js/colorbox/jquery.colorbox-min.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| $('a.cbox').colorbox({rel:'cbox',opacity:0.7}); |
| }); |
| </script> |
| <div style="margin:10px 20px 0px 0px;"> |
| <h1>HTML5 Web 开发支持</h1> |
| <p><a href="../../images_www/v7/3/features/html5-dev.png"><img alt="NetBeans IDE 中的 Java Enterprise 应用程序开发" border="0" src="../../images_www/v7/3/features/html5-dev-cut.png"><br /> <span class="font-11">单击图像查看全屏预览</span></a><br /></p> |
| <p class="intro"> |
| 从 NetBeans IDE 7.3 开始，引入了支持和增强利用 HTML5 系列技术的客户端 Web 应用程序开发体验的新功能。您可以使用这些功能快速直观地创建功能丰富的 Web 应用程序，这些应用程序支持同时面向桌面平台和 Mobile 平台的响应式 Web 设计模式。此外，您还可以在 <a href="../java-on-server/index.html">Java EE</a> 和 <a href="../php/index.html">PHP</a> 应用程序中使用 HTML5 技术。 |
| </p> |
| <div class="line"> </div> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im1"><a class="cbox" href="../../images_www/v7/3/features/html5-app.png" title="HTML5 应用程序开发支持"><img alt="" src="../../images_www/v7/3/features/html5-app-cut.png" width="320" /></a></span> |
| <h2>加速的 HTML5 开发支持</h2> |
| <p> |
| 通过 NetBeans IDE，您即可在创建 HTML5 项目时更快地进行 HTML5 Web 应用程序开发。您可以从 HTML5 项目的常用联机模板列表中进行选择，也可以指定站点模板的 .zip 档案的位置。当您基于某个站点模板创建项目时，项目的文件、库和结构由该模板确定。</p> |
| <p>或者，您可以在创建 <a href="../java-on-server/index.html">Java EE 应用程序</a>和 <a href="../php/index.html">PHP 应用程序</a>后，使用下面所述的所有 HTML5 功能。 |
| <p> |
| 一经设置，即可实时预览 Web 页、编辑器支持、调试功能及其他功能，从而帮助开发、测试和调试 HTML5、Java EE 和 PHP 应用程序。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-gettingstarted.html">HTML5 开发入门</a> |
| </p> |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im2"><a class="cbox" href="../../images_www/v7/3/features/html5-preview.png" title="Web 页的实时预览"><img alt="" src="../../images_www/v7/3/features/html5-preview-cut.png" width="320" /></a></span> |
| <h2>Web 页的实时预览</h2> |
| <p> |
| 多数专业开发者都会承认这要好于 WYSIWYG，与 Chrome 和内部嵌入式 WebKit 浏览器（二者都基于 WebKit）的深入集成确保了代码和页设计之间的无缝连接。 |
| </p> |
| <p> |
| 尽管使用的是远程 WebKit API，但是您可以继续完整查看和控制 IDE 中的代码，同时从浏览器页获得即时可视反馈。<br /> |
| </p> |
| |
| <p><b>注：</b>移动设备上也支持 Web 页的实时 Web 预览，即，不仅在 Chrome 和内部嵌入式 WebKit 浏览器上支持，还在 Android 上的 Chrome 和 iOS 上的 Mobile Safari 上支持。 |
| </p> |
| |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im3"><a class="cbox" href="../../images_www/v7/3/features/html5-layout.png" title="布局选项"><img alt="" src="../../images_www/v7/3/features/html5-layout-cut.png" width="320" /></a></span> |
| <h2>响应式 Web 设计功能 </h2> |
| <p> |
| NetBeans IDE 支持使用响应式 Web 设计体系结构，方法是：让您可以为 Web 页选择各种窗体因子，并立即将浏览器中 Web 页的可视元素布局设置为相应窗体因子。您可以从一系列预先设定的窗体因子（范围从智能电话到台式计算机，可采用纵向模式或横向模式）中进行选择。 |
| </p> |
| <p> |
| 除了增强浏览器功能之外，IDE 的 CSS 样式编辑器还识别浏览器当前正在显示的媒体查询并自动将对 CSS 的编辑放入该媒体查询中。</p> |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/javascript-editing.png" title="JavaScript 支持"><img alt="" src="../../images_www/v7/3/features/javascript-editing-cut.png" width="320" /></a></span> |
| <h2>增强的 JavaScript 支持</h2> |
| <p> |
| 已彻底检查 IDE 中的 JavaScript 支持。支持包括特定于 JavaScript 框架的语法突出显示、代码完成以及其他编辑和重构工具。 |
| </p> |
| <p>支持以下 JavaScript 框架：jQuery、JSON、Knockout、Ext Js、AngularJS、JsDoc、ExtDoc 和 ScriptDoc。</p> |
| <p> |
| 您现在还可以在 "Options"（选项）对话框中控制 JavaScript 语言自身的格式设置选项。 |
| </p> |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im5"><a class="cbox" href="../../images_www/v7/3/features/html5-css-rules.png" title="编辑 CSS 规则"><img alt="" src="../../images_www/v7/3/features/html5-css-rules-cut.png" width="320" /></a></span> |
| <h2>CSS 编辑和样式支持</h2> |
| <p>支持编辑 Sassy CSS 和 LESS CSS 预处理程序，包括语言结构的语法和语义突出显示、缩进、重新设置格式、代码折叠和文件模板。代码完成和重构工具可用于变量和 Mixin。 |
| </p> |
| <p> |
| 通过与 WebKit 浏览器深入集成，使您能够在浏览器中实时查看您正在 "CSS Style"（CSS 样式）窗口中进行的更改。无需猜测在您刷新浏览器之后 CSS 更改的外观。这些更改是实时的且位于源代码中。</p> |
| <p> |
| 您也可以从浏览器中执行 "inspect"（检查），"CSS Style"（CSS 样式）窗口将自动显示您在浏览器中选定的元素的 CSS 规则。现在，您可以从 "CSS Style"（CSS 样式）窗口中使用属性编辑 CSS，也可以直接转到 CSS 源代码并从该源代码中使用代码完成和内联文档进行编辑。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-editing-css.html">在 HTML5 应用程序中使用 CSS</a> |
| </p> |
| |
| <p><b>注：</b>移动设备上也提供 CSS 编辑和样式支持，即，不仅在 Chrome 和内部嵌入式 WebKit 浏览器上支持，还在 Android 上的 Chrome 和 iOS 上的 Mobile Safari 上支持。 |
| </p> |
| |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/html5-device.png" title="HTML5 设备支持"><img alt="" src="../../images_www/v7/3/features/html5-device.png" width="320" /></a></span> |
| <h2>移动设备支持和 Cordova 开发</h2> |
| <p>使用 HTML5、JavaScript 和 CSS3 开发应用程序，并让 IDE 通过其 Cordova/PhoneGap 支持为您创建本机分发。IDE 中的每个 HTML5 项目均可转变为本机 iOS 或 Android 包，并直接从 IDE 部署到本机设备。 |
| <p> |
| 通过 IDE，可以在 Chrome 浏览器和嵌入式 WebKit 浏览器中以及直接在 iOS 设备 (Safari) 和 Android 设备 (Chrome) 上直观地编辑 CSS 文件和调试 JavaScript。 |
| </p> |
| <p><b>注：</b>可在移动设备上测试和调试任何类型的 Web 应用程序，无论是 HTML5、Java EE 还是 PHP。 |
| </p> |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <table> |
| <tr> |
| <td class="valign-top"><h2>调试和测试</h2></td> |
| <!--<td></td>--> |
| <td class="valign-top"><h2>Web 服务使用</h2></td> |
| <!--<td></td>--> |
| <td class="valign-top"><h2>跨浏览器相容性</h2></td> |
| </tr> |
| <tr> |
| <td class="valign-top" style="width:33%;padding-right:10px;"> |
| <p> |
| <span class="overview-centre" id="im5"><img alt="" src="../../images_www/v7/3/features/html5-debug-cut.png" width="200" /></span><br /> 可使用 Chrome 浏览器、内部嵌入式 WebKit 浏览器、Android 上的 Chrome 浏览器和 iOS 上的 Mobile Safari 浏览器调试 JavaScript 代码。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-js-support.html">调试和测试 JavaScript</a> |
| </p> |
| </td> |
| <!--<td> </td>--> |
| <td class="valign-top" style="width:33%;padding-right:10px;"> |
| |
| <p> |
| <span class="overview-centre" id="im6"><img alt="" src="../../images_www/v7/3/features/html5-rest-client-cut.png" width="200" /></span><br /> 通过为 REST 风格的 Web 服务创建 JavaScript 客户端，轻松访问企业数据。<br /><br />通过使用 REST 风格的 JavaScript 客户端向导，快速为位于 NetBeans 项目（包含 Web 服务）中的 REST 风格的 Web 服务生成 JavaScript 客户端。 |
| </p> |
| </td> |
| <!--<td> </td>--> |
| <td class="valign-top" style="width:33%"> |
| <p> |
| <span class="overview-centre" id="im7"><img alt="" src="../../images_www/v7/3/features/html5-css-doc-cut.png" width="200" /></span><br /> 确保您的应用程序可在多个浏览器中运行。<br /><br />借助代码完成中可用的内联文档，IDE 会向您通知特定代码结构的浏览器支持信息。<br /> |
| </p> |
| </td> |
| </tr> |
| </table> |
| <h2>另请参见</h2> |
| <ul class="bigger"> |
| <li><a href="/community/releases/81/index.html">NetBeans IDE 8.1 发行版页</a>，提供最新的稳定发行版中的重要功能列表。</li> |
| <li><a href="../../kb/trails/php.html">PHP 和 HTML5 学习资源</a>，提供将帮助您入门的教程。</li> |
| </ul> |
| |
| </div> |
| </body> |
| </html> |
