Skip to content

Commit cb3cea4

Browse files
linwebsgitbook-bot
linwebs
authored and
gitbook-bot
committed
GitBook: [master] 8 pages modified
1 parent 7c74b76 commit cb3cea4

File tree

8 files changed

+385
-7
lines changed

8 files changed

+385
-7
lines changed

‎2/2-1.md

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
# 2-1 基本HTML元件
1+
# 2-1 HTML基本元件
2+
3+
### 基本HTML元件
4+
5+
以下介紹的元件為多數網頁都會使用到的元素。
6+
7+
28

39
#### 段落
410

@@ -93,8 +99,8 @@
9399

94100
#### 清單 {#hang}
95101

96-
> 使用`<ol>`來包含住`<li>`，可顯示有數字的清單，使用`<ul>`來包含住`<li>`，可顯示有圓點的清單
97-
>
102+
> 使用`<ol>`來包含住`<li>`，可顯示有數字的清單，使用`<ul>`來包含住`<li>`，可顯示有圓點的清單
103+
98104
> 本欄中使用了兩個跳脫字元符號，由於此兩符號是HTML語言中的符號，故須使用跳脫字元方式顯示
99105
> `&lt;` =&gt;【&lt;】
100106
> `&gt;` =&gt; 【&gt;】
@@ -142,8 +148,8 @@
142148
#### 表格 {#shi-1}
143149

