注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。

參加1_bit博主前端學習計劃發文時再頭部記得機上本專欄鏈接，示例如下：

我已加入 1_bit 博主的免費前端站起來學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html

一、搞清楚HTML 的一些基本內容

👸小媛：Bit哥，你之前的 HTML 課程為什么斷更了？

🐶1_bit：那是因為覺得不夠系統的去教學不能稱為一門好的課程，在此我就想重新弄一門零基礎到就業的實戰課。

👸小媛：那這個課程就是準備從零到就業嗎？

🐶1_bit：是的，這個系列一共分為幾個階段，例如 HTML、CSS3、JS、Vue 將會分為幾個階段，這樣就比較系統的講解完整個前端到就業的內容了。

👸小媛：哇，這么棒。

🐶1_bit：這是這個課程的一節課，咱們將會普及一下概念與技術內容。例如，你知道什么是HTML嗎？跟HTML5有什么關系？

👸小媛：不知道

🐶1_bit：那咱們就從頭開始講吧，HTML是一個超文本編輯語言，是用來編寫網頁內容的。

👸小媛：那什么是超文本呢？

🐶1_bit：說到超文本我們還需要了解一個概念，那就是超鏈接。超鏈接指的是一個網頁上的資源對象，例如咱們在網頁上經常看到一些資源索引鏈接指向別的網頁，這個就是超鏈接，超鏈接是一個網頁的一個部分，多個網頁的超鏈接結合在一起才能說是一個網站。例如只有一個頁面也沒有鏈接（超鏈接）指向其他的網頁那么就只能說這個頁面是一個網站。

👸小媛：明白了，原來這個超鏈接就是鏈接當前頁面和其他頁面的一個橋梁？

🐶1_bit：是這樣的。而超文本就是使用了超鏈接，將不同地方的資源鏈接在一起的文本。例如咱們打開一個網站的頁面，例如百度搜索引擎，咱們搜索一些內容打開后將會跳轉到其他頁面，并且包括一些圖片、視頻、音頻都是多個站點的資源內容，這個就是超文本。（參考百度百科）

👸小媛：原來是這么回事。

🐶1_bit：其實從本質上來說，咱們打的這個 HTML 代碼就是一個文本，但是這個文本會鏈接很多不同地方或者相相同空間（區域）的內容，所以我們稱 HTML 是一個超文本編輯語言。

👸小媛：明白了，原來這個就是 HTML 編程語言呀。

🐶1_bit：你搞錯了，這個是超文本編輯語言，還不能夠成為編程語言，這個要注意。

👸小媛：嗷嗷，明白了。

🐶1_bit：還有一點，HTML5 是 HTML 的第五個大版本（標準），你可以可以統稱為 HTML，在這里所使用的 5 指的是版本內容。

👸小媛：知道了。

二、HTML 的基本結構

2.1 軟件使用

🐶1_bit：現在咱們開始學習 HTML 的基本內容吧。首先我們需要一個軟件對 HTML 內容的進行編輯，這個軟件使用 VSCode下載安裝即可，并且可以更改為中文。
在這里插入圖片描述

👸小媛：收到。

🐶1_bit：接下來，咱們可以點擊按鈕新建文件并且輸入文件名。
在這里插入圖片描述

👸小媛：01.html 是文件名嗎？

🐶1_bit： 01 是文件名，“.html” 是后綴名，這個后綴名表示這個文件是 html 文件，就像你用做 ppt 時對應文件的文件名后綴是 “.ppt”，這個后綴就表示這個文件是 ppt 的文件，或者說你做 word 文檔時后綴名是 doc，這表示這個是個文檔文件，不同的后綴名用于標記（表示）不同的文件內容。

👸小媛：原來如此。

🐶1_bit：接下來在編輯區域輸入一個英文的感嘆號，按步驟點擊對應選項將會出現一個基本的 html 結構。
在這里插入圖片描述
👸小媛：哇，出現了。

2.2 結構代碼詳解

🐶1_bit：這就是一個 HTML 代碼的基礎結構，如果是第一次見的同學肯定不清楚整個代碼結構內容，我們可以觀察發現，咱們整個 HTML 代碼例如出現了一個 <head> 就會出現一個 </head>，出現了一個 <body> 就會出現另外一個 </body>，這是因為 HTML 代碼一般是“成對” 出現的。

👸小媛：明白了。

🐶1_bit：我們還可以觀察到這些 HTML 代碼直接有例如 <head>與 </head> 之間是有內容的。
在這里插入圖片描述
👸小媛：這能說明什么嗎？

🐶1_bit：這說明HTML代碼一般是以一對“標記”來表示內容的。

👸小媛：沒聽明白。

🐶1_bit：那咱們現在來開始做個示例。在HTML中 h 標簽稱為標題標簽，例如咱們在看一些網頁內容時會發現有些文本內容會變大加粗，這個就是標題，并且這些標題有大有小，這就是標題。

👸小媛：然后這個跟那個問題有什么關系嗎？

