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

相信神話發表於2019-07-21
WebAPP筆記

首先我們啟動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> 標籤定義文件的主體。元素包含文件的所有內容（比如文字、超連結、影象、表格和列表等等）。

相關文章