Start 快速上手

使用之前

ax前端框架采用css3和html5标准，使用了许多css3和html5所支持的代码，在预览文档的时候务必使用支持css3和html5的浏览器，比如chrome和firefox；ax前端框架基于jquery1.10开发，在修改本框架前请务必了解jquery的基础知识。

规范声明

<!DOCTYPE>声明必须位于页面文档中的第一行，您可以使用html4.01类型，该类型文档对于标记和属性的语法要求并不是很严格，兼容性好，可以与html5标签混写。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

当然您可以使用html5类型，简单定义即可，但是需要了解html5的规范。详见https://www.w3cschool.cn/html5/html5-syntax.html。因为html5是未来网页的标准，故推荐使用。

<!DOCTYPE HTML>

适配声明

写在head中的meta标签在页面适配中有重要意义，以下是本框架整理的适配标签，复制即可使用。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="format-detection" content="email=no" />
<meta name="wap-font-scale"  content="no" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

文件引用

ax.css，ax.js，jquery-1.10.2.min.js是必要引用文件，字体文件(托管在iconfont.cn)按需引用。

目前AXUI框架的css、js均放在对象存储服务器上，用户可使用以下地址调用对应文件：

ax.css：https://src.axui.cn/v1.0/src/css/ax.css
ax-response.css：https://src.axui.cn/v1.0/src/css/ax-response.css
ax.min.js：https://src.axui.cn/v1.0/src/js/ax.min.js
svgSprites.min.js：https://src.axui.cn/v1.0/src/js/svgSprites.min.js
jquery-1.10.2.min.js：https://src.axui.cn/v1.0/src/js/jquery-1.10.2.min.js

<link href="https://at.alicdn.com/t/font_1551254_rxrrzgz2kjc.css" rel="stylesheet" type="text/css" />
<link href="https://src.axui.cn/v1.0/src/css/ax.css" rel="stylesheet" type="text/css" >
<script src="https://src.axui.cn/v1.0/src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://src.axui.cn/v1.0/src/js/ax.min.js" type="text/javascript"></script>

页面标准结构

结合以上代码合成标准页面html结构，由于网页是从头到尾进行顺序加载的，根据我们的项目经验，最好将引用的css文件放在头部，把js文件放在尾部。以下代码复制即可使用。

                        <!DOCTYPE html>
                        <html>
                        <head>
                            <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
                            <meta name="apple-mobile-web-app-capable" content="yes" />
                            <meta name="apple-mobile-web-app-status-bar-style" content="black" />
                            <meta name="apple-touch-fullscreen" content="yes"/>
                            <meta name="format-detection" content="email=no" />
                            <meta name="wap-font-scale"  content="no" />
                            <meta name="viewport" content="user-scalable=no, width=device-width" />
                            <meta content="telephone=no" name="format-detection" />
                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                            <title>页面标题</title>
                            <meta name="keywords" content="页面关键字" />
                            <meta name="description" content="页面描述" />
                            <link href="https://at.alicdn.com/t/font_1551254_rxrrzgz2kjc.css" rel="stylesheet" type="text/css" />
                            <link href="https://src.axui.cn/v1.0/src/css/ax.css" rel="stylesheet" type="text/css" >
                            <link href="https://src.axui.cn/v1.0/src/css/ax-response.css" rel="stylesheet" type="text/css" >
                        </head>
                        <body>
                        页面内容
                        <script src="https://src.axui.cn/v1.0/src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
                        <script src="https://src.axui.cn/v1.0/src/js/ax.min.js" type="text/javascript"></script>
                        <script type='text/javascript'>
                            $(document).ready(function () {
                            //js内容
                            });
                        </script>
                        </body>
                        </html>

用户可点击这里在线调试。

当然如果你使用标准html5写法，而且仅仅在pc上显示，可以做很多简化。以下代码复制即可使用。

                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="utf-8">
                        <title>页面标题</title>
                        <meta name="keywords" content="页面关键字" />
                        <meta name="description" content="页面描述" />
                        <link href="https://at.alicdn.com/t/font_1551254_rxrrzgz2kjc.css" rel="stylesheet" type="text/css" />
                        <link href="https://src.axui.cn/v1.0/src/css/ax.css" rel="stylesheet" type="text/css" >
                        <link href="https://src.axui.cn/v1.0/src/css/ax-response.css" rel="stylesheet" type="text/css" >
                    </head>
                    <body>
                    页面内容
                    <script src="https://src.axui.cn/v1.0/src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
                    <script src="https://src.axui.cn/v1.0/src/js/ax.min.js" type="text/javascript"></script>
                    <script type='text/javascript'>
                        $(document).ready(function () {
                        //js内容
                        });
                    </script>
                    </body>
                    </html>

用户可点击这里在线调试。

文件运行

本框架的演示文件使用php格式，如果您下载了演示包，请在本地搭建php服务器环境。推荐使用wamp或phpstudy搭建php服务器环境，一路安装即可。wamp和phpstudy在诸多软件下载站均有下载。