跳到主要內容

[2021 IT鐵人賽] Day 02：專案01 - 超簡單個人履歷01 | HTML簡介

專案介紹

這個專案會帶你使用HTML和CSS，打造專屬於你的個人履歷網頁。

預覽圖：

首先，我們從HTML入門吧!

HTML是什麼?

HTML全名是HyperText Markup Languag，中文是超文本標記語言，是一種用於建立網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取HTML檔案，並將其渲染成視覺化網頁。

簡單來說，HTML就像是網頁的骨架，決定了網頁該長什麼樣子。CSS則像網頁的衣服，決定了網頁的顏色以及圖案，而JavaScript則像大腦，處理更複雜的邏輯運算和觸發事件。

因此我們要做網頁的第一步就是要先將骨架打造出來。

ps. HTML只是一種標記語言，並不是程式語言! 以後別人問你會什麼程式語言，千萬別說HTML，這可是會被笑的…

HTML元素

HTML全部都是由 元素(elements) 所組成的，而元素包含了 標籤(tags) 與 內容(content)。

元素就像一塊塊積木一樣，組成了整個網頁架構，以下是單一一個元素：

  1. Opening tag：起始標籤，<>內放入標籤名稱。
  2. Closing tag：結尾標籤，<>內放入和起始標籤一致的標籤名稱，而且要在名稱前加上/符號，和Opening tag形成一對。
  3. Content：標籤內容。

屬性

加入屬性可以為元素提供更多資訊，ex：字型、顏色等等…。

格式為: "屬性名稱" = "屬性值"

這邊的class屬性是將標籤分類(就想成放在同一個箱子裡)，之後爬蟲經常會用到，就先記起來吧!

HTML架構

一個網頁的基本架構如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>my first html</title>
  </head>
  <body>
    <p>Hello, HTML!</p>
  </body>
</html>
  1. <head>：標頭，包含網頁的基本設置，不會顯示在畫面上，ex：網頁標題、字元編碼…。
  2. <body>：主體，包含了所有會顯示於網頁瀏覽者眼前的內容，ex：文字、圖片…。

在瀏覽器上的顯示結果為：

DOM tree

看完剛才的HTML架構後，你可能會發現這有點像樹狀的結構，沒錯! 其實這個有點像樹狀的結構就被稱為DOM tree。

DOM全名為Document Object Model，中文是文件物件模型。實際上就是將所有HTML所有的元素(包括文字、圖片、容器)視作樹上的節點，最後結合成樹狀的結構，就像下圖這樣。

通常有四種節點：

  1. Document：所有HTML文件的起點，就像是樹的樹根。
  2. Element：所有的元素，像是<body>、<p>都是。
  3. Text：被元素所包起來的文字。
  4. Attribute：元素所擁有的屬性，像是class、style等等。

節點底下包含的節點我們稱為該節點的子節點，而上一層的節點稱為該節點的父節點。

所以說上圖<body>的子節點是<a>和<h1>，而父節點是<html>。

HTML基本元素

對架構有了解後，接下來介紹幾個經常用到的HTML元素，這些元素都是放在<body>中。

<h1>~<h6>

標題，從標題一到標題六，文字從大到小，通常用於文章的主標題和副標題。 

<h1>This is heading1</h1>
<h2>This is heading2</h2>
<h3>This is heading3</h3>
<h4>This is heading4</h4>
<h5>This is heading5</h5>
<h6>This is heading6</h6>

顯示結果為：

<p>

段落，通常用於文字內容，優點在於文章超出邊界時會自動換行。

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id felis a lectus scelerisque bibendum. Donec
    mollis mollis rhoncus. Integer nec molestie lacus. In dapibus velit non augue pulvinar eleifend. Ut sit amet
    lobortis dui, ut facilisis elit. Quisque vulputate felis at arcu hendrerit eleifend. Donec elementum vel massa a
    fermentum. Vivamus eget cursus massa. Morbi elementum metus a eros euismod elementum. Nunc commodo felis urna,
    vel lacinia velit lobortis vel. Mauris efficitur augue nec aliquet consequat. Vestibulum sed convallis purus,
    vel tempor urna. Cras ornare ex est, eu malesuada diam suscipit nec.
</p>

顯示結果為：

範例文字是使用很經典的英文亂文產生器產生出來的。

<br>

