文本控制类标签

最新推荐文章于 2024-03-06 11:06:39 发布

糯米小辣条

最新推荐文章于 2024-03-06 11:06:39 发布

阅读量808

点赞数

分类专栏： Web practice of Educoder

本文链接：https://blog.csdn.net/m0_47174730/article/details/110346849

版权

Web practice of Educoder 专栏收录该内容

38 篇文章 63 订阅

订阅专栏

第1关：文本控制类标签基础知识
任务描述
本关任务：完成一组与文本控制类标签相关的选择题。
相关知识
为了完成本关任务，你需要掌握：1.标题段落标签及其用法，2.文本格式标签及其用法，3.特殊字符标签及其用法。
块级元素与行内元素
块级元素
块级元素是指显示为一个区块内容的元素，在浏览器显示时，通常会以新行来开始（和结束）。其特点是：
总在新行上开始
高度、行高以及内外边距都可控
默认宽度为容器的100%
可以嵌套行内元素和其他块级元素
行内元素
行内元素也叫内联元素，是指显示为一行内容的元素，在浏览器显示时，会顺次在一行排列，而不另起新行。其特点是：
和其他元素排成一行
高度、行高以及内外边距不可控
宽度就是其内容的宽度，不可改变
行内元素只能容纳文本或其他行内元素
标题段落标签
文本标题标签<hi>
文本标题标签<hi>是双标签，块级元素，用于规定文本内容标题的层次。在HTML中提供了6级标题标签，从一级<h1>在这里插入代码片开始到六级<h6>在这里插入代码片，字号大小依次减小。
默认情况下，在大多数浏览器中显示<h1><h2><h3>在这里插入代码片的内容大于文本在网页中的默认尺寸，<h4>在这里插入代码片的内容与默认文本的大小基本相同，而<h5>和<h6>在这里插入代码片的内容较默认文本小一些。可设置文本标题的对齐属性。
段落标签<p>在这里插入代码片
段落标签<p>在这里插入代码片是双标签，块级元素，用于将文本内容定义为一个段落，段落内容从新的一行开始，并于上一段之间有一个空行。可设置段落文本的对齐属性。
文本修饰标签
换行标签<br/>在这里插入代码片
换行标签<br/>在这里插入代码片是单标签，可以在文本内容不结束的情况下对文本进行换行。它不产生一个空行，但连续多个的
标签可以产生多个空行的效果。
水平线标签<hr/>在这里插入代码片
水平线标签hr/是单标签，用于产生一条水平线。可设置水平线的粗细、长度、对齐方式、有无阴影和线的颜色属性。
文本修饰类标签
文本修饰类标签都是双标签，行内元素。用于设置文字的风格样式。这些标签及其功能说明如下图所示。
在这里插入图片描述

块标签<div>
块标签<div>是双标签，块级元素。用于排版大块段落，可以将网页分割为独立的部分，以实现网页的规划和布局。可通过style属性设置样式，也可以通过class 或 id属性应用样式。
行内标签<span>
行内标签span是双标签，行内元素。用来组合文档中的行内元素，便于样式定义或使用JavaScript 对它进行操作。使用方法和<div>标签基本相同。
特殊字符的引用
浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。这些字符不能直接使用，只能通过下图所示的引用方式实现。
特殊字符的引用
在这里插入图片描述

参考答案：
在这里插入图片描述

第2关：标题段落标签
任务描述
本关任务：编写一个带有标题和段落的网页。显示效果如下：

