HTML语言中换行的代码是<br/>。
超文本标记语言,标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
扩展资料
HTML格式标志标签
1、<p></p>创建一个段落 (英文全称:Paragraphs)。
2、<p align="">将段落按左、中、右对齐。
3、<blockquote></blockquote>从两边缩进文本。
4、<dl></dl>定义列表(英文全称:DefinitionList)。
5、<dt>放在每个定义术语词前(定义术语、英文全称:DefinitionTerm)。
6、<ul></ul>创建一个无序的列表,默认前面标有圆点,也可以自己设置为none或者其他形状,如空心圆、方块等(无序列表、外语全称:UnorderedLists)。
7、<li>放在每个列表项之前,若在<ol></ol>;之间则每个列表项加上一个数字。
8、<div align=""></div>用来排版大块HTML段落,也用于格式化表。
参考资料来源:百度百科—HTML
我们在制作页面的时候经常使用br标签进行换行,那么什么是软换行呢?HTML5中出现了一个新的元素是wbr。
wbr是什么?
wbr是Word Break Opportunity 的缩写,Word Break Opportunity的意思是:单词换行时机。有人把它翻译成:软换行。那么我们就来看下wbr这个标签的用法吧~
wbr标签规定在文本中的何处适合添加换行符。如果单词太长,或者我们担心浏览器会在错误的位置换行,那么我们可以使用 元素。
浏览器支持情况:
所有浏览器都支持 标签,除了 Internet Explorer。
wbr的分析
在网页中,我们如果要处理URL地址,一般都使用连续的英文单词,默认情况下是不换行的,比如:
代码如下:
<style>
p{
width:200px
background: orange
}
</style>
<p>http://www.ujiuye.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/ujiuye.com/zt/webqzgcs/</p>
效果如下:
请点击输入图片描述
看起来很不美观。
如果我们使用word-break:break-all进行换行,效果如下:
请点击输入图片描述
单词虽然换行了,但它把单词直接打破了,很相应阅读。
我们再来改变下p标签的宽度看看效果:
请点击输入图片描述
可读性真的很差。
有没有什么办法技能换行,又不影响阅读呢?那就是使用wbr标签进行软换行。
我们推荐推荐在标点之前为 URL 换行,以便避免将标点符号留在行尾,这会让读者将 URL 的末尾搞错。
代码如下:
<style>
p{
width:200px
background: orange
}
</style>
<p>http:<wbr>//www<wbr>.ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs/</p>
效果如下:
请点击输入图片描述
现在我们改变盒子的宽度,代码如下:
<style>
p{
width:120px
background: orange
}
</style>
<p>http:<wbr>//www<wbr>.ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs<wbr>/ujiuye<wbr>.com<wbr>/zt<wbr>/webqzgcs/</p>
效果如下:
请点击输入图片描述
我们在所有的标签前面都加上了标签,如果宽度不够,那么我就在这里换行,如果宽度足够,那我就不换行,还在一行显示,这就是标签智能的地方,是不是很神奇~
br标签和wbr标签的区别:
表示必须换行。而意思是在浏览器窗口或父级窗口宽度足够的情况下,不换行在宽度不足的情况下,在加了处主动换行。
如果还是上面的例子,我们使用br标签换行会是什么样呢?
代码如下:
<style>
p{
width:200px
background: orange
}
</style>
<p>http:<br>//www<wbr>.ujiuye<br>.com<br>/zt<br>/webqzgcs<br>/ujiuye<br>.com<br>/zt<br>/webqzgcs<br>/ujiuye<br>.com<br>/zt<br>/webqzgcs/</p>
效果如下:
请点击输入图片描述
我们可以看到,在每个br标签的位置都换行了,右侧留出大量空白位置,不智能,也很不美观。
wbr的应用场景
标签实际应用场景比较多的,比如我们例子中提到的URL的处理,网站中难免有URL的出现,这时候我们就可以使用标签进行智能的软换行。还有就是在一些技术文档中,有的变量名,对象名,属性名都很长,我们就也可以使用标签进行智能的软换行。
如果我们只做的网站是移动端的,屏幕宽度小,使用标签进行智能的软换行就更方便啦。或者是响应式的页面,也可以用到标签。
HTML <br>换行 标签定义和用法:
<br>可插入一个简单的换行符。
<br>标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。
请注意,<br>标签只是简单地开始新的一行,而当浏览器遇到 <p>标签时,通常会在相邻的段落之间插入一些垂直的间距。
HTML 与 XHTML 之间的差异
在 HTML 中,<br>标签没有结束标签。
在 XHTML 中,<br>标签必须被正确地关闭,比如这样:<br />。
提示和注释:
注释:请使用 <br>来输入空行,而不是分割段落。