換行，基本上就等同於 “\n”。

<p>
    Hi!<br>
    Hello<br>
    你好<br>
</p>

顯示結果為：

這時你可能會覺得奇怪，前面不是說要一個起始標籤搭配一個結尾標籤嗎? 怎麼這裡只有一個標籤?

事實上，有些HTML標籤的確只有一個標籤而已，待會還會再看到更多例子。

<a>

超連結，用於連結其他網址，href屬性加上連結網址。

<a href="https://ithelp.ithome.com.tw/">IT邦幫忙首頁</a>

顯示結果為：

點擊之後會傳到IT邦幫忙的首頁。

<div>

區塊，或者說一個空的容器，可以在區塊中加入其他元素。

<div style="background-color:blue; color:white; width:400px; height:200px;">
      <p>inside the div</p>
</div>

顯示結果為：

設定一個高200px、寬400px、背景藍色、文字白色的區塊。

<span>

文字的區塊，包住文字並提供更多資訊。

<p>this color is <span style="color: blue;">BLUE</span></p>

只有將 “BLUE” 設為藍色，其他字依然是黑色。

<hr>

分隔線，通常用於分隔區域。

<hr style="background-color:blue; height: 2px">

顯示結果為：

一條藍色寬度為2px的分隔線。

小結

今天的部分就到這邊，稍微總結一下今天學了什麼。首先從HTML的基本架構開始，知道了HTML是由各種元素所組成的，接著介紹了幾個常用的元素，像是標題、段落、超連結…等等。

明天我會再介紹更多的HTML元素，以及補充介紹VScode的實用套件，就讓我們拭目以待~~

如果喜歡這系列文章麻煩幫我按Like加訂閱，你的支持是我創作最大的動力~

本系列文章以及範例程式碼都同步更新在GitHub上，後續會持續的更新，如果喜歡也麻煩幫我按個星星吧~

有任何問題或建議，都歡迎在底下留言區提出，還請大家多多指教。

如果喜歡這篇文章，請訂閱我並且拍五下手給予回饋(使用Google或Facebook帳號免費登入，只需要30秒)，資金由LikeCoin提供，完全不會花到各位半毛錢!

因為您的支持，我才更有動力創作出更優質的文章~

Labels:

留言

張貼留言

這個網誌中的熱門文章

[遊記] 2022/07/22 南寮漁港、香山濕地

前言： 2022年的暑假，我來到新竹的工研院實習，因此有了兩個月好好探索這座陌生城市的機會。我在來之前就計畫好了，每周五要選一個地方去旅行，目標是在兩個月內把整個新竹玩透透! 來到了第三個禮拜，今天我約了新竹在地人的大學朋友，請他騎機車載我到處逛逛😆 不過因為他早上有事情，所以我們就約中午吃飯。中午我們去吃城隍廟附近的 阿桂羊牛雜 ，我點了朋友很推的 羊肉炒麵 ，這家的炒麵很特別，醬汁很濃稠，沙茶味很香~ 我點加辣但有點太辣了，下次可能點小辣就好。另外有附飲料和冷氣這點很加分。 (只顧跟朋友聊天，就忘記拍照了😂) 阿桂羊牛雜 羊肉炒麵 $100 推薦指數：4⭐ 吃完飯後，本來想去南寮漁港，但因為今天的太陽真的太大了! 所以朋友就提議先去 新竹巨城 吹冷氣，晚點再去南寮漁港。雖然已經來過巨城一次，但跟別人一起逛就是不太一樣。我們去逛了服飾店、書局和湯姆熊，不知不覺就三點了。於是就離開巨城前往南寮漁港囉~ 本來以為 南寮漁港 很遠，但騎機車一下子就到了，果然在新竹還是要有機車比較方便阿! 我們先去南寮漁港的遊客中心，展望台的景色很不錯，室內還有溜滑梯可以玩呢! 接著我們在附近的魚市場、國際風箏場等地方邊聊邊走，最後走到 魚鱗天梯 。 魚鱗天梯看起來的確很像魚鱗，但聽說他的功能其實是消波塊，還真酷! 底下就有一小片沙灘，因為我今天穿拖鞋，就有下去踩一下海水。不過這裡的海水沒很乾淨，上來後腳上全都是沙子，幸好旁邊就有可以洗腳的地方。 其實旁邊有個滿有名的 17公里海岸自行車道 ，不過我們比較晚才到，所以就沒租腳踏車去騎了。 接著就往南到 香山濕地 ，騎機車也是一下就到了。 香山濕地就像小型的高美濕地，一旁的 賞蟹步道 可以直接走在溼地上方。 賞蟹步道兩旁真的很多螃蟹，照片裡的白點都是螃蟹哦! 當時剛好碰上漲潮，於是我們就在步道上拍起縮時攝影，從影片中可見漲潮的速度有多快! 香山濕地也是看夕陽的好景點，只是有點太早來了，於是我們走去旁邊的 綠色隧道 ，等待夕陽下山。 最後終於等到夕陽了! 加上倒影還滿漂亮的，只可惜今天海面有點雲，無緣看到夕陽落到海平面之下的景色。 最後順路繞去附近的 青青草原 ，雖然天色已經暗了下來，不過因此溜滑梯都不用排隊，可以多溜了幾趟😁 我們也去看了一眼大草原，但因為傍晚有一堆蚊蟲，所以就趕緊撤退了! 最後晚餐去吃 蛋包飯 ，這家也是朋友推薦的...
張貼留言
閱讀全文 »

