对于上一小节的例子,我们想让那首诗显示得更美观些,如显示下面效果:

怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。

上节的代码改为:

语法:

xhtml1.0写法:

<br />

html4.01写法:

<br>

大家注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。

与以前我们学过的标签不一样,<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br /><hr /><img />

讲到这里,你是不是有个疑问,想折行还不好说嘛,就像在 word 文件档或记事本中,在想要折行的前面输入回车不就行了吗?很遗憾,在 html 中是忽略回车和空格的,你输入的再多回车和空格也是显示不出来的。如下边的代码。

上面的代码在浏览中显示是没有回车效果的。如下图所示:

总结:在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />

示例:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>br标签的使用</title>
  6. </head>
  7. <body>
  8. <h2>《咏桂》</h2>
  9. <p>暗淡轻黄体性柔,<br/>情疏迹远只香留。<br/>何须浅碧深红色,<br/>自是花中第一流。</p>
  10. </body>
  11. </html>

  

使用<br>标签分行显示文本的更多相关文章

  1. <q>标签,短文本引用;<blockquote>标签,长文本引用

    <q>标签,短文本引用 <q>引用文本</q>,默认显示双引号,不需要在文本中添加 <blockquote>标签,长文本引用 浏览器对<block ...

  2. FusionCharts:tooltip分行显示

    FusionCharts:tooltip分行显示 tooltip分行显示:如果tooltip过长,可分行显示,在tooltip中增加{br} <chart> <set label=' ...

  3. pyqt5:标签显示文本框内容

    文本框(lineEdit)输入文本,标签(label)就会显示文本框的内容. 原理如下: 输入文本时,lineEdit控件发射信号textChanged(),label收到后触发setText()槽. ...

  4. HTML 折行 <br/>标签

    定义和用法: <br/>可插入一个简单的换行符. br标签是单独出现的,<br /> 当使用br标签时,其后面的所有内容都将在下一行出现 属性 Common -- 一般属性 c ...

  5. html之br标签

    <br>:自闭合 一般用法: 标签会告诉浏览器立即停止当前的文本流,并在下一行的左边继续输出,也通常用来在相临的段落之间制造一段垂直的间距. 代码: 效果: 问题:当段落中有表格或图片时怎 ...

  6. 10、NFC技术:读写NFC标签中的文本数据

    代码实现过程如下: 读写NFC标签的纯文本数据.java import java.nio.charset.Charset; import java.util.Locale; import androi ...

  7. 使用freemaker 导出word 含多张图片,若无图片则显示文本信息

    1.使用的Microsoft Office 2007,添加一个无边框的表格,并插入一张图片,最后另存为编码utf-8,一开始保存的word xml格式的,图片的base64编码位于文档最后,暂时没有找 ...

  8. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  9. 固定UILabel宽度分行显示

    固定UILabel宽度分行显示 这种小伎俩估计都被用烂了,笔者给大家提供一个category文件,供大家简单设置哦. 各种富文本效果哦(普通文本也是可以用的呢): 3行,固定宽度200 2行,固定宽度 ...

随机推荐

  1. 全是干货---Linux 高可用(HA)集群基本概念详解

    http://www.linuxidc.com/Linux/2013-08/88522.htm 高可用集群的衡量标准    HA(High Available), 高可用性群集是通过系统的可靠性(re ...

  2. 实战weblogic集群之应用部署

    一.创建应用发布目录,上传应用包. 1.在10.70.52.11-14的/app/sinova目录下建立applications目录(名称可以自定义),作为我们应用的发布目录. $ mkdir /ap ...

  3. socket(tcp)互发信息

    一:有图有真相,很简单 a, b, Thread 构造函数(ParameterizedThreadStart)初始化 Thread 类的新实例,指定允许对象在线程启动时传递给线程的委托. 参数star ...

  4. 福州大学 Problem 2169 shadow

    http://acm.fzu.edu.cn/problem.php?pid=2169 思路:建立一个邻接表,利用搜索中回溯把走过的路标记为1,然后把这些标记为1的值全部加起来. Problem 216 ...

  5. oracle常用命令总结

    声明:本文为博主在做项目中用到的一些常用命令,请勿转载,只为保存. oracle常用命令总结 创建表空间: --create tablespace vms--datafile 'e:\vms.dbf' ...

  6. Redis的Java客户端Jedis的八种调用方式(事务、管道、分布式)介绍

    jedis是一个著名的key-value存储系统,而作为其官方推荐的java版客户端jedis也非常强大和稳定,支持事务.管道及有jedis自身实现的分布式. 在这里对jedis关于事务.管道和分布式 ...

  7. Oracle 数据库 Database Express Edition 11g Release 2 (11.2) 错误解决集锦(使用语法)

    ORA-14552: 在查询或 DML 中无法执行 DDL, 提交或回退 PL/SQL“ORA-14551:无法在查询中执行DML操作 解决:在声明函数时加上: PRAGMA AUTONOMOUS_T ...

  8. ECLIPSE TOMCAT CONFIG JSTL

    {LJ?Dragon}[标题]Eclipse 配置 JSTL标签库 {LJ?Dragon}[Diary]2017年,愉快的开始:当和他们离别时,感觉失去了整个世界.........   1.JSTL简 ...

  9. GS1已分配给国家(地区)编码组织的前缀码

    前缀码即商品条码(EAN-13或者EAN-8)的前三位,其代表的是一个国家和地区,由此前缀可查出所购买的商品是出产自哪个国家的. 下表列出了GS1已分配给国家(地区)编码组织的前缀码 前缀码 管理的国 ...

  10. Codeforces 112B-Petya and Square(实现)

    B. Petya and Square time limit per test 2 seconds memory limit per test 256 megabytes input standard ...