- HTML+CSS網(wǎng)站開(kāi)發(fā)兵書
- 高洪濤編著
- 1306字
- 2019-01-01 07:01:20
2.1 HTML簡(jiǎn)介
HTML所代表的含義是超文本標(biāo)記語(yǔ)言,它是全球廣域網(wǎng)上描述網(wǎng)頁(yè)內(nèi)容和外觀的標(biāo)準(zhǔn)。HTML包含了一對(duì)打開(kāi)和關(guān)閉的標(biāo)記,其中有屬性和值。標(biāo)記描述了每個(gè)在網(wǎng)頁(yè)上的組件,如文本段落、表格、或圖像等,下面我們來(lái)看一下HTML的基本結(jié)構(gòu)。
2.1.1 HTML的基本結(jié)構(gòu)
HTML文件包括文件頭(head)和文件體(body)兩部分。在文件頭里,主要是對(duì)這個(gè)HTML文件進(jìn)行一些必要的定義,可以省略不寫。文件體中的內(nèi)容才是真正要顯示的各種文件信息。
一個(gè)HTML文件中包含各種HTML元素,如圖片、段落、表格等。這些HTML元素在頁(yè)面中需要使用標(biāo)記來(lái)分隔,因此也可以說(shuō)HTML文件就是由各種HTML元素和標(biāo)記組成的。
一般情況下,HTML文件的結(jié)構(gòu)如下。
<html> HTML文件的開(kāi)始標(biāo)記,表示這是一個(gè)HTML文件 <head> 文件頭的開(kāi)始標(biāo)記,這對(duì)標(biāo)記之間的是頭部信息 頭部信息 文件頭的內(nèi)容,也叫做文件的頭部信息 </head> 文件頭的結(jié)束標(biāo)記 <title>標(biāo)題名稱</title> 文檔的標(biāo)題 <body> 文件的主體部分,是文件真正要顯示的文件信息 </body> 文件體結(jié)束標(biāo)記 </html> HTML文件的結(jié)束標(biāo)記
由這段HTML結(jié)構(gòu)代碼可以看出,<html>標(biāo)記在最外層,在這對(duì)標(biāo)記之內(nèi)的就是HTML文件的全部?jī)?nèi)容。
提示:有些頁(yè)面中會(huì)省略<html>標(biāo)記,這是因?yàn)镠TML或HTM文件被Web瀏覽器默認(rèn)為是HTML文件。另外,當(dāng)HTML文件中不需要頭部信息的時(shí)候,可以省略文件頭標(biāo)記。而<body>標(biāo)記一般情況不省略,它表示正文內(nèi)容的開(kāi)始。
2.1.2 HTML的基本元素
在2.1.1節(jié)中,HTML文件結(jié)構(gòu)中出現(xiàn)了四個(gè)HTML元素,分別為html、head、title和body。一個(gè)完整的HTML文件應(yīng)該要包含這四個(gè)基本元素,下面分別介紹這四個(gè)基本元素的含義和用法。
1.html元素
html元素用于聲明該文檔是一個(gè)HTML文檔。從理論上來(lái)說(shuō),任何一個(gè)HTML文檔的第一行都應(yīng)該是<html>標(biāo)簽,標(biāo)志著HTML文檔開(kāi)始;最后一行應(yīng)該是</html>結(jié)束標(biāo)簽,標(biāo)志著HTML文檔結(jié)束。
提示:為什么說(shuō)是“理論上”的呢,因?yàn)楝F(xiàn)在的瀏覽器的糾錯(cuò)功能實(shí)在是太強(qiáng)了,就算HTML文檔里沒(méi)有HTML元素,它們一樣可以把擴(kuò)展名為htm或html的文件當(dāng)作HTML文檔來(lái)讀取并顯示。盡管如此,還是建議讀者都使用html元素,讓自己寫出來(lái)的文檔規(guī)范化,是百利而無(wú)一弊的事情。
html元素都包含兩個(gè)部分,一部分是標(biāo)頭部分,用于描述HTML文檔,不在瀏覽器中直接顯示;另一部分是正文部分,該部分的內(nèi)容除標(biāo)簽與注釋之外,都會(huì)在瀏覽器中直接顯示出來(lái)。
標(biāo)頭部分是用“<head></head>”標(biāo)簽標(biāo)識(shí)的部分,正文部分是用“<body></body>”標(biāo)簽標(biāo)識(shí)的部分。下面將分別介紹這兩個(gè)HTML元素。
2.head元素
head元素用于標(biāo)記HTML文檔的標(biāo)頭部分,標(biāo)頭部分可以包含文檔的標(biāo)題、作者、參考信息等內(nèi)容,但一般來(lái)說(shuō),多數(shù)HTML文件只在標(biāo)頭部分包含了標(biāo)題信息。
在標(biāo)頭部分里除了可以放置標(biāo)題、作者、參考信息之外,還可以放置如腳本、文檔樣式都不需要直接在瀏覽器里輸出的所有信息。這些信息在后繼的章節(jié)里將會(huì)詳細(xì)介紹。
3.title元素
title元素用于標(biāo)記HTML文檔的標(biāo)題,其標(biāo)注內(nèi)容會(huì)在瀏覽器的標(biāo)題欄里顯示出來(lái)。雖然在一個(gè)HTML文檔里,可以省略標(biāo)題標(biāo)簽,但是這個(gè)標(biāo)題常用來(lái)對(duì)文檔進(jìn)行索引和參考,因此還是建議每個(gè)網(wǎng)頁(yè)編寫者都不要省略該元素,并且標(biāo)題越細(xì)致越好。
“<title></title>”標(biāo)簽應(yīng)該要放置在“<head></head>”標(biāo)簽之內(nèi)。
4.body元素
body元素與head元素是并列關(guān)系,都應(yīng)該放在“<html></html>”標(biāo)簽內(nèi)。“<body></body>”標(biāo)簽不應(yīng)該放在“<head></head>”標(biāo)簽內(nèi),“<head></head>”標(biāo)簽也不應(yīng)該放在“<body></body>”標(biāo)簽內(nèi)。body元素包含的是正文部分,當(dāng)瀏覽器查看HTML文檔時(shí),也只會(huì)顯示正文部分的內(nèi)容,后繼章節(jié)里學(xué)到的其他HTML元素也都是放在“<body></body>”標(biāo)簽內(nèi)的。
- 網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- 中文版Flash CC完全自學(xué)教程
- Vue.js從入門到項(xiàng)目實(shí)踐(超值版)
- 網(wǎng)頁(yè)設(shè)計(jì)與制作:HTML+CSS+JavaScript標(biāo)準(zhǔn)教程
- HTML5+CSS3網(wǎng)頁(yè)制作基礎(chǔ)培訓(xùn)教程
- 網(wǎng)頁(yè)美工
- JSP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)案例指導(dǎo)
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)視頻教程
- 淘寶店鋪?lái)?yè)面設(shè)計(jì)與裝修實(shí)戰(zhàn)教程
- 秩序之美:網(wǎng)頁(yè)中的網(wǎng)格設(shè)計(jì)
- HTML+CSS+JavaScript網(wǎng)頁(yè)制作(第2版)
- 在實(shí)戰(zhàn)中成長(zhǎng):JSP開(kāi)發(fā)之路
- Web程序設(shè)計(jì)
- 精通網(wǎng)站建設(shè):100%全能建站密碼
- Dreamweaver CS5網(wǎng)頁(yè)制作