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