iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

迷路的前端工程系列 第 3

第三日:再一次的向世界問好

  • 分享至 

  • xImage
  •  

第二日回顧:
在昨天大致上介紹了 HTML 與 HTML5,不過具體內容倒是半點都沒提到,今天就讓我們走進程式碼吧

首先,打開我們可愛的VSCode,在上排工具列的檔案中點選開啟資料夾,選擇一個順眼的資料夾後他就成為我們的專案資料夾了!!
接著開始創檔吧~
把滑鼠移到左側的檔案總管區塊,會看到在資料夾旁邊有四個小圖示,點選新增檔案後命名為 xxxx.html,沒錯,副檔名為 html,接下來開始編寫 Hello World 吧
html 標籤通常會是一組對應的標籤,例如:

<html> </html> <head> </head> <body> </body>

而一個健康剛出生的網頁會是由 html 標籤包住 head 和 body 標籤,head 標籤內含有網頁的配置訊息,最少也會有一個 title 標籤來標明網頁名稱,而 body 標籤則是代表網頁的內容
第一張
接著呢,我們在 body 內加入 h1(第一重要的標題,有著1~6不同的等級)或 p(文字段落)標籤,在內輸入 Hello World
HelloWorld
我們可以注意到 h1 標籤產生的文字比 p 標籤來的大,順帶說明 h1 至 h6 標籤文字會越來越小,但我們不應該因為文字大小就使用標題標籤,畢竟 html5 是一個注重語意的標籤,我們希望說你使用的每個標籤其意義都有符合其內容。
而文字會自動換行這問題就留給明天吧~讓我們明天見

小抱怨專區:
原來 Flash 也是前端要搞定的事,時間啊,你不要跑的這麼快啦!!


上一篇
第二日:請說明 HTML5 的特徵
下一篇
第四日:清單與表格
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
fongyi
iT邦新手 5 級 ‧ 2019-09-07 10:06:19

我以為這年頭已經可以放生 flash 了?XD

看到那東西我也是嚇壞了

我要留言

立即登入留言