溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用HTML寫一個最簡單的頁面

發(fā)布時間：2022-03-16 15:13:31 來源：億速云 閱讀：310 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下怎么用HTML寫一個最簡單的頁面的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

認(rèn)識HTML基本結(jié)構(gòu)

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

以上七行代碼是一個網(wǎng)頁文件的HTML代碼的基本結(jié)構(gòu)。

大家觀察一下可以發(fā)現(xiàn)一個規(guī)律，每一行的內(nèi)容都是寫在“<>”里面的。原因說來話長，先記住就行。每個寫在“<>”里面的內(nèi)容叫做“標(biāo)簽”。以后“標(biāo)簽”這個詞會經(jīng)常出現(xiàn)。

第一行<!DOCTYPE HTML>標(biāo)簽指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令（這句話可以暫時不必理解）。重要的是這句傲嬌的代碼只能存在在HTML代碼的第一行！

第二行<html>標(biāo)簽與第七行的</html>標(biāo)簽是一對，“<html>”叫做開始標(biāo)簽，“</html>”叫做結(jié)束標(biāo)簽。他們之間的區(qū)別在于結(jié)束標(biāo)簽比開始標(biāo)簽多一個“/”。這是HTML代碼的一個重要規(guī)律，以后我將要學(xué)到的大部分標(biāo)簽都是這樣的，可能瀏覽器有些強(qiáng)迫癥吧，如果沒有結(jié)束標(biāo)簽它會很不舒服，有可能會消極怠工而產(chǎn)生麻煩（不能正常顯示）。不過遺憾的是<!DOCTYPE HTML>太傲嬌，至今沒有另一半。<html> 與 </html> 標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)。

第三行與第四行組成一對，叫做“head”標(biāo)簽。顧名思義，這個“頭”標(biāo)簽里的內(nèi)容統(tǒng)領(lǐng)全局，比如控制布局與樣式的CSS代碼文件和添加互動功能的JavaScript代碼文件在這里添加或?qū)耄凰阉黜撁嬗玫年P(guān)鍵詞信息在這里添加；頁面信息的編碼方式也是由此指定；瀏覽器窗口的標(biāo)題也在這里顯示。

第五行與第六行組成一對，叫做“body”標(biāo)簽。用來顯示所有的頁面內(nèi)容信息。

畫個圖來表示一下這四個標(biāo)簽的層級關(guān)系（就是誰包含誰的意思，或者誰在誰的勢力范圍內(nèi)出現(xiàn)）：

怎么用HTML寫一個最簡單的頁面

工具：電腦，安裝一個瀏覽器（IE 火狐 谷歌瀏覽器都可以），確定“記事本”工具可用。

有了以上工具我們就可以寫了。

Step1 新建一個.txt文件。

操作如下：

（1）選擇合適的磁盤，比如D盤或F盤新建一個文件夾，命名為“網(wǎng)頁”。點(diǎn)擊進(jìn)入。

（2）在空白處點(diǎn)擊鼠標(biāo)右鍵新建一個文本文件，命名為“第一個頁面”。這時我們就有了一個“第一個頁面.txt”文件了。

如果你的電腦不顯示“.txt”這樣的文件后綴，可以在屏幕左上方尋找“查看”菜單，如圖2

怎么用HTML寫一個最簡單的頁面

邊學(xué)邊做網(wǎng)頁篇------初識HTML

圖 2

點(diǎn)擊后，出現(xiàn)如下菜單如圖3，點(diǎn)擊“選項”。

怎么用HTML寫一個最簡單的頁面

圖 3

點(diǎn)擊“查看”，去掉“隱藏已知文件類型的擴(kuò)展名”選項前的“對號”，如圖4所示。這時就能顯示或修改文件后綴了。

怎么用HTML寫一個最簡單的頁面

圖 4

Step2 添加內(nèi)容

（1）雙擊打開“第一個頁面.txt”文件，把HTML基本結(jié)構(gòu)共七行代碼輸入進(jìn)去。

（2）保存，關(guān)閉文件，在“第一個頁面.txt”文件上點(diǎn)擊鼠標(biāo)右鍵，選擇“重命名”，將“.txt”修改為“.html”。這時，系統(tǒng)會提示，如圖1，大膽點(diǎn)“是”。

怎么用HTML寫一個最簡單的頁面

圖 1

這時我們的文件就變成了html網(wǎng)頁文件了。

我們雙擊這個文件發(fā)現(xiàn)瀏覽器內(nèi)一片空白，這就好比我們在桌子上擺了個碟子，里面并沒有放美食。瀏覽器中的一片白就是空碟子的顏色，而HTML基本結(jié)構(gòu)就是這個碟子。

下面我們往碟子里加點(diǎn)東西。

Step3 添加內(nèi)容

（1）在“第一個頁面.html”文件上點(diǎn)擊鼠標(biāo)右鍵，選擇“打開方式”，選擇“記事本”，如果沒有“記事本”選項，請點(diǎn)擊“選擇其他應(yīng)用”，點(diǎn)擊選擇最下面的“更多應(yīng)用”，選擇“記事本”。下一次選擇“打開方式”時，“記事本”就會出現(xiàn)了。

（2）在<head></head>標(biāo)簽之間添加“<title>學(xué)習(xí)寫第一個網(wǎng)頁</title>”。在<body></body>之間添加“<h2>第一個網(wǎng)頁</h2>”；“<p>隨著學(xué)的內(nèi)容越來越多，網(wǎng)頁就會越來越漂亮了！</p>”完成如圖5

怎么用HTML寫一個最簡單的頁面

邊學(xué)邊做網(wǎng)頁篇------初識HTML

圖 5

（3）保存，關(guān)閉，雙擊打開！效果如圖6

怎么用HTML寫一個最簡單的頁面

以上就是“怎么用HTML寫一個最簡單的頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手