Skip to content

Commit b43c8cd

Browse files
linwebsgitbook-bot
linwebs
authored and
gitbook-bot
committed
GitBook: [master] one page modified
1 parent 4928aa5 commit b43c8cd

File tree

1 file changed

+172
-7
lines changed

1 file changed

+172
-7
lines changed

‎2.-chang-yong-html-yuan-jian/21-ji-ben-html-yuan-jian.md

Lines changed: 172 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
#### 段落
44

5-
> 使用<p>來開始段落，使用</p>來結束段落
5+
> 使用`<p>`來開始段落，使用`</p>`來結束段落
66
77
```markup
88
<p>Linwebs | 林林.台灣</p>
@@ -13,7 +13,7 @@
1313

1414
#### 換行
1515

16-
> 使用&lt;br /&gt;來換行，PS: 也可寫成&lt;br&gt;
16+
> 使用`<br />`來換行，PS: 也可寫成`<br>`
1717
1818
```markup
1919
<p>Linwebs | 林林.台灣</p>
@@ -39,7 +39,9 @@
3939
<del>這是刪除的文字</del>
4040
```
4141

42-
#### 標題 {#hang}
42+
43+
44+
#### 標題 {#hang}
4345

4446
> h1到h6為HTML的標題語法，大家可依需求使用
4547
@@ -52,19 +54,23 @@
5254
<h6>h6. Linwebs | 林林.台灣</h6>
5355
```
5456

55-
#### 分隔線 {#hang}
5657

57-
> 使用&lt;hr /&gt;來顯示分隔線
58+
59+
#### 分隔線 {#hang}
60+
61+
> 使用`<hr />`來顯示分隔線
5862
5963
```markup
6064
<p>Linwebs | 林林.台灣</p>
6165
<hr />
6266
<p>這是分隔線下的文字</p>
6367
```
6468

65-
#### 圖片 {#hang}
69+
#### {#hang}
6670

