1、第2章 常用HTML標(biāo)記和格式,通過第1章的學(xué)習(xí)，對HTML有了一定的認(rèn)識。HTML由標(biāo)記（本書中標(biāo)記與標(biāo)簽是同一概念）組成，其中有單標(biāo)記和雙標(biāo)記之分，大部分以雙標(biāo)記出現(xiàn)，即標(biāo)記對（也稱標(biāo)簽對）。而本章要介紹的是應(yīng)用中常用的HTML標(biāo)記和格式，這些知識點(diǎn)往往在網(wǎng)頁中會常用到，也是必須得掌握的知識點(diǎn)之一。在講解過程中分兩部分：標(biāo)記和格式，學(xué)完本章，應(yīng)掌握以下內(nèi)容： 標(biāo)題標(biāo)記 段落標(biāo)記 換行與注釋 粗體與斜體 刪除線 上標(biāo)與下標(biāo),2.1 設(shè)置正文的標(biāo)題,現(xiàn)在網(wǎng)絡(luò)媒體在新聞傳播中起的作用越來越大，其傳播速度和內(nèi)容豐富程度都超越了傳統(tǒng)媒體。如從現(xiàn)在的門戶網(wǎng)站新聞點(diǎn)擊率上，可以看出網(wǎng)民直接在網(wǎng)上看新聞的

2、熱情。那么新聞的格式中，有新聞主題和新聞內(nèi)容之分，往往新聞主題的字體大小比正文內(nèi)容大，也會看到很大或比較小的標(biāo)題。如果讀者細(xì)心的話，會發(fā)現(xiàn)標(biāo)題從大逐漸變小是有規(guī)律的。,2.1.1 標(biāo)題設(shè)置的語法,本節(jié)來學(xué)習(xí)標(biāo)題的設(shè)置，標(biāo)題的作用是用精簡的文字概括整篇文章的主題，故文字字不能太長，從外表上突出標(biāo)題與內(nèi)容。標(biāo)題的語法很簡單，由雙標(biāo)記組成，在尖括號對里面輸入h加從1到6的任意一個(gè)數(shù)字即可，數(shù)字不同，所表達(dá)的標(biāo)題大小效果也不一樣，其完整標(biāo)題語法如下： 主題文字 其中“#”是標(biāo)題里面從1到6數(shù)字的任意的一個(gè)，系統(tǒng)一共提供6種標(biāo)題，從數(shù)字1到數(shù)字6，標(biāo)題大小由大到小，即表示不同大小的標(biāo)題。換言之，數(shù)字越大

3、，標(biāo)題字體就越小。,2.1.2 標(biāo)題設(shè)置經(jīng)典案例字號由大到小,理解了標(biāo)題是由字母H加從1到6的數(shù)字后，下面用實(shí)例來演示這6個(gè)標(biāo)題的效果，代碼2.1表示從H1到H6的標(biāo)題。 代碼2.1 源代碼第2章六種不同的標(biāo)題.html 標(biāo)題標(biāo)記 標(biāo)題h1 標(biāo)題h2 標(biāo)題h3 標(biāo)題h4 標(biāo)題h5 標(biāo)題h6 ,2.2 設(shè)置段落,一篇文章由標(biāo)題和正文組成，正文又是由多個(gè)段落組成的，所以可以說段落是構(gòu)成文章的主體。既然一篇文章是由多個(gè)段落組成的，那么又如何區(qū)分段落呢？段落與段落之間有什么不同呢？帶著這些問題來學(xué)習(xí)本小節(jié)的段落標(biāo)記。 在學(xué)習(xí)段落與段落的區(qū)別前，先了解段落的基本語法，段落語法代碼是由尖括號對里放置p的雙

