[給心理人的前端網頁開發] 09 關卡一：自介履歷之 HTML

2023 iThome 鐵人賽

DAY 9

Modern Web

給心理人的前端網頁開發系列第 9 篇

15th鐵人賽

ayugioh2003

2023-09-24 23:11:22

334 瀏覽

分享至

今天要開始正式寫一個履歷網頁了。主角是一個新興 Vtuber 叫 HowB8，履歷網頁有他的頭貼、設定、經歷與作品集。請先點開連結查看效果：

[給心理人的前端網頁開發] 08 自介履歷 - CodeSandbox

HTML 的語法列於文末。以下講解此 HTML 語法代表的意義。

一、履歷網頁中 HTML 的結構

前幾天已經提到，一個 HTML 檔案的基本結構有哪些，包含 <!DOCTYPE html> 、 <html>、 <head>與 <body> 。接下來主要講的是 <body></body> 中的結構。

複習一下：

<!DOCTYPE html> 用來宣告目前的文件類型是 HTML
<html></html> 將 HTML 需要的元素都寫在裡面
<head></head> 將一些 HTML 的後設資訊寫在裡面（通常跟畫面無關）
<body></body> 將畫面需要的元素寫在裡面（通常跟畫面有關）

<!-- container: 把整個想顯示的 HTML 語法包起來。一種寫程式的習慣 -->
<div class="container">
  <!-- header: 放照片、HowB8 的簡介 -->
  <div class="header">
  </div>
  <!-- body: 放履歷的主要內容 -->
  <div class="body">
    <!-- block: 履歷有很多區塊，像是設定、經歷、作品集。用 block 區隔開來 -->
		<div class="block">
    </div>
  </div>
</div>

二、還沒見過的 HTML 標籤介紹

<img> 是 image 的縮寫，代表圖片的意思。這邊可以看到 <img> 標籤內有三個屬性，分別是 class 、 src 與 alt 。

class 是 CSS 的自定義類別，明天會提到。
src 是圖片來源的意思，是 source 的縮寫。填上圖片網址後，這個 <img> 就會顯示出圖片了
alt 是替代文字的意思，是 alternative 的縮寫。當圖片連結失效時，就會顯示 alt 中的文字

延伸閱讀

HTML 圖片 - HTML 語法教學 Tutorial

<img
  class="header__img"
  src="https://i.imgur.com/lvv0KdI.jpg"
  alt="How B8 大頭貼"
/>

<h2> 是 heading 第二層的縮寫，表示標題的預設樣式為第二層的意思。同理，前幾天提到的 <h1> ，就是標題第一層的意思。通常網頁的預設樣式， <h1> 的文字大小會最大，接著就一路縮寫。

延伸閱讀

<h2>設定</h2>

<ul>、 <li> 是要一起用的，是列表清單的意思。 <ul> 是 unorder list 的縮寫，表示無序清單，就是只用黑點而不是數字列點。 <li> 是 list item 的縮寫，表示清單中的項目。

延伸閱讀

<ul>
  <li>初配信</li>
  <li>情人節活動</li>
</ul>

<iframe> 是 inline frame 的縮寫，中文可以叫做內嵌框架。我們常用的 Youtube 有個分享功能，將複製的程式碼貼到網頁程式碼中，就可以讓網頁顯示出 Youtube 影片。這複製出來的語法，裡面就有用到 <iframe> 。

在複製出來語法中，其中 src 是 <iframe> 最重要的屬性。 <iframe> 其實不是只能內嵌影片而已。在一般情況下，它其實可以內嵌大部分的網頁網址。另外像是 podcast 的播放器、問卷表單，有些也是能以 iframe 的方式被嵌入網頁中。

延伸閱讀

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/fWA3ckC5YeE"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

小結

以下是今天提到的內容

履歷網頁的 HTML 主要拆分結構
img 的使用
h2 的使用
ul li 的使用
iframe 的使用

今天只介紹了 HTML，但還沒提到如何進行排版。明天將繼續介紹履歷網頁中 CSS 的部份

小作業：請將 HTML 中的內容，改成自己的履歷、或是有興趣人物的履歷

附註：HTML 的程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>How B8 的履歷</title>
    <link href="./main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="header">
        <img
          class="header__img"
          src="https://i.imgur.com/lvv0KdI.jpg"
          alt="How B8 大頭貼"
        />
        <div class="header__content">
          <h1>How B8</h1>
          <p>HowFun 頻道的 Vtuber 新人。</p>
        </div>
      </div>
      <div class="body">
        <div class="block">
          <h2>設定</h2>
          <ul>
            <li>身高：186mm</li>
            <li>性別：沒有性別，性別是 HowB8</li>
            <li>繁殖方式：無性生殖，十八時就啵一聲出來了</li>
            <li>會賣公仔嗎：怕滯銷賣不完</li>
            <li>會後空翻嗎：不會，只會舉手，後空翻可能要等改版</li>
            <li>可以色色嗎：公三小，不要用 ig 問奇怪的問題</li>
            <li>可以空幹嗎：不行，廠商沒有做，我只會舉手轉頭</li>
            <li>
              中之人是不是HowHow：不是，你才 HowHow，你全家都
              HowHow。我沒有中之人，我就是 Vtuber
            </li>
            <li>業配報價：比How哥便宜</li>
            <li>鼻子很大嗎：我沒有鼻子</li>
            <li>能抬頭往上看嗎：不行，我只能左右</li>
            <li>
              可以一鍵換性別嗎：不行，我就是我，我沒有性別。我要去男廁女廁隨便。心情好可以去女廁，心情不好也可以去女廁
            </li>
            <li>你的智齒有拔嗎：我好像沒有牙齒</li>
            <li>耳朵在哪：沒有耳朵，有個洞可以聽就好</li>
            <li>為什麼沒去走鐘獎：因為才剛初配信，還沒被邀請</li>
            <li>日本v會教微積分，HowB8會嗎：作業自己寫啦</li>
            <li>HowB8跟How哥可以夢幻連動嗎：可能有點難</li>
            <li>來歷：來自How哥宇宙的平行宇宙。人設可能隨時會變，到時候再說</li>
          </ul>
        </div>
        <div class="block">
          <h2>經歷</h2>
          <ul>
            <li>初配信</li>
            <li>情人節傳情</li>
          </ul>
        </div>
        <div class="block">
          <h2>作品集</h2>
          <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/fWA3ckC5YeE"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
          <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/ELevpiTmGlg"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>
  </body>
</html>