零基础HTML入门教程(11)——换行br

简介: br 标签是空标签(意味着它没有结束标签,因此这是错误的:有开有闭合的br。在 XHTML 中,把结束标签放在开始标签中,也就是 br/。请注意,br 标签只是简单地开始新的一行,而当浏览器遇到 p 标签时,通常会在相邻的段落之间插入一些垂直的间距。我们上一小节学习了img图像,我们这一小节学习一下新的标签br换行标签,并且熟练使用。我们可以看到加br的哪行代码下面,行内块本应该不换行,但是加完br之后换行了。本小结我们学习了br这个标签他可以起到强制换行的作用,我们要合理熟练使用。

本章目录

1.任务目标

我们上一小节学习了img图像,我们这一小节学习一下新的标签br换行标签,并且熟练使用。

2.br换行标签

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

br 标签是空标签(意味着它没有结束标签,因此这是错误的:有开有闭合的br。在 XHTML 中,把结束标签放在开始标签中,也就是 br/。

请注意,br 标签只是简单地开始新的一行,而当浏览器遇到 p 标签时,通常会在相邻的段落之间插入一些垂直的间距。

3.代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <span>我是第一个span</span>
  <br>
  <span>我是第二个span</span>
  <span>我是第三个span</span>
</body>
</html>

效果如下:

我们可以看到加br的哪行代码下面,行内块本应该不换行,但是加完br之后换行了。

4.小结

本小结我们学习了br这个标签他可以起到强制换行的作用,我们要合理熟练使用。

相关文章
|
7月前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
269 0
|
6月前
HTML中的<br>、<hr>和<pre>标签使用指南
HTML中的<br>、<hr>和<pre>标签使用指南
172 2
|
5月前
|
JavaScript
【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
639 0
|
6月前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
934 0
|
6月前
|
存储 移动开发 前端开发
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
70 0
|
7月前
|
前端开发
HTML段落标签与换行标签的详解与应用
HTML段落标签与换行标签的详解与应用
445 0
|
7月前
|
前端开发 JavaScript C++
HTML深度解析:掌握换行的艺术
【4月更文挑战第1天】
565 0
HTML深度解析:掌握换行的艺术
|
7月前
|
前端开发 搜索推荐
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
89 0
|
7月前
|
SEO
如何像人类一样写HTML之标题、段落、换行、水平线与文本格式化标签
如何像人类一样写HTML之标题、段落、换行、水平线与文本格式化标签
如何像人类一样写HTML之标题、段落、换行、水平线与文本格式化标签
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签