第一個HTML頁面如何寫?——零基礎自學網頁制作

把txt文件變成html網頁文件


如果您看過《HTML是什么?——零基礎自學網頁制作》(結尾處找“零基礎自學網頁制作”看全部目錄)這篇教程,請按照其中說明創建一個txt文件。具體過程如下:

step1:在您方便的磁盤中建立一個文件夾,命名為"零基礎自學網頁制作"。例如我在D盤中建立了"零基礎自學網頁制作"文件夾。

step2:在文件夾中創建"HTML框架.txt"文件。鼠標移動到空白處點擊右鍵選擇"文本文檔"。

命名為"html框架",如下圖所示。

如果您的電腦沒有顯示".txt"后綴的話,請做如下操作:點擊"工具",找到"文件夾選項"

菜單如下:點擊"查看選項"。

下拉滑條,找到"隱藏已知文件類型的擴展名"選項,將前面的對勾去掉。

step3:把"HTML框架"復制粘貼到"html框架.txt"文件中。HTML框架代碼如下:

<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>

代碼講解請參照《HTML是什么?——零基礎自學網頁制作》(結尾處找“零基礎自學網頁制作”看全部目錄)這篇教程中的講解。

粘貼后效果如下:使用CTRL+s組合鍵保存文件。

step4:復制"html框架.txt"文件,更名為"第一個網頁.txt"。原始的"html框架.txt"文件為以后備用。

如圖所示:

step5:把"第一個網頁.txt"的后綴名".txt"改為".html"。

首先將光標放在"第一個網頁.txt"文件上,點擊右鍵,選擇"重命名"。如圖:

選擇".txt"

更改為".html",敲擊回車鍵。這時會彈出一個對話框,如圖:

大膽的點擊"是"即可。

修改后文件是這樣的,如圖:因為我的默認瀏覽器是360,所以,".html"文件圖標顯示為360瀏覽器的圖標,顯示其他瀏覽器的圖標也沒有問題。

step6:將鼠標移動到"第一個網頁.html"文件上,單擊右鍵,選擇打開方式,如圖:

選擇任何一個瀏覽器打開即可,我使用的是火狐瀏覽器(Firefox),打開后如圖所示:空白一片。

點擊鍵盤F12鍵,看一下控制臺,如圖:查看器中已經顯示我們的代碼框架了。成功!

如果網頁是一道菜,那么,html框架我們可以理解為裝菜的白盤子,所以我們打開框架時,瀏覽器顯示一片白。下面我們為盤子中加些簡單的"菜"。

為html頁面添加標題與段落

首先我們為頁面添加"標題"

在添加標題前,我們來看一下html框架代碼中的內容,在<html></html>標簽中有<head></head>和<body></body>兩個兄弟標簽。

我們在頁面中看到的所有的內容都是添加到<body></body>標簽中間!

<head></head>標簽中的內容并不會顯示在頁面中。

那么如何添加"標題"呢?

標題在HTML中用<h></h>標簽表示。在<h></h>中間加入文字內容即可。如下所示:

<h>第一個頁面</h>

右鍵,使用"記事本"打開"第一個網頁.html"文件。如圖所示:如果您的"打開方式"中沒有"記事本"請點擊"選擇默認程序"

在"其他程序"中找到"記事本"。點擊"確定"。從此,"記事本"就一直存在于"打開方式"中了。

我們把這句代碼粘貼到<body></body>之間。如下所示:保存后使用瀏覽器打開。

<!DOCTYPE HTML><html><head> </head> <body> <h>第一個頁面</h> </body> </html>

然后,使用瀏覽器打開,如圖所示:標題出現在頁面中了。

下面,我們來添加段落內容。

段落在HTML中使用<p></p>標簽添加。代碼如下

<p>千里之行始于足下</p>

請各位自行將代碼添加到"第一個網頁.html"文件中吧!示例代碼如下:

<!DOCTYPE HTML>?

<html>?

<head> </head>?

<body>

?<h>第一個網頁</h>

<p>千里之行始于足下</p>

?</body>?

</html>

結果如圖所示:

通過這個練習,我們可以發現一個規律,在<body></body>中,子元素代碼的上下順序代表了它在頁面中顯示的排版順序。

這也簡單回答了代碼結構與排版的關系,html的標簽語句只是標記了它所承載的信息的屬性和版面位置。

基于這個特性,html被稱為超文本標記語言。

下一期我們具體討論頁面中文字編輯的技巧。

喜歡的小伙伴請加關注,有任何問題請給我留言,歡迎大家給與指正!感激不盡!

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,117評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,860評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,128評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,291評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,025評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,421評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,477評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,642評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,177評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,970評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,157評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,717評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,410評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,821評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,053評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,896評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,157評論 2 375

推薦閱讀更多精彩內容