4、標(biāo)記來表示，在標(biāo)記對里面放置的內(nèi)容就構(gòu)成了一個(gè)段落。段落完整語法表示如下。 這里表示段落 在標(biāo)記對中就表示的一個(gè)段落，那么怎樣在一篇文章中存放多個(gè)段落呢？很簡單，每個(gè)標(biāo)簽對就表示一個(gè)段落，有多少段落就有多少，這就是從代碼上區(qū)別段落與段落的不同。同理，從網(wǎng)頁表現(xiàn)出的效果來看段落，段落與段落間有一行空格不顯示任何內(nèi)容，也就是常?？吹叫侣勚械亩温溟g有空行。那么可以利用HTML的段落標(biāo)記來顯示出文章內(nèi)容美觀效果，使用戶對文章理解有層次感。段落不管是在新聞還是書籍中都會出現(xiàn)，下面請看段落在網(wǎng)頁中如何表現(xiàn)其效果，如代碼2.2所示。,2.3 強(qiáng)制換行,寫文章時(shí)，往往要在一個(gè)段落中間另起一行，這就要用到換行，

5、在網(wǎng)頁中也可以表示換行的，但需要換行標(biāo)記。換行可在行文中另起一行，顯示出段落層次性，給人感覺更有親和力。 在網(wǎng)頁編寫代碼時(shí)的換行與按回車鍵的換行是不同的，即在編寫HTML代碼中的回車只多了一行空格，在代碼中另起一行，但瀏覽器解釋時(shí)，會忽視多余空格，只保留一個(gè)空格的位置。從2.2節(jié)中介紹的，得知網(wǎng)頁顯示中會去掉里面空格，與正常文檔換行不同，所以沒達(dá)到換行效果。而今天學(xué)習(xí)的換行就是在網(wǎng)頁編寫換行代碼標(biāo)記后將在頁面中顯示出換行效果，當(dāng)瀏覽器在解釋換行代碼時(shí)會強(qiáng)制換行，這樣在網(wǎng)頁中就達(dá)到用戶在輸入時(shí)的換行標(biāo)記的效果。 換行標(biāo)記是音標(biāo)記，即不會成對出現(xiàn)，語法是在尖括號中包括br的單標(biāo)記，其完整語法代碼如

6、下所示： ,2.4 給代碼注釋,制作大型網(wǎng)站的時(shí)侯，每個(gè)網(wǎng)頁程序員所做的工作都會不同，但相互依賴其他程序員寫的代碼。為了在同一個(gè)項(xiàng)目中讓其他程序員看得明白，常常用注釋來說明代碼功能。注釋代碼的內(nèi)容不會在網(wǎng)頁中顯示，只起到注釋作用，如一個(gè)網(wǎng)頁中頭部用注釋說明該頁面的作用和創(chuàng)建日期，和本網(wǎng)頁所展示的功能等，讓其他程序員或?qū)W習(xí)者看到注釋就知道代碼內(nèi)容。 在前面的代碼中，多次出現(xiàn)了注解符，而且在注解內(nèi)容中，筆者都在前面標(biāo)記“注解：”，為了告訴初學(xué)者代碼的意義，所采用的一種解說代碼方法，并不會在網(wǎng)頁中顯示注解內(nèi)的內(nèi)容。注釋語法比較容易，可以在單行中存在注釋，同時(shí)也可以多行一起注釋，單行注釋完整語法如下：

7、 在一行中，在尖括號中放置感嘆號“！”和兩個(gè)“-”，接下來放置注釋內(nèi)容，最后一定要結(jié)束注釋，結(jié)束注釋用兩個(gè)“-”和另一個(gè)尖括號組成，即上面代碼表示了單行注釋。如果網(wǎng)頁代碼中，只需要注釋一行，可以用上面的注釋。如果有多行同時(shí)需要注釋，那是不是每行都用尖括號包圍呢？答案是不需要的。其實(shí)還有一種方法可以注釋多行，請看下面代碼： ,2.5 粗體與斜體,粗體與斜體在語法結(jié)構(gòu)上差不多，應(yīng)用在文字文本中，且都是用雙標(biāo)記對來表示。在學(xué)習(xí)本節(jié)前，先比較二者區(qū)別，可能學(xué)起來更有印象。 粗體標(biāo)記的語法是由標(biāo)簽對表示，標(biāo)簽對里面的文字在網(wǎng)頁中會顯示出字體為粗體，語法簡單，代碼如下： 粗體，這里顯示的是粗體 同理，斜體

