一.你的第一個網頁
😁新建一個.txt的檔案，在其中新增一些文字，比如Hello World，儲存檔案，修改檔案的副檔名為.html檔案，使用瀏覽器開啟頁面。但是我們編寫的這個網頁的弊端是比較大的，它只能夠顯示一個普通的文字，瀏覽器不知道是否要對文字進行加粗，放大，段落之間的差距。
二.案例-顯示一個新聞
而在上述的內容中我們編寫的<p> <h2>標籤就是HTML元素。
三.認識HTML
超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。
什麼是標記語言？
由無數個標記（標籤、tag)組成；
是對某些內容進行特殊的標記，以供其他直譯器識別處理；
比如使用
h2標記的文字會被識別為“標題”進行加粗、文字放大顯示；由標籤和內容組成的稱為元素（element）
什麼是超文字哪？
表示不僅僅可以插入普通的文字（Text），還可以插入圖片、音訊、影片等內容；
還可以表示超鏈接（HyperLink），從一個網頁跳轉到另一個網頁；
四.HTML檔案的特點-字尾
😊HTML檔案的拓展名是.htm.html，因歷史遺留問題，Win95\Win98系統的檔案拓展名不能超過3字元，所以使用.htm，現在統一使用 .html
💡需要注意的是，HTML是一門標記語言，但是在這個標記語言中，有一個最外層的標籤就是html元素。
五.HTML檔案的特點-結構
😗一個完整的HTML結構應該至少包含如下程式碼中的內容，最外層是html元素，然後內部包含頭部和身體部分內容，頭部中包含的內容為後設資料，例如title
<html> <head> <title></title> </head> <body></body> </html>
但是如果我們每次都這樣手寫進行開發，其實開發的速度是比較慢的，所以，我們就需要使用我們的開發利器，直接去生成對應的程式碼。
六.開發工具的選擇
🙂我們在上述的開發中使用了記事本來開發，但是記事本開發的缺點有很多，比如，建立和管理檔案不方便，沒有顏色標識/沒有智慧提示/無法除錯程式。
😂我們經常使用的開發工具如下：WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver 等等，他們的優點，智慧提示、高亮識別、語法檢測、整合環境、開發效率高。
😊我們在平時開發前端的時候基本使用的是如下的兩種開發工具：
Webstorm 優點：整合開發工具，包羅萬象，缺點：重（佔用系統資源多），收費。
VSCode（微軟開源）優點：輕（相當於一個編輯器），免費，缺點：需要安裝一些外掛來輔助開發。
七.VSCode的安裝
VSCode編輯器下載-安裝，安裝外掛（增加功能）：右側圖示最後一項，Extensions，查詢需要的外掛（聯網）
中文外掛：Chinese
顏色主題：atom one dark
資料夾圖示：VSCode Great Icons
在瀏覽器中開啟網頁：open in browser、Live Sever
自動重新命名標籤：auto rename tag
VSCode的配置：
Auto Save 自動儲存
Font Size 修改程式碼字型大小
Word Wrap 程式碼自動換行
Render Whitespace 空格的渲染方式(個人推薦)
Tab Size 程式碼縮排
然後當我們進行HTML的編寫的時候就可以直接使用!來生成完整的HTML檔案結構。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
八.認識元素
😁我們發現HTML本質上一由一系列元素組成的，什麼是元素哪？元素是網頁元素的一部分，一個元素可以包含一個數據項，或是一塊文字，或是一張照片，亦或是什麼也不包含。
☺️那麼HTML有哪些元素呢？我們會發現元素非常非常的多，這麼多能記得住嗎？
常用的，用的多自然就記住了；
不常用的，知道在哪裏查詢即可
九.元素的組成
這個元素的主要部分有：
開始標籤（Opening tag）：包含元素的名稱（本例為 p），被左、右尖括號所包圍。
結束標籤（Closing tag）：與開始標籤相似，只是其在元素名之前包含了一個斜槓。
內容（Content）：元素的內容，本例中就是所輸入的文字本身。
元素（Element）：開始標籤、結束標籤與內容相結合，便是一個完整的元素
十.元素的屬性
😉屬性包含元素的額外資訊，這些資訊不會出現在實際的內容中。
一個屬性必須包含如下內容：
一個空格，在屬性和元素名稱之間。(如果已經有一個或多個屬性，就與前一個屬性之間有一個空格。
屬性名稱，後面跟著一個等於號。
一個屬性值，由一對引號“ ”引起來。
🤣建立一個超鏈接標籤
<a href="http"//www.baidu.com"></a>
十一.屬性的分類
😘有些屬性是公共的，每一個元素都可以設定：比如class、id、title屬性。
😒有些屬性是元素特有的，不是每一個元素都可以設定：比如meta元素的charset屬性、img元素的alt屬性等。
十二.單標籤和雙標籤元素
雙標籤元素：我們會發現前面大部分看到的元素都是雙標籤的：html body head h2 p a元素；
單標籤元素：也有一些元素是隻有一個標籤：br img hr meta input；
十三.HTML元素結構總結
十四.元素的巢狀關係
😂某些元素的內容除了可以是文字之外，還可以去其他元素，這樣就形成了元素的巢狀。
十五.為什麼需要註釋
😊隨著學習的深入, 你的一個程式不再是幾行程式碼就可以搞定的了，可能我們需要寫出有上千行, 甚至上萬行的程式，某些程式碼完成某個功能後, 你寫的時候思路很清晰, 但是過段時間會出現忘記為什麼這樣寫的情況, 這很正常。
🙂在實際工作中, 一個專案通常是多人協作完成的. 可能是幾個或者十幾個等等，這個時候, 你可能需要使用別人寫出的程式碼功能, 別人也可能使用你的程式碼功能，如果你的程式碼自己都看不懂了, 更何況你的同事呢?
十六.HTML註釋
<!-- HTML註釋 -->
註釋的意義:
幫助我們自己理清程式碼的思路, 方便以後進行查閱.
與別人合作開發時, 新增註釋, 可以減少溝通成本.(同事之間分模組開發)
開發自己的框架時, 加入適當的註釋, 方便別人使用和學習.(開源精神)
可以臨時註釋掉一段程式碼, 方便除錯.
😁註釋快捷鍵：Ctrl+/
