前言
出于對(duì)網(wǎng)站的一些突然的興趣，我開(kāi)始了解網(wǎng)頁(yè)是如何被設(shè)計(jì)出來(lái)的。
作者水平有限，如有問(wèn)題，歡迎指出。
一. 對(duì)網(wǎng)頁(yè)設(shè)計(jì)的基本了解
1. 網(wǎng)站
1）一個(gè)網(wǎng)站由若干個(gè)網(wǎng)頁(yè)構(gòu)成，這些網(wǎng)頁(yè)是用超級(jí)鏈接有邏輯地聯(lián)系起來(lái)的。
2）網(wǎng)站由網(wǎng)址來(lái)識(shí)別和存取。
3）網(wǎng)頁(yè)需要上傳到網(wǎng)絡(luò)空間中，才能供瀏覽者訪問(wèn)網(wǎng)站中的內(nèi)容。
即，一個(gè)網(wǎng)站需要有域名（網(wǎng)址）、網(wǎng)頁(yè)、網(wǎng)絡(luò)空間三部分。
2. 網(wǎng)頁(yè)編輯工具
1）語(yǔ)言
我們可以使用HTML來(lái)編寫(xiě)網(wǎng)頁(yè)，HTML文件就是增加了標(biāo)記的普通文本文件。
可以簡(jiǎn)單的使用記事本來(lái)編寫(xiě)一個(gè)網(wǎng)頁(yè)，只需將文件后綴名該為html，然后用瀏覽器打開(kāi)。
現(xiàn)在編寫(xiě)網(wǎng)頁(yè)的語(yǔ)言其實(shí)由三部分構(gòu)成：HTML,CSS,JavaScript。
1）HTML：早期編寫(xiě)網(wǎng)站的語(yǔ)言。
2）CSS：負(fù)責(zé)網(wǎng)站內(nèi)容的表現(xiàn)形式。是在HTML原來(lái)的功能中分離出來(lái)的，這種分離可以使維護(hù)站點(diǎn)外觀更容易，也讓文檔代碼更簡(jiǎn)練，網(wǎng)頁(yè)加載快。
3）JavaScript：負(fù)責(zé)動(dòng)態(tài)部分。 使網(wǎng)頁(yè)更加生動(dòng)活潑，增加和用戶互動(dòng)。
2）軟件
前面已經(jīng)講到，可以簡(jiǎn)單地使用記事本來(lái)編輯網(wǎng)頁(yè)。
這里在提出兩款編輯軟件：EditPlus，Dreamweaver。它們的能力是遞增的。
EditPlus:
EditPlus相比記事本的優(yōu)點(diǎn)是，可以帶有html語(yǔ)言的語(yǔ)法高亮，而且可以在這個(gè)編輯頁(yè)面中直接預(yù)覽網(wǎng)頁(yè)（點(diǎn)擊左上角部分的小地球圖標(biāo)）。
二. 第一個(gè)網(wǎng)頁(yè)
前面已經(jīng)提到，html語(yǔ)言文件就是增加了標(biāo)記的普通文本。
那么首先，我們就要了解標(biāo)記的作用：
一些簡(jiǎn)單的標(biāo)記，可以讓文本在網(wǎng)頁(yè)中以另一種形式呈現(xiàn)出來(lái)。
1. 實(shí)操——用記事本寫(xiě)個(gè)樸素的網(wǎng)頁(yè)
簡(jiǎn)單起見(jiàn)，接下來(lái)就使用記事本來(lái)編寫(xiě)我們的網(wǎng)頁(yè)。
首先，新建一個(gè)文本文件（txt），給它起個(gè)隨便的名字。
然后用記事本打開(kāi)它，輸入以上內(nèi)容，記得保存。
重命名文件，將文件后綴名改為html。
接著選擇打開(kāi)方式為某個(gè)瀏覽器（系統(tǒng)默認(rèn)的瀏覽器就可以），就可以顯示出我們剛剛編寫(xiě)的網(wǎng)頁(yè)啦！
是不是感覺(jué)樸素地有點(diǎn)過(guò)頭了？沒(méi)關(guān)系，第一次嘛。
2. 代碼講解
<html>
<body>
這是我們第一個(gè)網(wǎng)頁(yè)的內(nèi)容哈。
</body>
</html>
這里我們用到了兩個(gè)基本的標(biāo)簽：
<html>和<body>。
其中<html>標(biāo)志著我們html文件的開(kāi)始，<body>則表示正文內(nèi)容的開(kāi)始。而</html>和<body>分別代表著對(duì)應(yīng)部分的結(jié)束。<body>和</body>之間的一行文本，則是我們要展現(xiàn)的內(nèi)容。
（是不是有點(diǎn)明白為什么”html是增加了標(biāo)記的普通文本了”？）
3. 更豐富一點(diǎn)
增加一些其它的標(biāo)簽，讓我們的網(wǎng)頁(yè)更加生動(dòng)一點(diǎn)。
<!doctype html>
<html>
<title>第一個(gè)網(wǎng)頁(yè)</title>
<body
background = "宇宙.jpeg"
text = "#00ff33"
leftmargin = "300">
<h1>這是我們的第一個(gè)網(wǎng)頁(yè)！</h1>
<p>可以簡(jiǎn)單留作一個(gè)紀(jì)念。</p>
<p>但我們的征途，是星辰大海！</p>
</body>
</html>
| 標(biāo)簽 | 功能 |
|---|---|
| < !doctype html > | 標(biāo)識(shí)文件的語(yǔ)言標(biāo)準(zhǔn)，這里指的是html5 |
| < title > | 網(wǎng)頁(yè)的標(biāo)題，即瀏覽器中頁(yè)面的名字 |
| < h1 > | 一級(jí)標(biāo)題 |
| < p > | 一個(gè)段落的開(kāi)始 |
注意：標(biāo)簽的括號(hào)和字母之間是沒(méi)有空格的，我這里是因?yàn)椴患涌崭耧@示不出來(lái)。
在
<body>標(biāo)記中，還可以控制一些全局的呈現(xiàn)效果：
| 標(biāo)識(shí)符 | 控制內(nèi)容 |
|---|---|
| background | 背景圖片（需要在html文件相同目錄下，加入相應(yīng)的圖片文件） |
| text | 文本內(nèi)容的顏色 |
| leftmargin | 兩邊間距大小 |
下面是新的網(wǎng)頁(yè)：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-423101.html
總結(jié)
??我們的第一個(gè)網(wǎng)頁(yè)講到這里就講完啦。
??那博主在這里求個(gè)三連不過(guò)分吧？文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-423101.html
到了這里，關(guān)于【W(wǎng)eb前端】怎樣用記事本寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)-html的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![WIN11右鍵打開(kāi)方式?jīng)]有記事本，記事本無(wú)法使用問(wèn)題](https://imgs.yssmx.com/Uploads/2024/02/440274-1.png)
