# 網頁建立 ## 軟體設置 ### 軟體：**Visual Studio Code** 一些外掛下載： 1. Auto Rename Tag 同步修改起始標籤 用法 下載後自動安裝 2. Prettier-Code Formatter 自動排版 用法 crl+shift+P 叫出外掛程式 > 輸入format document > configure > Prettier-Code Formatter 設定>default format > prettier-vscode 3. Live server 瀏覽自動更新 <p style=color:red> 也可以用手機觀看(要連同一個網路) win+R > cmd > ipconfig>enter > 複製IP + 原網址後面 127.0.0.1:5500/%E5%AD%B8%E5%93%A1%E5%AF%A6%E4%BD%9C/DAY_4/DAY4_03_RWD%E5%8D%80%E5%A1%8A%E7%B7%B4%E7%BF%92.html 127.0.0.1 > 改成剛剛複製的IP</p> 5. chinese(tradition)Languange 6. 設定>editor wrap>開啟軟體內的換行 ## 前置作業 ### HTMLㄉ一開始 記得都要重新排版 (有人提供CSS reset的程式碼"Css reset") ``` <link rel="stylesheet" href="./css/day2_cssreset.css"> <link rel="stylesheet" href="./css/day2_block.css"> ``` ### CSS的部分 自動算Content裡面的尺寸 `box-sizing: border-box;` ## 簡單HTML語法 更改title旁的logo圖示 `<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">` ## 軟體內快捷鍵 <!DOCTYPE html> 一開始要宣告！ !+Tab 全部都會出現！ crl+D 同時選取起始與結尾標籤 alt+上下鍵 移動選取的段落 crl+n 檔案新增 ctrl+/ 註解快捷鍵 lorem*1 > 製造假段落 w500 > width:500px; P*3 ``` <p></p> <p></p> <p></p> ``` ul>li*3 ``` <ul> <li></li> <li></li> <li></li> ``` div>p*2+a (+同一個層級) ``` <div> <p></p> <p></p> <a href=""></a> </div> ``` div>div>div>p*3 ``` <div> <div> <div></div> </div> ``` .content>.item*3 > 按teb ``` <div class="content"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> ``` .item `<div class="item"></div>` ## 相關網站 a mdn W3school [夏木樂](https://simular.co/resources/type/material.html) [google font](https://fonts.google.com/knowledge)：字體網站 [excalidraw](https://excalidraw.com/) ：線上製圖工具 [codesandbox](https://codesandbox.io/)：線上程式碼