1.4.1標(biāo)題HTML標(biāo)題是用h1~h6標(biāo)記來表示的。H1標(biāo)注的標(biāo)題是最重要的，h2次之，h3再次之，依次類推。標(biāo)題標(biāo)記的用法非常簡(jiǎn)單，格式如下：<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2>等等。標(biāo)題在HTML中是非常重要的，并非僅僅是因?yàn)樽煮w大了一些，粗了一些，而是因?yàn)樗阉饕娓鶕?jù)網(wǎng)頁(yè)的標(biāo)題對(duì)網(wǎng)頁(yè)進(jìn)行結(jié)構(gòu)和內(nèi)容的索引，使得用戶可以快速瀏覽你的網(wǎng)頁(yè)。這對(duì)于網(wǎng)頁(yè)用戶的友好性是十分重要的，所以在實(shí)際應(yīng)用中要善于利用標(biāo)題構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。標(biāo)題的例子如清單1-9所示。1.4.2水平線水平線可以對(duì)不同的邏輯區(qū)域進(jìn)行分割，使得網(wǎng)頁(yè)布局清晰。水平線標(biāo)記是hr，在網(wǎng)頁(yè)中寫作<hr/>。它也是HTML中即是開始標(biāo)記，又是結(jié)束標(biāo)記的標(biāo)記，后面的“/”不能省略。水平線的例子如清單1-9所示。1.4.3注釋HTML注釋用于說明一些其他信息，這些信息會(huì)被瀏覽器忽略，在網(wǎng)頁(yè)上也看不到它們，它是寫給網(wǎng)頁(yè)編輯人員看的。主要是網(wǎng)頁(yè)結(jié)構(gòu)說明和區(qū)塊作用說明等。注釋標(biāo)記格式如下：<!--需要說明的內(nèi)容-->需要說明的是，注釋標(biāo)記中不允許出現(xiàn)任何表1-1中的全局屬性。合理的使用注釋可以提高網(wǎng)頁(yè)的可讀性、易于理解和維護(hù)。注釋還有一個(gè)作用，就是用注釋標(biāo)記來隱藏瀏覽器不支持的腳本，這在實(shí)際應(yīng)用中也是一個(gè)好的習(xí)慣，防止瀏覽器把不支持的腳本顯示為純文本。隱藏瀏覽器不支持腳本的格式如下：<scripttype="text/javascript"><!--functionhello(){alert("HelloWorld!")}//--></script>需要說明的是注釋結(jié)束標(biāo)記“-->”之前的//是JavaScript的注釋符號(hào)，作用是避免瀏覽器中的JavaScript引擎執(zhí)行-->這一符號(hào)，這將顯示一個(gè)錯(cuò)誤。<script>也是一個(gè)標(biāo)準(zhǔn)的HTML標(biāo)記，用于包含可以執(zhí)行的網(wǎng)頁(yè)腳本代碼，它將在JavaScript部分中詳細(xì)介紹。注釋例子如清單1-9所示。1.4.4段落段落標(biāo)記是對(duì)網(wǎng)頁(yè)文字的一種組織方式，將多段文字分段顯示，以使文字結(jié)構(gòu)清晰。段落標(biāo)記用法如下：<p>段落文字</p>這里需要注意的是，段落格式并不像想像的那樣，沒有首先縮進(jìn)。而且每段后面自動(dòng)加一空行。和標(biāo)準(zhǔn)的段落不太一樣。如何進(jìn)行段落格式控制，在CSS部分再做詳細(xì)論述。段落例子如清單1-9所示1.4.5換行瀏覽器在解析HTML文檔時(shí)，會(huì)自動(dòng)忽略所有的多余的空白字符（空格、跳格和回車換行），所以如果需要文本或元素另起一行顯示，則必須使用換行標(biāo)記br，在文檔中寫作<br/>。當(dāng)然使用換行標(biāo)記布局元素是不科學(xué)的，應(yīng)該使用HTML5的布局元素、div標(biāo)記和CSS進(jìn)行網(wǎng)頁(yè)布局。在清單1-9中，可以很明顯的看出，雖然段落內(nèi)存在多處回車符，但顯示在瀏覽器中，這些回車符就好像消失了。清單1-9段落和水平線標(biāo)記<h3>人就這么一輩子</h3><hr/><!--下面是兩個(gè)段落，仔細(xì)觀察一下顯示效果與實(shí)際格式和自然段的差別！--><p>我常以“人就這么一輩子“這句話告誡自己并勸說朋友。這七個(gè)字，說來容易，聽來簡(jiǎn)單想起來卻很深沉。它能使我在軟弱時(shí)變得勇敢驕傲?xí)r變得謙虛頹廢時(shí)變得積極，痛苦時(shí)變得歡愉，<!--省略部分文字-->又有什么想不開的呢？</p> <p>人就這么一輩子，想到了這句話，如果我是英雄，便要?jiǎng)?chuàng)造更偉大的功業(yè)：如果我是學(xué)者，<!--省略部分文字-->不能白來一遭??！</p>代碼說明如下圖：文本標(biāo)記其實(shí)還有很多，由于篇幅所限不再一一列出。文本樣式標(biāo)記，如粗體、斜體、上標(biāo)下標(biāo)等，都作為樣式可以在CSS中實(shí)現(xiàn)，根據(jù)“內(nèi)容、樣式和動(dòng)作相分離的原則”，不推薦在網(wǎng)頁(yè)中使用此類標(biāo)記，所以這些標(biāo)記不在此進(jìn)行討論。1.5表格標(biāo)記表格在組織顯示數(shù)據(jù)和布局表單元素時(shí)非常有用，在網(wǎng)頁(yè)制作中占有十分重要的角色。HTML表格是由table表格標(biāo)記、行標(biāo)記tr、單元格標(biāo)記td等組成。table標(biāo)記包含若干tr標(biāo)記，即若干行；tr標(biāo)記包含若干td標(biāo)記，即包含若干列?；镜谋砀窠Y(jié)構(gòu)如下：<table> <tr><!--第1行--> <td></td><!--第1列--> <!--其他列（單元格）--> </tr> <!--其他行--></table>在構(gòu)建表格時(shí)，還會(huì)用到其他標(biāo)記，所用標(biāo)記如表1-5所示。表1-5表格標(biāo)記表格描述<table>用于定義表格<caption>用于定義表格的標(biāo)題。<th>用于定義表格的表頭。<tr>用于定義表格的行。<td>用于定義表格的單元格。<thead>用于定義表格的標(biāo)題行，即包含tr標(biāo)記或th標(biāo)記。<tbody>用于定義表格的主體，可包含tr。<tfoot>用于定義表格的頁(yè)腳。<col>用于定義用于表格列的屬性，很少使用。<colgroup>用于定義表格列的組，很少使用。需要說明的是，th與td都表示單元格，但th中的字體顯示為粗體且居中顯示，即表格中的表頭部分用th，其他單元格用td。不用thead、tbody和tfoot也可以構(gòu)造出完整的表格，加入這些元素使得在對(duì)表格進(jìn)行樣式控制時(shí)有更好的粒度，可分別對(duì)表頭、表體和表的底部顯示不同的樣式。表格制作中還會(huì)用到兩個(gè)重要的屬性：colspan和rowspan。colspan屬性：

