1. 程式人生 > >【WebAPP開發之路】HTML5的學習(一)

【WebAPP開發之路】HTML5的學習(一)

HTML5的發展也有段時間了,一直想去學學這個炙手可熱的技術,可是之前一直沒多少時間,最近公司開始著手這方面技術,我也跟著潮流開始學習WebAPP,那麼開始WebAPP開發之旅。
我用的開發環境是HBuilder,截圖如下:
這裡寫圖片描述
新建一webAPP,如下,選擇mui專案:
這裡寫圖片描述

那麼現在我們來看下專案內部結構:
這裡寫圖片描述
我們從上圖可以看到三個基本的資料夾:

  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上的截圖:
這裡寫圖片描述