不朽情缘如何多补血

書名： HTML+CSS+DIV網(wǎng)頁設(shè)計(jì)與布局（第2版）（微課版）
作者名：聶斌張明遙
本章字?jǐn)?shù)： 783字
更新時(shí)間： 2019-10-23 17:37:32

1.3 一個(gè)簡單的HTML實(shí)例

前面簡單介紹了HTML文件的概念和基本結(jié)構(gòu)，下面通過一個(gè)簡單的HTML實(shí)例來引導(dǎo)讀者學(xué)習(xí)HTML標(biāo)記，了解HTML文件的創(chuàng)建和運(yùn)行方式。

1.3.1 編寫HTML代碼

HTML文件對編寫工具的要求并不高，可以在Dreamweaver中實(shí)現(xiàn)，也可以在最簡單的文本編輯工具中實(shí)現(xiàn)。下面使用記事本編寫第一個(gè)HTML文件，具體的步驟如下。

（1）單擊“開始”|“程序”|“附件”|“記事本”菜單命令，打開記事本，如圖1.3所示。

圖1.3　空白的記事本

（2）在記事本中直接輸入如下內(nèi)容。

01 <HTML> 
02   <HEAD> 
03   <TITLE>一個(gè)簡單的 HTML 實(shí)例</TITLE> 
04   </HEAD> 
05   <BODY>
06   <H2 ALIGN="center">第一個(gè) HTML 文件</H2> 
07   <HR WIDTH="70%"> 
08   <P> 下面跟我進(jìn)入 HTML 的領(lǐng)域</P> 
09   <P> 來領(lǐng)略這個(gè)奇妙而多彩的世界！！</P> 
10   </BODY>
11 </HTML>

第6行用<H2>標(biāo)記設(shè)置字號顯示文字“第一個(gè)HTML文件”并居中；第7行顯示一條水平線，寬度為頁面寬度的70％；第8行與第9行顯示相應(yīng)的文字。

（3）輸入代碼以后，單擊“文件”|“保存”菜單命令，打開“另存為”對話框，如圖1.4所示。

圖1.4　保存代碼

（4）在“另存為”對話框右側(cè)設(shè)置文件保存的位置，這里設(shè)置為F:/HTML+CSS/源文件/01目錄（讀者也可以設(shè)置在其他路徑）。

（5）在“保存類型”下拉列表中設(shè)置文件的類型為“所有文件”，在“文件名”文本框中設(shè)置文件的名稱為1.1.html，然后單擊“保存”按鈕保存文件。

（6）關(guān)閉記事本程序，回到文件保存的目錄下，可以看到保存的文件圖標(biāo)，如圖1.5所示。

圖1.5　保存的HTML文件

1.3.2 運(yùn)行HTML文件查看效果

編寫好文件的源代碼并保存后，就可以通過IE瀏覽器來查看HTML文件的頁面效果了。雙擊文件的圖標(biāo)打開該文件，其效果如圖1.6所示。

圖1.6　實(shí)例運(yùn)行結(jié)果

在這段代碼中包括如下幾個(gè)元素。

? HTML的基本標(biāo)記：包括文件類型標(biāo)記<HTML>、文件頭標(biāo)記<HEAD>和文件主體標(biāo)記<BODY>。

? HTML的標(biāo)題：一般通過頁面標(biāo)題來區(qū)分不同的頁面，這里設(shè)置為“一個(gè)簡單的HTML實(shí)例”，需要使用<TITLE>標(biāo)記。

? HTML的頁面內(nèi)容：在頁面中插入了3種HTML元素，分別是一個(gè)二級標(biāo)題、一條水平線以及兩段文字。這3種元素使用的標(biāo)記不同，顯示的效果也不同，這在后面的章節(jié)中還將詳細(xì)介紹，這里不再贅述。

官术网_书友最值得收藏!

HTML+CSS+DIV網(wǎng)頁設(shè)計(jì)與布局（第2版）（微課版）

1.3 一個(gè)簡單的HTML實(shí)例

1.3.1 編寫HTML代碼

1.3.2 運(yùn)行HTML文件查看效果