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 的縮寫，中文翻譯為文件物件模型

轉換成 樹狀圖架構

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

標籤

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

HTML 是怎麼呈現的？

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

如圖 <h1> Google Chrome 內建樣式

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

• 區塊元素（block）：在沒有使用 CSS ，會包覆著子元素蓋一整行，如：div、h1、ul…等。
• 行內元素（inline）：可以多個行內並排，直到排不下就會往下推擠，如：span、img、input…等。

總結

現在已經初步認識網頁的架構了，明天將會深入了解各個標籤的用法與注意事項。