HTML段落标签、换行标签、文本格式化标签与水平线标签

这篇具有很好参考价值的文章主要介绍了HTML段落标签、换行标签、文本格式化标签与水平线标签。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

HTML段落标签

HTML换行标签

HTML格式化标签

加粗标签

倾斜标签

删除线标签

下划线标签

HTML水平线标签


HTML段落标签

在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在 HTML 标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。

为文本分段可以使用段落标签<p> </p>包裹需要放在一段的文字

<p>这是第一个段落</p>
<p>这是第二个段落</p>

注意:

  1. 在网页界面显示时,段落和段落之间存在一个较大的空隙
  2. 当前的<p>标签描述的段落,前面还没有缩进
  3. 文本在一个段落中会根据浏览器窗口的大小自动换行
  4. HTML 内容首尾处的换行, 空格均无效
  5. 在 HTML 中文字之间输入的多个空格只相当于一个空格.
  6. HTML中直接输入换行不会真的换行,而是相当于一个空格

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <p>这是第一个段落</p>当前段落内容
    第二行内容
    <p>这是第二个段落</p>当前段落内容
    第二行内容
</body>
</html>

效果如下:

HTML段落标签、换行标签、文本格式化标签与水平线标签,前端基础,前端,html5,html

HTML换行标签

在HTML中,常见用<br/>标签表示换行,也可以用<br>标签,但是不规范

📌

注意<br/>标签为单标签

这是第一句话,接下来需要换行<br/>已经换行

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    这是第一句话,接下来需要换行<br/>已经换行
</body>
</html>

效果如下:

HTML段落标签、换行标签、文本格式化标签与水平线标签,前端基础,前端,html5,html

HTML格式化标签

在HTML中,可以使用下面的标签实现对应的属性,并且这些标签可以嵌套使用

  1. 加粗: <strong> 标签 和 <b> 标签
  2. 倾斜: <em> 标签 和 <i> 标签
  3. 删除线: <del> 标签 和 <s> 标签
  4. 下划线: <ins> 标签 和 <u> 标签

📌

在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同,但是为了更加强调文本效果,提高代码可读性,推荐用第一种标签

加粗标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粗体测试</title>
</head>
<body>
    <h1>下面是加粗文本和非加粗文本的对比</h1>
    <strong>这是一个加粗文本</strong><br>
    这是一个普通文本
</body>
</html>

效果如下:

HTML段落标签、换行标签、文本格式化标签与水平线标签,前端基础,前端,html5,html

倾斜标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倾斜标签测试</title>
</head>
<body>
    <h1>下面是倾斜文本和非倾斜文本对比</h1>
    <em>这是一个倾斜的文本</em><br>
    这是一个普通文本
</body>
</html>

效果如下:

HTML段落标签、换行标签、文本格式化标签与水平线标签,前端基础,前端,html5,html

删除线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除线标签测试</title>
</head>
<body>
    <h1>下面是有删除线和没有删除线的文本对比</h1>
    <del>这是有删除线的文本</del><br>
    这是一个普通文本
</body>
</html>

效果如下:

HTML段落标签、换行标签、文本格式化标签与水平线标签,前端基础,前端,html5,html

下划线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下划线标签测试</title>
</head>
<body>
    <h1>下面是有下划线的文本和无下划线的文本对比</h1>
    <ins>这是一个有下划线的文本</ins><br/>
    这是一个普通文本
</body>
</html>

效果如下:

HTML段落标签、换行标签、文本格式化标签与水平线标签,前端基础,前端,html5,html

HTML水平线标签

在HTML中,使用<hr>标签可以在网页上实现水平分割线的效果

📌

注意,水平分割线标签为单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平线标签测试</title>
</head>
<body>
    <h1>当前标签下面的横线为水平线</h1>
    <hr>
    这是分割线下方的测试文本
</body>
</html>

效果如下:

