zoukankan      html  css  js  c++  java
  • HTML 折行 <br/>标签

    定义和用法:

    <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> 标签。

    效果图:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
    <img src="/i/eg_greanfoliage.jpg" />
    This text should wrap around the image, flowing between the image and the right margin of the document.
    <br />
    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.
    </body>
    </html>

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

    效果图:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
    <img src="/i/eg_greanfoliage.jpg" align="left" />
    This text should wrap around the image, flowing between the image and the right margin of the document.
    <br />
    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.
    </body>
    </html>

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

    效果图:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
    <img src="/i/eg_greanfoliage.jpg" align="left" />
    This text should wrap around the image, flowing between the image and the right margin of the document.
    <br clear="left" />
    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.
    </body>
    </html>

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

    效果图:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
    <img src="/i/eg_greanfoliage.jpg" align="absmiddle" />
    This text should wrap around the image, flowing between the image and the right margin of the document.
    <br clear="left" />
    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.
    </body>
    </html>
  • 相关阅读:
    用于爬取知乎某个话题下的精华问题中所有回答的爬虫
    BSP -- 图书共享系统(Book Sharing Platform)
    【已解决】WPS2018 从第三页开始插入页眉页码(即前两页不要页眉页码)
    【编译原理】大白话讲解 First 集和 Follow 集的构造算法
    如果
    HTTP协议(1)------->资源和URL
    JavaWeb框架_Struts2_(八)----->Struts2的国际化
    深入理解java虚拟机----->垃圾收集器与内存分配策略(下)
    深入理解java虚拟机----->垃圾收集器与内存分配策略(上)
    JavaWeb框架_Struts2_(七)----->文件的上传和下载
  • 原文地址:https://www.cnblogs.com/zuihongyan/p/5640790.html
Copyright © 2011-2022 走看看