*還不會用VS code的話請看第3天文章有提到的教學。
這裡示範的文字編輯器是VS code，新增一個檔案，先將它存成Html檔，這樣編輯器才會自動偵測它的檔案類型，給予相對應的編輯功能。只要將副檔名(test是檔名，.html是副檔名)，副檔名key“html”就可以存成html檔了。
接著在空空的文檔打入第一行字"html"，文字編輯器會自動跳出版本選擇列，選擇Html5。
然後就會跳出Html文檔基礎架構，並自動寫入一些基本數據：
那就來說明那一串東西到底是幹嘛用的吧～
這是HTML5版本宣告。
文檔的一開始，必須宣告我們文檔所寫的Html是哪個版本，目前最新版本是HTML5，該版本的普遍度也很高了。其他版本的宣告方式就不會是這樣寫了。
根元素是整個文檔的第一個元素，所有的文檔內容都包在根元素裡面。<html>元素是最基礎的層，它對應的是瀏覽器的viewport(視口)。
<html>元素內的lang屬性
我們會在根元素裡指定lang屬性，來表明這個網頁的主要語言。引號內的值"en"指的是英文，通常後面也會接相對應的區域代號、書寫方式。也可以在特定的元素指定lang，比方整個文檔的內容是中文，可是有些地方用到日文，就可以幫那串日文字包元素來指定日文的參數。
<html lang="en">
</html>
台灣地區使用的中文繁體就會是:
<html lang="zh-Hant-TW">
</html>
<html lang="zh-Hant">
<head>裡包的是這個文檔的原數據，這邊輸入的內容不會直接展示在頁面上，但會影響頁面的內容。像是對應顯示器的螢幕數據、為網頁取名字、引入外部資源(如Css檔、字體包)。從字面header上理解，可以把它當作是載入頭腦的訊息。
mete元數據元素
這行是指定文檔的字元編碼，charset屬性拆成語意清楚的話是character set(字符設定)，要讓瀏覽器知道它該怎麼去讀你的文字，目前最通用的是UTF-8，它幾乎可以讀所有的語言。
這告訴瀏覽器指定viewport視口的顯示設定，viewport是瀏覽器展示網頁的視窗，它指示瀏覽器網頁的寬高顯示在viewport時的預設值是1.0，也就是100%。
這行是專門為IE瀏覽器的相容性寫的。http-equiv屬性是用來設定網路編譯行為，HTTP叫超文本傳輸協定，是英文HyperText Transfer Protocol的縮寫，它規範了瀏覽器如何讀懂URL(網址)。
而它的value(參數)X-UA-Compatible是專門針對IE瀏覽器，要知道，雖然W3組織有擬訂網路規範，但是不一定每家瀏覽器都會完全照規範走，而IE很常出現不相容或不支援規範的情況，這行就是為了解決這個問題。
而參數ie=edge則表示照IE最新版本的模式去瀏覽網頁，也可以特別寫入特定版本，但通常是寫入ie=edge這個參數值。
<title>網頁標題元素
該元素的內容，就是幫你的網頁取名字，預設會是Document，它會顯示在瀏覽器分頁標籤處，也就是這一頁HTML的名稱，它關乎到搜尋引擎，所以命名是重要的，隨便亂取辨識性就會很差。
<head>內還可以放更多東西嗎？
可以唷，像是引入寫好的CSS檔，或是引入Javascript檔(但Javascript的功能寫好之後不一定會放在head，要看它對應的文檔節點在哪。)
想看更多的<head>裡的元數據用法請點 這裏。
整個網頁展示的內容都放在這裡。顧名思義，<body>是這個網頁的身體，按照腦袋<head>所想的來展示自己的內容。
今天的筆記到這裡。
那麼下一篇我們就要在<body>元素內放入內容囉，期待！
*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝
我用的snipaste，作圖蠻快的唷！
iThome鐵人賽
看影片追技術