HTML段落标签、换行标签、文本格式化标签与水平线标签,前端基础,前端,html5,html文章来源地址https://www.toymoban.com/news/detail-859832.html

到了这里,关于HTML段落标签、换行标签、文本格式化标签与水平线标签的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vscode格式化代码禁止自动换行

    问题产生 代码格式化的功能由插件提供,比如veture,默认的配置超过很短的长度就回换行。 所以需要修改配置。 打开 文件 - 首选项 - 设置,然后点击右上角的图标。进入settings.json文件。 搜狗截图20220421170631.png 在这里面写配置。 问题解决 1.使用Prettier - Code formatter来格式化

    2024年02月06日
    浏览(52)
  • VSCode代码格式化自动换行问题

    VSCode设置了保存自动格式化时,代码超过一定长度后会自动换行,我想禁止自动换行,找了很多方法都没有效果。 后来经过了长时间的寻找,终于找到了相应的解决方法,分为两个,如果其中一个不行,可以尝试另外一个。 第一种方法: 打开VSCode,然后在编辑器的顶部菜单

    2024年02月16日
    浏览(49)
  • [HTML]Web前端开发技术2(HTML5、CSS3、JavaScript )格式化文本标记,定义列表,<blockquote>,definition description,ruby——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,大大会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 格式化文字与段落 Web页面设计原则 向Web页面添加文字信息 格式化文本标记 标题字标记 添加空格与特

    2024年02月05日
    浏览(94)
  • VSCode格式化C/C++ 修改为大括号不换行

    \\\"C_Cpp.clang_format_style\\\" 和 \\\"C_Cpp.clang_format_fallbackStyle\\\" 是用于配置 Visual Studio Code 中 C/C++ 扩展的 Clang 格式化器的两个不同设置。 \\\"C_Cpp.clang_format_style\\\" 用于指定在使用 Clang 格式化器时的首选格式化风格。如果你在项目中有 .clang-format 文件或者其他适用的设置,那么将会使用这些设

    2024年04月16日
    浏览(41)
  • C#WPF文本格式化模式实例

    本文演示C#WPF文本格式化模式实例 WPF中的文本渲染和旧式的基于 GDI的应用程序的文本染有很大区别。很大一部分区 别是由于 WPF 的设备无关显示系统造成的,但 WPF 中的文本染也得到了显著增强,能更清晰地显示文本,在 LCD 监视器上尤其如此。 然而,WPF 文本渲染具有一个众

    2024年02月06日
    浏览(33)
  • 【工具分享】程序员在线工具集(json格式化-html格式化-加密工具)

    演示地址 在线工具集 功能介绍 json格式化 。 JSON 可以将程序语言对象中表示的一组数据转换为字符串,然后就可以在网络或者程序之间轻松地传递这个字符串,并在需要的时候将它还原为各编程语言所支持的数据格式,例如在 PHP 中,可以将 JSON还原为数组或者一个基本对象

    2024年02月12日
    浏览(55)
  • 【影刀演示_发送邮件的格式化HTML留存】

    发送邮件的格式化HTML留存 纯文本: 结果:

    2024年02月06日
    浏览(29)
  • 【温故而知新】HTML元素/属性/标题/注释/段落/文本格式/头部/主体

    HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它被用来描述网页的结构和内容,并且是网页浏览器能够解析和渲染网页的基础。HTML5 是 HTML 的最新版本,增加了许多新的元素和功能,以适应现代网页开发的需求。 HTML5 提供了许多新的元素和

    2024年01月16日
    浏览(43)
  • 无插件,简单配置prettier,将微信小程序的wxml和wxss当作html和css进行格式化

    使用prettier的项目、安装了prettier扩展的vscode和微信开发者工具。 prettier是根据默认的解析器对相应的文件进行处理,我们可以自定义什么格式的文件用什么解析器。具体看 documentSelectors。 只列出有关的配置 编辑器的配置 设置wxml和wxss文件的默认格式化工具为prettier 配置pre

    2024年02月09日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包