---
# System prepended metadata

title: 網頁建立
tags: [網頁設計]

---

# 網頁建立


## 軟體設置
### 軟體：**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/)：線上程式碼


