[Day1]這裡有一個箱子-自我介紹(以及做一個箱子)

2019鐵人賽

peter611122

2018-10-05 14:59:09

6569 瀏覽

分享至

發表本系列文章原因:
不管是國外還是台灣程式的教育一直以來都沒能夠發展的很好，因為程式超難教的阿!!!! 如何把一門很硬的技術教得既軟又專業，一直以來都是程式老師的痛點，如果能用更好的方式呈現那就好了~ 於是乎，我就想到用"這裡有一個箱子"來帶領著大家進入程式的世界，透過我那小孩般的天性，以及長年累月奮鬥學來的技術(玩爆過自己數十遍，身體負荷不堪倒地過數十遍，依然拿著武器對抗硬技術)，我盡量把我知道的，能講的全部都分享給大家XDD 在閱讀這些文章前，如果你已經是大人了，就請你變成小孩在閱讀這些文章吧，啦啦啦啦啦，讓我們就從下面的文章開始挑戰吧!!!

今天稍微介紹一下我本人好了

我是月雷，是一個小小工作室的負責人，喜歡學技術但又很容易把技術忘了的工程師

我唯一記住的只有Google找答案，找久了就知道這問題要去哪裡找

至於為何會學程式學到現在，是因為我生活中全部都要用程式執行(我的頭腦就像是一個大型的機房，生活中的每一刻都在運算，包括現在)，學程式讓我更新自己的思維，也於是我能夠做很多更有趣的事。

參加鐵人賽，一直以來我都沒太大把握，我程式又不強，情緒又不穩，如果參加了一定會GG的。
所以頭腦就一直運算要怎麼做能夠撐三十天，而且又可以弄得很好玩，於是就想到既然如此就把我能玩的就拿來玩吧!!!
能玩的技術一定是我喜歡的，每天都介紹我喜歡的東西一定很有趣，於是"這裡有一個箱子"就誕生了。XDD

這三十天我會用一些Html，Css，JavaScript，jQuery...這些簡單又有趣的技術做搭配，來讓箱子有了變化
每天的變化都不一樣(看我本人的心情)，這變化都不會太複雜，但很有趣。

第一天要來做什麼，先把箱子生出來再說，我們要如何生一個箱子呢??
HTML裡有一個東西叫區塊元素，讓我們把它呼喚出來吧~~~

在呼喚之前，請你做的第一件事~

開啟你的codepen(哇賽，連codepen要怎麼用我都要教一下，google搜尋codepen然後註冊一下就可以用了

最好是按FB就好，如果你要用email註冊也沒關係，註冊後按一下Create裡面的newpen就可以開始了。
(英文不好的人不要怕，這裡有詳細的解說，我貼連結給各位)
https://hahow.in/courses/56189df9df7b3d0b005c6639/main?curriculum=5a1e1745a2c4b000589dd20d
如果你不想註冊，下面這個給你XDD
https://www.youtube.com/watch?v=nu7_880-5-M

(如果不想用codepen的你可以用你喜歡的，但我不保證沒問題就是了XDD)
OS:拜託各位了，加油好嗎??XDDD

在呼喚之前，請你做的第二件事~

先給html一個真身，不然會無法正常的實現一些東西XDD
https://www.w3schools.com/html/

複製下來把它貼在html裡吧~~~(記得幫我排版一下)
OS:貼給你總行了吧!!!ORZ

<!DOCTYPE html>
<html>
    <head>
      <title>Page Title</title>
    </head>
    <body>

      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>

    </body>
</html>

小技巧:打驚嘆號按tab鍵(不要問為什麼，這只是快捷鍵而已)

終於可以呼喚我心愛的div了

div出來吧!!!

<div></div>

div的本名叫做區塊元素(區塊標籤)

我們把它放在p的後面，怎麼放
你可以<p>This is a paragraph.</p>的最後按ENTER讓他跳下一行，然後把<div></div>放著就成功了

小技巧:打div按下tab鍵，就可以了(不要問為什麼，這只是快捷鍵而已)

(OS:如果你還是不想做，那程式碼貼給你好不，只是說為了你的未來，還是請你打一下)

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <div></div>

  </body>
</html>

h1是"標題"標籤，p是"段落"標籤，div是"區塊"標籤，標籤標籤XDD
如果沒有這些標籤就不會有我們今天的網頁了!!!(感恩標籤，讚嘆標籤)

我改了一下h1跟p裡面的字一下

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>這裡有一個箱子</h1>
    <p>自我介紹(以及做一個箱子)</p>
    <div></div>

  </body>
</html>

奇怪了h1跟p有看到，為何div沒看到??
因為div沒有內容當然不會顯示出來囉XDD

如果要找到隱藏的div只能這麼做