--- title: '交接' util: jest --- [TOC] # 網頁設計基礎課程 (1~4堂課) ## 基礎學習: ==https://www.w3schools.com/html/default.asp== 1. HTML : 網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。 2. CSS: CSS 是一種基於規則的語言，您對網頁裡特定或一群元素指定一系列的規則 3. javascript: 是一種腳本，也能稱它為程式語言，可以讓你在網頁中實現出複雜的功能。 --- HTML基礎結構 ```javascript= <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> ``` CSS結構(放在`<style></style>`中) ```css= body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } ``` Javascript結構 ```javascript= <script> document.getElementById("demo").innerHTML = 5 + 6; </script> ``` [說明] ``` 1. <!DOCTYPE> 就是一開始聲明該文件是什麼東西 2.<html> 包起來的就是腳本結構 3. <head> 通常會放<style> <script> <title> 諸如此類基本腳本 ``` --- ### HTML常見元素 ==HTML Elements== * h1 ,h2 ,h3 ,h4, h5 : 常用於標題 * p : 用於段落(塊級元素) * span 用於段落 (行內元素) * a: 網頁中用於連結 (行內元素) * div: 最常使用的標籤(塊級元素) * ul > li 常用於清單(以'點'為開頭符號) * ol > li 常用於清單(以'數字'為開頭符號) * table > tr > td 常用於表格顯示上 ### ==class 與 id 選擇器== 重要!! > class 選擇器命名可以重複使用 > id 只能給一個元素使用 ### HTML常見屬性 ==HTML Attributes== * a 元素 ```javascript= <a href="https://www.w3schools.com">Visit W3Schools</a> ``` > 上述href 就是==a元素==的屬性, 主要放要連結出去的網址 * img元素 ```javascript= <img src="img_girl.jpg" width="500" height="600"> 1. src 為要顯示的圖檔名 2. width 為圖片寬度 3. height 為圖片高度 ``` * table 元素 ```javascript= <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table> ``` > tr 是橫排 - 也就是row > td 是直排 - 也就是column > th 是標題 - 表格上方標題 ==style Attribute== **此屬性是所有元素都有的屬性** ```javascript= <p style="color:red;">This is a red paragraph.</p> 賦予文字顏色red <h2 title="I'm a header">The title Attribute</h2> 滑過去時會顯示說明文字 ``` ### 塊及元素與行內元素 ==Block-level Elements== > 像是: div, p這些是塊及元素 ==Inline Elements== > 像是: img, span, a 這些是行內元素 總結: 1. href 為 a 元素特定的==屬性== 2. src 為 img元素特定的==屬性== 3. img 元素提供 width與height屬性來控制大小 4. ==style 屬性可以加在所有元素中(div, a , p , span 都可以)== 重點!! 6. html 元素可以加上==lang== 去控制你的html 是html 格式 還是 pug格式 (主要在寫法上的差異) 7. ==title==屬性可以加在任意元素上 , 用途是滑過去時會有提示文字 ### CSS 基礎格式(選擇器) ```javascript= p { color: red; display: block } div { background-color: red; width: 100px; height: 100px; } p.dotted { border: 1px solid black; display: inline-block } ==class選擇器== .name { width: 100px } ==id選擇器== #container { widht: 500px } ``` * color 文字顏色 * background-color: 背景顏色 * font-size: 文字大小 * font-weight: 文字寬度 * border: 邊框 * width: 寬度 * height: 高度 * ==display: 區塊的顯示方式== 重要!! * z-index: 層級高低(數字越高, 區塊的優先級別顯示越高) * text-align: 文字位置 * margin: 外框外間距 * padding: 外框內間距 * opacity: 控制透明度 0~1 ### CSS組合器 * div p {} 代表在div 底下的所有p 都會吃到樣式 * div > p {} 代表div 底下子層所有p 都會吃到樣式 * div + p 代表在div 下面鄰邊的第一個p 的樣式會吃到 * div ~ p 代表在div 下面鄰邊的所有的p 的樣式會吃到