定义和用法：

<br/>可插入一个简单的换行符。

  • br标签是单独出现的,<br />
  • 当使用br标签时，其后面的所有内容都将在下一行出现
  • 属性
    • Common -- 一般属性
    • clear -- 换行输出方式

提示和注释：

注释：请使用 <br> 来输入空行，而不是分割段落。

<br> 标签的 clear 属性：

通常情况下，<br> 标签会告诉浏览器立即停止当前的文本流，并在下一行的左边，或者在左对齐的内联图形或表格的右边开始继续输出文本流。

但是有时候，您也许希望当前的文本流在当前左边或右边的内联表格或图像的下面一行继续输出。

HTML 4 和 XHTML 通过 <br> 标签提供了这样的功能。它可以具有三个值：left、right 或者 all，每个值都代表一个边界或两边的边界。当指定的边界没有图像时，浏览器才会继续输出文本。

提示和注释

提示：一般情况下，文本流中的其他行会在内联图像的底部显示，除非图形的 <img> 标签被设置为左对齐或右对齐（对于 <table> 标签也一样）。因此，<br> 标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。

例子：

1.不带有 align 属性的 <img> 标签与带有 clear 属性的 <br> 标签。

效果图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. </head>
  6.  
  7. <body>
  8. <img src="/i/eg_greanfoliage.jpg" />
  9. This text should wrap around the image, flowing between the image and the right margin of the document.
  10. <br />
  11. This text will flow as well, but will be below the image, extending across the full width of the page. there will be whitespace above this text and to the right of the image.
  12. </body>
  13. </html>

2.带有 align 属性的 <img> 标签与不带有 clear 属性的 <br> 标签

效果图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. </head>
  6.  
  7. <body>
  8. <img src="/i/eg_greanfoliage.jpg" align="left" />
  9. This text should wrap around the image, flowing between the image and the right margin of the document.
  10. <br />
  11. This text will flow as well, but will be below the image, extending across the full width of the page. there will be whitespace above this text and to the right of the image.
  12. </body>
  13. </html>

3.带有 align 属性的 <img> 标签与带有 clear 属性的 <br> 标签。

效果图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. </head>
  6.  
  7. <body>
  8. <img src="/i/eg_greanfoliage.jpg" align="left" />
  9. This text should wrap around the image, flowing between the image and the right margin of the document.
  10. <br clear="left" />
  11. This text will flow as well, but will be below the image, extending across the full width of the page. there will be whitespace above this text and to the right of the image.
  12. </body>
  13. </html>

4.align 属性为 absmiddle 的 <img> 标签与clear 属性为 left 的 <br> 标签。

效果图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. </head>
  6.  
  7. <body>
  8. <img src="/i/eg_greanfoliage.jpg" align="absmiddle" />
  9. This text should wrap around the image, flowing between the image and the right margin of the document.
  10. <br clear="left" />
  11. This text will flow as well, but will be below the image, extending across the full width of the page. there will be whitespace above this text and to the right of the image.
  12. </body>
  13. </html>

HTML 折行 <br/>标签的更多相关文章

  1. HTML 折行br

    HTML 折行 如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签: <p>This is<br />a para<br /&g ...

  2. echarts图表标签（axisLabel）折行

    在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...

  3. 使用<br>标签分行显示文本

    对于上一小节的例子,我们想让那首诗显示得更美观些,如显示下面效果: 怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br /> ...

  4. CSS3设置内容超过一定长度后自动折行

    在用编辑器保存的数据到数据库的时候经常是在我们的内容前后加一个P标签,但是出来之后是一行,有时候会超过边框的宽度,所以研究了如何折行,如下代码: <!DOCTYPE html> <h ...

  5. 文字折行不折行 css

    white-space : 1. normal  默认值 ,文字自动换行.               2. pre 使用<pre>标签形式,表示元素.                 * ...

  6. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  7. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  8. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  9. 正则去除字符串中的html标签，但不去除<br>标签

    一.去除html标签 filterHTMLTag(msg) { var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag msg ...

随机推荐

  1. VC6在win7环境下无法添加以及打开现有文件的解决办法

       在VC6.0中使用键盘快捷键或者是文件菜单打开现有文件以及添加文件出现编辑器停止响应,弹出内容为Microsoft(R) Developer Studio已停止工作 Windows正在检查解决该 ...

  2. 学习OpenCV——Gabor函数的应用

    原文:http://blog.csdn.net/yao_zhuang/article/details/2532279 下载cvgabor.cpp和cvgabor.h到你的C/C++工程目录下 注:在我 ...

  3. android实现程序开机自启动

    在安卓中,想要实现app开机自动启动,需要实现拦截广播android.permission.RECEIVE_BOOT_COMPLETED,并且需要使用静态注册广播的方法(即在AndroidManife ...

  4. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数008,matrix，矩阵函数

    ** 3dFromFundamentalMatrix( Rows1, Cols1, Rows2, Cols2, CovRR1, CovRC1, CovCC1, CovRR2, CovRC2, CovC ...

  5. Head中的标签

    Head中的其它一些用法 1.scheme (方案) 说明:scheme can be used when name is used to specify how the value of conte ...

  6. MongoDB数据库基本用法

    show dbs:显示数据库列表  show collections:显示当前数据库中的集合(类似关系数据库中的表)  show users:显示用户 use <db name>:切换当前 ...

  7. Hibernate 简单使用

    首先在数据库中创建相应的表,脚本如下: create table Student (id int primary key, sName ), sNO ), sex ), email )) 在Myecl ...

  8. 自定义AlertView实现模态对话框

    在Windows应用程序中,经常使用模态(Model)对话框来和用户进行简单的交互,比如登录框.在IOS应用程序中,有时我们也希望做同样的事情.但IOS的UI库中,没有模态对话框,最接近那个样子的应该 ...

  9. Python之基础知识

    一.数据类型和变量 计算机顾名思义就是做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.网页等各种各样的数据,不同的数据,需要定 ...

  10. UDP：用户数据报协议

    UDP是一个简单的面向数据报的运输层协议:进程的每个输出操作都正好产生一个UDP数据报,并组装成一份待发送的IP数据报.这与面向流字符的协议不同,如TCP,应用程序产生的全体数据与真正发送的单个IP数 ...