---
# System prepended metadata

title: '**HTML**'

---

 **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)