《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第3章

模塊3文本排版標(biāo)簽3.1標(biāo)題標(biāo)簽3.2段落標(biāo)簽3.3水平線標(biāo)簽3.4列表標(biāo)簽3.5網(wǎng)頁(yè)特殊符號(hào)3.6文本格式化標(biāo)簽3.7塊元素和行內(nèi)元素3.8案例：綜合應(yīng)用文本排版標(biāo)簽思考與練習(xí)題

3.1標(biāo)題標(biāo)簽

一個(gè)HTML文檔可以包括各種級(jí)別的標(biāo)題。在HTML中，一共有6個(gè)級(jí)別的標(biāo)題標(biāo)簽：<h1>～<h6>。<h1>到<h6>標(biāo)簽中的字母h是英文header的簡(jiǎn)稱(chēng)，h元素?fù)碛写_切的語(yǔ)義，所以在構(gòu)建文檔結(jié)構(gòu)時(shí)要選擇恰當(dāng)?shù)臉?biāo)簽層級(jí)。

【例3-1】標(biāo)題標(biāo)簽詳解。

標(biāo)題標(biāo)簽在瀏覽器中的顯示效果如圖3-1所示。

圖3-1標(biāo)題標(biāo)簽

3.2段落標(biāo)簽

【例3-2】在頁(yè)面中定義段落。

段落標(biāo)簽在瀏覽器中的顯示效果如圖3-2所示。

圖3-2段落標(biāo)簽

從圖3-2中可以看到，首先段落標(biāo)簽會(huì)自動(dòng)換行，其次段落與段落之間有一定的空白，這都是由p元素的默認(rèn)樣式定義的。如何自定義p元素的樣式，如何更改默認(rèn)空白的

大小等，將在后續(xù)的CSS模塊中詳細(xì)介紹。

3.3水平線標(biāo)簽

在HTML中，<hr>標(biāo)簽用于定義水平線，這是一個(gè)空元素?？赵厥窃陂_(kāi)始標(biāo)簽中關(guān)閉的，正確關(guān)閉空元素的方式是在開(kāi)始標(biāo)簽中添加斜杠，比如<hr/>，建議讀者使用空元素時(shí)用這種方式關(guān)閉。

【例3-3】在頁(yè)面中定義水平線。

圖3-3水平線標(biāo)簽

3.4列表標(biāo)簽

HTML中共有三種列表：有序列表、無(wú)序列表和定義列表。有序列表的列表項(xiàng)之間有先后順序之分；無(wú)序列表的列表項(xiàng)之間沒(méi)有先后順序之分；定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。

3.4.1?有序列表

有序列表從<ol>開(kāi)始，到</ol>結(jié)束，每個(gè)列表項(xiàng)用<li>標(biāo)簽定義。

【例3-4】在頁(yè)面中定義有序列表。

有序列表在瀏覽器中的顯示效果如圖3-4所示。圖3-4有序列表

有序列表的列表項(xiàng)默認(rèn)是采用數(shù)字進(jìn)行標(biāo)記的。我們可以通過(guò)有序列表的type屬性值來(lái)改變列表項(xiàng)的符號(hào)。有序列表的type屬性值如表3-1所示。

【例3-5】在頁(yè)面中自定義有序列表的type屬性。

有序列表在瀏覽器中的顯示效果如圖3-5所示。

圖3-5type="A"的有序列表

3.4.2?無(wú)序列表

【例3-6】在頁(yè)面中定義無(wú)序列表。

無(wú)序列表在瀏覽器中的顯示效果如圖3-6所示。

圖3-6無(wú)序列表

一般情況下，<ul>和<ol>一樣，<ul>里面也只能嵌套<li>標(biāo)簽。無(wú)序列表的列表項(xiàng)默認(rèn)是采用●進(jìn)行標(biāo)記的。我們可以通過(guò)無(wú)序列表的type屬性來(lái)改變列表項(xiàng)符號(hào)。無(wú)序列表的type屬性值如表3-2所示。

【例3-7】在頁(yè)面中自定義無(wú)序列表的type屬性。

無(wú)序列表在瀏覽器中的顯示效果如圖3-7所示。

圖3-7type=“circle”的無(wú)序列表

3.4.3?定義列表

【例3-8】定義列表的應(yīng)用。

定義列表在瀏覽器中的顯示效果如圖3-8所示。

圖3-8定義列表

這三種列表中，最常用的是無(wú)序列表，無(wú)序列表type屬性實(shí)現(xiàn)的效果也可以用CSS的list-style-type屬性來(lái)實(shí)現(xiàn)。我們現(xiàn)在可以先練習(xí)使用type屬性，在學(xué)習(xí)了CSS相關(guān)內(nèi)

容之后，就可以改用CSS控制樣式。

3.5網(wǎng)頁(yè)特殊符號(hào)

在HTML中，我們經(jīng)常要在網(wǎng)頁(yè)中輸入特殊字符，這時(shí)就要輸入該特殊字符對(duì)應(yīng)的HTML代碼。這些HTML代碼都以“&”開(kāi)頭，以“;”(注意是英文分號(hào))結(jié)束。表3-3列舉了一些常用的特殊字符對(duì)應(yīng)的HTML代碼。

【例3-9】在段落p元素中定義空格。

定義空格在瀏覽器中的顯示效果如圖3-9所示。

圖3-9段落中定義空格