[Python] async def & await 重點整理

最近實習要用到 FastAPI ，我發現 FastAPI 的 path operation function 會使用 async def ，還會搭配使用 await ，因為對這兩個關鍵字沒很熟，所以就藉機紀錄一下，也避免之後忘記。 async def & await 使用情境 我直接利用下面這個例子來展示什麼情況下可以使用 async 和 await 。 import time def dosomething ( i ): print ( f"第 {i} 次開始" ) time.sleep( 2 ) print ( f"第 {i} 次結束" ) if __name__ == "__main__" : start = time.time() for i in range ( 5 ): dosomething(i+ 1 ) print ( f"time: {time.time() - start} (s)" ) 執行後應該會像這樣。 第 1 次開始 第 1 次結束 第 2 次開始 第 2 次結束 第 3 次開始 第 3 次結束 第 4 次開始 第 4 次結束 第 5 次開始 第 5 次結束 time: 10.048049688339233 (s) 這非常直覺，因為每次呼叫 dosomething() 時都會等待2秒，等完才會執行下一輪，所以最後執行總時間是10秒相當合理。 但仔細想想，如果那2秒是做網路請求或檔案讀寫(IO)，這2秒是不需要CPU的，但CPU就只能發呆2秒，痴痴地等待回傳結果，其他什麼事都不能做，豈不是太浪費了嗎!? (學過作業系統的人就知道，絕對不能讓CPU發呆XD) 因此 Python 就有了 asyncio 這個工具，來徹底的利用(X) 榨乾(O) CPU的效能。 我把剛才的例子改成 asyncio 的版本。 import time import asy...
張貼留言
閱讀全文 »

[2021 IT鐵人賽] Day 23：專案05 - KKBOX風雲榜02 | AJAX

昨天已經找到的KKBOX用來傳資料的API，也知道各個參數的意義了，今天就實際將資料抓下來吧! 歌曲資訊 回到昨天那個API，是用JSON格式傳遞資料，資料的格式大致如下： 我們可以發現新歌的資料都放在 “newrelease” 之下，一個element就是一首歌的資訊，另外，每首歌的資訊也以key:value的形式整理的很清楚。 接著，就用之前教過的 requests.get(url) 直接取得API回傳的資料，但回傳的型態是json字串，所以再用Python本身內建的 json.loads() 函數轉成Python的list和dict資料型態。 # KKBOX華語新歌日榜 url = "https://kma.kkbox.com/charts/api/v1/daily?category=297&lang=tc&limit=50&terr=tw&type=newrelease" # 取得歌曲資訊json檔 response = requests.get(url) # 將json字串轉為Python的字典型態 data = json.loads(response.text) 既然已經轉成list和dict的型態了，再根據剛才觀察API得知的架構，要篩選資料就非常簡單，直接來看程式碼： song_list = data[ "data" ][ "charts" ][ "newrelease" ] # 取得每首歌的排名、曲名、連結、作者、時間 for song in song_list: song_rank = song[ "rankings" ][ "this_period" ] song_name = song[ "song_name" ] song_url = song[ "song_url" ] song_artist = song[ "artist_name"...
張貼留言
閱讀全文 »