2025年3月14日 星期五 甲辰(龙)年 月十三 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

HTML:段落标签,文本格式化标签

时间:02-02来源:作者:点击数:18

如题,今天来实践 2 类标签。

一、段落标签

HTML 段落标签<p>用于定义 HTML 文档中的一个段落,用于文档布局中划分不同的段落,让文档更具结构性和可读性。

  • <!DOCTYPE html>
  • <html lang="en">
  •   <head>
  •     <meta charset="UTF-8" />
  •     <title>Document</title>
  •   </head>
  •   <body>
  •     <p>这是一个段落</p>
  •     <p>这是另一个段落</p>
  •   </body>
  • </html>

如果希望在段落内换行如何做?通过在内容中加上<br> 或者<br />,比如:

  • <p>你转身向背,<br />侧脸还是很美。</p>

效果如下。

图片

<br> 是单标签,因此只包含开始标签,没有结束标签。<br>标签的作用是,在 HTML 文档中另起一个行,使接下来的文本从新的一行开始显示。

二、文本格式化标签

HTML 文本格式化标签用于对文本进行格式化、排版和样式设置。一些常见的 HTML 文本格式化标签包括:

1、<b>:将文本加粗显示。

2、<strong>:表示文本的重要性,通常显示为加粗字体。

3、<i>:将文本以斜体显示。

4、<em>:表示文本的强调内容,通常以斜体显示。

5、<u>:将文本添加下划线。

6、<s><strike>:将文本显示为删除线。

7、<sup>:将文本显示为上标(上方小字体)。

8、<sub>:将文本显示为下标(下方小字体)。

9、<code>:将文本显示为等宽字体,通常用于表示计算机代码或代码片段。

代码如下:

  • <!DOCTYPE html>
  • <html lang="en">
  •   <head>
  •     <meta charset="UTF-8" />
  •     <title>Document</title>
  •   </head>
  •   <body>
  •     <p>使用 <b>标签</b> 将文本加粗显示。</p>
  •     <hr />
  •     <p>使用 <strong>标签</strong> 表示文本的重要性,通常显示为加粗字体。</p>
  •     <hr />
  •     <p>使用 <i>标签</i> 将文本以斜体显示。</p>
  •     <hr />
  •     <p>使用 <em>标签</em> 表示文本的强调内容,通常以斜体显示。</p>
  •     <hr />
  •     <p>使用 <u>标签</u> 将文本添加下划线。</p>
  •     <hr />
  •     <p>使用 <s>标签</s>或者 <strike>标签</strike> 将文本显示为删除线。</p>
  •     <hr />
  •     <p>使用 <sup>+1</sup> 将文本显示为上标(上方小字体)。</p>
  •     <hr />
  •     <p>使用 <sub>下标</sub> 将文本显示为下标(下方小字体)。</p>
  •     <hr />
  •     <p>使用 <code>标签</code> 将文本显示为等宽字体,通常用于表示计算机代码或代码片段。</p>
  •     <hr />
  •   </body>
  • </html>

效果如下。

图片

这些标签可以单独使用,也可以结合使用来实现更复杂的文本样式和格式。

那相似的效果的标签,我们怎么用呢?

如果为了更好地语义化和可访问性,应根据文本的含义和用途选择合适的标签。

比如,我们看到的 b 标签和 strong 标签外观一样,i 标签和 em 标签外观一样。但二者的语义不一样。b,i 标签 是一种纯粹的样式标签,而 strong,em 标签是一种具有语义含义的标签。

因此,推荐根据文本的语义含义来选择使用,以提高页面的可访问性和语义化。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