iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

入門前端技能之旅系列 第 2

Day.2 「歡迎來到網頁這個世界!」 —— 認識網頁架構

「歡迎來到網頁這個世界!」 —— 認識網頁架構

網頁世界是由什麼組成?

上一篇有講到網頁三兄弟,其中有一個老大哥負責撐起這個世界,那就是 HTML ,少了 HTML 這個根基,就不會有網頁。
只有 HTML 的世界是非常無聊的,這時 CSS 和 Javascript 接連出現,為網頁世界創造更多的可能!

  • HTML 負責撐起網頁
  • CSS 負責為網頁增添色彩
  • Javascript 負責為網頁增加互動性

認識 HTML

HTML 是什麼?

HTML 是 Hyper Text Markup Language 的縮寫,中文翻譯為超文本標示語言,是樣板語言。

什麼是樣板語言? 主要給樣板處理器(瀏覽器)產生畫面的語言

架構

HTML 的世界是由上往下建構的,最後會變成一個 DOM tree 樹狀圖。

什麼是 DOM? DOM 是 Document Object Model 的縮寫,中文翻譯為文件物件模型

HTML
轉換成 樹狀圖架構
DOM tree

  • 紅色框是 HTML5 的檔案聲明,用來告訴瀏覽器這個文件是什麼類型。
  • 橙色框是最根部的標籤,用來標記網頁所使用的語言,如:en 為英文,zh-TW 為繁體中文。
  • 黃色框是要給瀏覽器看的設定,不會顯示在網頁上。
    • <meta>是給瀏覽器看的設定值,如:字元編碼、RWD、網頁 icon 、網頁描述...等。
    • <title>是給網頁的標題。
    • <link>是用來引入 CSS 的。
    • <script>用來引入 Javascript 使用的,但大多數人會設在網頁尾端,之後再講為什麼。
  • 綠色框是網頁的主要內容呈現。
  • 藍色框是標籤的屬性。
  • 樹狀圖具有上下關係,如:<body>子元素為<h1><h1>父元素為<body>
  • 父元素可以有多個子元素,子元素只有一個父元素。

標籤

tag

  • 深藍色字是標籤名稱
  • 淺藍色字是屬性名稱
  • 橘色字是屬性值
  • 白色字是文本
  • 大多數標籤都要使用結束標籤做結尾,如:</h1>

HTML 是怎麼呈現的?

最原始的 HTML 是沒有所謂的區塊元素,而是各家的瀏覽器自己設定預設的樣式,讓 HTML 更加容易閱讀。

h1 tag
如圖 <h1> Google Chrome 內建樣式

雖然各家瀏覽器的樣式都不太一樣,但整體大方向還是一樣的,都有區分出區塊元素與行內元素。
多數情況下,會用區塊元素劃分位置,行內元素會放在區塊元素內。

  • 區塊元素(block):在沒有使用 CSS ,會包覆著子元素蓋一整行,如:divh1ul...等。
  • 行內元素(inline):可以多個行內並排,直到排不下就會往下推擠,如:spanimginput...等。

block & inline
為了更好的呈現效果,所以有稍微添加一些 CSS

總結

現在已經初步認識網頁的架構了,明天將會深入了解各個標籤的用法與注意事項。
如果想自己做出樹狀圖,可以玩玩看,只是是用 Codepen 做的有點亂。


上一篇
Day.1 「工欲善其事,必先利其器!」—— 前言 與 介紹工具
下一篇
Day.3 「建構網頁的基石!」 —— 使用網頁標籤
系列文
入門前端技能之旅30

尚未有邦友留言

立即登入留言