---
# System prepended metadata

title: 網頁三元素
tags: [JS, HTMl, 網頁, CSS]

---

{%hackmd @dzif24x25/IBXIWNXgTju0h2AKtSaLkA %}

###### tags: `網頁` `HTMl` `CSS` `JS`

# 網頁三元素

網頁通常由**HTML**、**CSS**、**JavaScript** (**JS**)三大元素所組成：

![](https://i.imgur.com/IZ3Jn9D.png =30%x)![](https://i.imgur.com/f2cm57M.png =21%x)![](https://i.imgur.com/M6EhXTx.png =32%x)

### HTML就是網頁的的主要架構

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">

![](https://i.imgur.com/MwOtEDP.png)
    
</div>

### CSS像是為網頁穿衣服 他規定了網頁的顏色 字體 和佈局

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">

![](https://i.imgur.com/tlPt9ak.png)
    
</div>

### JS能讓網頁實現複雜的功能 讓網頁動態更新

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">

![](https://i.imgur.com/IJOc0Na.gif)

</div>

:::info
點此前往簡報 https://hackmd.io/@dzif24x25/HJ5qASQW3
:::