HTML语言中换行的代码是什么?

html-css05

HTML语言中换行的代码是什么?,第1张

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>来输入空行,而不是分割段落。