W前端技术基础开发概述13

Web前端开发技术基础任务

红色文化资源网结构搭建通关任务2红色资讯页面结构搭建——文本标签

AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述网页中的文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。本任务采用HTML5的文本标签完成红色资讯页面结构搭建。效果图如图2-1-9所示。任务描述任务目标1.了解HTML5文本标签的分类。2.了解HTML5标题标签的使用方法。3.掌握HTML5段落标签的使用方法。4.掌握HTML5文本格式化标签的使用方法。5.掌握HTML5水平线标签的使用方法。6.能够综合使用HTML5的文本标签完成红色资讯页面的结构搭建。图2-1-9

红色资讯页面结构效果图任务实施——结构分析图2-1-11

代码与效果对比任务实施——构建HTML结构（

1

）复制页面更改标题图2-1-12复制页面更改标题代码效果图（

2）创建页面主体模块代码结构图2-1-13

页面主体结构模块代码效果图任务实施——构建HTML结构（

3）格式化页面主体模块代码结构图2-1-14

格式化页面主体模块代码效果图任务实施——构建HTML结构（1

）标题标签标题标签的作用是让用户快速地了解文档的结构。它是通过<h1>…<h6>共6个等级的标签来定义的，<h1></h1>标签对定义了最大字号的标题，<h6></h6>标签对定义了最小字号的标题。当为文字添加标题标签后，标题文字会独立成一行显示。语法格式如下。<hn>段落文字</hn>（其中，n表示1~6的数字）。文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签表2-1-4

标题标签举例与效果

HTML代码效果

<h1>这是一级标题

</h1>

<h2>这是二级标题

</h2><h3>这是三级标题

</h3><h4>这是四级标题

</h4><h5>这是五级标题

</h5><h6>这是六级标题

</h6>（2

）段落标签段落标签是通过<p></p>标签对定义的。段落标签举例与效果见表2-1-5。语法格式：<p>段落文字</p>文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签说明：<p>和

</p>之间的文字表示一个段落，多个段落需要用多个

<p></p>标签对。（3

）换行标签要在不产生一个新段落的情况下换行，需要使用<br>标签。语法格式：换行文字<br>文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签说明：<br>表示强制换行，一个<p>标签等同于两个<br>标签。该标签为单标签。（4

）水平线标签<hr>是一个单标签，用于在网页中创建一条水平线来分隔网页中的内容。语法格式：文本内容<hr>文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签（5

）文本格式化标签文本格式化标签可以设置文本的粗体、斜体、删除线和下画线效果。语法格式：1）<strong>文本内容</strong>：文本以粗体显示。2）<em>文本内容</em>：文本以斜体显示。3）<ins>文本内容</ins>：为文本添加下画线。4）<del>文本内容</del>：为文本添加删除线。文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签（6）特殊字符标签在网页制作过程中，除了显示文字外，有时还需要插入特殊符号，如版权符号、注册商标、货币符号等。特殊字符标签举例与效果见表2-1-9