---
# System prepended metadata

title: HTML - 網頁初始結構
tags: [' 六角筆記王', HTML]

---

---
tags: HTML, 六角筆記王
title: HTML - 網頁初始結構
---

# 網頁初始結構
要如何在程式碼編輯器中，開始寫我們的網頁呢?
![image alt](https://i.imgur.com/ge1Ghy2.gif)

## ▶ 初始化
首先，先建立一份名為 index 的 `.html` 檔案，
在首圖範例中，是以 emmet 快速展開的基礎標籤格式，可以看到基礎結構為:
```htmlembedded=
<!DOCTYPE html> 
<html lang="en"> <!--  網頁語系，台灣為 zh-Hant 或是 zh-TW -->
  <head> 
    <!-- 編碼 -->
    <meta charset="UTF-8"> 
    <!-- 網頁相容性，此為 IE 兼容設定 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 依據讀取網頁的裝置大小設定網頁寬度，設定畫面的初始縮放比例 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 網頁名稱，會顯示在瀏覽器最上方的頁籤名稱 -->
    <title>HTML - 網頁初始結構</title>
  </head>
  <body>
    <p>文字段落</p>
  </body>
</html>
```

大致可以拆解成：

| 標籤名稱 | 用途 | 
| -------- | -------- | 
| `<!DOCTYPE html>` | 文件型別宣告，告訴瀏覽器這是甚麼檔案 |
| `<html></html>`| 網頁文件最上層 | 
| `<head></head>` | 網頁文件開頭描述，可以定義一些資本資訊 |
| `<body></body>` | 網頁內容撰寫處 | 

關於標籤元素可以參考 [HTML - 標籤元素](https://hackmd.io/c3FS3Q9WQeOjLdCcXPwDug)
關於標籤選擇可以參考 [HTML - 標籤選擇](https://hackmd.io/QYGyd29oQP-DHDHRe1Wwpw)

## 參考來源
> 1. [Fooish 程式技術 - HTML DOCTYPE 檔案類型聲明](https://www.fooish.com/html/doctype.html)
> 2. [小艾 ( iris ) - Day13：小事之 HTML viewport 與 meta tag](https://ithelp.ithome.com.tw/articles/10195279)