久久久久久国产精品三级,体验区辣妞范1000部,xxxxxxxxx日本

HTML 21 天入門(mén)：入門(mén)準(zhǔn)備

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年10月19日 22:9 本文熱度 13

HTML 基本介紹

什么是 HTML

HTML 全稱(chēng)為 Hyper Text Markup Language，翻譯過(guò)來(lái)就是超文本標(biāo)記語(yǔ)言。

這個(gè)名稱(chēng)拆開(kāi)來(lái)看，分成超文本和標(biāo)記語(yǔ)言兩部分。

標(biāo)記語(yǔ)言，說(shuō)明它并不是一門(mén)編程語(yǔ)言。

而超文本，從字面意思來(lái)理解，是超越文本的意思。

文字，寫(xiě)在紙上成書(shū)，展示在電腦里稱(chēng)為文本。超文本，指比文字更豐富的表達(dá)形式，直接理解成超越了文本。比如，現(xiàn)在很常見(jiàn)的圖形，音頻，視頻。

現(xiàn)在這些東西已經(jīng)是司空見(jiàn)慣，而在互聯(lián)網(wǎng)開(kāi)始之初，受限于網(wǎng)絡(luò)傳輸能力，文字才是信息傳遞的主要載體，而 HTML 的橫空出世，徹底打破了只有文字的時(shí)代。現(xiàn)在我們看到的精彩紛呈的網(wǎng)頁(yè)呈現(xiàn)，都是從 HTML 開(kāi)始的。

如何創(chuàng)建 HTML 文檔

使用 HTML 編寫(xiě)的文檔，稱(chēng)為網(wǎng)頁(yè)文件，通常命名為.html 或.htm，這兩種后綴名沒(méi)有區(qū)別。

任意文本編輯器都可以拿來(lái)編寫(xiě)網(wǎng)頁(yè)文件，比如 windows 下的記事本(notepad)。當(dāng)然，現(xiàn)在已經(jīng)有了非常強(qiáng)大的 IDE （Integrated Development Environment），也就是集成開(kāi)發(fā)環(huán)境，比如 VSCode，它提供了很多輔助功能，用以幫助我們提高工作效率。

作為初學(xué)者，建議多敲代碼，少使用聯(lián)想和補(bǔ)齊，就更不要說(shuō)使用 AI 之類(lèi)的。這些功能可以在學(xué)成之后幫助我們提高工作效率。

HTML 要在哪里運(yùn)行

創(chuàng)建好的 HTML 網(wǎng)頁(yè)，可以通過(guò)瀏覽器訪(fǎng)問(wèn)，可以是電腦上的，也可以是手機(jī)，平板等其它設(shè)備上的。

對(duì)于存儲(chǔ)在本地磁盤(pán)里的網(wǎng)頁(yè)，也可以通過(guò)磁盤(pán)路徑訪(fǎng)問(wèn)，也就是類(lèi)似 C://HTML/Default.html 這種形式。這種稱(chēng)為本地運(yùn)行。

而對(duì)于在互聯(lián)網(wǎng)上訪(fǎng)問(wèn)的網(wǎng)頁(yè)，是基于網(wǎng)址的，比如https://baidu.com，是一個(gè)網(wǎng)址，這個(gè)網(wǎng)址背后的網(wǎng)頁(yè)，托管運(yùn)行在互聯(lián)網(wǎng)某個(gè)我們不知道的機(jī)器上，這樣的機(jī)器我們稱(chēng)為服務(wù)器，這種訪(fǎng)問(wèn)通過(guò)網(wǎng)址訪(fǎng)問(wèn)的網(wǎng)頁(yè)，就是服務(wù)器運(yùn)行的。

以前在學(xué)習(xí) HTML 時(shí)，由于一系列的限制，大多采用本地運(yùn)行的方式。但隨著工具的革新，我們有了更方便的方式。在隨后的章節(jié)里，會(huì)講述如何使用插件幫助我們?cè)诒镜啬M服務(wù)器運(yùn)行網(wǎng)頁(yè)，這樣就能得到一個(gè)即時(shí)刷新的運(yùn)行環(huán)境，更加方便我們的學(xué)習(xí)。

