1.3 HTML語法基礎(chǔ)

HTML是一種通用的用于建立網(wǎng)頁文件的排版語言，使用這樣的語言代碼，可以將網(wǎng)頁的文字、圖片或數(shù)據(jù)等信息進(jìn)行分類、排版，最終呈現(xiàn)給瀏覽者。雖然現(xiàn)在有許多所見即所得的網(wǎng)頁制作工具，但是這些工具生成的代碼仍然是以HTML為基礎(chǔ)的，學(xué)習(xí)HTML代碼對(duì)設(shè)計(jì)網(wǎng)頁非常重要。

1.3.1 HTML簡介

HTML主要負(fù)責(zé)將網(wǎng)頁內(nèi)容進(jìn)行格式化，使內(nèi)容更具邏輯性。它通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。瀏覽器在閱讀網(wǎng)頁文件時(shí)，根據(jù)不同標(biāo)記符來解釋和顯示其標(biāo)記的內(nèi)容。HTML文檔屬于純文本文件，用HTML的語法規(guī)則建立的文檔可以運(yùn)行在不同操作系統(tǒng)的平臺(tái)上。

HTML最早源于SGML，它由Web的發(fā)明者Tim Berners-Lee和其同事Daniel W.Connolly于1990年創(chuàng)立。在互聯(lián)網(wǎng)發(fā)展的初期，互聯(lián)網(wǎng)由于沒有一種網(wǎng)頁呈現(xiàn)技術(shù)的標(biāo)準(zhǔn)，所以多家軟件公司就合力打造了HTML標(biāo)準(zhǔn)，其中最著名的就是HTML 4，這是一個(gè)具有跨時(shí)代意義的標(biāo)準(zhǔn)。HTML 4依然有缺陷和不足，人們?nèi)栽诓粩嗟馗倪M(jìn)它，使它更加具有可控制性和彈性，以適應(yīng)網(wǎng)絡(luò)上的應(yīng)用需求。2000年，W3C組織公布發(fā)行了XHTML 1.0版本。

XHTML 1.0是一種在HTML 4.0基礎(chǔ)上優(yōu)化和改進(jìn)的新語言，它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。不過XHTML并沒有成功，大多數(shù)的瀏覽器廠商認(rèn)為XHTML作為一個(gè)過渡化的標(biāo)準(zhǔn)并沒有太大必要，所以XHTML并沒有成為主流，而HTML 5便因此孕育而生。

HTML 5的前身名為Web Applications 1.0，由WHATWG在2004年提出，于2007年被W3C接納。W3C隨即成立了新的HTML工作團(tuán)隊(duì)，團(tuán)隊(duì)包括AOL、Apple、Google、IBM、Microsoft、Mozilla、Nokia、Opera以及其他數(shù)百個(gè)開發(fā)商。這個(gè)團(tuán)隊(duì)于2009年公布了第一份HTML 5正式草案，HTML 5將成為HTML和HTMLDOM的新標(biāo)準(zhǔn)。

1.3.2 HTML語法結(jié)構(gòu)

每個(gè)網(wǎng)頁都有其基本的結(jié)構(gòu)，包括HTML文檔的結(jié)構(gòu)、標(biāo)簽的格式等。HTML文檔包含HTML標(biāo)簽和純文本，它被Web瀏覽器讀取并解析后以網(wǎng)頁的形式顯示出來，所以HTML文檔又稱為網(wǎng)頁。

HTML語法主要由標(biāo)簽、屬性和元素組成，其語法結(jié)構(gòu)：

＜標(biāo)簽 屬性1="屬性值1"屬性2="屬性值2"…＞元素的內(nèi)容＜/標(biāo)簽＞

1．標(biāo)簽

標(biāo)簽（tag，也稱標(biāo)記）是用一對(duì)尖括號(hào)“＜”和“＞”括起來的單詞或單詞縮寫，它是HTML文檔的主要組成部分。每個(gè)標(biāo)簽都有特定的描述功能，HTML文檔就是通過不同功能的標(biāo)簽來控制Web頁面內(nèi)容的。

各種標(biāo)簽的效果差別很大，但總的表示形式卻大同小異，大多數(shù)都成對(duì)出現(xiàn)。在HTML中，通常標(biāo)簽都是由開始標(biāo)簽和結(jié)束標(biāo)簽組成的，開始標(biāo)簽用“＜標(biāo)簽＞”表示，結(jié)束標(biāo)簽用“＜/標(biāo)簽＞”表示。

例如，一級(jí)標(biāo)題標(biāo)簽＜h1＞表示：

＜h1＞網(wǎng)頁制作與制作＜/h1＞

需要注意以下兩點(diǎn)。

1）每個(gè)標(biāo)簽都要用“＜”（小于號(hào)）和“＞”（大于號(hào)）括起來，如＜p＞，＜img＞，以表示這是HTML代碼而非普通文本。注意，“＜”“＞”與標(biāo)簽名之間不能留有空格或其他字符。

