Try   HackMD

tags: 軟體工程師體驗營 - 2024

🏅 切版任務 Day1 - HTML 標籤元素、CSS 判斷

https://hackmd.io/## 問題

依照下列 HTML 與 CSS 程式碼內容判斷，請分享以下 HTML 標籤
a. p、span、div、a 各為什麼顏色

b. p、span、div、a、img 是區塊元素（block）還是行內元素 （inline）？

















































<!-- HTML 程式碼 -->

<p class="green yellow orange">
我是P段落，文字顏色是什麼呢?區塊元素還是行內元素呢?
</p> 
答案：green 區塊元素

<span class="red yellow green">
我是span，文字顏色是什麼呢?區塊元素還是行內元素呢?
</span>
答案：green 行內元素

<div class="blue orange red">
我是div，文字顏色是什麼呢?區塊元素還是行內元素呢?
</div>
答案：red 區塊元素

<a class="yellow blue green">
我是a連結，文字顏色是什麼呢?區塊元素還是行內元素呢?
</a>
答案：green 行內元素

<img src="..." alt="img">
我是img，區塊元素還是行內元素呢?
答案： 行內元素

```css=
/* CSS 程式碼 */

.orange {
    color: orange;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.yellow {
    color: yellow;
}

.green {
    color: green;
}

回報流程

  1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
    （也可以將答案直接貼至「回報區」）

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

回報區

報數 Discord 名字 Codepen／其他回饋
1 洧杰 codePen
2 洧杰 codePen
3 Hailey codePen
4 yunyouob codePen
5 hazelhsieh codePen
6 黛Dye codePen
7 macihuang codePen
8 ㄚ華 codePen
9 Lauren codePen
10 Meng codePen
11 mike_2049 codePen
12 wan_ju codePen
13 MIKE0712 codePen
14 jerry codePen
15 小米 codePen
16 MDFK codePen
17 erichsu0406 codePen
18 nora_zizi codePen
19 Aya Codepen
20 Sana Codepen
21 Floy Codepen
22 zuien1120 Codepen
23 嵬 Codepen
24 Daphne Codepen
25 LGJason codePen
26 JUN_ codePen
27 20040880 codePen
28 Evan codePen
29 薛逢 Codepen
30 Shiny Codepen
31 hongru-LyNn codepen
32 Ariel Codepen
33 Angela_la Codepen
34 神田軒Kanda Codepen
35 Jiahe Codepen
36 liugod3824🔥 CodePen✔️
37 kawa Codepen
38 Alice Codepen
39 詹姆士 Codepen
40 melissaa Codepen
41 Tanyaaaa Codepen
42 Shu-chi Codepen
43 Una Codepen
44 JIAWUN Codepen
45 LiLiLiLi Codepen
46 Kai Codepen
47 kate_bearchou Codepen
48 WEIWEI Codepen
49 Carlene Codepen
50 Larry Codepen
51 勾小勻 Codepen
52 JY Codepen
53 Evelyn Codepen
54 zobody Codepen
55 Ana Codepen
56 Sofi Codepen
57 boin Codepen
58 oyll Codepen
59 Mango. Codepen
60 Joey一針 Codepen
61 Toung CodePen
62 Ollie Codepen
63 Poli CodePen
64 Aust1n CodePen
65 閆安 codePen
66 damon0323 CodePen
67 阿宸 codePen
68 sylviabuy codePen
69 宇 codePen
70 Eden Codepen
71 emmayo Codepen
72 jason Codepen
73 kebukeyi Codepen
74 Winnie Codepen
75 真真瑋瑋 Codepen
76 Peggy Codepen
77 Daisy Li Codepen
78 cmdon0104 Codepen
79 Chingya Codepen
80 Kasie Codepen
81 2魚 Codepen
82 Camila Codepen
83 Mars Codepen
84 Jason Codepen
85 黑嚕嚕 Codepen
86 willypower4315 Codepen
87 小翎 Codepen
88 佩庭 Codepen
89 brucelee0629 Codepen
90 KUN. Codepen
91 yuling Codepen
92 suandme codePen
93 TTedd codePen
94 Chewsday codePen
95 LYC歪西 codepen
96 Antonio codepen
97 開心Jo好 codepen
98 Jun codepen
99 anderson666 codepen
100 Yuwen codePen
101 fantuan0695 codePen
102 FURUTO codePen
103 秀 codePen
104 禮央 (れお) codePen
105 JESS codePen
106 Ted (YuHao) codePen
107 wanwan_29943 codePen
108 Anna codePen
109 Guan(yangguan.) codePen
110 emma(emma_zhang.) codePen
111 Lifish codePen
112 R-JIA codePen
113 Oria codePen
114 .rainielin codePen
115 sweewei codePen
116 yicheng codePen
117 Trent codePen
118 燕赤霞 codePen
119 Maca codePen
120 GAVI codePen
121 leo.chang codePen
122 Kaya codePen
123 alastor7069 codePen
124 小趴 codePen
125 mo codePen
126 阿若 Codepen
127 QOO Codepen
128 nige Codepen
129 CrystalLala Codepen
130 qet1717 Codepen
131 黛西 Codepen
–- –––––––- –––––––––––––––––––––––––––––––––––––––––-
132 Six Codepen
133 ninii傳教士 Codepen
134 Maxine Codepen
135 Haley Codepen
136 ss585801 Codepen
137 Linfe Codepen
138 Amy(咂摳) Codepen
139 pcw codepen
140 Elva Su codepen
141 Zander codepen
142 s870012 codepen
143 khoo codepen
144 Rae codepen
145 Mick codepen
146 Andy_12 Codepen
147 arielyao Codepen
148 marklan Codepan
149 kevinwen Codepen
150 Jenny L Codepen
151 Si Codepen
152 Shawn Codepen
153 Dobe Codepen
154 Casey Codepen
155 Frank Chiang Codepen
156 slowyu Codepen
157 啞鈴 Codepen
158 han Codepen
159 Sammy Codepen
160 Chia Pin Codepen
161 Emma Codepen
162 Iris Codepen
162 紫珩 Codepen
163 Mionne Codepen
164 Jainee Codepen
165 朋仔 codePen
166 sasa codePen
167 CC codePen
168 spadegun codePen
169 Tough life codePen
170 CHICHI GO codePen
171 Ellie codePen
172 cindyLo codePen
173 martin.wu codePen
174 MY codePen
175 樂樂 codePen
175 王二哈 codePen
176 Mika codePen
177 james867. codePen
178 LING codePen
179 邵Shao codePen
180 喬瑟夫 Codepen
181 weeixunzht Codepen
182 zaoannihao codePen
183 jianshirong9528 codePen
184 HsienLu codepen
185 Michelle0417 codePen
186 nene1233 codePen
187 Stone codePen
188 Rayne codePen
189 Jami codePen
190 白白 codePen
191 快樂小豬 codePen
192 tim codePen
193 Ed Huang codePen
194 Ching codePen
195 water codePen
195 maruko1105 codePen
196 墨墨 codePen
197 婉玲Dacy codePen
198 .zack_p codePen
199 ikpolo codePen
200 yu.t_liu codePen
201 Sonia codePen
202 HAOJING codepen
203 Schnauzer codepan
204 嘻哈釋迦 codePen
205 Areta codepen
206 yuhuei2513 codepen
207 arthurtu_01549 codepen
208 xiang codepen
209 Penny.H codepen
210 德瑞克 codepen
211 KellyLin codepen
212 KellyLin codepen
213 Arvin codepen
214 erwinchiang codepen
215 靜靜 codepen
216 SC codepen
217 gui codepen
218 Jennifer codepen
219 yo0x0oy Codepen
220 aoya9155 Codepen
221 pan_angel0904 Codepen
222 Aasta Codepen
223 快樂掃地工 Codepen
224 discat3119 Codepen
225 ich_bin_akkkira Codepen
226 MarkPo Codepen
227 Ran Codepen
228 limdos14 Codepen
229 asabulu_von_f Codepen
230 Eileen Codepen
231 Yini Chen Codepen
232 唧唧鼠鼠 Codepen
233 pon00219 Codepen
234 l.shua_228 Codepen
235 knight137728 Codepen
236 maru3096 Codepen
237 jimmy.0706 Codepen
238 艾洛 Codepen
239 咖 Codepen
240 萴 Codepen
241 powei#8484 Codepen
242 YU-U Codepen
243 Mandy Li Codepen
244 Chen Codepen
245 Justin Codepen
246 jerry_66983 Codepen
247 Brian Codepen
248 OZ Codepen
249 豆吋 Codepen
250 ku Codepen
251 jcode0x378 Codepen
261 JIN Codepen
262 Mina Codepen
263 chichi Codepen
264 咖咖 Codepen
265 Richard Codepen
266 球 Codepen
267 Wing Codepen
268 RAN Codepen
269 YUAN Codepen
270 欣霓 Codepen
271 知夜 Codepen
272 雪維 Codepen
273 easonpan Codepen
273 cliff Codepen
274 小白 Codepen
275 Hung Codepen
276 Eudora Codepen
277 ZZ Codepen
278 Hazel Codepen
279 hao Codepen
280 lopsillnm Codepen
281 jinliu214 Codepen
282 搗蛋鬼別搗蛋 Codepen
283 陳茄 Codepen
284 柯柯 Codepen
285 lan1865 Codepen
286 毛巾 Codepen
286 Abu Codepen
287 leor_yu Codepen
288 阿鹿 codePen
289 SealLeo codePen
290 Hannahou codePen
291 Iris Codepen
292 sunknight_002 Codepen
293 Charis_Lai Codepen
294 Shen Codepen
295 Eddiesun0526 Codepen
296 KOMATSU PEI Codepen
297 Joylu0902 Codepen
298 Anais77 codePen
299 n913239 codePen
300 ChrisLin CodePen
301 洧杰 CodePen
Last changed by 
 
六角學院 - HexSchool
萬人學生好評推薦，由淺入深的實戰繁中程式設計教學，每週線上互動社群交流問答會！ 適合無經驗新手入門。帶您學會一技之長。線上帶你學會程式開發。
1
5
4157

Read more

🏅Day26 - React 元件練習 (3) - 元件陣列資料 props 傳遞

昨天已經了解要如何使用 props 傳遞資料，今天來練習一個常用的技巧，也就是將陣列資料使用 .map 一一傳到元件做使用。用一個簡單的範例如下：

May 9, 2025
🏅Day25 - React 元件練習 (2) - 元件 props 資料傳遞

當我們想要將資料傳遞給子元件時，可以透過 props 來做傳遞。元件就像是 JavaScript 的 function，它可以接收任意的參數（即稱之為「props」），props 會回傳 React element，包含 children 以及自定義的參數。舉例來說：

May 9, 2025
🏅Day 24 - React 元件練習 (1) - 元件建立

在開發專案時，一定會遇到有一區塊的程式碼內容都相同，這時通常會將此區塊的程式碼拆成一個元件，提高元件的重複，亦或是將一個頁面做為一個元件來切換等等。

May 9, 2025
🏅Day23 - React 基礎練習 (8) - 隨堂測驗

React 對於 JSX 是非常重要的，因為 JSX 在 React 中大量應用。JSX 是一種 JavaScript 的語法擴充，能夠在程式碼中同時包含 HTML 標記，使得編寫 React 元件的過程更直觀。以下是一個簡單的範例：

May 8, 2025
Read more from 六角學院 - HexSchool
Published on HackMD