3.6文本格式化標(biāo)簽

文本格式化標(biāo)簽，就是對(duì)文本進(jìn)行各種“格式化”的一類(lèi)標(biāo)簽，例如加粗、斜體、上標(biāo)、下標(biāo)等。3.6.1?粗體標(biāo)簽<b>、<strong>在HTML中對(duì)文本加粗，可以使用<b></b>和<strong></strong>這兩個(gè)標(biāo)簽對(duì)。

【例3-10】文本加粗。

文本加粗在瀏覽器中的預(yù)覽效果如圖3-10所示。

圖3-10文本加粗

3.6.2?斜體標(biāo)簽<i>、<cite>、<em>

在HTML中實(shí)現(xiàn)文本斜體，可以使用以下三個(gè)標(biāo)簽。

(1)<i></i>；

(2)<cite></cite>；

(3)<em></em>。

【例3-11】文本斜體。

文本斜體在瀏覽器中的預(yù)覽效果如圖3-11所示。

圖3-11文本斜體

3.6.3?上標(biāo)標(biāo)簽<sup>

【例3-12】上標(biāo)標(biāo)簽。

文本上標(biāo)在瀏覽器中的預(yù)覽效果如圖3-12所示。

圖3-12文本上標(biāo)

3.6.4?下標(biāo)標(biāo)簽<sub>

【例3-13】下標(biāo)標(biāo)簽。

文本下標(biāo)在瀏覽器中的預(yù)覽效果如圖3-13所示。

圖3-13文本下標(biāo)

3.6.5?刪除線標(biāo)簽<del>

【例3-14】刪除線標(biāo)簽。

文本刪除在瀏覽器中的預(yù)覽效果如圖3-14所示。

圖3-14文本刪除

3.6.6?下劃線標(biāo)簽<ins>

【例3-15】下劃線標(biāo)簽。

文本下劃線在瀏覽器中的預(yù)覽效果如圖3-15所示。

圖3-15文本下劃線

3.7塊元素和行內(nèi)元素

在瀏覽器的顯示效果中，有些元素是獨(dú)占一行的，如h1～h6、p等，這些元素不可以跟其他元素位于同一行；有些元素可以跟其他元素位于同一行，如strong、em、ins等。

1.塊元素

在HTML中，獨(dú)占一行的元素叫塊元素，塊元素在默認(rèn)顯示狀態(tài)下將占據(jù)瀏覽器的一行。塊元素可以看作一個(gè)矩形盒子，它可以容納行內(nèi)元素和其他的塊元素。

常見(jiàn)的入門(mén)塊元素包括div塊元素、h1～h6標(biāo)題元素、p段落元素、hr分割線元素、ol有序表元素、ul無(wú)序表元素。

2.行內(nèi)元素

在HTML中，可以與其他元素位于同一行的元素叫行內(nèi)元素，行內(nèi)元素默認(rèn)顯示狀態(tài)也是由它的默認(rèn)寬度定義的。相比于塊元素，行內(nèi)元素也可以看作一個(gè)小盒子，可以與

其他行內(nèi)元素共存于同一行，但是不能容納塊元素。

常見(jiàn)的入門(mén)行內(nèi)元素包括span行內(nèi)元素、strong加粗強(qiáng)調(diào)元素、em斜體強(qiáng)調(diào)元素、del刪除元素、ins下劃線元素、a超鏈接元素、img圖片元素、input表單元素。

3.8案例：綜合應(yīng)用文本排版標(biāo)簽

【案例描述】設(shè)計(jì)一個(gè)HTML頁(yè)面展示荀子《勸學(xué)》內(nèi)容?！究己酥R(shí)點(diǎn)】文本排版標(biāo)簽的應(yīng)用?！揪毩?xí)目標(biāo)】(1)掌握標(biāo)題標(biāo)簽的使用。(2)掌握段落標(biāo)簽的使用。(3)掌握列表標(biāo)簽的使用。

【案例源代碼】

【運(yùn)行結(jié)果】

案例運(yùn)行結(jié)果如圖3-16所示。

圖3-16案例運(yùn)行結(jié)果

【案例分析】

這個(gè)案例的HTML頁(yè)面設(shè)計(jì)中，運(yùn)用了<h1></h1>、<h2></h2>以及<h3></h3>標(biāo)題標(biāo)簽定義標(biāo)題，使內(nèi)容層次分明，也利用了換行標(biāo)簽、有序列表、水平線、上標(biāo)標(biāo)簽等對(duì)內(nèi)容格式進(jìn)行了設(shè)計(jì)，使內(nèi)容顯示效果更為豐富。

思考與練習(xí)題

一、選擇題1.創(chuàng)建最小的標(biāo)題的文本標(biāo)簽是()。A.<pre></pre>

B.<h1></h1>C.<h6></h6>

D.<b></b>2.設(shè)置水平線高度的HTML代碼是()。A.<hr>

B.<hrsize=?>C.<hrwidth=?>

D.<hrnoshade>

3.在HTML中，段落標(biāo)簽是()。

A.<html>…</html>

B.<head>…</head>

C.<body>…</body>

D.<p>…</p>

4.在HTML中，表示換行的標(biāo)簽是()。

A.<u>

B.<b>

C.<br/>

D.<h1>

5.在HMTL中，加粗字體的文本標(biāo)簽是()。

A.<pre></pre>

B.<h1></h1>

C.<h6></h6>

D.