跳到主要內容

[2021 IT鐵人賽] Day 03：專案01 - 超簡單個人履歷02 | HTML基本元素

大家早安阿! 來到我們冒險的第三天了，今天我要繼續來介紹HTML的其他常用元素，還沒看過昨天的建議先看完再來看這篇。

HTML基本元素(續)

<img>

圖片，src屬性為圖片路徑，alt屬性則是圖片無法正常顯示時，預設顯示的文字。 

<img src="./cat.jpg" alt="cat" style="width:400px">

顯示結果為：

獻上可愛貓貓圖，有貓就給讚，對吧XD

圖片無法正常顯示時，顯示alt的文字。

當然gif也可以顯示。

<img src="./rainbow.gif" alt="cat" style="width:400px">

因為截圖就表示不出來gif的效果了，所以我這邊是直接放gif的連結上來，你在你的電腦裡應該也會看到類似效果。

表格

HTML中，表格是一個複合的元素，是由好幾個標籤所組成的。

  • <table>：標示這是一個表格
  • <caption>：表格標題名稱
  • <thead>：表頭區域
  • <tbody>：表格本體區域
  • <tr>：一列
  • <th>：表頭欄位
  • <td>：一般欄位
<table>
    <caption>2年1班</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成績</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>王小明</td>
            <td>50</td>
        </tr>
        <tr>
            <td>陳小美</td>
            <td>90</td>
        </tr>
        <tr>
            <td>林阿妙</td>
            <td>75</td>
        </tr>
    </tbody>
</table>

顯示結果為：

如果想要顯示邊框，則在<head>裡面加上這個： 

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

這個用到CSS的內部載入，明天就會講到了。

顯示結果為：

另外，想要合併表格欄位，使用的是colspan屬性，數字表示合併幾格。 

<tr>
    <td colspan=2>林阿妙</td>
</tr>

顯示結果為：

有關表格的詳細介紹請看這裡

清單

HTML的清單分成無序清單以及有序清單。

無序清單

  • <ul>：標示這是一個無序清單。
  • <li>：清單中的一項。
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

顯示結果為：

type屬性可以設定無序清單樣式。

  • disc：實心圓(預設)
  • circle：空心圓
  • square：正方形
<ul>
    <li type="disc">HTML</li>
    <li type="circle">CSS</li>
    <li type="square">JavaScript</li>
</ul>

顯示結果為：

或者是巢狀無序清單，瀏覽器會自動切換清單樣式。

<ul>
    <li>HTML</li>
    <ul>
        <li>head</li>
        <li>body</li>
        <ul>
            <li>h1</li>
        </ul>
    </ul>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

顯示結果為：

有序清單

  • <ol>：標示這是一個有序清單。
  • <li>：清單中的一項。
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

顯示結果為：

也可以用type屬性設定有序清單樣式。

  • 1：阿拉伯數字(預設)
  • A：大寫英文字母
  • a：小寫英文字母
  • I：大寫羅馬數字
  • i：小寫羅馬數字
<ol>
    <li type="1">HTML</li>
    <li type="A">CSS</li>
    <li type="I">JavaScript</li>
</ol>

顯示結果為：

start屬性設定從數字幾開始數。

<ol start="10">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

顯示結果為：

當然，也可以是巢狀有序清單，但是瀏覽器不會自動切換清單樣式。 

<ol>
    <li>HTML</li>
    <ol>
        <li>head</li>
        <li>body</li>
        <ol>
            <li>h1</li>
        </ol>
    </ol>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

顯示結果為：

希望改變樣式也很簡單，只要利用上面講過的type屬性就好了。 

<ol>
    <li>HTML</li>
    <ol type="a">
        <li>head</li>
        <li>body</li>
        <ol type="i">
            <li>h1</li>
        </ol>
    </ol>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

顯示結果為：

補充：Live Server

這邊介紹一個非常方便的VScode外掛 - Live Server。這個外掛會在本地端開啟你的網頁，而且會隨著檔案修改更新網頁，非常適合在開發測試階段使用。

使用方法

到VScode側邊欄的Extension，搜尋Live Server，找到後點下去，應該會看到這個畫面：

因為我已經下載過了，所以沒有install的按鈕，沒下載過的話應該會有。

回到檔案總覽，對著你的html檔案點擊右鍵，然後點 “Open with live Server”，就會在瀏覽器上開啟你的網頁了!

會看到liver server的host是使用127.0.0.1，也就是localhost，表示的確是本地端的檔案。port會隨機分配，這部分不用特別理他。

另外，live server會使用你預設的瀏覽器開啟，如果想換成其他瀏覽器，請點上方 File >> Perferences >> Settings，然後搜尋 “Live Server”，找到下圖的設定位置。

預設是null，可以在下拉式選單選擇你要的瀏覽器。

小結

今天延續了昨天的HTML基本元素介紹，多介紹了圖片、表格、清單這三種元素，另外補充了VScode實用的外掛 - Live Server，以後就可以很方便的測試你的網頁了!

HTML的介紹就到這邊，是不是很快就學會了呢~ 明天起，我就會開始代入CSS，來美化網頁了哦(我們的網頁終於有衣服穿了)，那麼，我們明天見~

如果喜歡這系列文章麻煩幫我按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...
張貼留言
閱讀全文 »

[Python] 關於 with 你所不知道的事

相信用 C 語言寫過檔案讀取的人都知道，經常開檔後就忘記關檔，或者程式中間跳出例外，因此沒有關檔。這些問題常常讓人非常頭痛😱。 所幸 Python 中有 with 這個語法糖，可以自動幫你開關檔，跳出例外也難不倒他，真的非常好用。 但你真的了解 with 背後的運行原理嗎? 🤔 不知道沒關係，因為你現在就會知道了! context manager 在講 with 之前，必須先介紹一下 context manager ，中文可以翻成 情境管理器 。 為什麼叫做 情境管理器 呢? 我們試想一個情境… 當你進入房間時，就要開啟房間的燈：然後當你離開房間時，就要關閉房間的燈。 像這樣理所當然一定要做的事情，我們就稱為一個情境。而 Python 就是透過情境管理器處理這些情境。 要自己實作 context manager 其實很簡單，只要在 Class 中實作 __enter__() 和 __exit__() 即可。 就以進入房間當作例子。 class Room (): def turn_on_light ( self ): print ( "開燈" ) def turn_off_light ( self ): print ( "關燈" ) def __enter__ ( self ): print ( "進入房間" ) self.turn_on_light() return "在房間裡" def __exit__ ( self, exc_type, exc_value, traceback ): self.turn_off_light() print ( "離開房間" ) with Room() as room: ...
張貼留言
閱讀全文 »