144150
> 使用`<table>`標籤來製作表格，內含`<tr>`做為表格的列，`<td>`作為表格的欄，表格第一列中的欄位經常使用`<th>`來替代表示此欄的內容為欄位名稱
145-
>
146-
> 合併表格：在`<td>`後方加入`colspan="2"`表示將這一列表格中的2個欄位合併
151+
152+
> 合併表格：在`<td>`後方加入`colspan="..."`表示將這一列表格中的幾個欄位合併
147153
148154
```markup
149155
<table border="2">

‎2/2-2.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# 2-2 HTML元件屬性
2+
3+
### HTML元件屬性
4+
5+
HTML的元件可設定其屬性，如文字對其位置、表格框線是否顯示、文字顏色等。
6+
7+
8+
9+
#### 元件對齊
10+
11+
> 使用`align="..."`來讓HTML元件對齊
12+
13+
```markup
14+
<p align="left">Linwebs | 林林.台灣</p>
15+
<p align="center">Linwebs | 林林.台灣</p>
16+
<p align="right">Linwebs | 林林.台灣</p>
17+
```
18+
19+
20+
21+
#### 寬度、高度
22+
23+
> 使用`height="..."`和`width ="..."`來設定HTML元件寬度及高度，單位可使用像素 px 或是百分比 % 來設定，如：圖片大小、分隔線寬度等
24+
25+
```markup
26+
<p>Linwebs</p>
27+
<hr width="80%" />
28+
<p>Linwebs</p>
29+
<hr width="50px" align="right"/>
30+
<p align="right">Linwebs | 林林.台灣</p>
31+
```
32+
33+
34+
35+
#### 顏色
36+
37+
> 使用color來指定文字顏色，使用`bgcolor="..."`來指定網頁背景顏色【需放置於`<body>`標籤後方】
38+
39+
> HTML色碼是由RGB所組成，首先以井字號當頭，前兩個字控制紅色 ，中間兩字控制綠色，後兩個字控制藍色，由淺到深是由0123456789ABCDEF共16個值，綜合7個文字所調整出顏色的濃淡
40+
41+
```markup
42+
<div style="background-color:blue; color:white">
43+
```
44+
45+
```markup
46+
<html>
47+
<head> ... </head>
48+
<body bgcolor="#8ebaff">
49+
<h4>
50+
<font color="#ffffff">Linwebs</font>
51+
</h4>
52+
</body>
53+
</html>
54+
```
55+
56+
57+
58+
#### HTML學習資源
59+
60+
【 網頁 】w3school.com : [http://www.w3school.com/html/](http://www.w3school.com/html/) \( 英文 \)
61+
62+
【 APP 】Learn HTML：Google Play / AppStore搜尋 Learn HTML
63+

‎2/README.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
# 2. 常用 HTML 元件
22

3-
基本HTML元件
3+
### [基本HTML元件](2-1.md)
44

55
以下介紹的元件為多數網頁都會使用到的元素。
66

7+
8+
9+
### [HTML元件屬性](2-2.md)
10+
11+
HTML的元件可設定其屬性，如文字對其位置、表格框線是否顯示、文字顏色等。
12+
13+
14+
15+
16+

‎3/3-1.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# 3-1 HTML5簡介
2+
3+
講義第2頁下方的HTML即是以HTML5語法寫成的網頁，HTML5與HTML4相比 ，新增了許多的新東西，如`<video>`、`<audio>`、`<canvas>`、`<svg>`、`<header>` 、`<article>`等元素，以及許多API，如本地儲存Local Storage、配合JavaScript執行的拖拉功能Drag and Drop等。
4+

‎3/3-2.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# 3-2 HTML5文件結構
2+
3+
HTML5有Document Structure 頁面架構
4+
5+
`<header>`頁首放置於網頁最上方
6+
7+
`<nav>`導覽列於頁首下方
8+
9+
`<article>`文章於網頁中間
10+
11+
`<section>`於文章內，將文章分段
12+
13+
`<aside>`為文章的旁邊的側邊欄
14+
15+
`<footer>`為最下方的頁尾
16+

‎3/3-3.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# 3-3 HTML5元素
2+
3+
#### 頁首、頁尾 {#yuan-jian}
4+
5+
> 使用`<header>`來當作頁首，`<footer>`來當作頁尾
6+
7+
```markup
8+
<header>
9+
頁首
10+
</header>
11+
…
12+
<footer>
13+
頁尾
14+
</footer>
15+
```
16+
17+
18+
19+
#### 導覽列
20+
21+
> 使用`<nav>`來當作導覽列，內部放置網頁選單
22+
23+
```markup
24+
<nav>
25+
<ul>
26+
<li><a href="https://linwebs.tw/">Linwebs | 林林.台灣</a></li>
27+
<li><a href="https://htmltutorial.linwebs.tw">HTML 網頁教學</a></li>
28+
</ul>
29+
</nav>
30+
```
31+
32+
33+
34+
#### 音訊
35+
36+
> 使用`<audio>`來音訊播放器，先前未使用HTML5時，播放聲音及影片皆須使用外掛程式播放，多為使用Flash播放器，由於使用者端需安裝對應軟體才可播放，降低許多使用者瀏覽的意願，HTML5內件音訊及影片播放功能，可免安裝外掛程式，直接由瀏覽器播放，各瀏覽器支援的音訊、影片檔案相容格式不盡相同，播放器頁面也不進相同，可參考下方表格，src指定檔案路徑，controls為顯示播放器選項
37+
38+
{% hint style="info" %}
39+
若瀏覽器不支援 HTML5播放器就會顯示`<audio>`標籤中的文字
40+
{% endhint %}
41+
42+
```markup
43+
<audio src="linwebs.wav" controls >
44+
您的瀏覽器不支援此HTML5播放器
45+
</audio>
46+
```
47+
48+
若格式不支援，會切換為另一種格式，autoplay為自動播放，loop為重複播放
49+
50+
```markup
51+
<audio controls autoplay loop >
52+
<source src="linwebs.wav" type="audio/wav">
53+
<source src="linwebs.ogg" type="audio/ogg">
54+
<source src="linwebs.mp3" type="audio/mpeg">
55+
</audio>
56+
```
57+
58+
HTML5音訊各瀏覽器版本支援度
59+
60+
| | chrome | IE | FireFox | Safari | Opera |
61+
| --- | --- | --- | --- | --- |
62+
| Support | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
63+
| MP3 | ✓ | ✓ | ✓ | ✓ | ✓ |
64+
| Wav | ✓ | ✕ | ✓ | ✓ | ✓ |
65+
| Ogg | ✓ | ✓ | ✓ | ✕ | ✓ |
66+
67+
68+
69+
#### 影片
70+
71+
> 使用方法與`<audio>`方式相似，可使用`width="..."`指定高度 、`height ="..."`指定高度，可使百分比%或像素px為單位
72+
73+
{% hint style="info" %}
74+
若瀏覽器不支援 HTML5播放器就會顯示`<video>`標籤中的文字
75+
{% endhint %}
76+
77+
```markup
78+
<video src="linwebs.mp4" width="320" height="240" controls >
79+
您的瀏覽器不支援此HTML5播放器
80+
</video>
81+
```
82+
83+
若格式不支援，會自動切換為另一種格式
84+
85+
```markup
86+
<video width="320" height="240" controls >
87+
<source src="linwebs.webm" type="audio/webm">
88+
<source src="linwebs.ogg" type="audio/ogg">
89+
<source src="linwebs.mp4" type="audio/mpeg">
90+
</video>
91+
```
92+
93+
HTML5音訊各瀏覽器版本支援度
94+
95+
| | chrome | IE | FireFox | Safari | Opera |
96+
| --- | --- | --- | --- | --- |
97+
| Support | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
98+
| MP4 | ✓ | ✓ | ✓ | ✓ | ✓\(V.25\) |
99+
| WebM | ✓ | ✕ | ✓ | ✕ | ✓ |
100+
| Ogg | ✓ | ✕ | ✓ | ✕ | ✓ |
101+
102+
103+
104+
#### 進度條
105+
106+
> 使用`<progress>`來製作進度條，常用於載入畫面，使用`max="..."`設定最大值，`value="..."`設定為目前的值
107+
108+
```markup
109+
<progress max="100" value="60"> </progress >
110+
```
111+
112+
113+

0 commit comments

Comments
 (0)