#網頁設計課程筆記 === HTML === 所有 HTML 文檔都必須以文檔類型聲明開頭：<!DOCTYPE html> <注意> 他只會出現一次，在頁面頂部。 在撰寫HTML程式碼時大多以有頭有尾的方式來書寫 舉例來說就像是，有開頭<html>那就必須有結尾</html>。 以下內容為每個屬性所需的表示方式: 標題 --- <h1>由1~6，為最重要至最不重要</h1> <h2>字體大小也從大至小</h2> 段落 --- <p title="標題屬性"> 定義了有關元素的一些額外信息，當鼠標懸停在元素上時，title 屬性的值將顯示為工具提示</p> style 屬性 --- (可以用來改變內容的字體、顏色及大小等功能) ex: style="color:顏色;" style="font-size:大小px;" style="background-color:背景顏色;" style="font-family:字體;"> style="text-align:文本對齊;"> 鏈接 --- <a href="某某網址"> </a> 圖像 --- <img src="源文件" alt="替代文本"> <注意> 可以用width和height去定義他的長寬，但不須結尾!! <筆記> 兩種方法在src 屬性中指定 URL 1. 絕對 URL - 指向託管在另一個網站上的外部圖像的鏈接 但無法控制外部圖像，它可能突然被刪除或更改。 2. 相對 URL - 指向網站內託管的圖像的鏈接 空元素 --- <br> 其不須結尾，可用來當作換行時使用 <hr> 其不須結尾，可用來分隔頁面中的內容，最常顯示為水平線 語言屬性lang --- 標記在開頭的<html>裡，可以用來聲明網頁的語言和國家 ex: <html lang="en-US"> </html> 定義格式化文本 --- <pre> 定義了預格式化的文本。 元素內的文本<pre>以固定寬度的字體 （通常是 Courier）顯示 並且保留了空格和換行符 可以用來解決詩歌問題 </pre> --- 以上筆記皆學習參考自[W3School HTML Tutorial](https://www.w3schools.com/html/default.asp) CSS === 什麼是 CSS？ - CSS是我們用來設置網頁樣式的語言，包括針對不同設備和屏幕尺寸的設計、佈局和顯示變化，描述HTML元素如何在屏幕、紙張或其他媒體中顯示，既節省了很多工作，也可以一次控制多個網頁的佈局。 --- CSS語法 --- CSS規則由選擇器和聲明塊組成 選擇器指向要設置樣式的 HTML 元素。 聲明塊包含一個或多個用分號分隔的聲明。 每個聲明都包含一個 CSS 屬性名稱和一個值，用冒號分隔。 多個 CSS 聲明用分號分隔，聲明塊用花括號括起來。 - 聲明塊 - Ex: h1 {color: red;text-align: center;} ↑選擇器 ↑ 屬性名稱 ↑值 --- CSS 選擇器 --- CSS 選擇器用於“查找”（或選擇）您想要設置樣式的 HTML 元素。 -我們可以將 CSS 選擇器分為五類： ● 簡單選擇器（根據名稱、id、類選擇元素） ● 組合器選擇器（根據元素之間的特定關係選擇元素） ● 偽類選擇器（根據某種狀態選擇元素） ● 偽元素選擇器（選擇元素的一部分並設置樣式） ● 屬性選擇器（根據屬性或屬性值選擇元素） --- 簡單選擇器 --- >CSS 元素選擇器 元素選擇器根據元素名稱選擇 HTML 元素。 >CSS id 選擇器 id 選擇器使用 HTML 元素的 id 屬性來選擇特定元素。 Ex: # id名稱 {屬性 : 值 ;} <注意> id名稱不能以數字為開頭!!! >CSS 類選擇器 類選擇器選擇具有特定類屬性的 HTML 元素。 Ex: .特定類{ 屬性 : 值 ;} >CSS 通用選擇器 通用選擇器 (*) 選擇頁面上的所有 HTML 元素。 Ex: * { 屬性 : 值 ; } >CSS 分組選擇器 將具有相同樣式定義的 HTML 元素合併再一起 Ex: h1, h2, p { 屬性 : 值 ; } --- 組合器選擇器 --- >後代選擇器 後代選擇器匹配作為指定元素的後代的所有元素。 Ex: div p { 屬性 : 值 ;} -<div> 元素內的所有 <p> 元素 >子選擇器 (>) 子選擇器選擇作為指定元素的子元素的所有元素。 Ex: div > p { 屬性 : 值 ;} -<div> 元素的子元素的所有 <p> 元素 >相鄰兄弟選擇器 (+) 相鄰兄弟選擇器用於選擇直接在另一個特定元素之後的元素。 Ex: div + p { 屬性 : 值 ;} -<div> 元素之後的第一個 <p> 元素 >通用兄弟選擇器 (~) 通用兄弟選擇器選擇作為指定元素的下一個兄弟的所有元素。 Ex: div~p { 屬性 : 值 ;} -所有 <div> 元素的下一個兄弟元素的 <p> 元素 --- 偽元素選擇器 --- 句法 selector::pseudo-element {property: value;} > ::first-line 偽元素 用於為文本的第一行添加特殊樣式。 Ex: p::first-line {屬性 : 值 ;} <注意> ::first-line 偽元素只能適用特定屬性 ● 字體屬性 ● 顏色屬性 ● 背景屬性 ● 字間距 ● 字母間距 ● 文字裝飾 ● 垂直對齊 ● 文本轉換 ● 線高 ● 清除 >::首字母偽元素 用於為文本的第一個字母添加特殊樣式。 p::first-letter{屬性 : 值 ;} <注意> ::first-letter 偽元素只能適用特定屬性 ● 字體屬性 ● 顏色屬性 ● 背景屬性 ● 邊距屬性 ● 填充屬性 ● 邊框屬性 ● 文字裝飾 ● 垂直對齊（僅當“float”為“none”時） ● 文本轉換 ● 線高 ● 漂浮 ● 清除 --- 以上筆記皆學習參考自[W3School CSS Tutorial](https://www.w3schools.com/css/default.asp) JavaScript === JS簡介 --- JavaScript 是世界上最流行的Web編程語言。 它可以利用getElementById().來改變 HTML 裡的 -內容（.innerHTML） -屬性（.src） -樣式(.style.屬性) 也可以用來 -隱藏(.style.display = "none") -顯示(.style.display = "block";) HTML裡的元素 --- JS寫法 --- >script標籤 在 HTML 中，JavaScript 代碼插入到<script>和</script>標記之間。 Ex: <script> document.getElementById("加入已經宣告的id").innerHTML = "My First JavaScript"; </script> >head中的 JavaScript Ex: <head> <script> function myFunction() {document.getElementById("加入已經宣告的id").innerHTML = "Paragraph changed.";} </script> </head> >body中的 JavaScript Ex: <body> <h2> </h2> <p> </p> <script> function myFunction() {document.getElementById("加入已經宣告的id").innerHTML = "Paragraph changed.";} </script> </body> --- JS輸出 --- 除了使用上一個單元所教過的內部html的方法 document.getElementById("demo").innerHTML 我們也可以使用以下寫法來直接做輸出 1.使用document.write() ＜注意＞在加載 HTML 文檔後使用 document.write() 將刪除所有現有的 HTML，所以此方法比較適合當作測試時使用 2.使用window.alert() -window可寫可不寫!! 3.使用 console.log() -可以在瀏覽器中用此方法來顯示數據 --- 以上筆記皆學習參考自[W3School JavaScript Tutorial](https://www.w3schools.com/js/default.asp) Markdown === 透過這次機會，在使用HackMD撰寫筆記的過程中，學到了很多Markdownwn的語法，雖然在這份筆記中，我並沒有使用到太多的功能，但應該也能算做，我對Markdown這個語言的實際操作。 常用的Markdown語法 --- 1. # 建立大標中標小標 2. - 建立無排序清單 3. 1.建立有排序清單 4. -[ ]建立待辦事項 5. **粗體** 建立粗體字 6. *斜體* 建立斜體字 7. ~~刪除線~~ 建立刪除線 8. *** 建立分隔線 9. ==螢光筆== 建立螢光筆效果 10.[連結上顯現的字](網址，不用加冒號，不然會顯示不出來!!) 建立超連結 --- 以上筆記皆學習參考自[電腦玩物](https://www.playpcesor.com/2016/10/hackmd-hackpad-markdown.html)