【WebAPP开发之路】HTML5的学习(一)

HTML5的发展也有段时间了,一直想去学学这个炙手可热的技术,可是之前一直没多少时间,最近公司开始着手这方面技术,我也跟着潮流开始学习WebAPP,那么开始WebAPP开发之旅。
我用的开发环境是HBuilder,截图如下:
【WebAPP开发之路】HTML5的学习(一)_第1张图片
新建一webAPP,如下,选择mui项目:
【WebAPP开发之路】HTML5的学习(一)_第2张图片

那么现在我们来看下项目内部结构:
【WebAPP开发之路】HTML5的学习(一)_第3张图片
我们从上图可以看到三个基本的文件夹:

  1. css
  2. fonts
  3. js

    **css:
    层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。**
    **fonts:
    自然是对字体的样式定义**
    **js:
    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。**

接下来我们来看看已经编写的 index.html 这个文件:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8"> mui.init(); </script>  
</head>  
<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">我的标题</h1>  
    </header>  
    <div class="mui-content">  
        <ul class="mui-table-view" id="my_task_list">  
            <li class="mui-table-view-cell">  
                <div class="mui-slider-right mui-disabled">  
                    <a class="mui-btn mui-btn-red">删除</a>  
                </div>  
                <div class="mui-slider-handle">  
                    这是第一个小标题  
                </div>  
            </li>  
            <li class="mui-table-view-cell">  
                <div class="mui-slider-right mui-disabled">  
                    <a class="mui-btn mui-btn-red">删除</a>  
                </div>  
                <div class="mui-slider-handle">  
                    这是第二个小标题  
                </div>  
            </li>  
              <li class="mui-table-view-cell">  
                <div class="mui-slider-right mui-disabled">  
                    <a class="mui-btn mui-btn-red">删除</a>  
                </div>  
                <div class="mui-slider-handle">  
                    这是第三个小标题  
                </div>  
            </li>  
        </ul>  
    </div>  
</body>  
</html>  

最后点运行,在Android上RUN

下面是Android上的截图:
【WebAPP开发之路】HTML5的学习(一)_第4张图片

你可能感兴趣的:(Web,css,html5,APP)