WEB前端人机交互导论实验-实训2格式化文本、段落与列表

起床悠悠

已于 2024-01-14 17:21:14 修改

阅读量1.5k

点赞数 16

CC 4.0 BY-SA版权

分类专栏：前端 html 文章标签：前端 html

于 2024-01-14 17:01:03 首次发布

本文链接：https://blog.csdn.net/gyeolhada/article/details/135585057

1.项目1 文本与段落标记的应用：

A.题目要求:

B.思路：

（1）首先，HTML文档的基本结构是通过<html>...</html>标签包围的，包含了头部信息和页面主体内容。

（2）在头部信息中，使用<meta charset="utf-8">指定文档的字符编码为UTF-8，以确保正确显示中文字符。

（3）在<style>标签内定义了一些CSS样式类，以用于后续的文本格式化。

包括居中、居右、居左以及小标题和斜体，蓝色体文本。

（4）页面主体内容从<body>...</body>标签开始。

针对文本信息的格式化部分分为四个部分：

a. [1.标题字应用]：使用标签并应用了CSS类left-align和special-title来创建一个左对齐的特殊标题文本块，之后运用h1和h4并应用CSS类显示格式不同的标题字。

b. [2.段落、字体标记应用]：使用标签包含了一段文本，其中使用了标签来指定字体、大小和CSS类blue-text来设置蓝色文本颜色。

c. [3.文本标记应用]：创建了一个包含数学表达式和地址等其它内容的文本块，使用标签来加粗文本、标签或者calss中的“italic-text”两种方法显示斜体文本，并使用blockquote成文本块。

d. [4.其它标记应用]：使用<pre> 标签来预格式化文本，包含了不同的字体和颜色。

诗歌文本以不同的字号和颜色显示，使用或者直接空格来插入空格。

<hr> 标签插入另一水平线，颜色为紫色，线宽为3像素。

C.总体代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>格式化文本信息</title>
    <style>
        .center-align {
            text-align: center;
        }
        .left-align {
            text-align: left;
        }
		.right-align {
		    text-align: right;
		}
        .special-title {
            font-weight: bold;
            font-size: 17px;
        }
		.italic-text {
		    font-style: italic;
		}
        .blue-text {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="left-align special-title">[1.标题字应用]</p>
    <h1 class="center-align"><ruby>软件工程</ruby>是全国就业薪酬涨幅最大的专业</h1>
    <h4>软件工程是全国就业薪酬涨幅最大的专业</h4>
    <h4 class="right-align"><ruby>软件工程</ruby>是全国就业薪酬涨幅最大的专业</h4>
    <hr color="#ff3333">

    <p class="left-align special-title">[2.段落、字体标记应用]</p>
    <p>
        <font face="隶书" size="5" class="blue-text">
            &nbsp;&nbsp;&nbsp;&nbsp;网页的本质就是超级文本标记语言，
            通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），
            可以创造出功能强大的网页。
        </font>
    </p>

    <p class="left-align special-title">[3.文本标记应用]</p>
    <p class="left-align"><strong>2X<sup>2</sup>+3x=9</strong>&nbsp;&nbsp;&nbsp;&nbsp;
        <i>x<sub>1</sub>+x<sub>2</sub>=10</i></p>
    <p class="left-align italic-text"><i>地址：江苏省南京市珠江路1924号</i></p>
    <blockquote>
        超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，
        通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
        通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容
        （如：文字如何处理，画面如何安排，图片如何显示等）。
    </blockquote>

    <p class="left-align special-title">[4.其它排版标记

最低0.47元/天解锁文章