單元格td跨幾列（即合并行中的列。rowspan屬性：td單元格跨幾行（合并列中的幾行）。這兩個(gè)屬性在制作比較復(fù)雜的表格時(shí)非常有用。下面以一個(gè)課程表的例子說明表格的制作方法，課程表想必大家都非常熟悉。我們用HTML表格設(shè)計(jì)一個(gè)自己的課程表，也是一件令人鼓舞的事。要制作的表格如圖1-5所示。圖1-5要制作的課程表這個(gè)表格看起來有點(diǎn)復(fù)雜，不但有列合并，如其中的“節(jié)次”列，還有行合并如課程名稱部分。這樣的表格制作起來貌似較難，但當(dāng)你明白了它的制作技巧以后，就覺得非常簡(jiǎn)單了?，F(xiàn)在讓我們開始制作這一表格。首先，要制作表格標(biāo)題“我的課程表”和表頭。制作表格標(biāo)題需要使用caption標(biāo)記，制作表頭需要用到th標(biāo)記。表頭需要有6個(gè)，分別是節(jié)次、周一、周二、周三、周四和周五，所以在表頭行中需要有6個(gè)th標(biāo)記，表示這6個(gè)列（或者單元格）。其中“節(jié)次”單元格需要跨兩列，即它的colspan設(shè)置為2。代碼清單如1-10所示。清單1-10制作課程表的標(biāo)題和表頭<table> <caption>我的課程表</caption> <tr><!--表頭部分--> <thcolspan='2'>節(jié)次</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> </tr><!--表頭部分結(jié)束--></table>代碼說明如下圖：現(xiàn)在標(biāo)題和表頭制作好了，讓我們來看一下效果。完成一部分后就查看一下效果，這也是一種好的習(xí)慣，不要等到全部完成，打開一看不是想要的東西，這時(shí)再改就頭就大了！表格效果如圖1-6所示。圖1-6課程表標(biāo)題和表頭嗯？表格線哪里去了？瀏覽器是不會(huì)騙人的，說明默認(rèn)情況下，表格是不顯示表格線的。要顯示表格線的話，需要在table標(biāo)記中加入border屬性，并將其置為1，即<tableborder=”1”>在清單1-10中加入以上內(nèi)容，再來瀏覽一下！這次有表格線了，但仍然不是我們想要的！怎么表格線成了兩條？這一點(diǎn)先容忍一下，我們秉承“內(nèi)容、樣式和動(dòng)作”相分離的原則，這一毛病等我們講述CSS時(shí)再解決！其實(shí)表格線也是CSS控制的，現(xiàn)在要讓大家看到表格結(jié)構(gòu)，所以還是顯示出表格線，但在實(shí)際制作中，這里的border屬性是不需要的！現(xiàn)在可以來制作表格的第一行了。由于課程表中第1節(jié)和第2節(jié)是合在一起上的，所以一門課程要跨第1節(jié)和第2節(jié)所在兩行。所以除了“節(jié)次”這一列之外，剩下的列（周一至周五）都是跨兩行的，所以這些列的rowspan屬性設(shè)計(jì)為2，即這些列的單元格占兩行。在清單1-10中的<!--表頭部分結(jié)束-->的后面加入以下代碼：<tr><!--表格主體開始，第1行--> <td>第1節(jié)</td><!--節(jié)次--> <td>8:00-8:45</td> <tdrowspan='2'>軟件體系結(jié)構(gòu)</td><!--周一-->

