1. 程式人生 > >預設文件解析--手機web app開發筆記(二)

預設文件解析--手機web app開發筆記(二)

首先我們啟動HBuilderX2.0 ,介面如圖2-1所示

圖2-1 軟體開發介面

單擊“檔案—新建—專案”,彈出新建專案管理介面,我們在裡面進行了專案型別選擇“5+APP”、專案名稱填寫“程式設計之路”、設定檔案存放路徑和模板選擇“預設模板”,點選建立,我們的新建專案就OK了,如圖2-2所示。

圖2-2 新建專案設定


這樣我們的開發目錄基本建立起來了,主要包括4個資料夾和2個html文件,目錄結構如圖2-3所示。。4個資料夾分別是:CSS資料夾用於儲存樣式檔案、img資料夾用於儲存圖片資訊、js資料夾用於儲存Javascript檔案,unpackage資料夾是放置app圖示和啟動介面的圖片,為了集中管理專案的相關資源,方便打包,本質上和系統中的任意一個其他資料夾沒什麼區別。2個問文件分別是:index.html檔案用於顯示手機頁面顯示;manifest.json檔案是html5+移動App的配置檔案。

圖2-3開發基本目錄結構


     一、預設文件解析

        在右側專案管理器中,單擊預設生成的index.html檔案,右側編輯文件視窗,我們會看到HbulderX給我們設定一些預設程式碼,具體如下:

1.<!DOCTYPE html>
2.<html>
3.<head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6. <title></title>
7. <script type="text/javascript"> 
8. document.addEventListener('plusready', function(){
9. //console.log("所有plus api都應該在此事件發生後呼叫,否則會出現plus is undefined。" 
10. }); 
11. </script>
12.</head>
13.<body>
14.</body>
15.</html>

        這就是一個HTML文件的基本結構。那什麼是THML文件呢?Html簡單的說,就是“將設計圖轉換為使用者檢視的網頁”所需要的技術,它是標記語言,只有明白了各種標記的用法,就掌握了HTML。標記由<>括號包圍的元素組成,一般包括起始標記<標記名稱>和結束標記</標記名稱>,例如上面程式碼中的<html>和</html>是一對標記,表示該文件是HTML文件。
        從上面程式碼可以看出一個HTML文件主要由:網頁檔案格式HTML、文件頭HEAD和文件內容BODY三部分組成。我簡單的介紹一下:

        第一行:<!DOCTYPE> 宣告不是 HTML 標籤;它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。必須是 HTML 文件的第一行,位於 <html> 標籤之前。<!DOCTYPE> 宣告沒有結束標籤。
        第二行:<html>標籤告知瀏覽器其自身是一個 HTML 文件。該標籤與 </html> 標籤想對應,限定了文件的開始點和結束點。
        第三行:<head>標籤定義HTML文件的頭部,是一個頭部元素的容器,內部元素可以引用指令碼、引用樣式或定義樣式、提供元資訊等等。但是絕大多數文件頭部包含的資料都不會真正作為內容顯示給讀者,主要提供給瀏覽器、搜尋引擎等使用。常用的文件頭部包含的元素有<base>、<link>、<meta>、<script>、<style>、 以及 <title>等。
        第四行: <meta> 標籤可提供有關頁面的元資訊(meta-information),比如針對搜尋引擎和更新頻度的描述和關鍵詞。charset 屬性是 HTML5 中的新屬性,規定 HTML 文件的字元編碼。UTF-8是一種字元編碼,告訴給瀏覽器用什麼方式來讀這頁程式碼。常用的編碼格式還有簡體中文“GB2312”。
        第五行:viewport是使用者網頁的可視區域,它用於移動端顯示優化的。它主要放在“meta”標籤內,Name中寫“viewport”在content中寫屬性,用逗號隔開。它共有6個屬性:

  1. width:設定layout viewport 的寬度,為一個正整數,使用字串”width-device”表示裝置寬度
  2. initial-scale:設定頁面的初始縮放值,為一個數字,可以帶小數
  3. minimum-scale:允許使用者的最小縮放值,為一個數字,可以帶小數
  4. maximum-scale:允許使用者的最大縮放值,為一個數字,可以帶小數
  5. height設定layout viewport 的高度,這個屬性對我們並不重要,很少使用
  6. user-scalable:是否允許使用者進行縮放,值為”no”或”yes”, no 代表不允許,yes代表允許

        第六行:<title> 標籤定義文件的標題,在所有 HTML 文件中是必需的。<title>元素:定義瀏覽器工具欄中的標題;提供頁面被新增到收藏夾時的標題;顯示在搜尋引擎結果中的頁面標題。
        第7至11行:表示執行Javascript語句。<script> 標籤用於定義客戶端指令碼,元素既可包含指令碼語句,也可以通過 "src" 屬性指向外部指令碼檔案,但是如果使用 "src" 屬性,則 <script> 元素必須是空的。JavaScript 通常用於影象操作、表單驗證以及動態內容更改。
        第13至14行:<body> 標籤定義文件的主體。元素包含文件的所有內容(比如文字、超連結、影象、表格和列表等等