HTML零基礎(chǔ)入門教程， 零基礎(chǔ)學(xué)習(xí)HTML網(wǎng)頁制作（HTML基本結(jié)構(gòu)）
時間：2023-09-25 20:48:01 | 來源：網(wǎng)站運營
時間：2023-09-25 20:48:01 來源：網(wǎng)站運營
HTML零基礎(chǔ)入門教程， 零基礎(chǔ)學(xué)習(xí)HTML網(wǎng)頁制作（HTML基本結(jié)構(gòu)）：
HTML 基本結(jié)構(gòu)：前端拼圖的第一塊碎片
為什么要學(xué)習(xí) HTML 基本結(jié)構(gòu)？ 因為，你以后編寫的每一個網(wǎng)頁都是以HTML的基本結(jié)構(gòu)為基礎(chǔ)。因此，HTML 基本結(jié)構(gòu)是 HTML 語言必學(xué)內(nèi)容。 本課程通過通俗易懂的語言及小案例幫你快速掌握 HTML 基本結(jié)構(gòu)，并使用網(wǎng)頁開發(fā)神器VSCode 實現(xiàn)簡單的網(wǎng)頁
第一關(guān)：HTML 標(biāo)簽語法規(guī)范
本門文程我們學(xué)習(xí) HTML 的基本結(jié)構(gòu)。
在正式學(xué)習(xí)之前，我們需要先明確一個問題，
為什么要學(xué)習(xí) HTML 基本結(jié)構(gòu)？因為身為開發(fā)人員，你以后編寫的每一個網(wǎng)頁都是基于 HTML 的整體結(jié)構(gòu)。所以說，HTML 基本結(jié)構(gòu)至關(guān)重要。
在此基礎(chǔ)上，我們將學(xué)習(xí)標(biāo)簽的書寫規(guī)范及注意事項，完成對于 HTML 基本結(jié)構(gòu)的整體認(rèn)知。
最后，我將向大家介紹一個非常牛逼的工具-VSCode，其能夠快速的編寫 HTML 代碼，提高開發(fā)效率，在實際工作中發(fā)揮重要作用。
學(xué)完本課程，你將有如下收獲：
（1）掌握 HTML 標(biāo)簽的書寫規(guī)范以及注意事項 （2）能夠?qū)懗?HTML 骨架標(biāo)簽 （3）能夠使用 VSCode 工具開發(fā)網(wǎng)頁
1.網(wǎng)頁文件創(chuàng)建
在講解標(biāo)簽的具體語法規(guī)范前，我們首先要創(chuàng)建一個網(wǎng)頁文件。 說到文件，我們知道文件有類型，也就是有擴展名。例如，記事本文件，它的擴展名為：.txt。
那么，
網(wǎng)頁文件的擴展名是什么呢？網(wǎng)頁文件的擴展名為：'.html' 或者是'.htm'。所以，看到以'.html'或'.htm'結(jié)尾的文件，就應(yīng)該馬上get到一個重要的信息：這是網(wǎng)頁文件，可通過瀏覽器打開對應(yīng)文件，查看具體的網(wǎng)頁內(nèi)容。 但是，需要注意的是：
不能隨意創(chuàng)建網(wǎng)頁文件！為什么呢？因為一個網(wǎng)站包含眾多網(wǎng)頁，相對應(yīng)的是也會有很多的網(wǎng)頁文件；若隨意創(chuàng)建，不利于后期管理。
那應(yīng)該如何做？在桌面、D盤或E盤(當(dāng)然，你也可以選擇你喜歡的一個盤)中創(chuàng)建一個文件夾，將創(chuàng)建的網(wǎng)頁文件都放在該文件夾中統(tǒng)一管理；后期即使文件再多，也能及時找到并易于分類管理。
接下來，我們就創(chuàng)建第一個網(wǎng)頁文件：Step1：在電腦桌面上新建 一個文件夾，命名為：MyWeb；
注意：后續(xù)創(chuàng)建的網(wǎng)頁文件，均放在此文件夾中進行管理。該文件夾的名稱，也可根據(jù)自身需求命名。
Step2：在該文件夾內(nèi)，創(chuàng)建一個文本文件，即擴展名為'.txt'的文件；文件可隨意命名，此處命名為：index.txt。
文本文件創(chuàng)建完成，如下圖所示：
Step3：修改文本文件的拓展名；網(wǎng)頁文件的擴展名為:'.html'或'.htm'，因此，需要將創(chuàng)建的文本文件拓展名改為網(wǎng)頁文件的拓展名，即改變其類型。
最終修改后的結(jié)果如下圖所示，至此，網(wǎng)頁文件創(chuàng)建完成：
可以看到，修改完擴展名，文件名前面出現(xiàn)了一個瀏覽器的圖標(biāo)；顯而易見，我們創(chuàng)建的文件就是一個網(wǎng)頁文件。
雙擊該文件，通過瀏覽器就能打開該文件：
嗯~小朋友，此時你是否有很多問號？？？？怎么空白一片，沒有任何內(nèi)容？
不要著急，這就是我們接下來要解決的問題啦！
不過，為了能夠更好的解決問題，我們先對本小節(jié)內(nèi)容做個回顧：
（1）網(wǎng)頁文件的擴展名為:'.html' 或'.htm'
（2）創(chuàng)建網(wǎng)頁文件
（3）通過文件夾來管理創(chuàng)建的網(wǎng)頁文件
2.HTML 標(biāo)簽語法規(guī)范
本小節(jié)我們來解決前邊遇到的問題：
向空白的網(wǎng)頁文件內(nèi)添加內(nèi)容！Step1：選中‘index.html’文件，右擊，在彈出的快捷菜單中，選擇‘打開方式’--‘記事本’；
注意：若沒有記事本，可點擊“選擇其他應(yīng)用（C）”，查找記事本工具。
如下圖所示：Step2：打開 ’記事本‘，即可開始在記事本中編寫 HTML 標(biāo)簽。
但是，此時你發(fā)現(xiàn)了一個問題：
你好像還不會寫，連最基本的規(guī)范也不知道?。。。?！不要著急，這就告訴你！
書寫 HTML 標(biāo)簽時，有一定的規(guī)范要求：（1）所有的標(biāo)簽都包含在一對尖括號中，尖括號必須在英文狀態(tài)下輸入；
（2）標(biāo)簽一般情況下都是成對出現(xiàn)，這種情況稱為“雙標(biāo)簽”；
（3）第一個標(biāo)簽為：開始標(biāo)簽；第二個標(biāo)簽為：結(jié)束標(biāo)簽；
（4）必須要有結(jié)束標(biāo)簽，結(jié)束標(biāo)簽是一個斜杠：“/”；
如下圖所示：當(dāng)然，
HTML 中，也有單個標(biāo)簽的出現(xiàn)，這種情況稱為：“單標(biāo)簽”；如下圖所示：
注意：單標(biāo)簽，也是用’斜杠‘結(jié)束，并且與標(biāo)簽名 br 之間用一個空格進行分隔。
當(dāng)然，在 HTML 標(biāo)簽中，單標(biāo)簽非常少（在后面的課程中會重點講解），在這里有基本的了解即可。
本小節(jié)你需要掌握：
（1）HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，例如：<html>；
（2）HTML 標(biāo)簽通常成對出現(xiàn)，例如，<html>與</html>，我們稱之為雙標(biāo)簽，標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽；（3）有些特殊標(biāo)簽必須是單個標(biāo)簽（當(dāng)然這種情況比較少），例如， ，稱為單標(biāo)簽。
3.HTML 標(biāo)簽的關(guān)系
掌握了 HTML 標(biāo)簽的書寫規(guī)范，本小節(jié)我們繼續(xù)學(xué)習(xí)
標(biāo)簽的關(guān)系。
HTML 中，雙標(biāo)簽的關(guān)系可以分為兩類：
包含關(guān)系與并列關(guān)系。那么，
如何理解包含關(guān)系呢？如下圖所示：例如：上圖的<title>標(biāo)簽嵌套在<head>標(biāo)簽內(nèi)部，也就是<head>標(biāo)簽與<title>標(biāo)簽是包含關(guān)系，
包含關(guān)系也可稱為“父子關(guān)系”。下面這張圖能夠幫助你理解標(biāo)簽的包含關(guān)系：
那么，什么是并列關(guān)系？我們來看一個例子，如下圖所示：
我們可以發(fā)現(xiàn)
標(biāo)簽與標(biāo)簽位置并列，并不是從屬關(guān)系，像這種情況，我們稱之為“并列關(guān)系”可以將這種并列關(guān)系理解為“兄弟關(guān)系”，就像“熊大與熊二”。
理解了標(biāo)簽的關(guān)系后，我們通過一個練習(xí)題檢測一下你對本小節(jié)內(nèi)容的掌握情況：
互動專區(qū)轉(zhuǎn)動你的小腦袋，說出下列 HTML 中標(biāo)簽、標(biāo)簽、標(biāo)簽之間的關(guān)系。 <html> <head> </head> <body> </body> </html>不要著急點擊下一步，好好思考一下哦！！
答案解析：由于<head>標(biāo)簽與<body>標(biāo)簽都是嵌套在<html>標(biāo)簽內(nèi)部，所以說<html>標(biāo)簽與<head>標(biāo)簽、<body>標(biāo)簽是包含關(guān)系，而<head>標(biāo)簽與<body>標(biāo)簽的位置并列，所以是并列關(guān)系。
HTML整體結(jié)構(gòu)
HTML整體結(jié)構(gòu)
之前我們提到過，每個網(wǎng)頁的整體結(jié)構(gòu)基本上一致，也就是說每個網(wǎng)頁都會有一個基本的結(jié)構(gòu)標(biāo)簽，也稱之為骨架標(biāo)簽，所有的頁面內(nèi)容就是在這些基本標(biāo)簽上進行編寫。
我們來看一個網(wǎng)頁的整體結(jié)構(gòu)，如下所示：
<html> <head> <title>我的第一個網(wǎng)頁</title> </head> <body> 學(xué)習(xí)線上編程，就來博學(xué)谷。 </body> </html>通過上面的代碼，我們可以看到
<html>標(biāo)簽是最大的標(biāo)簽，它包含了其他所有的標(biāo)簽，所以也稱為：根標(biāo)簽。我們都知道，瀏覽器解析 HTML 可以獲取網(wǎng)頁。
那么，這些 HTML 標(biāo)簽分別在網(wǎng)頁整體結(jié)構(gòu)中代表了什么呢？<head>標(biāo)簽是頁面的頭部標(biāo)簽，代表網(wǎng)頁的頭部區(qū)域；如下圖標(biāo)記區(qū)域：
而<head>標(biāo)簽內(nèi)部包含了一個<title>標(biāo)簽。
<title>標(biāo)簽：表示頭部區(qū)域內(nèi)的網(wǎng)頁標(biāo)題或文檔標(biāo)題（HTML 網(wǎng)頁也可以稱之為 HTML 文檔），它可以賦予頁面一個屬于自己的網(wǎng)頁標(biāo)題。 如下圖標(biāo)記區(qū)域：
<body>標(biāo)簽：表示文檔的主體，其包含了文檔內(nèi)所有內(nèi)容，頁面內(nèi)容基本都置于body標(biāo)簽內(nèi)，也就是說，頁面中顯示的內(nèi)容都需要放在body標(biāo)簽內(nèi)。 如下圖標(biāo)記區(qū)域：
下面我們通過一個示例親自感受一下 HTML 整體結(jié)構(gòu)及標(biāo)簽在網(wǎng)頁中的呈現(xiàn)：
練習(xí)：創(chuàng)建我的第一個網(wǎng)頁步驟1：將以下代碼通過記事本工具寫到創(chuàng)建的“ index.html”文件中，并進行保存；
<html> <head> <title>我的第一個網(wǎng)頁</title> </head> <body> 學(xué)習(xí)線上編程，就來博學(xué)谷。 </body> </html> ?tep2：通過瀏覽器打開該文件，查看瀏覽器解析后的效果；
效果如下圖所示：
若出現(xiàn)了以上的效果，那么恭喜你，HTML 代碼完全正確，成功創(chuàng)建了第一個網(wǎng)頁!
通過該示例，我們應(yīng)該更加理解本小節(jié)所學(xué)習(xí)的內(nèi)容，其濃縮為一句話就是：
HTML 文檔的后綴名必須是以 .html 或 .htm 結(jié)尾，瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式呈現(xiàn)其內(nèi)容。下面，我們再通過一張圖，加深對 HTML 整體結(jié)構(gòu)標(biāo)簽的理解：
注意：（1）在<head>標(biāo)簽中，必須設(shè)置<title>標(biāo)簽；
（2）理解每個標(biāo)簽的作用，記住標(biāo)簽之間的層級關(guān)系；
當(dāng)然，為了能夠熟練掌握本小節(jié)的內(nèi)容，必備的練習(xí)是不可缺少的，所以一定要將對應(yīng)的代碼敲一敲！
第三關(guān)：網(wǎng)頁開發(fā)工具
1.常用網(wǎng)頁開發(fā)工具
在前面，我們通過記事本工具完成了自己的第一個網(wǎng)頁的編寫。
那么，
除記事本工具，是否有其他工具可用來編寫網(wǎng)頁呢？答案是：有的。對于開發(fā)者來說，一個好的開發(fā)工具往往能夠事半功倍，下面我們介紹常見的網(wǎng)頁開發(fā)工具。
如下圖：
從左上角開始，依次為：Dreamweaver、Sublime、WebStorm、HBuilder、VSCode( Visual Studio Code )；
看到這么多開發(fā)工具，是不是腦袋都要大了？不要擔(dān)心，我們只需要掌握一款實用性最高的工具即可?。ㄆ渌ぞ呖勺鳛榱私?，若有興趣可自行學(xué)習(xí)，基本使用方式類似，掌握一款其他的即可觸類旁通?。?br>
- 那，我們該選擇哪一款工具呢？
我們推薦掌握 VSCode（Visual Studio Code）工具，其在前端開發(fā)中使用比率非常高，成為廣大開發(fā)者工具庫中的必備神器。
公認(rèn)的優(yōu)勢，了解一下： （1）一款免費的開發(fā)工具，可隨意下載、 分發(fā)、商用等； （2）一款輕量級的編輯器，安裝包占用內(nèi)存小，啟動速度快，用戶體驗非常好； （3）擁有豐富的插件，覆蓋前端、后端代碼、框架的對應(yīng)插件，有助于提高研發(fā)效率； （4）提供遠程開發(fā)、代碼跟蹤、調(diào)試，實現(xiàn)項目的高效管理及協(xié)作開發(fā)；
這就是 VSCode 被稱為“必備神器”的原因，其更多的功能就等著你親自去探索啦！
2.VSCode下載安裝
接下來我們正式學(xué)習(xí)如何使用 VSCode 工具。
首先，我們需要下載安裝 VSCode，步驟如下：
點擊網(wǎng)址：https://code.visualstudio.com ，進入對應(yīng)的 VSCode 官網(wǎng)；根據(jù)電腦系統(tǒng)情況，在該網(wǎng)站中選擇合適的版本進行下載；如下圖所示：
下載完成，進入
VSCode 安裝流程（以 Windows 系統(tǒng)為例）：
（1）找到所下載的安裝程序，雙擊下圖應(yīng)用程序（2）打開安裝界面（如下圖），選擇安裝位置可根據(jù)自己的情況，將 VSCode 安裝到磁盤的任意目錄下。
（3）確定好安裝位置，單擊’下一步‘，按照下圖進行任務(wù)勾選；【說明】- 勾選【創(chuàng)建桌面快捷方式】 勾選此項，在電腦桌面出現(xiàn) VSCode 相應(yīng)圖標(biāo)；可雙擊直接啟動 VSCode，較為便捷；
- 勾選以下兩項： 【將“通過 code 打開“操作添加到 Windows 資源管理器文件上下文菜單 】 【將“通過 code 打開”操作添加到 Windows 資源管理器目錄上下文菜單 】
勾選上述兩個選項： 可在文件、目錄上點擊鼠標(biāo)右鍵，選擇打開方式：VScode ；
另外，為了方便網(wǎng)頁文件的管理，我們將網(wǎng)頁文件存放在同一文件夾中；若在該文件夾上點擊“右鍵”，在彈出的快捷菜單中，選擇使用 VSCode 打開，該文件夾中所有文件均會被 VSCode 打開，可直接進行編輯，非常方便。
- 不勾選此選項：【 將 code 注冊為受支持的文件類型的編輯器 】 若勾選，則默認(rèn)使用 VSCode 打開諸如 txt、py 等文本類型的文件；但一般情況下打開文本文件使用專門的文本工具，例如：記事本工具等。因此，建議不勾選該項。
- 勾選【添加到 PATH（重啟后生效）】 該選項默認(rèn)勾選，即不用配置環(huán)境變量，可直接使用。
（4）按要求勾選選項后，可直接單擊 ‘下一步’，出現(xiàn)如下界面，并點擊“安裝”按鈕；（5）開始進行安裝操作，進入“正在安裝”狀態(tài)；（6）安裝成功，啟動 VSCode；回到電腦的桌面，然后雙擊 VSCode 圖標(biāo)就可以啟動 VSCode 了。
啟動界面如下：
（7）安裝中文語言包啟動后，你會發(fā)現(xiàn) VSCode 的界面全部顯示英文；若想顯示中文，需要安裝中文語言包。
安裝過程如下圖所示：
按照上圖提示的步驟順序即可完成中文語言包的安裝。
注意：第3步，點擊'install'按鈕后，才可進行安裝。中文語言包安裝完成后，VSCode 界面的菜單則全部替換為中文，如下圖所示：
到此，VSCode 就全部安裝配置完成。
整個安裝過程比較簡單，只要你按照上述步驟操作，即可在自己的電腦中完成 VSCode 的安裝。希望大家都能夠?qū)嶋H操作，鞏固本部分的知識點。
VSCode 安裝完成，帶領(lǐng)大家體驗一下其強大之處！
3.使用VSCode開發(fā)網(wǎng)頁
小節(jié)我們學(xué)習(xí)
使用 VSCode 進行網(wǎng)頁開發(fā)。打開 VSCode，
新建網(wǎng)頁有兩種方式：（1）選擇“文件”菜單---“新建文件” ；
（2）選擇右側(cè)的‘歡迎使用’窗口中的'新建文件'；
如下圖所示：
兩種方式任選其一，均可完成網(wǎng)頁的新建，會出現(xiàn)如下文件：
注意： 此時只是創(chuàng)建了一個文件，還沒有對該文件進行保存。因此，寫代碼之前必須先保存該文件。
那么，如何保存新創(chuàng)建的文件呢？（1）選擇“文件”菜單中的“保存”命令；
（2）使用“Ctrl+S”快捷鍵進行保存；
此時，出現(xiàn)如下界面：
在此界面中，我們需要
完成三個步驟：（1）確定文件保存的位置：將文件保存到【桌面】下【MyWeb】文件夾中；
（2）確定網(wǎng)頁文件名稱：名稱建議使用小寫英文字母，但不要使用漢語拼音，且起的名字最好要有意義，看到網(wǎng)頁的名字即可了解該網(wǎng)頁內(nèi)容，也就是“見名知意” ，例如，“l(fā)ogin.html”就是登錄頁面；注意擴展名為".html"或".htm"；
（3）單擊‘保存’按鈕，完成新建文件的保存。最最最重要的時刻就要到啦！我們終于可以正式在文件中編寫代碼啦??！我們重新實現(xiàn)“我的第一個網(wǎng)頁”，還記得怎么寫嗎？復(fù)習(xí)一下：
<html> <head> <title>我的第一個網(wǎng)頁</title> </head> <body> 學(xué)習(xí)線上編程，就來博學(xué)谷。 </body> </html>將上述代碼寫到 VSCode 的 default.html 文件中，如下圖：
代碼已經(jīng)寫完，
該怎樣查看運行效果呢？如下圖所示：
在 VSCode 編輯器中，右擊“文件名 default.html”；在彈出的快捷菜單中，選擇“打開默認(rèn)瀏覽器”，即可打開瀏覽器查看網(wǎng)頁。
學(xué)習(xí)到這里，我相信你肯定會有一個疑問：
使用 VSCode 與記事本開發(fā)網(wǎng)頁有什么區(qū)別呢？區(qū)別就是：
使用 VSCode 開發(fā)網(wǎng)頁，開發(fā)效率要高很多。下面，咱們親自體驗一下：
再次新建一個網(wǎng)頁文件，將其保存。
保存之后，不要著急寫代碼，而是在英文輸入法狀態(tài)下，輸入一個嘆號(!)；輸入完成之后，會彈出一個提示框；
如下圖所示：
在提示框中，用鼠標(biāo)單擊第一個嘆號，神奇的事情發(fā)生啦?。?br>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> ?通過以上代碼可以發(fā)現(xiàn)，整體的 HTML 結(jié)構(gòu)骨架代碼已經(jīng)全部自動生成了，你不需要再一點一點的手敲了！是不是很簡單？而你下面要做什么呢？
只需要在 <title> 標(biāo)簽中輸入自己想要的網(wǎng)頁標(biāo)題，在 <body> 標(biāo)簽中輸入具體的內(nèi)容就可以了!
是不是非常的方便?。∥覀冊俳釉賲?，關(guān)于在 VSCode 中自動生成 HTML 骨架，說法正確的是【】？
- A. 在 VSCode 中輸入!號，然后按住 tab 鍵；
- B. 在 VSCode 中沒辦法自動生成 HTML 骨架；
- C. 在 VSCode 需要安裝一個插件后才能自動生成 HTML 骨架；
- D. 在 VSCode 中按 tab 鍵就可以自動生成 HTML 骨架；
第四關(guān)：DOCTYPE 與字符集
之前我們了解到，通過 VSCode 能夠快速生成整個 HTML 的骨架代碼，如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body>而我們自己手動編寫的代碼是這樣的：
<html> <head> <title>我的第一個網(wǎng)頁</title> </head> <body> 學(xué)習(xí)線上編程，就來博學(xué)谷。 </body> </html>細心的同學(xué)可能會發(fā)現(xiàn)：自動生成的代碼，與我們自己寫的代碼有一定的區(qū)別！
那這些多出的內(nèi)容，它們的作用是什么呢？本門課中我們先學(xué)習(xí)最重要的三點（其它內(nèi)容會在后面的課程中繼續(xù)講解）：
（1）標(biāo)簽（2）lang 語言（3）charset 字符集1.<!DOCTYPE>標(biāo)簽
<!DOCTYPE>：表示文檔類型聲明標(biāo)簽，位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔中顯示網(wǎng)頁的 HTML 版本。從初期的網(wǎng)絡(luò)誕生后，已經(jīng)陸續(xù)發(fā)布多個版本的 HTML，如下表格所示：
目前，市場主流使用的是 HTML5 版本，我們只需記住 HTML5 版本的表示方式即可！
那么，HTML5 版本如何聲明表示呢？如下所示：
?<!DOCTYPE html>編寫網(wǎng)頁時一定不要忘記將聲明寫在文檔最前邊，告訴瀏覽器該網(wǎng)頁是按照 HTML5 的標(biāo)準(zhǔn)編寫，是合法的。否則瀏覽器會按照自己的方式解析代碼，最終導(dǎo)致頁面無法正常打開。
同時書寫時需要注意：
DOCTYPE 標(biāo)簽必須全部大寫，并前置一個英文半角感嘆號!，不要寫錯了哦！
說明：通過 VSCode 能夠獲取 DOCTYPE 聲明語句，也就是說，VSCode 能夠自動生成市場主流顯示網(wǎng)頁的 HTML 版本，是不是又get到 VSCode 又一強大之處？
- 2.lang 語言
如下所示： <html lang="en">在 HTML 標(biāo)簽中多了一個 lang="en"，代表什么呢？lang：表示語言的意思( language )en：表示的是英文。整體的含義就是：
定義當(dāng)前文檔顯示的語言；此代碼中指定的是英文。那么，lang 除指定英文外，還可以指定哪些語言呢？ lang="zh-CN" :表示定義的語言為中文。當(dāng)然，其可以指定多種語言，目前來說，我們記住中文與英文即可。
如果 lang="en" 可以簡單的理解為當(dāng)前網(wǎng)頁為英文網(wǎng)頁，lang="zh-CN" 則表示當(dāng)前網(wǎng)頁為中文網(wǎng)頁。
其實對于網(wǎng)頁文檔來說，定義為en的文檔也可以顯示中文，定義為 zh-CN 的文檔也可以顯示英文。
那么，lang 屬性有什么作用呢？對瀏覽器的作用：提示與警示的作用。示例：將 lang 的值修改為：fr；fr 表示法文，也就是當(dāng)前網(wǎng)頁為法文網(wǎng)頁，但是當(dāng)前網(wǎng)頁中并沒有法文的內(nèi)容。
具體代碼如下所示：
<!DOCTYPE html> <html lang="fr"> <!--這里將lang的值修改成了fr--> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博學(xué)谷</title> </head> <body>線上學(xué)習(xí)，就來博學(xué)谷</body> </html>現(xiàn)在，用瀏覽器打開該網(wǎng)頁，查看具體的顯示效果。效果如下圖所示：
通過上圖可以看到，在瀏覽器的右上角給出一個提示框，單擊‘選項’按鈕給出一個提示，詢問是否‘翻譯成法語’。因為我們指定的 lang=fr，而當(dāng)前的網(wǎng)頁中沒有法語，所以會給出這樣的提示。
現(xiàn)在你可以自己嘗試一下，將 lang 的值修改成 fr，在瀏覽器中打開網(wǎng)頁，看一下是否會有如上的提示？
【注意】我們目前所做網(wǎng)站均為中文網(wǎng)站，因此，
建議將 lang 的值定義為：zh-CN。3.charset字符集
我們還有一個新發(fā)現(xiàn)，如下所示：
<meta charset="UTF-8" />
它代表什么意思呢？
charset：表示字符集。
UTF-8：表示字符集中的一種
那么，什么是字符集呢？字符集是多個字符的集合，以便計算機能夠識別和存儲各種文字。 網(wǎng)頁中有多種類型的字符，而我們需要將多種字符存儲到計算機中，就需要按照一定的方式來存儲這些字符。
charset的取值除了有 UTF-8 以外，還有很多的取值，例如：GB2312 (表示簡體中文)，BIG5（表示繁體中文），GBK（包含簡體中文與繁體中文）等。
目前，
使用最多的是 UTF-8，被稱之為‘萬國碼’，基本上包含了全世界所有國家需要用到的字符。
UTF-8 帶來的好處：從國外訪問國內(nèi)網(wǎng)站時，不會出現(xiàn)亂碼。
注意： <meta charset="UTF-8" />
這行代碼是必須要寫的代碼，若不寫，網(wǎng)頁有可能會出現(xiàn)亂碼的情況。同時要注意寫法，統(tǒng)一寫為：UTF-8，不要寫為：utf8 或 UTF8 等形式。
下面對本小節(jié)進行總結(jié)，幫助你鞏固鞏固：
<!DOCTYPE html>：表示文檔類型聲明標(biāo)簽，告訴瀏覽器這個網(wǎng)頁使用的是HTML5版本來顯示網(wǎng)頁。
<html lang="en">：告訴瀏覽器這是一個英文的網(wǎng)站，本頁面采取英文來顯示。
<meta charset="UTF-8" />：本行代碼必須要寫，采用UTF-8來保存文字，若不寫可能會出現(xiàn)亂碼。
作業(yè)題
作業(yè)：使用 VSCode 編輯器創(chuàng)建頁面
問題描述：使用 VSCode 編輯器，創(chuàng)建網(wǎng)頁框架代碼結(jié)構(gòu)，在此基礎(chǔ)上完成網(wǎng)頁內(nèi)容的填充，并通過瀏覽器預(yù)覽網(wǎng)頁效果。
過程分析：通過 VSCode 可以快速創(chuàng)建網(wǎng)頁框架代碼，具體過程是：通過 VSCode 創(chuàng)建一個 HTML 網(wǎng)頁文件，然后在英語輸入法狀態(tài)下，輸入一個嘆號（！）；輸入完成后，會出現(xiàn)一個提示框；在提示框中，用鼠標(biāo)右鍵第一個嘆號，即可創(chuàng)建好一個網(wǎng)頁的骨架代碼。最后，可根據(jù)個人意圖修改
<title>標(biāo)簽與
<body>標(biāo)簽的內(nèi)容，并通過瀏覽器查看實現(xiàn)效果。
實現(xiàn)框架：恭喜！你已經(jīng)完成了【 HTML 基本結(jié)構(gòu)】課程的學(xué)習(xí)，我們對本門課做一個簡單的總結(jié)，如下圖所示：
通過本課程的學(xué)習(xí)，我們掌握了 HTML 整體結(jié)構(gòu)，網(wǎng)頁開發(fā)的標(biāo)簽語法規(guī)范，使用網(wǎng)頁開發(fā)工具 VSCode 完成案例開發(fā)，并掌握了網(wǎng)頁開發(fā)的實用性技巧，其都屬于網(wǎng)頁開發(fā)的基本功能方面。
很多人可能會對基礎(chǔ)知識嗤之以鼻，但是，相信我扎實的基礎(chǔ)知識能夠讓你走的更快更遠，讓你少走彎路??！
我相信大家肯定都有了一定的收獲，好的開始是成功的一半，希望本門課程能夠為你后續(xù)的學(xué)習(xí)樹立信心。奮進吧，后浪！！
關(guān)鍵詞：基礎(chǔ),結(jié)構(gòu),基本,學(xué)習(xí),入門,教程
在線咨詢
