--- 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)