2）標(biāo)簽也有不用＜/標(biāo)簽＞結(jié)尾的，稱為單標(biāo)簽。例如，換行標(biāo)簽＜br/＞

2．屬性

屬性在開始標(biāo)簽中指定，用來表示該標(biāo)簽的性質(zhì)和特性。通常都是以“屬性名="值"”的形式來表示，用空格隔開后，還可以指定多個(gè)屬性，并且在指定多個(gè)屬性時(shí)不用區(qū)分順序。

例如，一級(jí)標(biāo)題標(biāo)簽＜h1＞有屬性align，align表示文字的對(duì)齊方式，表示：

＜h1 align="left"＞學(xué)習(xí)網(wǎng)頁制作＜/h1＞

3．元素

元素指的是包含標(biāo)簽在內(nèi)的整體，元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。沒有內(nèi)容的HTML元素稱為空元素，空元素是在開始標(biāo)簽中關(guān)閉的。

例如，以下代碼片段所示：

＜h1＞學(xué)習(xí)網(wǎng)頁制作＜/h1＞ ＜!--該h1元素為有內(nèi)容的元素--＞

＜hr/＞ ＜!--該hr元素為空元素，在開始標(biāo)簽中關(guān)閉--＞

1.3.3 HTML語法規(guī)范

頁面的HTML代碼書寫必須符合HTML規(guī)范，這是用戶編寫擁有良好結(jié)構(gòu)文檔的基礎(chǔ)，這樣的文檔可以很好地工作于所有的瀏覽器，并且可以向后兼容。

1．標(biāo)簽的規(guī)范

1）標(biāo)簽分單標(biāo)簽和雙標(biāo)簽，雙標(biāo)簽往往是成對(duì)出現(xiàn)，所有標(biāo)簽（包括空標(biāo)簽）都必須關(guān)閉，如＜br/＞、＜img/＞、＜p＞…＜/p＞等。

2）標(biāo)簽名和屬性建議都用小寫字母。

3）多數(shù)HTML標(biāo)簽可以嵌套，但不允許交叉。

4）HTML文件一行可以寫多個(gè)標(biāo)簽，一個(gè)標(biāo)簽也可以分多行寫，但標(biāo)簽中的一個(gè)單詞不能分兩行寫。

5）HTML源文件中的換行、回車符和空格在顯示效果中是無效的。

2．屬性的規(guī)范

1）并不是所有的標(biāo)簽都有屬性，如換行標(biāo)簽就沒有。

2）屬性值都要用雙引號(hào)括起來。

3．代碼的縮進(jìn)

HTML代碼并不要求在書寫時(shí)縮進(jìn)，但為了文檔的結(jié)構(gòu)性和層次性，建議初學(xué)者使用標(biāo)記時(shí)首尾對(duì)齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格。

1.3.4 HTML文檔結(jié)構(gòu)

HTML文檔是一種純文本格式的文件，文檔的基本結(jié)構(gòu)：

1．HTML文檔標(biāo)簽＜html＞…＜/html＞

HTML文檔標(biāo)簽的格式：

＜html＞HTML文檔的內(nèi)容＜/html＞

＜html＞處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從＜html＞開始解釋，直到遇到＜/html＞為止。每個(gè)HTML文檔均以＜html＞開始，以＜/html＞結(jié)束。

2．HTML文檔頭標(biāo)簽＜head＞…＜/head＞

HTML文檔包括頭部（head）和主體（body）。HTML文檔頭標(biāo)簽的格式：

＜head＞頭部的內(nèi)容＜/head＞

文檔頭部內(nèi)容在開始標(biāo)簽＜html＞和結(jié)束標(biāo)簽＜/html＞之間定義，其內(nèi)容可以是標(biāo)題名或文本文件地址、創(chuàng)作信息等網(wǎng)頁信息說明。

3．文檔編碼

HTML文檔使用meta元素的charset屬性指定文檔編碼，格式如下：

＜meta charset="gb2312"/＞

為了能被瀏覽器正確解釋并通過W3C代碼校驗(yàn)，所有的HTML文檔都必須聲明它們所使用的編碼語言。文檔聲明的編碼應(yīng)該與實(shí)際的編碼一致，否則就會(huì)呈現(xiàn)為亂碼。對(duì)于中文網(wǎng)頁的設(shè)計(jì)者來說，用戶一般使用GB2312（簡體中文）。

4．HTML文檔主體標(biāo)簽＜body＞…＜/body＞

HTML文檔主體標(biāo)簽的格式：

主體位于頭部之后，以＜body＞為開始標(biāo)簽，＜/body＞為結(jié)束標(biāo)簽。它定義網(wǎng)頁上顯示的主要內(nèi)容與顯示格式，是整個(gè)網(wǎng)頁的核心，網(wǎng)頁中要真正顯示的內(nèi)容都包含在主體中。