**HTML** - HackMD

**HTML** === --- Basic --- ``` <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> ``` \<!DOCTYPE html> 宣告此檔案為HTML5 \<html> 基底 \<head> 網頁元素(定義元素) \<title> 標籤上所顯示 \<body> 網頁上顯示 \<h1>~\<h6> UI \<p> 段落 \<br> 換行前 \<> 後 \</> --- link --- ``` \<a href="https://www.google.com">This is a link</a> ``` <a href="https://www.google.com">This is a link</a> \<a herf="link">link describe\</a> ``` \<a href="https://www.google.com" target="_blank">This is a link</a> ``` <a href="https://www.google.com" target="_blank">This is a link</a> target="_blank" 開啟新視窗 --- image --- ``` <img src="https://img.4gamers.com.tw/news-image/e6145e28-56ab-4c89-9e7e-bb90426a0380.jpg" alt="Ina" width="512" height="288"> ``` <img src="https://img.4gamers.com.tw/news-image/e6145e28-56ab-4c89-9e7e-bb90426a0380.jpg" alt="Ina" width="512" height="288"> \<img src="link" alt="無法顯示圖片時顯示資訊" width="寬" height="長"> --- lang --- ``` <!DOCTYPE html> <html lang="en"> <body> ... </body> </html> ``` \<html lang="語言"> lang屬性指定頁面內容的自然語言 ``` zh-Hans 簡體中文 zh-Hans-CN 大陸地區使用的簡體中文 zh-Hans-HK 香港地區使用的簡體中文 zh-Hans-MO 澳門使用的簡體中文 zh-Hans-SG 新加坡使用的簡體中文 zh-Hans-TW 臺灣使用的簡體中文 zh-Hant 繁體中文 zh-Hant-CN 大陸地區使用的繁體中文 zh-Hant-HK 香港地區使用的繁體中文 zh-Hant-MO 澳門使用的繁體中文 zh-Hant-SG 新加坡使用的繁體中文 zh-Hant-TW 臺灣使用的繁體中文 ``` --- title --- ``` <p title="I'm a tooltip">This is a paragraph.</p> ``` <p title="I'm a tooltip">This is a paragraph.</p> --- div --- ``` <div> <p>This is some text in a div element.</p> </div> ``` <div> <p>This is some text in a div element.</p> </div> 區塊 ``` <div id="x"> <img src="https://truth.bahamut.com.tw/artwork/202104/1e3a104b731206262653183f5c3d1a17.PNG?w=1000" width="30%"> </div> ``` id="x" 區塊id --- 內嵌Javascript --- ``` <button type="button" onclick="myFunction()">Click Me!</button> #按鍵 <p id="demo">This is a demonstration.</p> #id="demo"的段落 <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> #js function ``` document.getElementById("demo").innerHTML = "Hello JavaScript!"; 取得id為"demo"的物件並將文字轉為"Hello JavaScript!" --- 相片簿(簡易) --- ``` <!DOCTYPE html> <html> <head> <script> i=0; const cars = ["https://truth.bahamut.com.tw/artwork/202104/1e3a104b731206262653183f5c3d1a17.PNG?w=1000", "https://thumbor.4gamers.com.tw/YFGJeZT2JS4BUGwXCtjM2Y9-EJk=/800x0/filters:extract_cover():no_upscale():quality(80):format(jpeg):background_color(FFFFFF)/https%3A%2F%2Fimg.4gamers.com.tw%2Fpuku-clone-version%2F47b4b96a428a69d0768ac2356d800072588d647c.png", "https://yt3.ggpht.com/ytc/AKedOLRFAFjEvIwiZ_MrQvdY8-QbJkqvahsi3La78Jf7=s900-c-k-c0x00ffffff-no-rj" ]; function f1(x) { i+=x; if(i<0){ i=0; }else if(i>cars.length-1){ i=(cars.length-1); } document.getElementById("x").innerHTML = '<img src="'+cars[i]+'" width="30%">'; } </script> </head> <body> <div id="x"> <img src="https://truth.bahamut.com.tw/artwork/202104/1e3a104b731206262653183f5c3d1a17.PNG?w=1000" width="30%"> </div> <a href="javascript:f1(-1);">上一張</a> <a href="javascript:f1(1);">下一張</a> </body> </html> ``` i變數 : 第幾張相片 const car陣列 : 存取相片網址 function f1 : 控制前後，改變圖片 div id="x" : 相片顯示位置 href : 超連結按鍵(呼叫f1)