<tdrowspan='2'></td><!--周二--> <tdrowspan='2'></td><!--周三--><tdrowspan='2'>HTML5程序設(shè)計(jì)</td><!--周四-->

<tdrowspan='2'>HTML5程序設(shè)計(jì)</td><!--周五--></tr><!--第1行結(jié)束-->再次在瀏覽器中打開我們制作的表格，效果如下圖所示：看不出跨行與不跨行有什么區(qū)別！下面我們制作第2行，把跨行的效果顯示出來。接著上面的代碼再輸入以下代碼：<tr><!--第2行——充當(dāng)?shù)?行的合并行--> <td>第2節(jié)</td> <td>8:55-9:40</td> <!--由于第1行中的對(duì)應(yīng)td的跨兩行，所以這里也相當(dāng)于有5個(gè)td--></tr><!--第2行結(jié)束-->等等！為什么第2行中只有兩列（兩個(gè)單元格）？其他的單元格哪里去了？答案是剩下的單元格被第1行中的跨兩行的單元格占據(jù)了！也就是說，如果上一行中有占兩行的單元格，那么這一行中就會(huì)“少”一個(gè)單元格，對(duì)于跨列也是同樣的道理。這也是制作跨行或跨列表格的訣竅和方法！再次在瀏覽器中打開我們制作的表格，效果如下：完全正確！和我們預(yù)期的效果相同。剩下行的制作和第1行和第2行的制作方法類似，讀者可以試著完成它。完整的課程表制作代碼如清單1-11所示。最終效果如圖1-6所示。圖1-6課程表最終制作效果在清單1-11中，可以看到合理的使用空格、換行和HTML注釋，可以使HTML結(jié)構(gòu)更加清晰。雖然空白字符太多影響網(wǎng)絡(luò)的加載速度，但在網(wǎng)頁(yè)設(shè)計(jì)階段，嵌套結(jié)構(gòu)清晰是十分必要的！網(wǎng)頁(yè)設(shè)計(jì)完成后，可用專門的軟件把多余的空白字符刪除掉，再放到網(wǎng)站上。通過這一節(jié)的學(xué)習(xí)，你掌握了表格的制作沒有呢？跨行或跨列的表格制作是最難的，但這里有一個(gè)訣竅，那就是：<tdcolspan=”n”></td>雖然只有一個(gè)td標(biāo)記，但卻相當(dāng)于n（n是一個(gè)數(shù)字）個(gè)單元格，各行上的單元格數(shù)目要保持一致！同樣的道理：