XOOPS輕鬆架 - 線上書籍

:::

PHP8入門
======

### 一、建立預設頁面：

1. 請先建立 `index.html` (完整路徑為： `C:\UniServerZ\www\index.html`)（<kbd>Ctrl</kbd>+<kbd>N</kbd>可以開新檔，<kbd>Ctrl</kbd>+<kbd>S</kbd>可以儲存檔案）
2. 輸入 `!`，然後選擇 `! `按 <kbd>Enter</kbd> 可產生 HTML5 基本頁面
3. 輸入 `bs`，選擇` bs5-$`，然後按 <kbd>Enter</kbd> 可產生 HTML5+BootStrap5 的基本頁面，如： 
    ```markup
    
    <html lang="en">
    
    <head>
      <title>Title</title>
      
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    
      
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous" />
    </head>
    
    <body>
      <header>
        
      </header>
      <main></main>
      <footer>
        
      </footer>
      
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
        integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"
        crossorigin="anonymous"></script>
    </body>
    
    </html>
    ```
    
    
    1. `bootstrap.min.css`：是主要的BootStrap樣式檔案，必須引入
    2. `popper.min.js`：是導覽列等部份元件會用到的js套件（有用到導覽列就必須引入）
    3. `bootstrap.min.js`：BootStrap部份元件會用到的js（有用到就必須引入） 
        1. `integrity` 屬性是資源完整性規範的一部分，它允許你為 `script` 提供一個 `hash`，用來進行驗簽，檢驗加載的JavaScript 文件是否完整，減少XSS 風險。
        2. `crossorigin="anonymous"`：crossorigin 會讓瀏覽器啟用CORS訪問檢查，不填的話等同`crossorigin="anonymous"`，所以其實可以拿掉。
4. 被 `<> `包起來的叫做網頁標籤，也就是HTML語法，建置網頁的最基本工具。
5. 頁面架構用HTML語法建構、外觀用CSS調整（BootStrap就是CSS框架）、搭配等前端（如：JavaScript）及後端語言（如：PHP）可以完成整個系統。
6. 其中`<meta>`部份認識一下，還頗重要，這是用告知瀏覽器一些頁面的初始設定為何 
    ```markup
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    ```
    
    
    1. `charset="UTF-8"`：告知瀏覽器，這頁採用UTF-8編碼，若設定錯誤，可能導致中文變亂碼
    2. `width=device-width, initial-scale=1, shrink-to-fit=no`：在 Firefox/Chrome/Safari/WebView 中都有同樣的排版，也不會在其他瀏覽器中發生問題（照貼即可）。
 
### 二、改用本地端檔案：

1. 由於我們自己有裝BootStrap5，所以無須從網路引入，直接讀取我們安裝的檔案即可 
    ```markup
    <!doctype html>
    <html lang="en">
    
    <head>
      <title>校園日誌</title>
      
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
      
      <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    
    </head>
    
    <body>
      <header>
        
      </header>
      <main>
        <h1>Hello-Bootstrap</h1>
      </main>
      <footer>
        
      </footer>
      
      <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    
    </html>
    ```
    
    
    1. 用 npm 安裝的套件一律裝在 `node_modules `下，且正式檔案一般都在 `dist` 目錄中
    2. 用` bootstrap.bundle.min.js` 可以取代` popper.min.js`+`bootstrap.min.js`
    3. 看起來像這樣：  
         ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/52/php025.png)
 
</body></html>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1773

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器