-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
397 lines (388 loc) · 187 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>淺談前端網頁設計</title><link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet' type='text/css' /><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; word-wrap: break-word; position: relative; white-space: normal; padding-bottom: 70px; overflow-x: visible; }
.first-line-indent #write div, .first-line-indent #write li, .first-line-indent #write p { text-indent: 2em; }
.first-line-indent #write div :not(p):not(div), .first-line-indent #write div.md-htmlblock-container, .first-line-indent #write p *, .first-line-indent pre { text-indent: 0px; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
@media screen and (max-width: 500px) {
body.typora-export { padding-left: 0px; padding-right: 0px; }
.CodeMirror-sizer { margin-left: 0px !important; }
.CodeMirror-gutters { display: none !important; }
}
#write > blockquote:first-child, #write > div:first-child, #write > figure:first-child, #write > ol:first-child, #write > p:first-child, #write > pre:first-child, #write > ul:first-child { margin-top: 30px; }
#write li > figure:first-child { margin-top: -20px; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { color: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 2; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px !important; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 80px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; }
#write { margin-top: 0px; border-color: transparent !important; }
.typora-export * { -webkit-print-color-adjust: exact; }
html.blink-to-pdf { font-size: 13px; }
.typora-export #write { padding-left: 1cm; padding-right: 1cm; padding-bottom: 0px; break-after: avoid; }
.typora-export #write::after { height: 0px; }
@page { margin: 20mm 0px; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > img:only-child { display: block; margin: auto; }
p > .md-image:only-child { display: inline-block; width: 100%; text-align: center; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
.md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
.md-toc-h4 .md-toc-inner { margin-left: 5em; }
.md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
.md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="mermaid"] svg, [lang="flow"] svg { max-width: 100%; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }
.CodeMirror { height: auto; }
.CodeMirror.cm-s-inner { background: inherit; }
.CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; z-index: 3; }
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
.cm-negative { color: rgb(221, 68, 68); }
.cm-positive { color: rgb(34, 153, 34); }
.cm-header, .cm-strong { font-weight: 700; }
.cm-del { text-decoration: line-through; }
.cm-em { font-style: italic; }
.cm-link { text-decoration: underline; }
.cm-error { color: red; }
.cm-invalidchar { color: red; }
.cm-constant { color: rgb(38, 139, 210); }
.cm-defined { color: rgb(181, 137, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
.CodeMirror { position: relative; overflow: hidden; }
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
.CodeMirror-sizer { position: relative; }
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: hidden; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-lines { cursor: text; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; word-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
.CodeMirror-wrap pre { word-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
.cm-searching { background: rgba(255, 255, 0, 0.4); }
@media print {
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
}
:root { --side-bar-bg-color: #fafafa; --control-text-color: #777; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: normal; src: local("Noto Sans Mono CJK TC Regular"), local("Open Sans Regular"), url("./github/400.woff") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: normal; src: local("Noto Sans CJK TC Regular"), local("Open Sans Italic"), url("./github/400i.woff") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: bold; src: local("Noto Sans CJK TC Bold"), local("Open Sans Bold"), url("./github/700.woff") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: bold; src: local("Noto Sans CJK TC Bold"), local("Open Sans Bold Italic"), url("./github/700i.woff") format("woff"); }
html { font-size: 16px; }
body { font-family: "Noto Sans CJK TC Regular", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(51, 51, 51); line-height: 1.6; }
#write { max-width: 860px; margin: 0px auto; padding: 20px 30px 100px; }
#write > ul:first-child, #write > ol:first-child { margin-top: 30px; }
body > :first-child { margin-top: 0px !important; }
body > :last-child { margin-bottom: 0px !important; }
a { color: rgb(65, 131, 196); }
h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; }
h1 tt, h1 code { font-size: inherit; }
h2 tt, h2 code { font-size: inherit; }
h3 tt, h3 code { font-size: inherit; }
h4 tt, h4 code { font-size: inherit; }
h5 tt, h5 code { font-size: inherit; }
h6 tt, h6 code { font-size: inherit; }
h1 { padding-bottom: 0.6em; font-size: 2.25em; line-height: 1.2; margin-top: 2em; }
h2 { padding-bottom: 0.3em; font-size: 1.75em; line-height: 1.225; }
h3 { font-size: 1.5em; line-height: 1.43; padding-bottom: 0.2em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; color: rgb(119, 119, 119); }
p, blockquote, ul, ol, dl, table { margin: 0.8em 0px; }
li > ol, li > ul { margin: 0px; }
hr { height: 2px; padding: 0px; margin: 16px 0px; background-color: rgb(231, 231, 231); border: 0px none; overflow: hidden; box-sizing: content-box; }
body > h2:first-child { margin-top: 0px; padding-top: 0px; }
body > h1:first-child { margin-top: 0px; padding-top: 0px; }
body > h1:first-child + h2 { margin-top: 0px; padding-top: 0px; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child { margin-top: 0px; padding-top: 0px; }
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0px; padding-top: 0px; }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0px; }
li p.first { display: inline-block; }
ul, ol { padding-left: 30px; }
ul:first-child, ol:first-child { margin-top: 0px; }
ul:last-child, ol:last-child { margin-bottom: 0px; }
blockquote { border-left: 4px solid rgb(223, 226, 229); padding: 0px 15px; color: rgb(119, 119, 119); }
blockquote blockquote { padding-right: 0px; }
table { padding: 0px; word-break: initial; }
table tr { border-top: 1px solid rgb(223, 226, 229); margin: 0px; padding: 0px; }
table tr:nth-child(2n), thead { background-color: rgb(248, 248, 248); }
table tr th { font-weight: bold; border-width: 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: rgb(223, 226, 229); border-right-color: rgb(223, 226, 229); border-left-color: rgb(223, 226, 229); border-image: initial; border-bottom-style: initial; border-bottom-color: initial; text-align: left; margin: 0px; padding: 6px 13px; }
table tr td { border: 1px solid rgb(223, 226, 229); text-align: left; margin: 0px; padding: 6px 13px; }
table tr th:first-child, table tr td:first-child { margin-top: 0px; }
table tr th:last-child, table tr td:last-child { margin-bottom: 0px; }
.CodeMirror-lines { padding-left: 4px; }
.code-tooltip { box-shadow: rgba(0, 28, 36, 0.3) 0px 1px 1px 0px; border-top: 1px solid rgb(238, 242, 242); }
.md-fences, code, tt { border: 1px solid rgb(231, 234, 237); background-color: rgb(248, 248, 248); border-radius: 3px; padding: 2px 4px 0px; font-size: 0.9em; }
code { background-color: rgb(243, 244, 244); padding: 0px 4px 2px; font-family: "Noto Sans Mono CJK TC Regular"; }
.md-fences { margin-bottom: 15px; margin-top: 15px; padding: 8px 1em 6px; }
.md-task-list-item > input { margin-left: -1.3em; }
@media screen and (min-width: 914px) {
}
@media print {
html { font-size: 13px; }
table, pre { break-inside: avoid; }
pre { word-wrap: break-word; }
}
.md-fences { background-color: rgb(248, 248, 248); }
#write pre.md-meta-block { padding: 1rem; font-size: 85%; line-height: 1.45; background-color: rgb(247, 247, 247); border: 0px; border-radius: 3px; color: rgb(119, 119, 119); margin-top: 0px !important; }
.mathjax-block > .code-tooltip { bottom: 0.375rem; }
.md-mathjax-midline { background: rgb(250, 250, 250); }
#write > h3.md-focus::before { left: -1.5625rem; top: 0.375rem; }
#write > h4.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h5.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h6.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
.md-image > .md-meta { border-radius: 3px; padding: 2px 0px 0px 4px; font-size: 0.9em; color: inherit; }
.md-tag { color: rgb(167, 167, 167); opacity: 1; }
.md-toc { margin-top: 20px; padding-bottom: 20px; }
.sidebar-tabs { border-bottom: none; }
#typora-quick-open { border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); }
#typora-quick-open-item { background-color: rgb(250, 250, 250); border-color: rgb(254, 254, 254) rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238); border-style: solid; border-width: 1px; }
.on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); }
header, .context-menu, .megamenu-content, footer { font-family: "Segoe UI", Arial, sans-serif; }
.file-node-content:hover .file-node-icon, .file-node-content:hover .file-node-open-state { visibility: visible; }
.mac-seamless-mode #typora-sidebar { background-color: var(--side-bar-bg-color); }
.md-lang { color: rgb(180, 101, 77); }
.html-for-mac .context-menu { --item-hover-bg-color: #E6F0FE; }
.CodeMirror-linenumber { user-select: none; }
.typora-export p, .typora-export .footnote-line {white-space: normal;}
</style>
</head>
<body class='typora-export' >
<div id='write' class = 'is-node'><p><a href='#toc'><span>空降目錄</span></a></p><h1><a name="%E5%A3%B9%E3%80%81%E6%A6%82%E8%AB%96" class="md-header-anchor"></a><span>壹、導論</span></h1><p><span>前端網頁設計主要分為 HTML、CSS、Javascript。</span></p><h2><a name="%E9%97%9C%E8%81%AF" class="md-header-anchor"></a><span>關聯</span></h2><p><span>以下是這三者之間的關係：</span></p><ul><li><p><span>HTML</span></p><ul><li><span>網頁的主架構，類似於樹木的樹幹。</span></li></ul></li><li><p><span>CSS</span></p><ul><li><span>網頁的外觀設計，類似於樹枝的排列方式、樹枝上的花草。</span></li></ul></li><li><p><span>JavaScript</span></p><ul><li><span>控制各種事件，例如樹枝被折斷時該發生什麼事情、什麼時候該開花結果。</span></li></ul></li></ul><p> </p><h1><a name="%E8%B2%B3%E3%80%81%E5%9F%BA%E7%A4%8E%E8%AA%8D%E7%9F%A5" class="md-header-anchor"></a><span>貳、基礎認知</span></h1><h2><a name="%E8%B7%AF%E5%BE%91" class="md-header-anchor"></a><span>路徑</span></h2><p><span>路徑可以理解為檔案儲存的位置，以下面的🌰栗子說明：</span></p><p><img src='./assets/images/dir.png' alt='目錄演示圖' referrerPolicy='no-referrer' /></p><p><span>路徑可分為絕對路徑與相對路徑，其中 "../" 代表上一層。</span></p><p> </p><h3><a name="%E7%B5%95%E5%B0%8D%E8%B7%AF%E5%BE%91" class="md-header-anchor"></a><span>絕對路徑</span></h3><p><span>絕對路徑比較難解釋，也先避免使用。</span></p><h3><a name="%E7%9B%B8%E5%B0%8D%E8%B7%AF%E5%BE%91" class="md-header-anchor"></a><span>相對路徑</span></h3><p><span>以</span><code>index.html</code><span>來說，如果要指向</span><code>best_wife.png</code><span>這張圖片，需要輸入</span><code>../assets/images/best_wife.png</code><span>。其中的意義如下：</span></p><p> </p><p><strong><span>"../" </span></strong><span>: 回到上一層，即根目錄。</span></p><p><strong><span>"assets/"</span></strong><span> : 在根目錄中，進入</span><code>assets</code><span>的資料夾。</span></p><p><strong><span>"images/"</span></strong><span> : 在</span><code>assets/</code><span>中，進入</span><code>images</code><span>的資料夾。</span></p><p><strong><span>"best_wife.png"</span></strong><span> : 在</span><code>images</code><span>中，選取 </span><code>best_wife.png</code><span>。</span></p><h1><a name="%E5%8F%83%E3%80%81%E6%B7%BA%E8%AB%87%E8%AA%9E%E6%B3%95" class="md-header-anchor"></a><span>參、淺談語法</span></h1><h2><a name="html" class="md-header-anchor"></a><span>HTML</span></h2><p><span>當前現行版本為HTML 5，HTML 5 的撰寫原則為以標籤的意義為主，而不是樣式，樣式的部分交由CSS處理。這個部分先記得即可，稍後會做說明。</span></p><p> </p><p><span>典型的HTML文件代碼：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta"><!DOCTYPE html></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">meta</span> <span class="cm-attribute">charset</span>=<span class="cm-string">"utf-8"</span> <span class="cm-tag cm-bracket">/></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">meta</span> <span class="cm-attribute">name</span>=<span class="cm-string">"viewport"</span> <span class="cm-attribute">content</span>=<span class="cm-string">"width=device-width, initial-scale=1"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">></span>網頁標題，在上面會顯示的那個<span class="cm-tag cm-bracket"></</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment"><!--會顯示的內容--></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 275px;"></div><div class="CodeMirror-gutters" style="display: none; height: 275px;"></div></div></div></pre><p> </p><p><span>讓我們逐行來說明：</span></p><p><span>第一行的</span><code><!DOCTYPE html></code><span>表示這是份HTML 5的文件。</span></p><p><span>從上面的結構中，應該不難發現，幾乎所有的標記，都是由起始標記</span><code><tag></code><span>與結尾標記</span><code></tag></code><span>所組成。</span></p><p><span>有些例外的(例如#4)稱之為</span><strong><span>無元素標籤</span></strong><span>，因為這種標籤中間不會包含內容，寫法為</span><code><tag /></code><span>，即在本身後面加上斜線結尾。</span></p><h3><a name="%E6%A8%99%E7%B1%A4%E7%9A%84%E7%B5%90%E6%A7%8B" class="md-header-anchor"></a><span>標籤的結構</span></h3><p><span>HTML標籤的結構由標籤名稱及屬性構成，具體的內容如下：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">標籤名稱</span> <span class="cm-attribute">屬性</span>=<span class="cm-string">"屬性值"</span> <span class="cm-attribute">屬性</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">標籤名稱</span><span class="cm-tag cm-bracket">></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">標籤名稱</span> <span class="cm-attribute">屬性</span>=<span class="cm-string">"屬性值"</span> <span class="cm-attribute">屬性</span> <span class="cm-tag cm-bracket">/></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 46px;"></div><div class="CodeMirror-gutters" style="display: none; height: 46px;"></div></div></div></pre><p><span>基本上所有的標籤名稱及屬性都使用小寫</span>
<span>有些屬性沒有屬性值，例如</span><code><input></code><span>中的 </span><code>disabled</code></p><p> </p><h3><a name="%E5%9C%A8%E7%B9%BC%E7%BA%8C%E4%B9%8B%E5%89%8D" class="md-header-anchor"></a><span>在繼續之前</span></h3><p><span>先來了解一些基本的東西</span></p><ul><li><span>多個連續空格只會顯示為一個，且在</span><code>display: block</code><span>元素前的空格會被忽略。</span>
<span>如果需要連續輸入空格，請使用</span><code>&ensp;</code><span>，這個反人類的東西稱為</span><strong><span>HTML實體參照</span></strong><span>，可以自己</span><a href="https://LMGTFY.com/?iie=1&q=HTML 實體參照"><strong><span>谷歌</span></strong></a><span>。</span></li><li></li></ul><h4><a name="%E8%A8%BB%E8%A7%A3" class="md-header-anchor"></a><span>註解</span></h4><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"><!--註解內容(就是寫給自己看，不會造成看得到的影響)--></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"><!--好的程序猿/攻城屍都會在該註解的地方註解，方便夥伴看懂自己在寫什麼--></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 46px;"></div><div class="CodeMirror-gutters" style="display: none; height: 46px;"></div></div></div></pre><p> </p><h4><a name="%E6%B2%92%E4%BB%80%E9%BA%BC%E6%84%8F%E7%BE%A9%EF%BC%8C%E5%96%AE%E7%B4%94%E6%8A%8A%E5%AD%97%E5%8C%85%E8%B5%B7%E4%BE%86%E7%9A%84%E6%A8%99%E7%B1%A4(%E5%BE%8C%E9%9D%A2css%E6%9C%83%E7%94%A8)" class="md-header-anchor"></a><span>沒什麼意義，單純把字包起來的標籤(後面css會用)</span></h4><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">文字文字文字 <span class="cm-tag cm-bracket"><</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">></span> 被包起來的文字 <span class="cm-tag cm-bracket"></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">></span> 文字文字文字</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><p> </p><p> </p><h3><a name="%E5%B8%B8%E8%A6%8B%E7%9A%84html%E6%A8%99%E7%B1%A4" class="md-header-anchor"></a><span>常見的HTML標籤</span></h3><h4><a name="%E7%B4%94%E5%AE%B9%E5%99%A8%E9%A1%9E" class="md-header-anchor"></a><span>純容器類</span></h4><p><span>這個部分為基本的容器。</span></p><ul><li><p><span>div</span></p><ul><li><span>沒有特別的意義，可用在任何地方。</span></li></ul></li><li><p><span>header</span></p><ul><li><span>通常用在網頁banner之類的地方。</span></li></ul></li><li><p><span>nav</span></p><ul><li><span>用於網頁導覽列。</span></li></ul></li><li><p><span>article</span></p><ul><li><span>用於主要內容區域。</span></li></ul></li><li><p><span>aside section</span></p><ul><li><p><span>用於側邊欄，具體的用法如下</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">aside</span> <span class="cm-attribute">id</span>=<span class="cm-string">"sidebar"</span><span class="cm-tag cm-bracket">></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span>小工具<span class="cm-tag cm-bracket"></</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span>小工具<span class="cm-tag cm-bracket"></</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span>小工具<span class="cm-tag cm-bracket"></</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">aside</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre></li></ul></li><li><p><span>footer</span></p><ul><li><span>常用於網頁底端，寫</span>©<span>copyright那些的。</span></li></ul></li></ul><h4><a name="%E6%B8%85%E5%96%AE" class="md-header-anchor"></a><span>清單</span></h4><p><span>具體的寫法如下</span></p><p><strong><span>無排序清單(unordered lists)</span></strong></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>內容<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>內容<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>內容<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><p><span>看起來的樣子會是這樣</span></p><ul>
<li>內容</li>
<li>內容</li>
<li>內容</li>
</ul><p><strong><span>排序清單(ordered lists)</span></strong></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">ol</span><span class="cm-tag cm-bracket">></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>內容<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>內容<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>內容<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">ol</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><p><span>看起來的樣子會是這樣</span></p><ol>
<li>內容</li>
<li>內容</li>
<li>內容</li>
</ol><p><span>要注意的是這裡我們並沒有自己打上1.2.3等數字，而是他自己幫我們加上去的。</span></p><p><span>清單可以使用</span><strong><span>巢狀結構</span></strong><span>，具體的用法如下：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>第一層<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>第二層<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>第二層<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>第二層<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>第一層<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">ol</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>第二層<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>第二層<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>第二層<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">ol</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 321px;"></div><div class="CodeMirror-gutters" style="display: none; height: 321px;"></div></div></div></pre><p><span>看起來的樣子會是這樣</span></p><ul>
<li>第一層</li>
<ul>
<li>第二層</li>
<li>第二層</li>
<li>第二層</li>
</ul>
<li>第一層</li>
<ol>
<li>第二層</li>
<li>第二層</li>
<li>第二層</li>
</ol>
</ul><p> </p><h4><a name="%E8%A1%A8%E6%A0%BC" class="md-header-anchor"></a><span>表格</span></h4><p><span>表格是由行與列所組成的，在編寫HTML時先寫橫的，在寫直的。</span></p><p><span>以下是一個2*3的表格範例:</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">table</span><span class="cm-tag cm-bracket">></span><span class="cm-comment"><!--表格所有內容由<table>包含--></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">tr</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span>1-1<span class="cm-tag cm-bracket"></</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span>1-2<span class="cm-tag cm-bracket"></</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">tr</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">tr</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span>2-1<span class="cm-tag cm-bracket"></</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span>2-2<span class="cm-tag cm-bracket"></</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">tr</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">tr</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span>3-1<span class="cm-tag cm-bracket"></</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span>3-2<span class="cm-tag cm-bracket"></</span><span class="cm-tag">td</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">tr</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">table</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 321px;"></div><div class="CodeMirror-gutters" style="display: none; height: 321px;"></div></div></div></pre><p><span>這是他看起來的樣子：</span>
<small>
<span>(顏色跟框是檢視器自己加上的，實際上應該沒有。樣式可以通過後續的css實現)</span>
</small></p><table>
<tbody><tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</tbody></table><p> </p><h5><a name="%E8%A1%A8%E5%96%AE" class="md-header-anchor"></a><span>表單</span></h5><p><span>表單分為表單以及標單元素，表單元素可以單獨存在(即不必位於form內)，但若要作為可以送出的表單，則必須位於表單內。</span></p><p><span>具體的範例如下：</span></p><p><strong><span>完整表單</span></strong></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">form</span> <span class="cm-attribute">action</span>=<span class="cm-string">"form.php"</span> <span class="cm-attribute">method</span>=<span class="cm-string">"POST"</span><span class="cm-tag cm-bracket">></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 文字輸入方塊：<span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text"</span> <span class="cm-attribute">placeholder</span>=<span class="cm-string">"請拍打餵食"</span> <span class="cm-tag cm-bracket">/></span> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span> <span class="cm-tag cm-bracket">/></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 單選方塊：</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"radio"</span> <span class="cm-attribute">name</span>=<span class="cm-string">"my_radio"</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_1"</span> <span class="cm-tag cm-bracket">/></span>選項1</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"radio"</span> <span class="cm-attribute">name</span>=<span class="cm-string">"my_radio"</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_2"</span> <span class="cm-tag cm-bracket">/></span>選項2</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"radio"</span> <span class="cm-attribute">name</span>=<span class="cm-string">"my_radio"</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_3"</span> <span class="cm-tag cm-bracket">/></span>選項3</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span> <span class="cm-tag cm-bracket">/></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 多選方塊：</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"checkbox"</span> <span class="cm-attribute">name</span>=<span class="cm-string">"my_ckb"</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_1"</span> <span class="cm-tag cm-bracket">/></span>選項1</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"checkbox"</span> <span class="cm-attribute">name</span>=<span class="cm-string">"my_ckb"</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_2"</span> <span class="cm-tag cm-bracket">/></span>選項2</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"checkbox"</span> <span class="cm-attribute">name</span>=<span class="cm-string">"my_ckb"</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_3"</span> <span class="cm-tag cm-bracket">/></span>選項3</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">label</span><span class="cm-tag cm-bracket">></span> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span> <span class="cm-tag cm-bracket">/></span> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 下拉清單：</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">select</span> <span class="cm-attribute">name</span>=<span class="cm-string">"my_select"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">option</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_1"</span><span class="cm-tag cm-bracket">></span>選項1<span class="cm-tag cm-bracket"></</span><span class="cm-tag">option</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">option</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_2"</span><span class="cm-tag cm-bracket">></span>選項2<span class="cm-tag cm-bracket"></</span><span class="cm-tag">option</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">option</span> <span class="cm-attribute">value</span>=<span class="cm-string">"val_3"</span><span class="cm-tag cm-bracket">></span>選項3<span class="cm-tag cm-bracket"></</span><span class="cm-tag">option</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">select</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 選擇顏色：<span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">name</span>=<span class="cm-string">"color"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"color"</span> <span class="cm-tag cm-bracket">/></span> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">/></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">input</span> <span class="cm-attribute">type</span>=<span class="cm-string">"submit"</span> <span class="cm-attribute">value</span>=<span class="cm-string">"送出~"</span> <span class="cm-tag cm-bracket">/></span> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">/></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">form</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 894px;"></div><div class="CodeMirror-gutters" style="display: none; height: 894px;"></div></div></div></pre><p> </p><p><span>實際看起來是這個樣子：</span></p><form action="form.php" method="POST">
文字輸入方塊：<input type="text" placeholder="請拍打餵食"> <br>
單選方塊：
<label>
<input type="radio" name="my_radio" value="val_1">選項1
</label>
<label>
<input type="radio" name="my_radio" value="val_2">選項2
</label>
<label>
<input type="radio" name="my_radio" value="val_3">選項3
</label>
<br>
多選方塊：
<label>
<input type="checkbox" name="my_ckb" value="val_1">選項1
</label>
<label>
<input type="checkbox" name="my_ckb" value="val_2">選項2
</label>
<label>
<input type="checkbox" name="my_ckb" value="val_3">選項3
</label>
<br>
下拉清單：
<select name="my_select">
<option value="val_1">選項1</option>
<option value="val_2">選項2</option>
<option value="val_3">選項3</option>
</select>
<br>
選擇顏色：<input name="color" type="color">
<br>
<input type="submit" value="送出~">
</form><p> </p><p><span>這個部分比較複雜，讓我們逐行的說明：</span></p><p><span>首先第一行的</span><code><form></code><span>說明了這是個表單，</span><strong><span>只有要送出的表單才需要加上</span></strong><span>。</span>
<span>action為送出的位置(後端比較複雜，先不管她)，method為送出的方法，這部分也比較複雜，先記在心裡就好。</span></p><p><span>表單元素基本上由</span><code><input type="TYPE" name="NAME" value="VALUE" /></code><span>組成，有幾個要點：</span></p><ul><li><code>name</code><span>屬性為送出至伺服器端的索引(index)</span></li><li><code>radio</code><span>、</span><code>checkbox</code><span> ，</span><code>name</code><span>相同會被分在同一個群組。</span></li><li><code>value</code><span>若在屬性為</span><code>text</code><span>類型的欄位是預設值的意思，可填也可不填。</span>
<span>若在</span><code>radio</code><span>、</span><code>checkbox</code><span>為必填(否則送出去伺服器不知道你到底選了哪個)。</span></li><li><span>文字輸入框有個屬性為</span><code>placeholder</code><span>，意義就跟他的名字一樣，作用是顯示提示文字。</span></li><li><span>HTML 5後，文字輸入框多了自動驗證功能，例如 </span><code>type="email"</code><span>，詳細的內容因為常常在變動，請自己</span><strong><a href="https://LMGTFY.com/?iie=1&q=html form tags"><span>Google</span></a></strong><span>即可。</span></li></ul><hr><h2><a name="css" class="md-header-anchor"></a><span>CSS</span></h2><h2><a name="css%E9%81%B8%E6%93%87%E5%99%A8" class="md-header-anchor"></a><span>CSS選擇器</span></h2><p><span>CSS的意義在於</span><strong><span>為HTML元素加上樣式</span></strong><span>，因此如何對應到html元素是個重要的議題。</span>
<span>接下來介紹一些常用的選擇器。</span></p><h3><a name="%E5%9F%BA%E7%A4%8E" class="md-header-anchor"></a><span>基礎</span></h3><h4><a name="css%E6%A0%BC%E5%BC%8F" class="md-header-anchor"></a><span>CSS格式</span></h4><p><span>一般來說，css的格式是這樣的</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">選擇器 {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 屬性: 屬性值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 屬性: 屬性值 屬性值 屬性值 屬性值;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 屬性: 數值 單位;<span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">/*(ex 20em)*/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><h4><a name="%E5%96%AE%E4%BD%8D" class="md-header-anchor"></a><span>單位</span></h4><p><span>css很多屬性值是帶單位的，以下是些常見的單位：</span></p><h5><a name="%E9%95%B7%E5%BA%A6%E5%96%AE%E4%BD%8D" class="md-header-anchor"></a><span>長度單位</span></h5><p><span>長度單位可分為絕對以及相對。</span></p><ul><li><p><span>px</span></p><ul><li><span>像素，絕對單位，大小就是一個點。</span></li></ul></li><li><p><span>pt</span></p><ul><li><span>絕對單位，很少用，別用就好(#。</span></li></ul></li><li><p><span>em、rem</span></p><ul><li><span>這兩個有著類似的性質，都是相對大小，預設大小為16px，相當於一般文字的大小。</span>
<code>em</code><span>參考父元素的大小，而</span><code>rem</code><span>參考最外層(即</span><code><html></code><span>)的相對大小。</span>
<span>舉個例子</span></li></ul><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"><!--html部分--></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tag cm-bracket"><</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">id</span>=<span class="cm-string">"box1"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">id</span>=<span class="cm-string">"box2"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 文字文字文字文字文字</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 229px;"></div><div class="CodeMirror-gutters" style="display: none; height: 229px;"></div></div></div></pre><ul><li><span>使用</span><code>em</code><span>:</span></li></ul><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">html</span> {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">font-size</span>: <span class="cm-number">16px</span>; <span class="cm-comment">/*字體大小*/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#box1</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">font-size</span>: <span class="cm-number">1.1em</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#box2</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">font-size</span>: <span class="cm-number">1.1em</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 206px;"></div><div class="CodeMirror-gutters" style="display: none; height: 206px;"></div></div></div></pre><ul><li><span>使用em時，字體大小會參考</span><strong><span>父元素</span></strong><span>(即上一層元素)的字體大小，所以box2的字體大小會是</span>
<code>16px * 1.1 * 1.1 (px)</code>
<span>若使用</span><code>rem</code><span>，則會參考最外層的(即</span><code><html></code><span>)，因此大小為1.1 * 16px。</span></li></ul></li><li><p><span>vw、vh</span></p><ul><li><span>這兩個單位都是相對於當前視窗的寬、長。視窗的寬度為100vw，同理vh。</span></li><li><span>這兩個單位在某些時候特別好用。</span></li></ul></li><li><p><span>%</span></p><ul><li><span>對於父目錄的百分比。</span></li></ul></li></ul><h5><a name="%E6%99%82%E9%96%93%E5%96%AE%E4%BD%8D" class="md-header-anchor"></a><span>時間單位</span></h5><p><code>s</code><span>為秒，</span><code>ms</code><span>為毫秒(1/1000s)</span></p><p> </p><h5><a name="%E9%A1%8F%E8%89%B2" class="md-header-anchor"></a><span>顏色</span></h5><p><span>顏色的表示方式有rgba()、rgb()、#16進位表示法。</span></p><p><span>rgba就是rgb多了個透明度(alpha)</span></p><p><span>基本上想要什麼顏色直接找產生器，或是使用chrome內建的工具即可。</span></p><p> </p><p><span>反正理解有單位這個概念即可，實際使用碰到問題在</span><a href='https://google.co.jp/'><span>Google</span></a><span>即可。</span></p><p> </p><h4><a name="%E9%81%B8%E6%93%87%E5%99%A8" class="md-header-anchor"></a><span>選擇器</span></h4><h5><a name="tag-name" class="md-header-anchor"></a><span>Tag Name</span></h5><p><span>對於標籤名稱的選擇器，直接打出來就好了。</span></p><p><span>例如下面的🌰栗子會對應到所有的</span><code><div></code><span>元素：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">div</span> {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">color</span>: <span class="cm-keyword">red</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><p> </p><h5><a name="id%E3%80%81class" class="md-header-anchor"></a><span>ID、Class</span></h5><p><span>一般來說，我們會在html不可重複的區塊使用</span><strong><span>ID</span></strong><span>，重複的地方使用</span><strong><span>class</span></strong><span>。</span></p><p><strong><span>每個ID在整份文件中只能出現一次，這也是ID的定義(唯一識別名稱)。</span></strong></p><p><span>另外，一個元素可以有很多class，以</span><strong><span>空格</span></strong><span>隔開(即</span><code>class="class1 class2"</code><span>)</span></p><p><span>像是以下這個🌰栗子：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><span><span></span>x</span></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">...略</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">id</span>=<span class="cm-string">"wrapper"</span><span class="cm-tag cm-bracket">></span><span class="cm-comment"><!--在網頁最外層使用div方便後續排版--></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">header</span> <span class="cm-attribute">id</span>=<span class="cm-string">"page_header"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> header</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">header</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">article</span> <span class="cm-attribute">id</span>=<span class="cm-string">"content"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">article</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">aside</span> <span class="cm-attribute">id</span>=<span class="cm-string">"sidebar_right"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">section</span> <span class="cm-attribute">class</span>=<span class="cm-string">"widget"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment"><!--因為可以有很多的小工具，他們的容器外觀應該長的一樣的--></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 小工具區塊~~</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">section</span> <span class="cm-attribute">class</span>=<span class="cm-string">"widget"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 小工具區塊~~</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">section</span> <span class="cm-attribute">class</span>=<span class="cm-string">"widget"</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> 小工具區塊~~</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">section</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">aside</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 573px;"></div><div class="CodeMirror-gutters" style="display: none; height: 573px;"></div></div></div></pre><p><span>在css中，使用</span><code>#ID</code><span>來指向ID，使用</span><code>.class_name</code><span>來指向class。</span></p><p><span>像是對於上方的html:</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#wrapper</span> {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/*.......*/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#content</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/******/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">/*****以此類推*****/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-qualifier">.widget</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/*所有具有 class="widget" 的容器都會被應用*/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 298px;"></div><div class="CodeMirror-gutters" style="display: none; height: 298px;"></div></div></div></pre><p><span>ID跟class的選擇器是基礎中的基礎，一定要牢記在心。</span></p><p> </p><h5><a name="%E5%85%B7%E6%9C%89..%E5%B1%AC%E6%80%A7%E3%80%81%E5%B1%AC%E6%80%A7%E5%80%BC" class="md-header-anchor"></a><span>具有..屬性、屬性值</span></h5><p><span>這個方法常會被使用在表單元素。</span></p><p><span>以下寫法會對應到所有具有</span><code>name="rmt"</code><span>的元素(例如</span><code><input name="rmt" type="..."></code><span>)</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">[<span class="cm-tag">name</span>=<span class="cm-string">"rmt"</span>]{</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">color</span>: <span class="cm-keyword">blue</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><p> </p><p> </p><h5><a name="%E4%BA%A4%E9%9B%86" class="md-header-anchor"></a><span>交集</span></h5><p><span>交集直接連著寫即可。</span></p><p><span>以下寫法會對應到所有</span><code><div></code><strong><span>並且</span></strong><span>具有</span><code>rmt</code><span>的class</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">div</span><span class="cm-qualifier">.rmt</span> {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">color</span>: <span class="cm-atom">#0000ff</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><h5><a name="%E8%81%AF%E9%9B%86" class="md-header-anchor"></a><span>聯集</span></h5><p><span>聯集以逗號隔開。</span></p><p><span>以下寫法會對應到所有</span><code><div></code><strong><span>或</span></strong><span>具有</span><code>rmt</code><span>的class</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">div</span>, <span class="cm-qualifier">.rmt</span> { <span class="cm-comment">/*逗號後面加空白只是慣例，不會影響功能。基本上逗點後面都應該加上空白方便閱讀*/</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">color</span>: <span class="cm-atom">#0000ff</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><p> </p><h4><a name="%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F" class="md-header-anchor"></a><span>容器大小</span></h4><p><span>設定容器大小的屬性有</span><code>width</code><span>、</span><code>height</code><span>以及</span><code>box-sizing</code>
<span>其中</span><code>width</code><span>與</span><code>height</code><span>應該很好理解，直接設定即可。</span></p><h5><a name="box-sizing" class="md-header-anchor"></a><span>box-sizing</span></h5><p><code>box-sizing</code><span>算是個比較新的屬性。在過去容器長寬的計算，只計算容器內部，不包含框線、padding，如此一來在寬度的計算上就會變得特別麻煩。</span></p><p><img src='.\assets\images\box-sizing-1.png' alt='1537572822772' referrerPolicy='no-referrer' /></p><p><span>如上圖，在未設定</span><code>box-sizing</code><span>時，寬度為400時，整體寬度為400 加上 2 * 2(框線)</span>
<span>這麼一來當使用相對大小，如%、vw時將會出現問題。</span></p><p><img src='.\assets\images\box-sizing-2.png' alt='1537573364078' referrerPolicy='no-referrer' /></p><p><span>而設定</span><code>box-sizing: border-box</code><span>後，width即為設定</span><strong><span>整體</span></strong><span>寬度，及最外層的寬度(</span><strong><span>不</span></strong><span>包含margin)。</span></p><p> </p><h4><a name="%E5%81%B5%E6%B8%AC%E7%80%8F%E8%A6%BD%E5%99%A8%E5%AF%AC%E5%BA%A6" class="md-header-anchor"></a><span>偵測瀏覽器寬度</span></h4><p><span>我們可以使用以下特殊的語法，來偵測使用者瀏覽器的寬度，以判定用戶是否使用行動裝置。</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-def">@media</span> (<span class="cm-property">max-width</span>:<span class="cm-number">720px</span>){ //用戶瀏覽器小於<span class="cm-number">720px</span>時觸發</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-builtin">#div_1</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/*.............*/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-builtin">#div_2</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/*.............*/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-def">@media</span> (<span class="cm-property">min-width</span>:<span class="cm-number">720px</span>){ //用戶瀏覽器大於<span class="cm-number">720px</span>時觸發</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-builtin">#div_1</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/*.............*/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-builtin">#div_2</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/*.............*/</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 390px;"></div><div class="CodeMirror-gutters" style="display: none; height: 390px;"></div></div></div></pre><p> </p><p><span>一般來說寫在下面的css會覆蓋上面的，所以一般的做法是先在外面定義通用的css，然後在底下定義行動裝置的樣式。</span></p><p> </p><h3><a name="%E6%8E%92%E7%89%88" class="md-header-anchor"></a><span>排版</span></h3><h4><a name="%E9%AB%98%E5%BA%A6%E3%80%81%E5%AF%AC%E5%BA%A6" class="md-header-anchor"></a><span>高度、寬度</span></h4><p><span>在css中，寬度使用</span><code>width</code><span> 高度使用</span><code>height</code></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang=""><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">#my_div {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>height: 20em;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>width: 10%;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><p> </p><h4><a name="padding%E3%80%81margin" class="md-header-anchor"></a><span>padding、margin</span></h4><p><span>大致的概念可以參考上圖</span></p><p><span>padding可以理解為往內推，margin則是往外跟別人的距離。</span></p><p><span>margin可以為負數，而padding則不行。</span></p><p><span>要自動居中可以用</span><code>margin: (任意值) auto</code></p><p> </p><h4><a name="position%E3%80%81display" class="md-header-anchor"></a><span>position、display</span></h4><p><span>這部份很複雜，這裡先說常用的</span></p><p><span>一般來說，</span><code>display:block</code><span> 就是像是div那樣，把元素當作一個大框框，而</span><code>display: inline</code><span> 則是把元素當作文字。</span></p><p><span>常見預設display為inline的有</span><code><img></code><span> </span><code><input></code><span> </span><code><button></code><span> </span><code><a></code></p><p> </p><h3><a name="%E9%80%B2%E9%9A%8E%E6%8E%92%E7%89%88(%E9%81%B8%E8%AE%80)" class="md-header-anchor"></a><span>進階排版(選讀)</span></h3><p><span>進階的排版牽涉到橫向及自適應。</span></p><p><span>先說position:</span></p><p><span>position有幾個值，這裡依序說明：</span></p><h4><a name="position:-absolute" class="md-header-anchor"></a><span>position: absolute</span></h4><p><span>當position被設定為absolute時，使用絕對座標，需要搭配top及left屬性(或是left及right)。</span></p><p><span>以下的飯粒🍚，會令此容器的左上對齊x:10px，y:5px處。(但實際使用請多用vw、vh這種單位，避免行動裝置出現問題)。</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="css"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="css"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">#my_div</span> {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">position</span>: <span class="cm-atom">absolute</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">left</span>: <span class="cm-number">10px</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">top</span>: <span class="cm-number">5px</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><h4><a name="position:-relative" class="md-header-anchor"></a><span>position: relative</span></h4><p><span>這個屬性不是用在設定的元素本身，而是其子元素。</span></p><p><span>若一元素設定</span><code>position: relative</code><span>，齊子元素設定</span><code>position: absolute</code><span>及left、top等屬性時，會以此元素作為參考點，相對地顯示位置。</span></p><p> </p><h4><a name="position:-fixed" class="md-header-anchor"></a><span>position: fixed</span></h4><p><span>這個屬性類似於</span><code>absolute</code><span>，但當畫面捲動時不會跟著捲動，而是固定在某個高度。常用於上方工具條、返回最上方按鈕等。</span></p><p> </p><h3><a name="display" class="md-header-anchor"></a><span>display</span></h3><p><span>display在html 5或的了一系列的大更新，使得橫向的排版更為的簡單。但因為真的太多了，這裡就先列出真的會用到的，以及相容現今主流瀏覽器的語法。</span></p><p> </p><h4><a name="display:-inline-block" class="md-header-anchor"></a><span>display: inline-block</span></h4><p><span>這個屬性類似於</span><code>inline</code><span>，但是</span><code>inline</code><span>的元素不能設定margin-top、margin-bottom，也不能直接設定長寬，而使用</span><code>display:inline-block</code><span>就可以。</span></p><p> </p><h4><a name="display:-none" class="md-header-anchor"></a><span>display: none</span></h4><p><span>這個屬性會讓元素從畫面上消失。基本上是搭配js在做使用的，或是要在嵌入、或是額外的樣式表硬把別人的東西隱藏時會使用到。</span></p><p> </p><h4><a name="display:-flex" class="md-header-anchor"></a><span>display: flex</span></h4><p><span>這裡就真的比較複雜了，常用於橫向排版。初期理解比較複雜，但是熟練之後爆凎好用，而且用起來很潮(O 。</span></p><p><span>大家可以參考</span><a href='https://wcc723.github.io/css/2017/07/21/css-flex/'><span>連結</span></a></p><p> </p><p> </p><h3><a name="%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%95%88%E6%9E%9C%E9%A1%9E%E9%A0%85%E7%9B%AE" class="md-header-anchor"></a><span>基本的效果類項目</span></h3><h4><a name="%E8%83%8C%E6%99%AF" class="md-header-anchor"></a><span>背景</span></h4><h5><a name="%E5%BA%95%E8%89%B2" class="md-header-anchor"></a><span>底色</span></h5><p><span>要設定底色直接使用</span><code>background:顏色</code><span>即可。</span></p><h5><a name="%E5%BA%95%E5%9C%96" class="md-header-anchor"></a><span>底圖</span></h5><p><span>底圖的部份比較複雜，會搭配到一些排版的觀念。</span></p><p><span>完整的底圖設定如下：</span></p><p><code>background: [color] [image] [repeat] [attachment(固定)] [position] / [size] [origin] [clip];</code></p><p><span>要注意那個斜線必須留著，不然會壞掉。</span></p><p><span>中括號（含）換成對應的值就可以了，中間用空白隔開。</span></p><p><span>以下是幾個範例：</span></p><p><code>background: #aaa</code><span> （只設定顏色）</span></p><p><code>background:#aaa url('img.png')</code><span> (設定顏色及底圖，在底圖尚未載入時會顯示底色)</span></p><p><code>background: #aaa url('img.png') no-repeat center / cover</code><span> 這個比較難說明，大致上就是讓圖片顯示滿版（放大不改變比例）不重複顯示，定位在圖片的中心。</span></p><p><span>有些屬性比較複雜，同學們可以自己google自己試試看。</span></p><h5><a name="%E6%BC%B8%E5%B1%A4" class="md-header-anchor"></a><span>漸層</span></h5><p><span>漸層雖然看似為顏色，但實際上是被理解為圖片的形式。</span></p><p><span>具體的寫法如下：</span></p><p><code>background: linear-gradient(angle, color 1, color 2, ...)</code></p><p><span>angle的部分為角度，需要加上單位</span><code>deg</code><span> 或是使用 </span><code>to bottom</code><span>, </span><code>to right</code><span>這種東西</span></p><p><span>如果還是看不懂可以參考這個</span><a href='https://ithelp.ithome.com.tw/articles/10190867'><span>連結</span></a></p><p> </p><p><span>## </span></p><h2><a name="javascript" class="md-header-anchor"></a><span>Javascript</span></h2><h3><a name="%E5%9F%BA%E7%A4%8E%E4%B8%AD%E7%9A%84%E5%9F%BA%E7%A4%8E" class="md-header-anchor"></a><span>基礎中的基礎</span></h3><h4><a name="%E8%AE%8A%E9%87%8F" class="md-header-anchor"></a><span>變量</span></h4><p><span>變量可以用來存放一個數值，可以是數字、字串、object等。</span></p><p> </p><h5><a name="%E5%8D%80%E6%AE%B5-scope" class="md-header-anchor"></a><span>區段 scope</span></h5><p><span>在定義變量的時候，要注意變量影響的範圍，下面是個例子：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">foo</span>(){</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">var</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> <span class="cm-number">2</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">//在這裡a 會是2;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">//在這裡a還是0;</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 160px;"></div><div class="CodeMirror-gutters" style="display: none; height: 160px;"></div></div></div></pre><p> </p><h4><a name="%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6" class="md-header-anchor"></a><span>流程控制</span></h4><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">if</span> (<span class="cm-variable">CONDUCTION</span>) {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">//do something</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">} <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable">CONDUCTION_2</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">//do something</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">} <span class="cm-keyword">else</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">//do something</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 160px;"></div><div class="CodeMirror-gutters" style="display: none; height: 160px;"></div></div></div></pre><p> </p><h4><a name="%E5%87%BD%E6%95%B8" class="md-header-anchor"></a><span>函數</span></h4><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">foo</span>(){</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">//do something;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable">RETURN</span> <span class="cm-variable">VAL</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">f1</span>(<span class="cm-def">a</span>) {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable-2">a</span> <span class="cm-operator">*</span> <span class="cm-number">2</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">x</span> <span class="cm-operator">=</span> <span class="cm-variable">f1</span>(<span class="cm-number">2</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">x</span>); <span class="cm-comment">// would print 4</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><h5><a name="%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B8" class="md-header-anchor"></a><span>匿名函數</span></h5><p><span>js中時常需要將函數作為變量在另一個函數傳遞，這時候匿名函數便非常的好用，下面是個例子：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">a</span>(<span class="cm-def">foo</span>, <span class="cm-def">b</span>) {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">//foo是一個函數，我們將函數的內容作為變量傳遞進來，並且在下面執行。</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">foo</span>(<span class="cm-variable-2">b</span>))</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">a</span>(<span class="cm-keyword">function</span>(<span class="cm-def">b</span>){</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable-2">b</span> <span class="cm-operator">*</span> <span class="cm-number">2</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}, <span class="cm-number">3</span>)</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// would print 6</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 206px;"></div><div class="CodeMirror-gutters" style="display: none; height: 206px;"></div></div></div></pre><p> </p><h3><a name="dom" class="md-header-anchor"></a><span>DOM</span></h3><h4><a name="dom%E6%98%AF%E4%BB%80%E9%BA%BC%EF%BC%9F" class="md-header-anchor"></a><span>DOM是什麼？</span></h4><p><span>DOM全名為</span><strong><span>document object model</span></strong><span> ，在這裡可以理解可以為html元素的結構。</span></p><p> </p><h3><a name="jquery" class="md-header-anchor"></a><span>jQuery</span></h3><p><span>由於javascript原生的指令較長，我也記不得，所以在這裡我們使用萬能的套件庫jQuery來輔助我們使用javascript。</span></p><p> </p><h3><a name="%E5%85%83%E7%B4%A0%E9%81%B8%E6%93%87%E5%99%A8" class="md-header-anchor"></a><span>元素選擇器</span></h3><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">"CSS_SELECTOR"</span>)</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><p><span>沒錯，就是css的元素選擇器！</span></p><p><span>下面是幾個例子：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">"#my_id"</span>) <span class="cm-comment">// 選中id="my_id" 的物件</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">".my_class"</span>) <span class="cm-comment">// 選中class="my_class" 的物件</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 46px;"></div><div class="CodeMirror-gutters" style="display: none; height: 46px;"></div></div></div></pre><p><span>沒錯，就是如此的直接，一切就是那麼的愜意！</span></p><p> </p><h3><a name="%E5%B0%8D%E5%85%83%E7%B4%A0%E9%80%B2%E8%A1%8C%E6%93%8D%E4%BD%9C" class="md-header-anchor"></a><span>對元素進行操作</span></h3><h4><a name="introduction" class="md-header-anchor"></a><span>introduction</span></h4><p><span>現在我們的網頁文件中有下列一段DOM元素：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">id</span>=<span class="cm-string">"my_box"</span><span class="cm-tag cm-bracket">></span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> WWWWWWWWWWWWWWWWWW</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><p> </p><p><span>現在我們想讓盒子中的文字變成綠色，底色變成黑色，並且內容變成yeeeee：</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">document</span>).<span class="cm-property">ready</span>(<span class="cm-keyword">function</span>(){ <span class="cm-comment">//等待DOM完全載入在執行</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">$</span>(<span class="cm-string">"#my_box"</span>).<span class="cm-property">css</span>(<span class="cm-string">'color'</span>, <span class="cm-string">'green'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">$</span>(<span class="cm-string">"#my_box"</span>).<span class="cm-property">css</span>(<span class="cm-string">'background'</span>, <span class="cm-string">'black'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">$</span>(<span class="cm-string">"#my_box"</span>).<span class="cm-property">html</span>(<span class="cm-string">"yeeeee"</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><p><span>或是你也可以這麼寫</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">document</span>).<span class="cm-property">ready</span>(<span class="cm-keyword">function</span>(){</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">$</span>(<span class="cm-string">"#my_box"</span>).<span class="cm-property">css</span>(<span class="cm-string">'color'</span>, <span class="cm-string">'green'</span>).<span class="cm-property">css</span>(<span class="cm-string">'background'</span>, <span class="cm-string">'black'</span>).<span class="cm-property">html</span>(<span class="cm-string">"yeeeee"</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><p><span>這是因為jQuery的setter會在設定後回傳selector本身，所以可以一直接下去。</span></p><h4><a name="%E5%9F%BA%E7%A4%8E%E4%BB%8B%E7%B4%B9" class="md-header-anchor"></a><span>基礎介紹</span></h4><ul><li><p><span>設定css</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">SELECTOR</span>).<span class="cm-property">css</span>(<span class="cm-string">'NAME'</span>, <span class="cm-string">'VALUE'</span>);</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 或是一次設定多個css</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">SELECTOR</span>).<span class="cm-property">css</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">name</span> : <span class="cm-string">'VALUE'</span>, <span class="cm-comment">//注意這裡是逗號</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">name2</span>: <span class="cm-string">'VALUE2'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">})</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 137px;"></div><div class="CodeMirror-gutters" style="display: none; height: 137px;"></div></div></div></pre></li><li><p><span>設定html的標籤</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">SELECTOR</span>).<span class="cm-property">arrt</span>(<span class="cm-string">'name'</span>, <span class="cm-string">'value'</span>)</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre></li><li><p><span>取得html標籤內容</span></p></li></ul><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">var</span> <span class="cm-def">myName</span> <span class="cm-operator">=</span> <span class="cm-variable">$</span>(<span class="cm-variable">SELECTOR</span>).<span class="cm-property">arrt</span>(<span class="cm-string">'name'</span>)</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><h4><a name="setter,-getter" class="md-header-anchor"></a><span>setter, getter</span></h4><p><span>從以上的例子應該不難發現，主要的功能不外乎</span><strong><span>設定</span></strong><span>與</span><strong><span>取得</span></strong><span>，而且共用相同的方法(method)名稱。</span>
<span>下面是更多的例子：</span></p><ul><li><span>表單</span></li></ul><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8.15973px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 普通文字內容 (text, password, number, date... etc.)</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">"input"</span>).<span class="cm-property">val</span>(<span class="cm-string">'test'</span>) <span class="cm-comment">// 設定表單的值</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">myVal</span> <span class="cm-operator">=</span> <span class="cm-variable">$</span>(<span class="cm-string">"input"</span>).<span class="cm-property">val</span>() <span class="cm-comment">// 取得表單的值</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 核取方塊 (checkbox)</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">"input[type='checkbox']"</span>).<span class="cm-property">attr</span>(<span class="cm-string">'checked'</span>, <span class="cm-atom">true</span>) <span class="cm-comment">// 打勾</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">"input[type='checkbox']"</span>).<span class="cm-property">attr</span>(<span class="cm-string">'checked'</span>, <span class="cm-string">''</span>) <span class="cm-comment">// 取消打勾</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">"input[type='checkbox']"</span>).<span class="cm-property">removeAttr</span>(<span class="cm-string">'checked'</span>) <span class="cm-comment">// 也是取消打勾</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">isChecked</span> <span class="cm-operator">=</span> <span class="cm-variable">$</span>(<span class="cm-string">"input[type='checkbox']"</span>).<span class="cm-property">attr</span>(<span class="cm-string">'checked'</span>) <span class="cm-comment">//如果已經被勾了回傳true，沒有則回傳false</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 下拉清單 (select)</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">"select"</span>).<span class="cm-property">find</span>(<span class="cm-string">":selected"</span>).<span class="cm-property">val</span>(); <span class="cm-comment">//取得被選中的值</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-string">"option"</span>).<span class="cm-property">attr</span>(<span class="cm-string">"selected"</span>, <span class="cm-atom">true</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 321px;"></div><div class="CodeMirror-gutters" style="display: none; height: 321px;"></div></div></div></pre><h4><a name="%E4%BA%8B%E4%BB%B6%E7%9B%A3%E8%81%BD%E5%99%A8" class="md-header-anchor"></a><span>事件監聽器</span></h4><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.98611px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">SELECTOR</span>).<span class="cm-property">click</span>(<span class="cm-keyword">function</span>(){</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// do something.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">SELECTOR</span>).<span class="cm-property">dbclick</span>(<span class="cm-keyword">function</span>(){</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// do something.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">})</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 160px;"></div><div class="CodeMirror-gutters" style="display: none; height: 160px;"></div></div></div></pre><p> </p><p> </p><p><a href="#" id="toc"></a></p><div class='md-toc' mdtype='toc'><p class="md-toc-content"><span class="md-toc-item md-toc-h1" data-ref="n4"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%A3%B9%E3%80%81%E6%A6%82%E8%AB%96">壹、概論</a></span><span class="md-toc-item md-toc-h2" data-ref="n6"><a class="md-toc-inner" style="cursor: pointer;" href="#%E9%97%9C%E8%81%AF">關聯</a></span><span class="md-toc-item md-toc-h1" data-ref="n25"><a class="md-toc-inner" style="cursor: pointer;" href="#%E8%B2%B3%E3%80%81%E5%9F%BA%E7%A4%8E%E8%AA%8D%E7%9F%A5">貳、基礎認知</a></span><span class="md-toc-item md-toc-h2" data-ref="n26"><a class="md-toc-inner" style="cursor: pointer;" href="#%E8%B7%AF%E5%BE%91">路徑</a></span><span class="md-toc-item md-toc-h3" data-ref="n31"><a class="md-toc-inner" style="cursor: pointer;" href="#%E7%B5%95%E5%B0%8D%E8%B7%AF%E5%BE%91">絕對路徑</a></span><span class="md-toc-item md-toc-h3" data-ref="n33"><a class="md-toc-inner" style="cursor: pointer;" href="#%E7%9B%B8%E5%B0%8D%E8%B7%AF%E5%BE%91">相對路徑</a></span><span class="md-toc-item md-toc-h1" data-ref="n40"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%8F%83%E3%80%81%E6%B7%BA%E8%AB%87%E8%AA%9E%E6%B3%95">參、淺談語法</a></span><span class="md-toc-item md-toc-h2" data-ref="n41"><a class="md-toc-inner" style="cursor: pointer;" href="#html">HTML</a></span><span class="md-toc-item md-toc-h3" data-ref="n51"><a class="md-toc-inner" style="cursor: pointer;" href="#%E6%A8%99%E7%B1%A4%E7%9A%84%E7%B5%90%E6%A7%8B">標籤的結構</a></span><span class="md-toc-item md-toc-h3" data-ref="n56"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%9C%A8%E7%B9%BC%E7%BA%8C%E4%B9%8B%E5%89%8D">在繼續之前</a></span><span class="md-toc-item md-toc-h4" data-ref="n63"><a class="md-toc-inner" style="cursor: pointer;" href="#%E8%A8%BB%E8%A7%A3">註解</a></span><span class="md-toc-item md-toc-h4" data-ref="n66"><a class="md-toc-inner" style="cursor: pointer;" href="#%E6%B2%92%E4%BB%80%E9%BA%BC%E6%84%8F%E7%BE%A9%EF%BC%8C%E5%96%AE%E7%B4%94%E6%8A%8A%E5%AD%97%E5%8C%85%E8%B5%B7%E4%BE%86%E7%9A%84%E6%A8%99%E7%B1%A4(%E5%BE%8C%E9%9D%A2css%E6%9C%83%E7%94%A8)">沒什麼意義，單純把字包起來的標籤(後面css會用)</a></span><span class="md-toc-item md-toc-h3" data-ref="n70"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%B8%B8%E8%A6%8B%E7%9A%84html%E6%A8%99%E7%B1%A4">常見的HTML標籤</a></span><span class="md-toc-item md-toc-h4" data-ref="n71"><a class="md-toc-inner" style="cursor: pointer;" href="#%E7%B4%94%E5%AE%B9%E5%99%A8%E9%A1%9E">純容器類</a></span><span class="md-toc-item md-toc-h4" data-ref="n105"><a class="md-toc-inner" style="cursor: pointer;" href="#%E6%B8%85%E5%96%AE">清單</a></span><span class="md-toc-item md-toc-h4" data-ref="n121"><a class="md-toc-inner" style="cursor: pointer;" href="#%E8%A1%A8%E6%A0%BC">表格</a></span><span class="md-toc-item md-toc-h5" data-ref="n128"><a class="md-toc-inner" style="cursor: pointer;" href="#%E8%A1%A8%E5%96%AE">表單</a></span><span class="md-toc-item md-toc-h2" data-ref="n153"><a class="md-toc-inner" style="cursor: pointer;" href="#css">CSS</a></span><span class="md-toc-item md-toc-h2" data-ref="n154"><a class="md-toc-inner" style="cursor: pointer;" href="#css%E9%81%B8%E6%93%87%E5%99%A8">CSS選擇器</a></span><span class="md-toc-item md-toc-h3" data-ref="n156"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%9F%BA%E7%A4%8E">基礎</a></span><span class="md-toc-item md-toc-h4" data-ref="n157"><a class="md-toc-inner" style="cursor: pointer;" href="#css%E6%A0%BC%E5%BC%8F">CSS格式</a></span><span class="md-toc-item md-toc-h4" data-ref="n160"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%96%AE%E4%BD%8D">單位</a></span><span class="md-toc-item md-toc-h5" data-ref="n162"><a class="md-toc-inner" style="cursor: pointer;" href="#%E9%95%B7%E5%BA%A6%E5%96%AE%E4%BD%8D">長度單位</a></span><span class="md-toc-item md-toc-h5" data-ref="n200"><a class="md-toc-inner" style="cursor: pointer;" href="#%E6%99%82%E9%96%93%E5%96%AE%E4%BD%8D">時間單位</a></span><span class="md-toc-item md-toc-h5" data-ref="n203"><a class="md-toc-inner" style="cursor: pointer;" href="#%E9%A1%8F%E8%89%B2">顏色</a></span><span class="md-toc-item md-toc-h4" data-ref="n210"><a class="md-toc-inner" style="cursor: pointer;" href="#%E9%81%B8%E6%93%87%E5%99%A8">選擇器</a></span><span class="md-toc-item md-toc-h5" data-ref="n211"><a class="md-toc-inner" style="cursor: pointer;" href="#tag-name">Tag Name</a></span><span class="md-toc-item md-toc-h5" data-ref="n216"><a class="md-toc-inner" style="cursor: pointer;" href="#id%E3%80%81class">ID、Class</a></span><span class="md-toc-item md-toc-h5" data-ref="n227"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%85%B7%E6%9C%89..%E5%B1%AC%E6%80%A7%E3%80%81%E5%B1%AC%E6%80%A7%E5%80%BC">具有..屬性、屬性值</a></span><span class="md-toc-item md-toc-h5" data-ref="n233"><a class="md-toc-inner" style="cursor: pointer;" href="#%E4%BA%A4%E9%9B%86">交集</a></span><span class="md-toc-item md-toc-h5" data-ref="n237"><a class="md-toc-inner" style="cursor: pointer;" href="#%E8%81%AF%E9%9B%86">聯集</a></span><span class="md-toc-item md-toc-h4" data-ref="n242"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F">容器大小</a></span><span class="md-toc-item md-toc-h5" data-ref="n244"><a class="md-toc-inner" style="cursor: pointer;" href="#box-sizing">box-sizing</a></span><span class="md-toc-item md-toc-h4" data-ref="n251"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%81%B5%E6%B8%AC%E7%80%8F%E8%A6%BD%E5%99%A8%E5%AF%AC%E5%BA%A6">偵測瀏覽器寬度</a></span><span class="md-toc-item md-toc-h3" data-ref="n257"><a class="md-toc-inner" style="cursor: pointer;" href="#%E6%8E%92%E7%89%88">排版</a></span><span class="md-toc-item md-toc-h4" data-ref="n258"><a class="md-toc-inner" style="cursor: pointer;" href="#%E9%AB%98%E5%BA%A6%E3%80%81%E5%AF%AC%E5%BA%A6">高度、寬度</a></span><span class="md-toc-item md-toc-h4" data-ref="n262"><a class="md-toc-inner" style="cursor: pointer;" href="#padding%E3%80%81margin">padding、margin</a></span><span class="md-toc-item md-toc-h4" data-ref="n268"><a class="md-toc-inner" style="cursor: pointer;" href="#position%E3%80%81display">position、display</a></span><span class="md-toc-item md-toc-h3" data-ref="n273"><a class="md-toc-inner" style="cursor: pointer;" href="#%E9%80%B2%E9%9A%8E%E6%8E%92%E7%89%88(%E9%81%B8%E8%AE%80)">進階排版(選讀)</a></span><span class="md-toc-item md-toc-h4" data-ref="n277"><a class="md-toc-inner" style="cursor: pointer;" href="#position:-absolute">position: absolute</a></span><span class="md-toc-item md-toc-h4" data-ref="n281"><a class="md-toc-inner" style="cursor: pointer;" href="#position:-relative">position: relative</a></span><span class="md-toc-item md-toc-h4" data-ref="n285"><a class="md-toc-inner" style="cursor: pointer;" href="#position:-fixed">position: fixed</a></span><span class="md-toc-item md-toc-h3" data-ref="n288"><a class="md-toc-inner" style="cursor: pointer;" href="#display">display</a></span><span class="md-toc-item md-toc-h4" data-ref="n291"><a class="md-toc-inner" style="cursor: pointer;" href="#display:-inline-block">display: inline-block</a></span><span class="md-toc-item md-toc-h4" data-ref="n294"><a class="md-toc-inner" style="cursor: pointer;" href="#display:-none">display: none</a></span><span class="md-toc-item md-toc-h4" data-ref="n297"><a class="md-toc-inner" style="cursor: pointer;" href="#display:-flex">display: flex</a></span><span class="md-toc-item md-toc-h3" data-ref="n302"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%95%88%E6%9E%9C%E9%A1%9E%E9%A0%85%E7%9B%AE">基本的效果類項目</a></span><span class="md-toc-item md-toc-h4" data-ref="n303"><a class="md-toc-inner" style="cursor: pointer;" href="#%E8%83%8C%E6%99%AF">背景</a></span><span class="md-toc-item md-toc-h5" data-ref="n304"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%BA%95%E8%89%B2">底色</a></span><span class="md-toc-item md-toc-h5" data-ref="n306"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%BA%95%E5%9C%96">底圖</a></span><span class="md-toc-item md-toc-h5" data-ref="n317"><a class="md-toc-inner" style="cursor: pointer;" href="#%E6%BC%B8%E5%B1%A4">漸層</a></span><span class="md-toc-item md-toc-h2" data-ref="n325"><a class="md-toc-inner" style="cursor: pointer;" href="#javascript">Javascript</a></span><span class="md-toc-item md-toc-h3" data-ref="n326"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%9F%BA%E7%A4%8E%E4%B8%AD%E7%9A%84%E5%9F%BA%E7%A4%8E">基礎中的基礎</a></span><span class="md-toc-item md-toc-h4" data-ref="n327"><a class="md-toc-inner" style="cursor: pointer;" href="#%E8%AE%8A%E9%87%8F">變量</a></span><span class="md-toc-item md-toc-h5" data-ref="n330"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%8D%80%E6%AE%B5-scope">區段 scope</a></span><span class="md-toc-item md-toc-h4" data-ref="n334"><a class="md-toc-inner" style="cursor: pointer;" href="#%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6">流程控制</a></span><span class="md-toc-item md-toc-h4" data-ref="n337"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%87%BD%E6%95%B8">函數</a></span><span class="md-toc-item md-toc-h5" data-ref="n340"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B8">匿名函數</a></span><span class="md-toc-item md-toc-h3" data-ref="n344"><a class="md-toc-inner" style="cursor: pointer;" href="#dom">DOM</a></span><span class="md-toc-item md-toc-h4" data-ref="n345"><a class="md-toc-inner" style="cursor: pointer;" href="#dom%E6%98%AF%E4%BB%80%E9%BA%BC%EF%BC%9F">DOM是什麼？</a></span><span class="md-toc-item md-toc-h3" data-ref="n348"><a class="md-toc-inner" style="cursor: pointer;" href="#jquery">jQuery</a></span><span class="md-toc-item md-toc-h3" data-ref="n351"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%85%83%E7%B4%A0%E9%81%B8%E6%93%87%E5%99%A8">元素選擇器</a></span><span class="md-toc-item md-toc-h3" data-ref="n358"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%B0%8D%E5%85%83%E7%B4%A0%E9%80%B2%E8%A1%8C%E6%93%8D%E4%BD%9C">對元素進行操作</a></span><span class="md-toc-item md-toc-h4" data-ref="n359"><a class="md-toc-inner" style="cursor: pointer;" href="#introduction">introduction</a></span><span class="md-toc-item md-toc-h4" data-ref="n369"><a class="md-toc-inner" style="cursor: pointer;" href="#%E5%9F%BA%E7%A4%8E%E4%BB%8B%E7%B4%B9">基礎介紹</a></span><span class="md-toc-item md-toc-h4" data-ref="n380"><a class="md-toc-inner" style="cursor: pointer;" href="#setter,-getter">setter, getter</a></span><span class="md-toc-item md-toc-h4" data-ref="n386"><a class="md-toc-inner" style="cursor: pointer;" href="#%E4%BA%8B%E4%BB%B6%E7%9B%A3%E8%81%BD%E5%99%A8">事件監聽器</a></span></p></div><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
</body>
</html>