HTML、CSS和JavaScript

## HTML、CSS和JavaScipt #### >[!Important]推薦學習網站 [W3C School](https://www.w3schools.com/) ### 一、環境準備網頁前端三個重要技術：HTML、CSS 和 JavaScript。建立一個簡易的 Web 伺服器，將方便我們學習它們，有兩個方式： - 利用 python 內建的 http 伺服器先切換到 Web 伺服器所在的資料夾，再利用命令 **python -m http.server 80** 其中 80 表示服務埠號 ![image](https://hackmd.io/_uploads/SyfGaupbgx.png) - 利用 XAMPP 建立 XAMPP 包含了 Apache、MariaDB、PHP 和 Perl 四個服務，請到 [XAMPP](https://www.apachefriends.org/zh_tw/index.html) 的網站下載。如果下載 portable 版本，可以不用安裝，直接解壓縮就可以使用。 ![image](https://hackmd.io/_uploads/rJDxCOTWxg.png) ### 二、HTML :::info 網頁基礎框架 ::: ```html= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">  <meta name="description" content="A simple HTML document"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Your Name"> <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon">  <title>Document</title> </head> <body> <header> <h1>Welcome to My Web Page</h1> </header> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <main> <section id="home"> <h2>Home Section</h2> <p>This is the home section of the webpage.</p> </section> <section id="about"> <h2>About Section</h2> <p>This section contains information about the webpage.</p> </section> <section id="contact"> <h2>Contact Section</h2> <p>You can contact us through this section.</p> </section> </main> <footer> <p>© 2025 Your Name. All rights reserved.</p> </footer>  <script src="script.js"></script> </body> </html> ``` :::info 元素(element)的標籤(tag)與屬性(attribute) ::: ![image](https://hackmd.io/_uploads/Skl31Kpbeg.png) >[!Tip] 常見的 HTML 元素 ```html 標題 <h1> ... <h6> 分隔線 <hr> 段落 <p> </p> 換行 <br> 圖片 <img src="#" text="說明" alt="替代顯示"> 超連結 <a href="#" target=" ">…</a> target：_blank、_self、_top、_parent 無序清單 <ul> <li> ... </li> </ul> 有序清單 <ol> <li> ... </li> </ol> 表格 <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> 群組 <fieldset> <legend> 群組標題 </legend> </fieldset> 程式碼 <code> </code> 保持原始格式 <pre> </pre> 內嵌頁框 <iframe src="http://www.w3schools.com"> </iframe> 聲音 <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> 影像 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> 特定區塊 <div> </div> <span> </span> ``` >[!Note] 特殊字元 ```html non breaking space   < < > > & & © © ® ® ``` >[!Tip] 表單元素 ```html 表單 <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"> <label for="username">ID:</label> <input type="text" id="username" name="username"> <label for="passwd">Password:</label> <input type="password" id="passwd" name="passwd" > </form> 按鈕 <input type="button" name="mybutton" value="確定" > <input type="submit" name="submit" value="送出" > <input type="reset" name="reset" value="重設" > 文字輸入框 <input type="password" name="passwd" /> <input type="text" name="username" value="exam" /> <textarea name="memo" rows="10" cols="30"> 人生不相見，動如參與商。 </textarea> 隱藏資訊 <input type="hidden" name="page" value="exam" /> 多選框 <input type="checkbox" name="fruits[]" value="Apple" > Apple <input type="checkbox" name="fruits[]" value="Banana" > Banana <input type="checkbox" name="fruits[]" value="Grape" > Grape 單選框 <input type="radio" name="sex" value="男" >男生 <input type="radio" name="sex" value="女" >女生下拉式選單 <select name="cars"> <option value="Volvo"> Volvo </option> <option value="Bmw"> Bmw </option> <option value="Toyota"> Toyota </option> </select> ``` :::info 區塊元素與行內元素 ::: HTML的標籤分為區塊元素以及行內元素。區塊元素預設會佔用所在位置的區域，因此其他元素只能在此區塊元素的前面或後面，無法與區塊元素並列一起；行內元素剛好與區塊元素相反，行內元素預設會與其他元素共存在一起，不會排斥。常見的區塊元素 div、p、ul、ol；行內元素 a、img、span、br ### 三、CSS :::success 框格模型 box-model ::: ![image](https://hackmd.io/_uploads/ByTEVvZfge.png) :::success 選取器(Selector)、屬性 (Property)與屬性值 (Value) ::: ```css= .one /*選取器*/ { /* 屬性：屬性值 */ width: 200px; padding: 100px; margin: 50px; border-color: darkgreen; border-style: dotted; border-width: 5px; } ``` :::success 常見的選取器 ::: ```css Class selectors（類別選擇器） .one { } Id selectors（id 選擇器） #one { } Type selectors（型態選擇器） p { } Universal selector（通用選擇器） * { } ``` :::success 虛擬類別 ::: ```css :link 連結平常的樣式 :visited 連結查閱後的樣式 :hover 滑鼠滑入的樣式 :active 滑鼠按下的樣式 :focus 目標為焦點的樣式 :first-child 第一個元素的樣式 :last-child 最後一個元素的樣式 ``` ### 四、JavaScript :::warning DOM 與 JavaScript :::