8、里面顯示出字體為斜體，語法代碼為： 斜體，這里顯示的是斜體 原來可以這樣理解。粗體用包括著，斜體用包括著，代碼2.5表示二者代碼和效果不同之處。 代碼2.5 源代碼第2章粗體與斜體.html 粗體與斜體 粗體，這里顯示的是粗體 斜體，這里顯示的是斜體 ,2.6 下劃線與刪除線,為了使部分文字特別，可以在下面劃一條線或刪除線，這種字體往往引人注意，從而達(dá)到想要的效果。在網(wǎng)頁中也可以利用下劃線與刪除線。 下劃線就是在文字下面有一條線。也是雙標(biāo)記對包含文字，尖括號里面用u表示。其語法格式如下： 下劃線 類似的，刪除線也是雙標(biāo)記尖括號對形式的，里面用s表示。其語法代碼如下： 刪除線 二者比較很容易區(qū)分

9、，u表示下劃線，s表示刪除線，然后中間是表達(dá)的內(nèi)容。下面請看二者比較示例代碼，如代碼2.6所示。,2.7 上標(biāo)與下標(biāo),上標(biāo)與下標(biāo)應(yīng)用于文字或數(shù)字上比較多，如表示化學(xué)中的水元素、代學(xué)方程式中，在數(shù)學(xué)中用平方、對數(shù)等。這是比較特殊的標(biāo)記。 上標(biāo)是位于文字或數(shù)字的中上位置的標(biāo)記。如10的平方，平方符號就顯示10的中上位置。稍后做實(shí)例分析。先看語法代碼，上標(biāo)代碼表示如下： 上標(biāo) 同理，下標(biāo)是在文字或數(shù)字的中下位置的標(biāo)記，應(yīng)用也比較廣泛，如化學(xué)元素中的水元素，下標(biāo)語法代碼表示如下： 下標(biāo) 為了比較上標(biāo)與下標(biāo)的用法，顯示出不同效果。用實(shí)例來顯示出二者效果，如代碼2.7所示。,2.8 HTML標(biāo)記和格式實(shí)例

10、手把手,本章節(jié)只學(xué)了HTML常用的標(biāo)記和格式，這些知識點(diǎn)以后會常用到，畢竟網(wǎng)頁只由少數(shù)標(biāo)簽組成。學(xué)好常用標(biāo)簽和格式在以后學(xué)習(xí)中會容易很多?，F(xiàn)在來練習(xí)一下前面學(xué)的知識。知識點(diǎn)通過實(shí)例羅列出來。,2.8.1 標(biāo)題用h1,網(wǎng)頁代碼基本組成在前一章學(xué)過，所以輸入文章的關(guān)鍵是放在里面?，F(xiàn)在的文章就是這樣輸進(jìn)去，如代碼2.8所示。 代碼2.8 源代碼第2章HTML標(biāo)記和格式實(shí)例手把手.html HTML標(biāo)記和格式實(shí)例手把手 HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 ,2.8.2 設(shè)置每一行為一段落,從圖2.8中可以看到，有三條一

11、樣的文字都顯示在一行。這與在代碼中不同，那是因?yàn)榇a會去掉空格，只顯示一個(gè)空格間隔。要想添加段落必需得有標(biāo)簽對。給上面代碼加上后部分代碼如下： HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 ,2.8.3 粗體和刪除線,在第一段落文字上加粗體，第二個(gè)段落加上刪除線。部分代碼如下： HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 HTML+CSS完全自學(xué)手冊 在這個(gè)代碼里，比前面多了兩個(gè)標(biāo)簽對，即，其他的都還是一樣的，所表示的效果就不同了，如圖2.10所示。,2.8.4 加上化學(xué)元素和數(shù)學(xué)平方跟,在前面的學(xué)習(xí)中用表示上標(biāo)，表示下標(biāo)，用這些上標(biāo)和下標(biāo)表示數(shù)學(xué)、化學(xué)等特殊符號，完整代碼如2.9所示。,2.9