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

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

上节的代码改为：

语法：

xhtml1.0写法：

<br />

html4.01写法：

<br>

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

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

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

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

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

示例:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>br标签的使用</title>

</head>

<body>

<h2>《咏桂》</h2>

<p>暗淡轻黄体性柔，<br/>情疏迹远只香留。<br/>何须浅碧深红色，<br/>自是花中第一流。</p>

</body>

</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. iOS开发学习--纯代码 UIScrollView 无限循环的实现——代码类封装

    一个简单的利用UIScrollView 实现的无线滚动banner,下面的代码实现,因为封装问题,对两个及一下的view 支持出了一点问题(view是传参进来的,不可以生成两份),但是原理是正确的,智 ...

  2. vsphere 出现“在主机的当前连接状况下不允许执行该操作”

    问题: 登录vsphere client启动虚拟机出现“在主机的当前连接状况下不允许执行该操作” 解决方法: 1.选择主机->右键->断开 2.选择主机->右键->连接 3.在 ...

  3. TWinControl的刷新过程（5个非虚函数，4个覆盖函数，1个消息函数，默认没有双缓冲，注意区分是TCustomControl还是Windows原生封装控件，执行流程不一样）

    前提条件:要明白在TWinControl有以下四个函数的存在,注意都是虚函数: procedure Invalidate; override;procedure Update; override;pr ...

  4. Android Wear开发 - 数据通讯 - 第一节 : 连接数据层

    http://developer.android.com/training/wearables/data-layer/accessing.html Accessing the Wearable Dat ...

  5. How to add alias on Mac(It's common for most system)

    Since these files are hidden you will have to do an ls -a to list them. If you don't have one you ca ...

  6. 「Poetize3」导弹防御塔

    描述 Description Freda控制着N座可以发射导弹的防御塔.每座塔都有足够数量的导弹,但是每座塔每次只能发射一枚.在发射导弹时,导弹需要T1秒才能从防御塔中射出,而在发射导弹后,发射这枚导 ...

  7. ♫【Backbone】this

    Backbone.js Event Binding MyView = Backbone.View.extend({ events: { 'click .item': 'handleClick' }, ...

  8. github上排名靠前的java项目之_storm

    1.和hadoop的比较 Storm: 分布式实时计算,强调实时性,常用于实时性要求较高的地方 Hadoop:分布式批处理计算,强调批处理,常用于数据挖掘.分析   2.Hadoop是实现了mapre ...

  9. Vim笔记

    复制多行: v 可视化,选择多行,然后yy复制.

  10. FZYZOJ-1578 [NOIP福建夏令营]数列分段

    P1578 -- [NOIP福建夏令营]数列分段 时间限制:1000MS      内存限制:131072KB 状态:Accepted      标签:    二分   无   无 Descripti ...