HTML文檔介紹-HTML語言的功能

摘要

如果你是剛接觸網(wǎng)頁開發(fā)的新手，或者想弄明白“我們每天刷的網(wǎng)頁到底是怎么來的”，那你一定繞不開HTML。簡單說，HTML是構(gòu)建網(wǎng)頁的“骨架”——沒有它，再華麗的設(shè)計、再復(fù)雜的交互都無從談起。這篇文章會從HTML的基本概念講起，帶你看懂HTML文檔的結(jié)構(gòu)，拆解它的核心功能，甚至教你寫一個最簡單的網(wǎng)頁。如果你曾被“代碼恐懼癥”勸退，別擔(dān)心，HTML其實比你想象的更“接地氣”。

一、先搞懂：HTML到底是什么？

1.1 不是“編程語言”，是“標(biāo)記語言”

很多人聽到“HTML”就覺得是“寫代碼”，其實嚴(yán)格來說，HTML（HyperText Markup Language，超文本標(biāo)記語言）不是編程語言（比如Python、Java那種能寫邏輯的），而是標(biāo)記語言。

打個比方：如果把網(wǎng)頁比作一棟房子，HTML就是“承重墻”“橫梁”“房間分區(qū)”這些基礎(chǔ)結(jié)構(gòu)；CSS（層疊樣式表）是“裝修風(fēng)格”（顏色、字體、布局）；JavaScript是“家電家具”（讓房子動起來，比如開門燈亮、空調(diào)調(diào)溫）。沒有HTML這個“骨架”，CSS和JS就成了無依無靠的“空中樓閣”。

1.2 為什么學(xué)網(wǎng)頁開發(fā)必須先學(xué)HTML？

你可能會問：“現(xiàn)在不是有很多‘無代碼工具’嗎？為什么還要學(xué)HTML？”

說實話，無代碼工具確實能快速做出網(wǎng)頁，但就像開車需要懂交通規(guī)則一樣，懂HTML能幫你“看透”網(wǎng)頁的本質(zhì)。比如：為什么有的網(wǎng)頁在手機上顯示錯亂？為什么搜索引擎搜不到你的文章？很多問題的根源都在HTML結(jié)構(gòu)上。而且，所有前端框架（Vue、React、Angular）的底層，最終都會被轉(zhuǎn)換成HTML渲染到瀏覽器——不學(xué)HTML，后面的路會越走越窄。

二、HTML文檔：網(wǎng)頁的“設(shè)計圖紙”

2.1 一個完整的HTML文檔長什么樣？

任何網(wǎng)頁，本質(zhì)上都是一個以.html為后綴的文本文件。打開它，你會看到一堆用尖括號<>包起來的“標(biāo)簽”，這些標(biāo)簽就是HTML的“積木”。

舉個最簡單的例子——你的第一個網(wǎng)頁（可以復(fù)制到記事本，保存為index.html，然后用瀏覽器打開試試）：

html

你好，HTML！

這是我用HTML寫的第一行文字。

2.2 核心結(jié)構(gòu)：3個“必看”部分

從上面的例子能看出，HTML文檔的結(jié)構(gòu)很清晰，就像寫作文分“開頭-正文-結(jié)尾”，HTML也有3個核心部分：

：告訴瀏覽器“我是HTML5文檔”，必須寫在第一行（別問為什么，這是規(guī)矩）。

標(biāo)簽：整個網(wǎng)頁的“根”，所有內(nèi)容都要包在里面，lang="zh-CN"是給搜索引擎看的（告訴它“這是中文頁面”，有助于SEO）。

和：是“幕后工作區(qū)”（放標(biāo)題、編碼、適配設(shè)置等），是“舞臺”（放用戶能看到的所有內(nèi)容）。

三、HTML語言的核心功能：6大能力支撐網(wǎng)頁運行

3.1 功能1：語義化標(biāo)簽——讓網(wǎng)頁“會說話”

什么是語義化？ 簡單說，就是用“有意義的標(biāo)簽”代替無意義的