iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 5

【D5 - 前端基本功】前端三大語言 -- HTML

HTML: 大家好~ 我是HTML,負責網站裡的內容!
CSS: 我負責讓HTML這個醜八怪好看一點~
JS: 我得讓懶惰HTML動起來!
HTML : ...ㄟ不對...

其實我想了很久到底要不要講到HTML/ CSS/ JS因為其實這三個涵蓋非常多東西~ 但我認為還是要至少有一個概念這三個到底是甚麼? 至少... 先讓我們看懂他的意思!!
/images/emoticon/emoticon08.gif


在進入正題前

首先必須要跟大家坦承一件事情~ HTML 跟 CSS 兩個都不是所謂的「程式語言」而是 「標記語言
程式語言就是像C++/ Python 這類型,有運算、邏輯的語言。而標記語言就是你常聽到的Markdown Language,只是告訴瀏覽器要如何去呈現這個網站。

講白話一點~ 就是你要用HTML 告訴網站說: 「ㄟ這裡我要放一個圖片~ ㄟ那裏我要放上一個連結!」可以看一下底下的範例

<img src="../assets/logo.png" alt="">

就是告訴網頁說我這裡要放一個叫做logo.png,而位置就在 ../assets/這個資料夾裡面 (../是回到上一層資料夾的意思)
接下來打開瀏覽器就會看到logo.png囉~
https://ithelp.ithome.com.tw/upload/images/20200905/20129730RKo4d7Ipb3.jpg


HTML基本架構

Element

首先~ 先給大家看一下文字要怎麼做顯示

<h2> This is the Header two Tag </h2>
<p> This is the p tag </p>

第一行是標題,會呈現比較大的字體,第二行就是內文的意思 (其實就像是word檔案一樣啦)

這邊也可以很容已的發現他的組成通常都是:

  1. 起始標籤 <p>
  2. 結束標籤 </p>
  3. 內容: 基本上就是夾在起始標籤跟結束標籤之間的所有東西~ 可以是一串字,也可以在包其他的標籤 (叫做 nesting element)!

    而1) + 2) + 3) 就是完整的一個 Element,網站就是由這一個一個element 來組成的喔~ 很簡單吧!!

Attribute

Attribute 可以說是一個擴充功能~ 讓HTML的tag裡可以做出更多的編輯和可能性,有一些attribute也是必須要加上去的才能呈現完整內容,例如:

<a href="https://ithelp.ithome.com.tw/users/20129730">Visit my Profile</a>

這個href就是所謂的attribute~ 其他常見的還有像是 class=''可以利用這個attribute來去連到CSS~ 之後會提到。

Empty Tag

不是所有的 element 都是由起始標籤....結束標籤來組成的,例如剛剛提到的圖片標籤:

<img src="../assets/logo.png" alt="">

就沒有所謂的結束標籤~ 也意味者沒有內容


遠遠來看HTML

就像我剛剛提到的: 網站是由一個一個element 所組成的~ 同時我剛剛也提到 Element 的起始標籤跟結束標籤是可以放其他Element的!! 接下來看看實際上網站的HTML會大概長甚麼樣子:

 <div class="hello">
    <h1>Hello World</h1>
    <p>
      For a guide and recipes on how to configure
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li>
          <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel
          </a>
      </li>
    </ul>
  </div>


我其實一直覺得他很像戰鬥機lol,但是你可以從這個簡單的例子發現HTML通常都是層層包覆的~ 它叫做DOM (白話文又來啦~ 這是一種樹狀的結構表示) 所以你要開發的時候要記得想清楚甚麼東西要包在外面,甚麼包在裡面~ 包的方式不同呈現出來就不一樣囉!
.
.
.
舉例
你在跟你朋友一起包水餃~ 你們決定先用 <div>當作餅皮,<p>當作餡料,所以應該理論上會長這樣:

<div>
    <p>...</p>
</div>

但如果你手賤把餡料包在外面就會變成

<p>
    <div> </div>
</p>

這樣就會...不能吃囉XDXD


常用標籤

我這邊只會大概講到幾個基本的常用的標籤~ 如果有任何不熟悉的之後都可以去 W3schools上面搜尋那個標籤的名稱喔~
\

  1. <p>: Paragraph 呈現一般文字
  2. <img>: 呈現圖片,要加上src來指向圖片位置
  3. <h1>: 他可以從h1 ~ h5代表這不同大小的標題 (數字越大字越大)
  4. <a href='' />: 這就是常用到的連結~ href裡面可以放網址,點選這個element就能直接幫你到導到那個網站裡面~
  5. <div>: 拿它來包住一個段落 (section),你單打出這個的時候部會跑出任何東西~

    但你可以拿它來包住其他的element,例如:
    HTML Template
    你可以看到分成藍色跟白色兩大section~ 所以他的結構就應該會像是
<div>
    藍色東西
</div>
<div>
    白色東東
</div>

後記

明天會講到CSS的基本概念~

其實至兩個標記語言不需要花太多時間去記得! 只需要大概知道概念是甚麼就好了,因為就算我已經開發了這麼久到現在還是要一直去剛剛說的W3Schools查一下特別的tag要怎麼去呈現,要配上甚麼不同的attribute


上一篇
【D4 - npm 你到底是誰】大家都叫我npm install!! 但這甚麼意思
下一篇
【D6 - 三國鼎立時代】三大前端時代 -- 為何我選擇了Vue?
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

尚未有邦友留言

立即登入留言