開(kāi)發(fā)環(huán)境準(zhǔn)備

相信大家對(duì) HTML 已經(jīng)有了一個(gè)初步的認(rèn)識(shí)，對(duì)于開(kāi)發(fā)環(huán)境，我們只需要編輯器和瀏覽器。

編輯器用于編寫(xiě)網(wǎng)頁(yè)，瀏覽器用于運(yùn)行網(wǎng)頁(yè)。

編輯器

互聯(lián)網(wǎng)上的工具千千萬(wàn)，這里就直接推薦使用目前最流行的 VSCode 進(jìn)行學(xué)習(xí)，能無(wú)縫接軌后續(xù)的深入學(xué)習(xí)。

當(dāng)然如果不想使用 VSCode，可以使用相對(duì)比較輕便的編輯器 Nodepad++或其它任何你喜歡的文本編輯器。

?? 本教程中所有的示例都使用 VSCode 進(jìn)行。

Live Server 插件

使用 VS Code 的好處，是它有著非常豐富的插件，這些插件方便我們的日常工作。

雖然在學(xué)習(xí)階段并不推薦使用，但有一個(gè)插件，可以幫助我們更專(zhuān)注于學(xué)習(xí)，它就是 Live Server。

安裝“Live Server”插件

?

在 VS Code 的擴(kuò)展里，如下圖，搜索“Live Server”，找到對(duì)應(yīng)的插件，點(diǎn)擊“安裝”按鈕，安裝之后，便如下圖。

安裝完這個(gè)插件之后，暫時(shí)不需要做什么，在后面會(huì)介紹如何使用。

瀏覽器

使用主流的瀏覽器即可，比如 Chrome, FireFox, Edge 等等。

當(dāng)然這兩樣?xùn)|西，都需要運(yùn)行在電腦上，所以首先要準(zhǔn)備一臺(tái)電腦。

對(duì)于學(xué)習(xí)來(lái)說(shuō)，配置不需要高，操作系統(tǒng)也沒(méi)有限制。你熟悉哪個(gè)用哪個(gè)。

?? 本教程中所有的 HTML 頁(yè)面都編寫(xiě)運(yùn)行在 Windows 操作系統(tǒng)上。

我的第一個(gè)頁(yè)面：Hello World

好了，現(xiàn)在我們可以開(kāi)始試著運(yùn)行一下我的第一個(gè)頁(yè)面了。放心，只是運(yùn)行，暫時(shí)不需要理解。

在開(kāi)始前，咱們先在電腦上建立一個(gè)專(zhuān)門(mén)的目錄來(lái)存放我們的頁(yè)面，比如說(shuō) C 盤(pán)根目錄下，目錄名稱(chēng)為html-learning

?? 本教程中所有的 HTML 頁(yè)面運(yùn)行都將在該目錄下展示。

打開(kāi) VSCode，在文件 -> 打開(kāi)目錄定位到剛才創(chuàng)建的目錄。
新建一個(gè)新文檔，命名成 1.html。

拷貝下面代碼到 1.html。

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>我的第一個(gè)頁(yè)面</title>   </head>    <body>     Hello World   </body> </html>

還記得剛才咱們安裝的 Live Server 插件嗎，現(xiàn)在該使用了。在 VS Code 右下角，有 Go Live 圖標(biāo)，點(diǎn)擊一下。
看到如下，則表明起動(dòng)成功。
打開(kāi)瀏覽器，在地址里輸入地址 http://localhost:5500/。然后在頁(yè)面顯示里點(diǎn)擊 1.html，看到如下截圖顯示，說(shuō)明咱們就成功啦。

本節(jié)內(nèi)容結(jié)束。恭喜。

總結(jié)

?? HTML 全稱(chēng)為 HyperText Markup Language，是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。
?? HTML 開(kāi)發(fā)使用普通的文本編輯器即可，推薦目前最流行的 VSCode。
?? HTML 運(yùn)行在瀏覽器里，使用 VS Code 插件 Live Server 可以模擬生成本地服務(wù)器運(yùn)行本地的頁(yè)面。

該文章在 2024/10/22 12:41:35 編輯過(guò)

關(guān)鍵字查詢(xún)

html

相關(guān)文章

正在查詢(xún)...