常常聽(tīng)人們說(shuō)前端開發(fā)門檻低，技術(shù)實(shí)現(xiàn)相對(duì)簡(jiǎn)單。當(dāng)然這可能是誤傳，但也從側(cè)面印證了前端開發(fā)是非常適合零編程基礎(chǔ)同學(xué)入門的。零基礎(chǔ)的我也是基于對(duì)前端的淺薄認(rèn)知，一直學(xué)的斷斷續(xù)續(xù)，學(xué)了忘，忘了學(xué)；今天突然發(fā)奮，力爭(zhēng)讓零基礎(chǔ)的大牛，搞懂如何用HTML&CSS制作一個(gè)網(wǎng)頁(yè)。首先，HTML是什么？它的全稱為HyperTextMarkupLanguage，是一種超文本標(biāo)記語(yǔ)言，是網(wǎng)頁(yè)制作所必備的。網(wǎng)頁(yè)中的文字，圖片以及按鈕等元素。而CSS（Cascading Style Sheets）,則負(fù)責(zé)將以上內(nèi)容進(jìn)行美化，比如文字排版，圖片位置，字體顏色等設(shè)計(jì)層面的細(xì)節(jié)。通俗地來(lái)講，HTML是一座房子的框架，那么CSS就是房子的設(shè)計(jì)風(fēng)格及裝潢。好了，對(duì)基本的概念有一定了解后，我們來(lái)看看如何來(lái)寫屬于你自己的網(wǎng)頁(yè)。首先你可以下載一個(gè)visual studio code（下文稱vscode），下載鏈接：https://code.visualstudio.com/安裝好以后，我們可以在桌面右鍵新建一個(gè)文件夾，文件夾命名憑個(gè)人習(xí)慣命名即可，我這里命名為myproject。用來(lái)存儲(chǔ)網(wǎng)頁(yè)和CSS。接下來(lái)我們打開vscode，點(diǎn)擊左上角file-open folder，選擇剛剛建立的空白文件夾。打開新建的文件夾，我們還需要建立一個(gè)新的HTML文件，方法也很簡(jiǎn)單，只需在左側(cè)空白處右鍵，選擇“new file”，文件我們一般命名為index.html此時(shí)我們就來(lái)到了html的撰寫頁(yè)面，如有需要，你還可以通過(guò)ctrl配合+或—來(lái)進(jìn)行頁(yè)面的縮放。現(xiàn)在你就可以開始寫自己的代碼了，經(jīng)過(guò)簡(jiǎn)簡(jiǎn)單單的幾步，你已經(jīng)直面coding了。在正式寫下屬于你的第一行代碼以前，你還需先告訴瀏覽器你所寫網(wǎng)頁(yè)使用的HTML版本。我們以最新的HTML5示意來(lái)講，你只需要輸入“小于號(hào)”和“感嘆號(hào)”，后面接上DOCTYPE 空格 html “大于” ，這樣就完成了文件類型的宣告。HTML用各種“標(biāo)簽”來(lái)管理網(wǎng)頁(yè)里面的內(nèi)容，標(biāo)簽都是成對(duì)出現(xiàn)的。首先我們先來(lái)了解<html></html>標(biāo)簽：網(wǎng)頁(yè)的所有內(nèi)容都會(huì)被放在<html>的標(biāo)簽之中。<html> </html>開始標(biāo)簽 結(jié)束標(biāo)簽（會(huì)自動(dòng)產(chǎn)生）
<html>標(biāo)簽根據(jù)內(nèi)容性質(zhì)，又被分為兩個(gè)部分，一個(gè)為<head>頭部，頭部?jī)?nèi)容不會(huì)顯示在網(wǎng)頁(yè)，主要為一些后臺(tái)資料，比如文件的字符編碼，程序腳本等。<html> <head> </head> </html>
用戶看到的內(nèi)容則放在<body>的標(biāo)簽內(nèi)要你每次寫代碼都需重復(fù)以上步驟建立標(biāo)簽，會(huì)不會(huì)覺(jué)得有點(diǎn)過(guò)于繁瑣？好消息好消息，為回饋新老用戶，vscode現(xiàn)推出誠(chéng)意大禮包，你只需要輸入一個(gè)“感嘆號(hào)”，加上tab鍵，vscode就會(huì)自動(dòng)完成這些代碼。在空白文件中輸入"!"按"tab"鍵->自動(dòng)補(bǔ)全基礎(chǔ)結(jié)構(gòu)
自動(dòng)完成以上代碼后，你只需要根據(jù)自身的個(gè)性化需求，做些簡(jiǎn)單修改即可。比如，舉個(gè)例子，你要用中國(guó)大陸的文字，則除了網(wǎng)站語(yǔ)言以外，我們還經(jīng)常要修改的地方，就是標(biāo)題了這個(gè)titile，是顯示在瀏覽器標(biāo)簽的網(wǎng)站名稱如果你想看下自己所寫代碼實(shí)際的效果，，可以先在vscode界面ctrl+s進(jìn)行保存；然后回到桌面打開對(duì)應(yīng)文件夾，對(duì)著HTML網(wǎng)頁(yè)左鍵雙擊，
?就可以在瀏覽器的左上角看到你輸入的“title”了今天的文章就先到這吧，由于是面向零基礎(chǔ)的你；第一天能按照文章實(shí)踐完以上步驟，已經(jīng)打敗了99%零基礎(chǔ)的人，莫焦慮。下篇文章，我們將一起著重學(xué)習(xí)HTML常用的標(biāo)簽。
下期預(yù)告：
? 文本標(biāo)簽（標(biāo)題/段落/列表）
? 媒體標(biāo)簽（圖片/視頻）
? 超鏈接與按鈕
今日成就：已完成開發(fā)環(huán)境搭建！
閱讀原文：原文鏈接
該文章在 2025/7/18 10:17:53 編輯過(guò)
400 186 1886
