HTML 折行 <br/>标签

本文详细介绍了HTML中的br标签,包括其定义、用法及属性。解释了如何使用br标签进行文本换行,尤其是在处理内联图像和文本流时的clear属性的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

定义和用法:

<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>

 

转载于:https://www.cnblogs.com/zuihongyan/p/5640790.html

你是顶级ui设计大师,请使用bootstrap5帮我重新设计这个页面。 <!DOCTYPE html> <html><head> <!-- IEバージョン設定 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"> <title>他社移管入出庫 メニュー画面</title> <!-- CSS設定 --> <link rel="stylesheet" type="text/css" href="./TSOCMS/resources/css/tsocms.css"> </head> <body> <br><br> <br><br> <br><br> <div align="center"> <div class="menuDaiTitle">他社移管入出庫システム メインメニュー (Ver.2.0.3)</div> <div align="center" class="menuDiv"> <fieldset class="fieldMenu"> <legend align="left" class="menuTitle">他社移管入出庫システム</legend> <div class="logininfo"> testjmtでログインしています <button type="button" name="logoutButton" value="logoutButton" class="logoutButton" onclick="location.href='/TSOCMS/login/dologout'">ログアウト</button> </div> <table class="menuTable"> <tbody> <tr align="center"> <td> <button type="button" name="menuButton1" value="menuButton1" class="menuButton1" onclick="location.href='/TSOCMS/capture'">CSV取込</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton2" value="menuButton2" class="menuButton2" onclick="location.href='/TSOCMS/search'">検索・照合</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton3" value="menuButton3" class="menuButton1" onclick="location.href='/TSOCMS/reportmail'">報告メール</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton4" value="menuButton4" class="menuButton2" onclick="location.href='/TSOCMS/master'">マスタ管理</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton7" value="menuButton7" class="menuButton1" onclick="location.href='/TSOCMS/changepass'">パスワード変更</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton8" value="menuButton8" class="menuButton2" onclick="location.href='/TSOCMS/usermasterlist'">ユーザ管理</button> </td> </tr> </tbody> </table> </fieldset> </div> </div> </body> </html> 你是顶级ui设计大师,请使用bootstrap5帮我重新设计这个页面。 <!DOCTYPE html> <html><head> <!-- IEバージョン設定 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"> <title>他社移管入出庫 メニュー画面</title> <!-- CSS設定 --> <link rel="stylesheet" type="text/css" href="./TSOCMS/resources/css/tsocms.css"> </head> <body> <br><br> <br><br> <br><br> <div align="center"> <div class="menuDaiTitle">他社移管入出庫システム メインメニュー (Ver.2.0.3)</div> <div align="center" class="menuDiv"> <fieldset class="fieldMenu"> <legend align="left" class="menuTitle">他社移管入出庫システム</legend> <div class="logininfo"> testjmtでログインしています <button type="button" name="logoutButton" value="logoutButton" class="logoutButton" onclick="location.href='/TSOCMS/login/dologout'">ログアウト</button> </div> <table class="menuTable"> <tbody> <tr align="center"> <td> <button type="button" name="menuButton1" value="menuButton1" class="menuButton1" onclick="location.href='/TSOCMS/capture'">CSV取込</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton2" value="menuButton2" class="menuButton2" onclick="location.href='/TSOCMS/search'">検索・照合</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton3" value="menuButton3" class="menuButton1" onclick="location.href='/TSOCMS/reportmail'">報告メール</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton4" value="menuButton4" class="menuButton2" onclick="location.href='/TSOCMS/master'">マスタ管理</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton7" value="menuButton7" class="menuButton1" onclick="location.href='/TSOCMS/changepass'">パスワード変更</button> </td> </tr> <tr align="center"> <td> <button type="button" name="menuButton8" value="menuButton8" class="menuButton2" onclick="location.href='/TSOCMS/usermasterlist'">ユーザ管理</button> </td> </tr> </tbody> </table> </fieldset> </div> </div> </body> </html>
最新发布
07-11
<html><head><meta http-equiv="Content-Type" content="text/html; charset= =iso-8859-1"> <title>Trioptics Certificate</title> <link type="text/css" rel="stylesheet" href="certificate.css"></link> <base href="file:///C:/Program%20Files%20(x86)/TRIOPTICS%20GmbH/MTF-LAB%2= 05/Certificates/"></base></head> <body id="IBodyCert" class="CBodyCert"> <!-- open certificate table --> <table align="left" id="ITableCert" class="CTableCert"> <!-- Header --> <tbody><tr id="ITRCompany" class="CTRHeader"> <td id="ITDCompany" class="CTDHeader"> <div id="IDivCompany" class="CDivHeader">ImageMaster - Certificate</div> </td> <td id="ITDLogo" class="CTDHeader"> <img src="./img/Trioptics-Logo-250x65.png" id="ITDLogo" class="CTDHea= der"> </td> </tr> <tr id="ITDSlogan" class="CTRHeader"> <td colspan="2" id="ITDSlogan" class="CTDHeader"> </td> </tr> <tr> <td colspan="2"> <pre>Company : ****** Operator : ****** Time/Date : 13:30:33 June 12, 2025 Sample ID : ****** Measure Program : MTF vs. Field Temperature : 20°C Measured with : <a href="http://www.trioptics.com/">TRIOPTICS</a> - MT= F-LAB - Vers. 5.16.1 Instrument S/N : 09-113-0519 Comments : SN215U0540 </pre> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> <hr> <b>Measurement Parameter: MTF vs. Image Height</b> <pre>Setup Type : Object Infinite / Image Finite EFL (Collimator): 50 mm Wavelength : 940 nm (NIR) EFL (Sample) : 1.5550 mm F-Number : 2.0000 Object Angle : -0.0198 ° Focus Position : 85.8471 Sample Azimuth : 0.0 ° </pre></td> </tr> <tr> <td colspan="2"> <hr> <b>Measurement Graph: MTF vs. Image Height</b> <br><br> <right> <img src="Chart12.png"> </right> </td> </tr> <tr> <td colspan="2"> <hr> <b>Measurement Table: MTF vs. Image Height</b> <br><br> <!-- open measurement table --> <table cellspacing="0" align="left" id="ITableDataItems" class="CTa= bleDataItems"> <!-- begin table caption --> <tbody><tr id="ITRDataCaption" class="CTRDataCaption"> <td id="ITDCaptionBlank" class="CTDCaptionBlank"></td> <td align="center" colspan="5" id="ITDDataCaption" class="CTDDataCa= ption">Image Height (mm)</td> </tr> <tr id="ITRDataCaption" class="CTRDataCaption"> <td id="ITDDataCaption" class="CTDDataCaption">MTF</td> <td id="ITDDataCaption" class="CTDDataCaption">0.42800</td> <td id="ITDDataCaption" class="CTDDataCaption">0.29960</td> <td id="ITDDataCaption" class="CTDDataCaption">-0.00114</td> <td id="ITDDataCaption" class="CTDDataCaption">-0.29960</td> <td id="ITDDataCaption" class="CTDDataCaption">-0.42800</td> <td id="ITDDataCaption" class="CTDDataCaption">Legend</td> </tr> <!-- end table caption --> <!-- begin measurement data --> <tr id="ITRDataItem" class="CTRDataItem"> <td id="ITDEven" class="CTDDataItem">Tan 100(lp/mm)</td> <td id="ITDEven" class="CTDDataItem">0.599</td> <td id="ITDEven" class="CTDDataItem">0.677</td> <td id="ITDEven" class="CTDDataItem">0.668</td> <td id="ITDEven" class="CTDDataItem">0.703</td> <td id="ITDEven" class="CTDDataItem">0.645</td> <td colspan="1" id="ITDLegend" class="CTDLegend"><font color="ff000= 0">— — —</font></td> </tr> <tr id="ITRDataItem" class="CTRDataItem"> <td id="ITDEven" class="CTDDataItem">Sag 100(lp/mm)</td> <td id="ITDEven" class="CTDDataItem">0.558</td> <td id="ITDEven" class="CTDDataItem">0.659</td> <td id="ITDEven" class="CTDDataItem">0.673</td> <td id="ITDEven" class="CTDDataItem">0.688</td> <td id="ITDEven" class="CTDDataItem">0.642</td> <td colspan="1" id="ITDLegend" class="CTDLegend"><font color="ff000= 0">————</font></td> </tr> <!-- end measurement data --> <!-- close measurement table --> </tbody></table><br clear="all"> </td> </tr> <tr> <td colspan="2"> <hr> <b>Measurement Parameter: MTF vs. Object Angle</b> <pre>Setup Type : Object Infinite / Image Finite EFL (Collimator): 50 mm Wavelength : 940 nm (NIR) EFL (Sample) : 1.5550 mm F-Number : 2.0000 Object Angle : -0.0198 ° Focus Position : 85.8471 Sample Azimuth : 0.0 ° </pre></td> </tr> <tr> <td colspan="2"> <hr> <b>Measurement Graph: MTF vs. Object Angle</b> <br><br> <right> <img src="Chart11.png"> </right> </td> </tr> <tr> <td colspan="2"> <hr> <b>Measurement Table: MTF vs. Object Angle</b> <br><br> <!-- open measurement table --> <table cellspacing="0" align="left" id="ITableDataItems" class="CTa= bleDataItems"> <!-- begin table caption --> <tbody><tr id="ITRDataCaption" class="CTRDataCaption"> <td id="ITDCaptionBlank" class="CTDCaptionBlank"></td> <td align="center" colspan="5" id="ITDDataCaption" class="CTDDataCa= ption">Object Angle (?</td> </tr> <tr id="ITRDataCaption" class="CTRDataCaption"> <td id="ITDDataCaption" class="CTDDataCaption">MTF</td> <td id="ITDDataCaption" class="CTDDataCaption">-15.33590</td> <td id="ITDDataCaption" class="CTDDataCaption">-10.72937</td> <td id="ITDDataCaption" class="CTDDataCaption">0.00072</td> <td id="ITDDataCaption" class="CTDDataCaption">10.77662</td> <td id="ITDDataCaption" class="CTDDataCaption">15.40352</td> <td id="ITDDataCaption" class="CTDDataCaption">Legend</td> </tr> <!-- end table caption --> <!-- begin measurement data --> <tr id="ITRDataItem" class="CTRDataItem"> <td id="ITDEven" class="CTDDataItem">Tan 100(lp/mm)</td> <td id="ITDEven" class="CTDDataItem">0.599</td> <td id="ITDEven" class="CTDDataItem">0.677</td> <td id="ITDEven" class="CTDDataItem">0.668</td> <td id="ITDEven" class="CTDDataItem">0.703</td> <td id="ITDEven" class="CTDDataItem">0.645</td> <td colspan="1" id="ITDLegend" class="CTDLegend"><font color="ff000= 0">— — —</font></td> </tr> <tr id="ITRDataItem" class="CTRDataItem"> <td id="ITDEven" class="CTDDataItem">Sag 100(lp/mm)</td> <td id="ITDEven" class="CTDDataItem">0.558</td> <td id="ITDEven" class="CTDDataItem">0.659</td> <td id="ITDEven" class="CTDDataItem">0.673</td> <td id="ITDEven" class="CTDDataItem">0.688</td> <td id="ITDEven" class="CTDDataItem">0.642</td> <td colspan="1" id="ITDLegend" class="CTDLegend"><font color="ff000= 0">————</font></td> </tr> <!-- end measurement data --> <!-- close measurement table --> </tbody></table><br clear="all"> </td> </tr> <!-- close certificate table --> </tbody></table> </body></html> 为啥这个内容调用QDomDocument的setContent会失败
06-28
``` <%@ page language="java" import="test_package.*" import="java.util.*" import="java.sql.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../style/certificate.css"> </head> <body> <% List<test_information> list = (List<test_information>)session.getAttribute("date"); %> <div class = "tit">查看凭证</div> <div class = "Ribbon"> <table> <tr> <td style="white-space: nowrap;"> <!-- 按钮1 --> <input type="button" value="传统记账" class="R_button"> <!-- 表单2 - 导出 --> <form action="" class="inline-form"> <input type="submit" value="导出" class="R_button"> </form> <!-- 表单3 - 打印 --> <form id="printForm" action="white.jsp" method="post" class="inline-form"> <input type="hidden" id="selectedTelsHiddenField" name="telsToPrint"> <input type="submit" value="打印" onclick="return submitSelectedTels();" class="R_button"> </form> <!-- 按钮4 --> <input type="button" value="模板" onclick="template.show()" class="R_button"> </td> <td> <input type = "text" name = "search_name"> <input type = "button" value = "搜索"> </td> </tr> </table> </div> <div class="body"> <table class="cer" > <% for(test_information news:list) { %> <!-- 将每条记录分为两列展示 --> <tr> <td class="zero_box"> <input type="checkbox" name="selectedTels" value="<%=news.getTel()%>" onchange="updateSelection(this)" style = "zoom : 300%"> </td> <td class="first_box"> <%= news.getMaterial() %> <br/> <%= news.getStart_time() %> </td> <td class="second_box"> <%= news.getWashing_method() %> <br/> <%= news.getPrice() %> </td> <td class="third_box"> <form action =""> <input name = "id" value ="<%=news.getTel() %>" type = "hidden"> <input type ="submit" class = "func_button" value = "税费" ><br> <input type ="submit" class = "func_button" value = "查看凭证" ><br> <input type ="submit" class = "func_button" value = "删除凭证" > </form> <br/> </td> </tr> <% } %> </table> <div style="display:none;" id="printArea"></div> </div> <script> let selectedTelsArray = []; function updateSelection(el) { if (el.checked && !selectedTelsArray.includes(el.value)) { // 如果当前被选中,则加入集合 selectedTelsArray.push(el.value); } else { // 否则移除该元素 const indexToRemove = selectedTelsArray.indexOf(el.value); if (indexToRemove !== -1) { selectedTelsArray.splice(indexToRemove, 1); } } console.log(selectedTelsArray); // 输出调试信息 } // 提交之前设置 hidden field 的值 function submitSelectedTels() { document.getElementById('selectedTelsHiddenField').value = JSON.stringify(selectedTelsArray); return true; } </script> </body> </html>```为什么搜索框和搜索按钮未对齐
03-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值