任務(wù)1.3　在網(wǎng)頁中添加段落和文字

?學(xué)習(xí)目標(biāo)

①能夠表述常見HTML格式化文本標(biāo)簽的含義。

②能夠在網(wǎng)頁中按要求正確應(yīng)用HTML文本標(biāo)簽。

?任務(wù)描述

按HTML格式化文本標(biāo)簽要求，在新建的空白頁面中添加“移動(dòng)網(wǎng)頁廣告單頁的內(nèi)容”的文字和段落內(nèi)容。

?知識(shí)學(xué)習(xí)與課堂練習(xí)

1.標(biāo)題標(biāo)簽＜h1＞～＜h6＞

一般文章都有標(biāo)題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)簽＜hn＞，其中n為標(biāo)題的等級(jí)，HTML總共提供六個(gè)等級(jí)的標(biāo)題，即h1～h6，h1定義最大的標(biāo)題，h6定義最小的標(biāo)題。

其語法形式如下：

1級(jí)標(biāo)題：＜h1＞＜/h1＞

2級(jí)標(biāo)題：＜h2＞＜/h2＞

……

6級(jí)標(biāo)題：＜h6＞＜/h6＞

【課堂練習(xí)1.3-1】顯示6級(jí)標(biāo)題的效果。

打開Visual Studio Code軟件，在＜body＞標(biāo)簽中輸入如下代碼：

顯示效果如圖1.3-1所示。

2.段落標(biāo)簽＜p＞

在網(wǎng)頁制作的過程中，常常需要將一篇文章分成相應(yīng)的段落，只需要在內(nèi)容前加＜p＞、內(nèi)容后加＜/p＞即可實(shí)現(xiàn)文章?lián)Q段落。

其語法形式如下：

＜p＞段落文字＜/p＞

【課堂練習(xí)1.3-2】使用標(biāo)題和段落的網(wǎng)頁。

打開Dreamweaver軟件，在＜body＞標(biāo)簽中輸入如下代碼：

顯示效果如圖1.3-2所示。

3.通用塊元素＜div＞

＜div＞標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。

＜div＞是一個(gè)塊級(jí)元素，也就是說，瀏覽器通常會(huì)在＜div＞元素前后放置一個(gè)換行符。

其語法形式如下：

＜div＞…任何網(wǎng)頁元素（標(biāo)簽）＜/div＞

注釋：HTML中的元素可分為兩種類型，即塊級(jí)元素和行級(jí)元素。塊級(jí)元素是顯示在一塊內(nèi)，會(huì)自動(dòng)換行，元素會(huì)從上到下垂直排列，各自占一行，如前面所講過的＜p＞、＜h1＞、＜div＞等標(biāo)簽元素。行內(nèi)元素是元素在一行內(nèi)水平排列，高度由元素的內(nèi)容決定，height屬性不起作用，如后面要講的＜span＞、＜a＞等元素。

【課堂練習(xí)1.3-3】使用＜div＞標(biāo)簽分割文檔。

打開Visual Studio Code軟件，在＜body＞標(biāo)簽中輸入如下代碼：

效果顯示如圖1.3-3所示。

4.通用內(nèi)聯(lián)元素＜span＞

＜span＞標(biāo)簽是被用來組合文檔中的行內(nèi)元素。＜span＞沒有固定的格式表現(xiàn)。只有對(duì)它應(yīng)用樣式（在后面的章節(jié)中會(huì)進(jìn)行詳細(xì)講解）時(shí)，它才會(huì)產(chǎn)生視覺上的變化。

＜span＞標(biāo)簽在行內(nèi)定義一個(gè)區(qū)域，也就是一行內(nèi)可以被＜span＞劃分成好幾個(gè)區(qū)域，從而實(shí)現(xiàn)某種特定效果。＜span＞標(biāo)簽本身沒有任何屬性。

其語法形式如下：

＜span＞要修改樣式的文字＜/span＞

【課堂練習(xí)1.3-4】使用＜span＞標(biāo)簽。

打開Visual Studio Code軟件，在＜body＞標(biāo)簽中輸入如下代碼：

效果顯示如圖1.3-4所示。

?任務(wù)實(shí)施

①打開任務(wù)1.2中的index.html文件。

②完成網(wǎng)頁廣告單頁中標(biāo)題和段落的編寫。

?任務(wù)回顧

文字不僅是網(wǎng)頁信息傳達(dá)的一種常用方式，也是視覺傳達(dá)最直接的方式，運(yùn)用經(jīng)過精心處理的文字材料完全可以制作出效果很好的版面。

在HTML語言中，使用＜h1＞～＜h6＞標(biāo)簽來定義頁面上1～6級(jí)的標(biāo)題；使用＜p＞標(biāo)簽來定義段落。如果找不到適合自己所要含義的元素，可以考慮使用通用元素＜span＞或＜div＞。

?任務(wù)拓展

除了用段落和標(biāo)題組織文本，有時(shí)還需要使用短語元素來指定標(biāo)記之間文本的上下文含義。常見的短語元素及其用法可如表1.3-1所示。

【課后練習(xí)】使用合適的HTML標(biāo)記完成如圖1.3-5和圖1.3-6所示的效果。