任务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所示的效果。