任務1.3　在網頁中添加段落和文字

?學習目標

①能夠表述常見HTML格式化文本標簽的含義。

②能夠在網頁中按要求正確應用HTML文本標簽。

?任務描述

按HTML格式化文本標簽要求，在新建的空白頁面中添加“移動網頁廣告單頁的內容”的文字和段落內容。

?知識學習與課堂練習

1.標題標簽＜h1＞～＜h6＞

一般文章都有標題、副標題、章和節等結構，HTML中也提供了相應的標題標簽＜hn＞，其中n為標題的等級，HTML總共提供六個等級的標題，即h1～h6，h1定義最大的標題，h6定義最小的標題。

其語法形式如下：

1級標題：＜h1＞＜/h1＞

2級標題：＜h2＞＜/h2＞

……

6級標題：＜h6＞＜/h6＞

【課堂練習1.3-1】顯示6級標題的效果。

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

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

2.段落標簽＜p＞

在網頁制作的過程中，常常需要將一篇文章分成相應的段落，只需要在內容前加＜p＞、內容后加＜/p＞即可實現文章換段落。

其語法形式如下：

＜p＞段落文字＜/p＞

【課堂練習1.3-2】使用標題和段落的網頁。

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

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

3.通用塊元素＜div＞

＜div＞標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。

＜div＞是一個塊級元素，也就是說，瀏覽器通常會在＜div＞元素前后放置一個換行符。

其語法形式如下：

＜div＞…任何網頁元素（標簽）＜/div＞

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

【課堂練習1.3-3】使用＜div＞標簽分割文檔。

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

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

4.通用內聯元素＜span＞

＜span＞標簽是被用來組合文檔中的行內元素。＜span＞沒有固定的格式表現。只有對它應用樣式（在后面的章節中會進行詳細講解）時，它才會產生視覺上的變化。

＜span＞標簽在行內定義一個區域，也就是一行內可以被＜span＞劃分成好幾個區域，從而實現某種特定效果。＜span＞標簽本身沒有任何屬性。

其語法形式如下：

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

【課堂練習1.3-4】使用＜span＞標簽。

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

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

?任務實施

①打開任務1.2中的index.html文件。

②完成網頁廣告單頁中標題和段落的編寫。

?任務回顧

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

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

?任務拓展

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

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