HTML 文本格式化

HTML文本格式化通常使用一系列特定的标签来改变文本的外观或结构。这些标签可以控制文本的字体、大小、颜色、对齐方式等，也可以用来标记文本的逻辑结构（如段落、标题、列表等）。除了这些基本的格式化标签，HTML还支持通过CSS（级联样式表）来更精细和灵活地控制文本的格式和样式。

参考文档：https://www.cjavapy.com/article/3306/

1、标题

HTML中，文本格式化和结构化主要通过一系列标签来完成，其中标题（Headings）标签是最常用于定义文本格式的元素之一。HTML提供了六级标题标签，从 <h1> 到 <h6>，<h1> 表示最高级别的标题，而 <h6> 表示最低级别的标题。这些标题标签不仅帮助改善网页的结构和可读性，还对搜索引擎优化（SEO）至关重要，因为搜索引擎使用这些标签来识别网页上的不同部分和内容的层次结构。每个级别的标题都有默认的样式，通常是不同的大小和加粗，以显示它们的层次结构

<h1>这是一个 H1 标题</h1>
<h2>这是一个 H2 标题</h2>
<h3>这是一个 H3 标题</h3>
<h4>这是一个 H4 标题</h4>
<h5>这是一个 H5 标题</h5>
<h6>这是一个 H6 标题</h6>

2、段落与换行

HTML中，文本格式化通常涉及使用特定的标签来控制文本的显示方式。段落和换行是两个基本但非常重要的文本格式化概念。用<p>创建段落，<br>插入换行。

1）段落 (<p> 标签)

<p> 标签自带上下边距，用以区分不同的段落。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2）换行 (<br> 标签)

<br> 标签只是简单地添加一个换行点，不添加任何额外的空间或边距，并且通常用于诗歌或地址等需要精确控制换行位置的文本。

这是文本行的开始。<br>这是新的一行，但在同一个段落内。

3、强调文本

使用<em>和<strong>强调文本。HTML中，强调文本通常使用 <em> 和 <strong> 标签来实现。这两个标签既有语义意义，也影响文本的表现形式。

<em> 标签用于表示强调文本，通常表现为斜体，用以表示文本的轻度强调。

<strong> 标签用于表示更强烈的强调，通常表现为加粗，表示文本的高度强调。

<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>

4、列表

HTML 提供了两种主要的列表类型：有序列表（<ol>）和无序列表（<ul>）。两种类型都使用列表项（<li>）来定义列表中的实际项。

1）有序列表

有序列表以 <ol> 标签开始。每个列表项都放在 <li> 标签内。列表是有序的，也就是每个项目都是编号的。这适用于项目顺序很重要的列表，如食谱或待办事项列表。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

2）无序列表

无序列表以 <ul> 标签开始。像有序列表一样，每个项都放在 <li> 标签内。然而，无序列表中的项目不是编号的。使用圆点符号进行表示。这适用于项目顺序不重要的列表，如购物清单。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>

<h1>HTML 文本格式化</h1>
<p>这是一个<em>斜体</em>和<strong>加粗</strong>的示例。</p>
<p><u>这段文本下划线</u>和<s>这段文本是删除线</s>。</p>
<p>化学水分子公式为H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
这是预格式化文本，
保留了空格和
换行符。
</pre>

<blockquote>这是一个长引用的示例，可能包含多个段落。</blockquote>
<p>这是一个<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>进行网页设计。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>
<p><samp>这是计算机程序的输出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作为变量。</p>

</body>
</html>

参考文档：https://www.cjavapy.com/article/3306/

mg标签的应用场景

我们平时在浏览网站的过程中如果只有文字的话难免会有些太单调了，并且看文字多了眼睛也会比较难受，这时我们想要让我们的网页更漂亮更吸引人眼球，那么肯定少不了精美的图片来进行点缀，这就用到了今天我要教给大家的图像标签img。

img标签的组成

src：图片的路径这个是必须要有的

title：当我们把鼠标移动到图片上展示的文本内容

alt：当图片的路径错误或图片有问题时浏览器无法识别渲染的情况下展示的文本内容

width：设置图片的宽度

height：设置图片的高度

img标签的使用

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<pre>

../:代表上一级目录

../../：上上级目录

当前目录中的文件夹下使用：文件夹名称/图片名称

上n级目录下的n级文件夹：n个../+n个文件夹的名称直到找到图片文件为止

</pre>

<img src="img/章泽天.png" title="这是同一目录中文件夹下的图片"><img src="../田馥甄.png" width="350"

height="300" title="这是上一级目录中的图片">

</body>

</html>

浏览器预览效果图

以上就是img图片标签的简单应用

学生就可以看懂的css基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。

可能比较枯燥，但是再坚持一下，前端知识的大门就会大开了。

在线咨询

上一篇：电话销售手机封卡解决办法
下一篇：零基础能不能学习HTML?零基础必看

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商