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

怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<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. 在浏览器控制台调试php程序

    jsp中用system.out.print如果是在eclipse中调试的话,eclipse会自动拦截系统输出流, 然后输出在控制台中,而http输出流则不受影响,php好像无此功能, PHP是一种服务 ...

  2. C++ Primer 随笔 Chapter 13 复制控制

    1.复制控制包含的内容:复制构造函数.赋值操作符.析构函数 2.复制构造函数: a. 定义:只有单个形参,而且该形参是对本类类型的引用,这样的构造函数被成为复制构造函数 b. 适用情况: (1)根据一 ...

  3. WordPress BulletProof Security插件多个HTML注入漏洞

    漏洞名称: WordPress BulletProof Security插件多个HTML注入漏洞 CNNVD编号: CNNVD-201308-023 发布时间: 2013-08-06 更新时间: 20 ...

  4. jdk环境变量配置方法

    jdk环境变量配置方法: 在安装完jdk后,还需要对jdk的环境变量进行配置才能正常使用,下面教大家如何配置jdk环境变量: 1.右键选择 计算机→属性→高级系统设置→高级→环境变量 2.系统变量→新 ...

  5. ie中弹出框中元素的定位

    用selenium在ie8浏览器中定位一个弹出框时,直接用ie developer tools可能不一定能定位到,有一个解决的办法是直接在url后面加上#noHide,刷新后,然后再用ie devel ...

  6. LeetCode (85): Maximal Rectangle [含84题分析]

    链接: https://leetcode.com/problems/maximal-rectangle/ [描述] Given a 2D binary matrix filled with '0's ...

  7. 【背包型动态规划】灵魂分流药剂(soultap) 解题报告

    问题来源 BYVoid魔兽世界模拟赛 [问题描述] 皇家炼金师赫布瑞姆刚刚发明了一种用来折磨一切生物的新产品,灵魂分流药剂.灵魂分流药剂的妙处在于能够给服用者带来巨大的痛苦,但是却不会让服用者死去,而 ...

  8. 大数据应用之：MongoDB从入门到精通你不得不知的21个为什么？

    一.引言: 互联网的发展和电子商务平台的崛起,催生了大数据时代的来临,作为大数据典型开发框架的MongoDB成为了No-sql数据库的典型代表.MongoDB从入门到精通你不得不知的21个为什么专为大 ...

  9. Android eclipse下数据开源框架GreenDao的配置

    1.前言 ORM(Object-RelationMapping,对象关系映射),是一种为了解决面向对象与数据库存在的互一匹配的现象的技术,通过描述对象和关系数据库之间的映射,将程序中的对象自动持久化到 ...

  10. Hibernate详解（5）——Hibernate核心接口和工作原理

    Hibernate核心接口 Hibernate有五大核心接口,分别是:Session Transaction Query SessionFactoryConfiguration .这五个接口构成了Hi ...