# HTML基礎
### 主講人：黃夙賢
---
## 參考程式
- http://github.com/shhuangmust/html
---
## 我的第一個網頁
- 網頁結構 html = head + body
- \<head>擺放很重要，但是不會顯示在內容的相關資訊
- 例如：\<title>、\<meta>...
- \<body>擺放所有要顯示在網頁的內容
- 例如：\<h1>、\<img>...
---
- [1.我的第一個網頁.html](https://github.com/shhuangmust/html/blob/112-1/1.%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E5%80%8B%E7%B6%B2%E9%A0%81.html)
---
## 標題
- \<h1>、\<h2>、\<h3>、\<h4>、\<h5>、\<h6>可以製造標題的效果
- \<h1>字體最大、\<h6>字體最小
- 會有粗體、並且換行的效果
- 正常字體介於\<h4>~\<h5>之間
---
## [2.標題.html](https://github.com/shhuangmust/html/blob/112-1/2.%E6%A8%99%E9%A1%8C.html)
 
---
## 換行
- \<p> ...\</p>
- 換行後會增加一行空白行
- \<br>
- 直接換行
---
## [3.換行.html](https://github.com/shhuangmust/html/blob/112-1/3.%E6%8F%9B%E8%A1%8C.html)
 
---
## 分隔線
- \<hr>
---
## [4.分隔線.html](https://github.com/shhuangmust/html/blob/112-1/4.%E5%88%86%E9%9A%94%E7%B7%9A.html)
---
## 預定格式
- \<pre> ... \<\pre>
- 文章將按照預定格式呈現
- 少用的tag
- 建議將來預定格式，採用javascript的解決方法
```
class Hello{
static void main(){
console.writeline("Hello, world");
}
}
```
---
## [5.預定格式.html](https://github.com/shhuangmust/html/blob/112-1/5.%E9%A0%90%E5%AE%9A%E6%A0%BC%E5%BC%8F.html)
---
## 無序編號
- 無序編號可以呈現列表的效果
- 用ul包裹所有的項目
- 項目用li來呈現
- 許多css特效(例如下拉式選單)，會利用無序編號作為儲存資料的功能
---
## [6.無序編號.html](https://github.com/shhuangmust/html/blob/112-1/6.%E7%84%A1%E5%BA%8F%E7%B7%A8%E8%99%9F.html)
 
---
## 有序編號
- 用ol包裹所有的項目
- 會出現1, 2, 3, 4的編號
- 項目用li來呈現
---
## [7.有序編號.html](https://github.com/shhuangmust/html/blob/112-1/7.%E6%9C%89%E5%BA%8F%E7%B7%A8%E8%99%9F.html)
 
---
# JavaScript
- 用<script></script>包裹Javascript程式碼
- 可出現在html的任何地方
```Javascript=
<html>
<head>
<title>Javascript</title>
</head>
<body>
Hello
<script>
document.writeln("!!Javascript!!");
</script>
world!
<script>
alert("Hi, Javascript!!");
</script>
</body>
</html>
```
---
## [8.Javascript.html](https://github.com/shhuangmust/html/blob/112-1/8.Javascript.html)
---
# 註解
- html的註解，由\<!--開頭，-->結尾
- 單行跟多行都一樣
- [9.註解.html](https://github.com/shhuangmust/html/blob/112-1/9.%E8%A8%BB%E8%A7%A3.html)
```html=
<html>
<head><title>註解</title></head>
<body>
<!--
這是註解
這是註解
-->
<h1>Hello world!</h1>
</body>
</html>
```
---
## 圖片
- \<img src=檔案位置與名稱>
```html=
<html>
<head><title>圖片</title></head>
<body>
<img src="https://github.com/shhuangmust/html/blob/112-1/dog.jpg?raw=true">
</body>
</html>
```
---
## [11.圖片.html](https://github.com/shhuangmust/html/blob/112-1/11.%E5%9C%96%E7%89%87.html)
---
## 超連結
- \<a href="網址">...(要顯示的文字)\</a>
- 可連結的文字會用藍色顯示
- 可用在圖片上
```html=
<html>
<head><title>超連結</title></head>
<body>
<a href="http://www.google.com">google</a>
<br>
<a href="https://github.com/shhuangmust/html/blob/112-1/11.%E5%9C%96%E7%89%87.html"><img src="https://github.com/shhuangmust/html/blob/112-1/dog.jpg?raw=true"></a>
</body>
</html>
```
---
## [12.超連結.html](https://github.com/shhuangmust/html/blob/112-1/12.%E8%B6%85%E9%80%A3%E7%B5%90.html)
[](https://github.com/shhuangmust/html/blob/112-1/12.%E8%B6%85%E9%80%A3%E7%B5%90.html)
---
## 表格
- \<table> ...\<\/table>把表格包裹住
- \<tr>...\<\/tr>列
- \<td>...\<\/td>欄
- 邊框參數：border=1,2,3
- 擴充欄位參數：colspan擴充欄、rowspan擴充列
---
## [13.表格.html](https://github.com/shhuangmust/html/blob/112-1/13.%E8%A1%A8%E6%A0%BC.html)
```html=
<html>
<head><title>表格</title></head>
<body>
<!--2x3表格-->
<table border=1>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<!--colspan-->
<table border=1>
<tr><td>1</td><td colspan=2>2 3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<!--rowspan-->
<table border=1>
<tr><td rowspan=2>1 4</td><td>2</td><td>3</td></tr>
<tr> <td>5</td><td>6</td></tr>
</table>
<!--3x3表格-->
<table border=1>
<tr><td>1</td><td colspan=2 rowspan=2>2 3 5 6</td></tr>
<tr><td>4</td> </tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>
```
---
## 2 x 3 表格
```html=
<html>
<head><title>表格</title></head>
<body>
<!--2x3表格-->
<table border=1>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
</body>
</html>
```
---
## Colspan表格
```html=
<html>
<head><title>表格</title></head>
<body>
<!--colspan-->
<table border=1>
<tr><td>1</td><td colspan=2>2 3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
</body>
</html>
```
---
## Rowspan表格
```html=
<html>
<head><title>表格</title></head>
<body>
<!--rowspan-->
<table border=1>
<tr><td rowspan=2>1 4</td><td>2</td><td>3</td></tr>
<tr> <td>5</td><td>6</td></tr>
</table>
</body>
</html>
```
---
```html=
<html>
<head><title>表格</title></head>
<body>
<!--3x3表格-->
<table border=1>
<tr><td>1</td><td colspan=2 rowspan=2>2 3 5 6</td></tr>
<tr><td>4</td> </tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>
```
---
{"metaMigratedAt":"2023-06-17T10:32:32.073Z","metaMigratedFrom":"YAML","breaks":true,"title":"HTML基礎","contributors":"[{\"id\":\"ef0225b9-6c2a-4012-82c9-fa1031d2c4db\",\"add\":9178,\"del\":2544}]","description":"http://github.com/shhuangmust/html","slideOptions":"{}"}