#從零開始1️⃣：為什麼一定要寫html:5

2023 iThome 鐵人賽

DAY 2

自我挑戰組

從零開始學習前端系列第 2 篇

15th鐵人賽前端菜鳥前端

RochelWang

2023-09-17 00:47:05

147 瀏覽

分享至

不論是用freeCodeCamp學習還是其他管道學習，一開始都從學習標籤如何使用。我們也一定會注意到，這些都是寫在如附圖中的body標籤中。

那在body之外的這些，一定要寫嗎? 現在來看看各行的意思與意義：

<!DOCTYPE html> 
//告訴網頁瀏覽器這是一個html5類型的文件檔案(Document Type)，這樣瀏覽器才能依照html5的規定正確理解我們寫的內容。
<html lang="en"> 
//<html>為開始標籤，和</html>成對使用；lang="en"則是指定文檔語言為英語，這可以幫助瀏覽器正確顯示內容和優化搜索引擎。
<head> 
//這區塊會包含不顯示在網頁的內容。
    <meta charset="UTF-8">
    //確保瀏覽器能夠正確地顯示你網頁上的文字，不管是哪種語言，還能處理特殊符號，讓你的網頁在各種情況下都能正確運作。
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    //用於調整網頁在移動設備上的顯示方式。如字面意思，content="width=device-width, initial-scale=1.0告訴瀏覽器，文檔的寬度應該等於設備的寬度，初始縮放比例為1.0。這讓內容在不同裝置都有最佳的體驗(響應式設計)。
    <title>Document</title>
    //這個標題通常會顯示在瀏覽器的標題欄或書籤中，使用者可以利用這個標題識別和管理不同的網頁。
</head>
<body> 
//這個區塊開始，包含網頁上可見的部分，如文字、圖片、連結、表格等。
</body>
</html>

p.s.使用VScode開發，輸入html:5或!都可以產生和上面圖片中一樣的基本設定

我們知道了為甚麼要寫這些：為了確保網頁能夠正確運行、以適當的方式呈現內容，並提供良好的用戶體驗，這些網頁的基本框架和必要的設定。

💡分享：因為一開始是用freeCodeCamp學習，所以也沒太注意到這要幹嘛，就是知道一定要寫就是了。在學習過程也開始使用VScode開發，但還不曉得有emmet功能(之後文章會介紹到emmet!)，後來參考了youtube的教學影片，才發現原來不用一個字一個字自己輸入XD(當下心裡：自己到底在幹嘛)。所以，任何覺得有點麻煩的東西，不妨可以找找看有沒有更快的方法去完成，但一定、必須要清楚自己在用甚麼、基礎原理是什麼!!(重點)