相关知识
为了完成本关任务，你需要掌握：1.标题和段落标签用法，2.align对齐属性的取值。
完成本任务需要的标签
完成本任务需要使用一级标题标签<h1>、二级标题标签<h2>和段落标签<p>
相关属性align的取值
left:左对齐
center:居中对齐
right:右对齐
justify:两端对齐
编程要求
根据前面的效果图，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.在<body></body>之间添加一级标题，标题内容为“第一章 HTML5基础”，采用居中对齐；
2.在<body></body>之间添加二级标题，标题内容为“1.1 文本控制标签”，采用左对齐。
3.在<body></body>之间添加一个段落，段落内容为“这是第1个段落。”，采用两端对齐。
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
参考代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>标题段落的设置</title>
 </head>
 <body bgcolor="#00ffff">
    <!-- ********* Begin ********* -->
    <h1 align="center">第一章HTML5基础</h1>
    <h2 align="left">1.1文本控制标签</h2>
    <p align="justify">这是第1个段落</p>
      <!-- ********* End ********* -->
 </body>
</html>

第3关：水平线标签
任务描述
本关任务：编写一个标题下方带有水平线的网页。显示效果如下：
在这里插入图片描述
相关知识
为了完成本关任务，你需要掌握：1.水平线标签和换行标签用法，2.水平线标签相关的属性。
完成本任务需要的标签
完成本任务需要使用水平线标签<hr/>在这里插入代码片和换行标签<br/>在这里插入代码片
水平线标签相关的属性
size:水平线的粗细，长度单位，默认为px
width:水平线长,长度单位，默认为px
align:水平线对齐，可取left、center、right
color:水平线颜色，其取值可为颜色单词，或颜色码。
noshade:无阴影设置，添加时无阴影，不添加时有阴影。
编程要求
根据前面的效果图，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.在一级标题文字“第一章 HTML5基础”下方添加一条水平线，水平线的下方使用换行标签添加一个空行
2.为水平线标签添加size属性，取值为3
3.为水平线标签添加width属性，取值为400
4.将水平线的颜色设置为蓝色
5.去掉水平线的阴影效果
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
参考代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>水平线的设置</title>
 </head>
 <body bgcolor="#00ffff">
    <h1 align="center">第一章 HTML5基础</h1>
    <!-- ********* Begin ********* -->
    <hr size=3 width=400 color="blue" noshade="noshade">   
    <br/>  
    <!-- ********* End ********* -->
    <h2 align="left">1.1 文本控制标签</h2>
    <p align="justify">这是第1个段落。</p>             
 </body>
</html>

第4关：文本修饰类标签
任务描述
本关任务：编写一个HTML文档，并按要求对文本进行修饰。显示效果如下：
在这里插入图片描述
相关知识
为了完成本关任务，你需要掌握：1.font标签及其属性，2.常用文本修饰标签的功能。
font标签及其属性
font标签可对文本的字号大小、字体和颜色进行修饰。对应的属性为：
size:设置文本字号，其取值为1~7
face:设置文本字体
color:设置文本颜色，值为颜色单词或颜色代码
align:设置文本对齐，取值可以是left、center、right、justify
文本修饰类的其他标签
文本修饰类的其他标签如下图
在这里插入图片描述
编程要求
根据前面的效果图，在右侧编辑器中的两个Begin - End区域内补充代码，具体要求是：
1.采用font标签为一级标题文字“第一章 HTML5基础”添加“黑体”字体和“红色”显示
2.分别采用加粗、斜体、下划线、上标和下标标签为相应的文字添加显示效果
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
参考代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>水平线的设置</title>
 </head>
 <body bgcolor="#00ffff">
    <h1 align="center">
       <!-- ********* Begin ********* -->
       <font face="黑体" color="red">第一章 HTML5基础</font>
       <!-- ********* End ********* -->
    </h1>
       <hr size=3px width=400px Align=center color=blue noshade/>
       <br/>    
    <h2 align="left">1.1 文本控制标签</h2>
     <!-- ********* Begin ********* -->
       <b>这是加粗显示的文字</b>
       <i>这是斜体显示的文字</i>
       <u>这是带下划线的文字</u>
       X<sup>3</sup>-2Y<sub>2</sub>=1
      <!-- ********* End ********* -->
 </body>
 </html>