{%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 :::