---
# System prepended metadata

title: HTML(1/10) Day 2 五倍紅寶石(第八屆共筆)(2021/6/29)
tags: [HTML]

---

# HTML(1/10) Day 2 五倍紅寶石(第八屆共筆)(2021/6/29)
## 基礎知識：
### HTML：
用來描述網站的**架構和語意**，
HTML是**標記語言**不是程式語言！
在寫HTML時不能只是看起來像而已，
要去理解語法真正的涵義，**把語意清楚標記出來，讓搜尋引擎(盲人)看懂才是最重要的**。
網頁的讀取順序是由右至左讀取的。

不要亂包標籤，可能會造成CSS用到不該用的地方，造成網頁跑版。
```htmlembedded=
e.g. 使用以下包法         檢查網頁原始碼時會變成
<p>                         <p></p>
    <div></div>                 <div></div>
</p>                        <p></p>
```
### CSS：
用來定義文字和其它元素的**外觀(樣式)與布局**。

### HTML5：
廣義論及HTML5時，實際指的是**包括HTML、CSS和JavaScript在內的一套技術組合**。
相較前4版，添加了許多新的語法特徵。
```
處理多媒體和圖片內容：<video>、<audio>和<canvas>。
為了豐富文件的資料內容：<section>、<article>、<header>和<nav>。
重新定義或標準化：<a>、<cite>和<menu>。
```
### 標籤屬性寫法：
```htmlembedded=
<標籤 屬性 = "值">
有的屬性如<select multiple>若沒給值則會自行帶true進去。
```

## HTML常用標籤：
![](https://i.imgur.com/tvfu7Vw.png)
HTML標籤心智圖原檔：https://www.xmind.net/m/siGfxx

P.S.表單部分建議在前端先用JS做簡單的驗證，
不過後端不能偷懶，也必須要做驗證。

### 如何用手機看PC做好的網頁：
先連到一樣wifi，找到電腦IPv4位置，複製貼上到本地端:5500/之前，蓋過原IP位置，
滑鼠點擊網址，案右側QR CODE，透過手機掃描連上。

## VsCode 快捷鍵：
![](https://i.imgur.com/W0kujST.png)
VsCode心智圖原檔：https://www.xmind.net/m/p92zqD

###### tags: `HTML`