67-
> 使用&lt;img&gt;來顯示圖片，使用src屬性來指定圖片路徑，可使用相對路徑或是絕對路徑，也可配合下個小章節的HTML元件屬性來改變其寬度、高度
71+
#### 圖片 {#hang}
72+
73+
> 使用`<img>`來顯示圖片，使用`src`屬性來指定圖片路徑，可使用相對路徑或是絕對路徑，也可配合下個小章節的HTML元件屬性來改變其寬度、高度
6874
6975
```markup
7076
<img src="linwebs.png">
@@ -74,3 +80,162 @@
7480

7581

7682

83+
#### 連結 {#hang}
84+
85+
> 使用`<a>`標籤來製作連結，可連結至文字、圖片、網頁等，兩個`<a>`標籤中放入顯示連結的文字，可使用`target`標籤指定連結開啟位置
86+
87+
```markup
88+
<a href="https://linwebs.tw/">Linwebs | 林林.台灣</a>
89+
<a href="https://linwebs.tw/" target="_blank">Linwebs | 林林.台灣</a>
90+
```
91+
92+
93+
94+
#### 清單 {#hang}
95+
96+
> 使用`<ol>`來包含住`<li>`，可顯示有數字的清單，使用`<ul>`來包含住`<li>`，可顯示有圓點的清單
97+
>
98+
> 本欄中使用了兩個跳脫字元符號，由於此兩符號是HTML語言中的符號，故須使用跳脫字元方式顯示
99+
> `&lt;` =&gt;【&lt;】
100+
> `&gt;` =&gt; 【&gt;】
101+
102+
```markup
103+
<ol>
104+
<li>&lt;ol&gt;</li>
105+
<li>>Linwebs</li>
106+
<li>林林.台灣</li>
107+
</ol>
108+
<ul>
109+
<li>&lt;ul&gt;</li>
110+
<li>HTML</li>
111+
<li>教學</li>
112+
</ul>
113+
```
114+
115+
116+
117+
#### 區塊 {#hang}
118+
119+
> 使用`<div>`標籤來分割網頁區塊，多用來指定套用CSS的範圍
120+
121+
```markup
122+
<div style="background-color:blue; color:white">
123+
<p>Linwebs</p>
124+
<p>林林.台灣</p>
125+
</div>
126+
```
127+
128+
129+
130+
#### 樣式 {#hang}
131+
132+
> 經常使用`<span>`來套用單行文字的CSS
133+
134+
```markup
135+
<h4>
136+
<span style="color:blue">Linwebs</span> 林林.台灣
137+
</h4>
138+
```
139+
140+
141+
142+
#### 表格 {#shi-1}
143+
144+
> 使用`<table>`標籤來製作表格，內含`<tr>`做為表格的列，`<td>`作為表格的欄，表格第一列中的欄位經常使用`<th>`來替代表示此欄的內容為欄位名稱
145+
>
146+
> 合併表格：在`<td>`後方加入`colspan="2"`表示將這一列表格中的2個欄位合併
147+
148+
```markup
149+
<table border="2">
150+
<tr>
151+
<th>編號</th>
152+
<th>名稱</th>
153+
<th>網址</th>
154+
</tr>
155+
<tr>
156+
<td align="center">1</td>
157+
<td>Linwebs</td>
158+
<td>linwebs.tw</td>
159+
</tr>
160+
<tr>
161+
<td align="center">2</td>
162+
<td>HTML教學</td>
163+
<td>htmltutorial.linwebs.tw</td>
164+
</tr>
165+
<tr>
166+
<td align="center">3</td>
167+
<td colspan="2">Linwebs | 林林.台灣</td>
168+
</tr>
169+
</table>
170+
```
171+
172+
173+
174+
#### 框架 {#shi-1}
175+
176+
> 使用`<frame>`標籤來引用檔案，多用於引用網頁，呈現頁中頁的效果，YouTube也有提供`<iframe>`可讓使用者插入其影片於網頁中，甚至可修改是否自動播放、循環播放、顯示播放器工具列等，以下提供兩種範例，一是分割瀏覽器為四等分，以Linwebs網站作為範例，二是`<iframe>`連結，嵌入YouTube影片
177+
178+
```markup
179+
<h1>Linwebs</h1>
180+
<hr />
181+
<iframe width="560" height="315" src="https://www.youtube.com/embed/" "frameborder="0" allowfullscreen></iframe>
182+
```
183+
184+
```markup
185+
<frameset cols="50%,50%" rows="50%,50%">
186+
<frame src="https://linwebs.tw/" />
187+
<frame src="https://linwebs.tw/note" />
188+
<frame src="https://linwebs.tw/diary" />
189+
<frame src="https://linwebs.tw/login" />
190+
</frameset>
191+
```
192+
193+
194+
195+
#### 表單 {#shi-1}
196+
197+
> 使用`<form>`標籤來製作表單，須以其他網頁後端語言結合方可運作，如：結合PHP語言，製作登錄系統表單，action指定傳送的網址，可使用相對路徑、絕對路徑等網址，method指定傳送的方法，有GET【顯示於網址】和POST【隱藏傳送】兩種方式，而元素則有非常多種，常用的有text【文字】、password【密碼】、radio【單選框】、checkbox【複選框】、submit【送出】等元素，其中需有submit來送出表單，否則此表單將無用處
198+
199+
> `type` =&gt; 指定類別
200+
> `placeholder` =&gt; 指定提示文字
201+
> `value` =&gt; 指定其值
202+
> `name` =&gt; 為PHP程式辨認欄位的方式
203+
204+
{% code-tabs %}
205+
{% code-tabs-item title="簡易帳號密碼輸入欄" %}
206+
```markup
207+
<form action="login.php" method="post">
208+
<input type="text" name="account" placeholder="請輸入帳號" />
209+
<br />
210+
<input type="password" name="password" placeholder="請輸入密碼" />
211+
<br />
212+
<input type="submit" value="送出" />
213+
</form>
214+
```
215+
{% endcode-tabs-item %}
216+
{% endcode-tabs %}
217+
218+
{% code-tabs %}
219+
{% code-tabs-item title="數字與核選方塊" %}
220+
```markup
221+
<form action="confirm.php" method="post">
222+
<h2>Linwebs 註冊表單</h2>
223+
<hr />
224+
<input type="radio" name="radio" value="1" />高中職<br />
225+
<input type="radio" name="radio" value="2" />大專院校<br />
226+
<input type="radio" name="radio" value="3" />研究所<br />
227+
<hr />
228+
<input type="checkbox" name="checkbox" value="1" />查看<br />
229+
<input type="checkbox" name="checkbox" value="2" />編輯<br />
230+
<input type="checkbox" name="checkbox" value="3" />發文<br />
231+
<hr />
232+
請輸入驗證碼: <input type="number" name="student_id" placeholder="請輸入數字" />
233+
<br />
234+
<input type="submit" value="送出" />
235+
</form>
236+
```
237+
{% endcode-tabs-item %}
238+
{% endcode-tabs %}
239+
240+
241+

0 commit comments

Comments
 (0)