🐶1_bit：剛剛咱們說HTML代碼一般是以一對“標記”來表示內容的，那現在就看看是如何實現這個標題的。咱們在剛剛完成的HTML代碼中輸入以下內容，其中<h1></h1>之間是對應的標題修飾的文本，<h12></h2>之間也是對應標題修飾的文本，咱們把這些內容放到<body></body>這個標簽之間：

<h1>這個是一個標題1</h1>
<h2>這個是一個標題2</h2>

在這里插入圖片描述

🐶1_bit：咱們打開對應的網頁文件，發現整個頁面如下：

👸小媛：咦？這個時候竟然把文本內容顯示出來了，但是 <h1></h1>這種就沒顯示。

🐶1_bit：對的，在網頁顯示這個內容時，將會自動的對一些標簽進行轉換，例如<h1></h1>之間是用于顯示標題1這個大標題的，就會把對應其中的文本給顯示出來。我們在以上內容中將文本寫在 <h1></h1> 之間，就表示使用了 <h1></h1> 去“修飾”這一段文本，那么這個時候瀏覽器先自己“看”了一遍這整個HTML代碼內容，看見你使用了<h1></h1>去修飾這個文本，瀏覽器就明白了這個文本是用作標題的形式顯示，這時他就會以標題的形式進行顯示“這個是一個標題1”這一段文本。

👸小媛：明白了，原來是這個意思。

🐶1_bit：然后在這里的 <h2> 所指的是標題2，標題1最大，所以在顯示的時候標題2文本將會比標題1小。

👸小媛：原來是這樣的，那還有其他3、4、5…這些等級的標題嗎？

🐶1_bit：有的，在 HTML 中一共有 H1-H6 這 6 個標簽，這些標簽對應的標題都有不同的大小，例如如下代碼所示。

<h1>這個是一個標題1</h1>
<h2>這個是一個標題2</h2>
<h3>這個是一個標題2</h3>
<h4>這個是一個標題2</h4>
<h5>這個是一個標題2</h5>
<h6>這個是一個標題2</h6>

👸小媛：我還有一個問題，這個代碼一定要寫在<body>與</body>之間嗎？

🐶1_bit：從符合標準的角度上來說是的，我個人建議初學者還是按照標準來走。在 HTML 代碼中，不同的標簽有著不同的含義，例如你說的 <body>標簽，這個標簽指整個 HTML 代碼的主體，你可以理解為整個網頁內容部分。

👸小媛：原來是這個意思，那其他的標簽有什么意思嗎？

🐶1_bit：咱們可以看看以下這張圖，咱們開始解釋目前所出現的 head 內容。

👸小媛：好勒

🐶1_bit：在上圖中 html 標簽表示該網頁的 HTML 代碼將會寫在這一個標簽內，而head 標簽部分表示當前網頁的一些信息以及所需要加載的外部 js代碼、外部css樣式等。外部 js 和 css 暫時咱們還沒有了解，咱們可以從中查看 meta 標簽。

🐶1_bit：在當前頁面中，head標簽內出現了 meta 標簽，meta 標簽表示當前頁面的相關信息，例如 <meta charset="UTF-8">，表示當前頁面使用編碼格式為 utf-8，其中 charset 就是表示當前頁面的編碼格式，而 charset=“UTF-8” 表示指定編碼格式為 UTF-8，在 UTF-8 前后使用雙引號是表示 UTF-8 是一個字符串。在HTML 中，字符串都使用雙引號、單引號表示，例如你有一個超鏈接，你點擊這個文本跳轉到這個超鏈接（例如 www.baidu.com）也需要使用雙引號引起來。

👸小媛：那為什么 charset 不需要雙引號引起來呢？

🐶1_bit：那是因為 charset 是HTML 中自帶的一種“屬性”，則不需要使用雙引號起來。

👸小媛：那什么是編碼格式呢？

🐶1_bit：編碼格式是計算機系統對語言認識的一種“字典”，如果沒有對應的編碼格式對中文、英文、阿拉伯文進行解析，那么計算機將不能夠使用正確的方式進行顯示，并且中文、英文有對應的解析“字典”，使用中文時就需要指定某一種解析方式，而 UTF-8 則是對中文的解析方式。

👸小媛：原來是這個意思呀。

🐶1_bit：對的，并且我們可以發現 meta 標簽并沒有結束標簽（就是帶/的單獨標簽），這點需要注意。

🐶1_bit：接著我們繼續查看 head 標簽內的其他內容，紅色框選部分暫時不做了解，因為現在咱們能力還未足夠，咱們查看 title 標簽。
在這里插入圖片描述
🐶1_bit：title 標簽是當前頁面的標題。

🐶1_bit：更改 title 標簽內容將會更改上圖框選內容的值。

👸小媛：我懂了，是不是這樣。
在這里插入圖片描述
🐶1_bit：對的，更改完畢后，保存刷新網頁將會更改其內容。

👸小媛：完成了。

🐶1_bit：這節課就上到這，下節課介紹其他的內容。

【前端就業課第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解