HTML “文本处理基础”--文本格式化——WEB开发系列05
一条晒干的咸魚 2024-08-23 15:03:02 阅读 66
HTML 的主要工作之一是赋予文本结构，使浏览器能够按照开发者的意图显示 HTML 文档。 在创建网页时，文本格式化是至关重要的，它不仅可以影响用户的阅读体验，还可以增强网页的可读性和美观性。HTML 如何通过添加标题和段落、强调单词、创建列表等方式来构造文本呢？下面将带大家了解HTML文本的格式化，包括各种文本标签的使用方法，并结合代码实例进行解释。
在HTML中，有许多标签用于文本的格式化，包括标题、段落、强调、引用等。
前面我们已经提到过头部和段落标签的使用，先来回顾一下前面的内容，并且进一步了解强调和引用标签的使用。
一、标题标签
HTML提供了六种不同级别的标题标签，从<code><h1>到<h6>，它们分别代表从最重要的标题到最不重要的标题。通常，<h1>用于页面标题，<h2>用于章节标题，依此类推。
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>标题格式化示例</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
这段代码展示了六个不同层级的标题，浏览器会根据标签自动调整字体大小，使其从大到小依次递减。
二、段落标签
段落是网站中大多数文本内容的主要形式。使用<code><p>标签来定义一个段落。
<p>这是第一段文本。它介绍了网页的主题。</p>
<p>这是第二段文本。它提供了更多关于主题的信息。</p>
当你在HTML中写段落时，浏览器会自动在段落之间添加空白行，以此来分隔内容。
三、强调和强调标签
在日常交流中，常通过加重某个字的读音或使用加粗等方式来突出重点。类似地，HTML 提供了标签来实现加粗、倾斜、下划线等效果。接下来，我们将介绍一些最常用的标签。
在口语中，有时会强调某些字以改变句子的意思。同样，在书面表达中，可以使用斜体字来实现这一效果。例如，下面两个句子的意思就有所不同：
1、我希望你没什么事。
2、我希望你没什么事。
第一句话听起来像是祈祷没什么坏事发生。相反，第二句话听起来具有讽刺性而且有隐含的攻击性。
在 HTML 中，我们使用 <code><em>（emphasis）元素来标记这种情况。这不仅使文档更有趣，也帮助屏幕阅读器以不同的语调读取内容。虽然浏览器默认显示为斜体，但不应仅为了获得斜体效果而使用此标签。如果仅仅为了获得斜体样式而不增加语义辅助，应该使用 <span> 元素和一些 CSS，或者是 <i> 元素。
<p>我<em>希望</em>你没什么事。</p>
<p>我<i>希望</i>你没什么事。</p>
在 HTML 中，我们使用 <code><strong>（strong importance）元素来标记这种情况。它不仅提高了文档的语义性，还帮助屏幕阅读器以不同的语调读取内容。浏览器默认将其显示为粗体，但不应仅为了获得粗体效果而使用此标签。如果只是为了粗体样式而不增加语义，你应该使用 <span> 元素配合 CSS，或者使用 <b> 元素。
<p>这是一个<strong>重要</strong>的提醒。</p>
<p>这是一个<b>加粗</b>的文本。</p>
四、上标和下标
在 HTML 中，可以使用 <code><sup> 和 <sub> 元素来创建上标和下标。以下是它们的示例用法：
上标：使用 <sup> 标签。例如，要表示化学公式中的水分子（H₂O），可以这样写：
H<sub>2</sub>O
这将显示为：H₂O。
下标：使用 <sub> 标签。例如，要表示某个数学表达式中的平方数（x²），可以这样写：
x<sup>2</sup>
这将显示为：x²。
五、放大和缩小
<code><big> 和 <small> 是 HTML 的标签，用于改变文本的相对大小。虽然它们不如现代 CSS 那样灵活，但它们可以提供简单的放大和缩小功能。以下是它们的使用示例：
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Big and Small Example</title>
</head>
<body>
<p>这是正常大小的文本。</p>
<p><big>这是放大的文本。</big></p>
<p><small>这是缩小的文本。</small></p>
</body>
</html>
<code><big> 会使文本变大，而 <small> 会使文本变小。不过请注意，这些标签已经不推荐使用，现代开发中更倾向于使用 CSS 来控制字体大小。
六、列表
1、有序列表无序列表
在HTML中，我们可以创建无序列表（<ul>）和有序列表（<ol>）。
无序列表用于标记项目顺序不重要的清单，每个无序列表从 <ul> 元素开始，所有项目被包裹在 <ul> 内，并用 <li> 元素分别包裹每个项目。相似地，有序列表也按项目顺序排列，其结构与无序列表相同，但使用 <ol> 元素来包裹所有项目，而不是 <ul>。
<h2>无序列表示例</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<h2>有序列表示例</h2>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
2、嵌套列表
下面是一个嵌套列表的 HTML 示例，其中一个无序列表包含一个有序列表作为子项：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>嵌套列表示例</title>
</head>
<body>
<h2>嵌套列表示例</h2>
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ol>
<li>胡萝卜</li>
<li>西兰花</li>
</ol>
</li>
</ul>
</body>
</html>
在这个示例中，“水果”和“蔬菜”是无序列表的项目，而“苹果”和“香蕉”作为嵌套的无序列表项，“胡萝卜”和“西兰花”作为嵌套的有序列表项。
综合题目：
请根据以下要求编写一段HTML代码：
在页面中添加一个标题，内容为“我的水果清单”。使用无序列表列出三种水果：苹果、香蕉和橘子，并在每个水果前加上一个文本，内容为“我喜欢吃”。使用有序列表列出制作水果沙拉的三个步骤，步骤为：“准备水果”，“切水果”和“混合水果”。在制作沙拉的步骤中，使用上标表示每种水果需要切成的大小，例如：“苹果切成块的大小为2²厘米”。在页面底部用强调标签表示“重要提示：所用的水果必须新鲜”，并使用放大的文本强调。另外，写一段描述，说明选择新鲜水果的原则，并使用下标标出“维生素C”作为选择的标准。
答案示例：
<code><!DOCTYPE html>
<html lang="zh">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>我的水果清单</title>
</head>
<body>
<h1>我的水果清单</h1>
<h2>我喜欢吃的水果：</h2>
<ul>
<li>我喜欢吃苹果</li>
<li>我喜欢吃香蕉</li>
<li>我喜欢吃橘子</li>
</ul>
<h2>制作水果沙拉的步骤：</h2>
<ol>
<li>准备水果</li>
<li>切水果，苹果切成块的大小为2<sup>2</sup>厘米</li>
<li>混合水果</li>
</ol>
<h2>提示：</h2>
<p><big>重要提示：所用的水果必须新鲜</big></p>
<h2>新鲜水果选择原则：</h2>
<p>选择水果时应考虑其营养价值，特别是<sub>维生素C</sub>的含量，而新鲜水果往往能提供更高的营养价值。</p>
</body>
</html>
如有表述错误及欠缺之处敬请批评指正。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。