1.段落标签
网页中不乏段落,在HTML中我们使用p标签来表示一个段落。
段落语法:
段落文字
示例:
<html lang="zh-CN"><head> <meta charset="UTF-8"> <title>段落和换行标签title>head><body> <h2>这是一篇文章h2> <p>白马非马,花非花梦非梦p> <p>这里是一段很长的文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这段文字这里是一段文字段文字这里是一段文字段文字这里是一段文字段文字这里是一段文字段文字这里是一段文字段文字这里是一段文字里是一段文字这里是一段文字这里是一段文字这里是一段文字p>body>html>
在浏览器预览如图:
大家也看到了p标签内部文字内容自动换行了,而且段落之间自动添加了一个段后距离。大家留一下下面一个p标签的内容是不是很长啊,如果我想把这段文字分成两部分展示,或者我们想从中间让他换行,不是等它到达边际之后在换行,我们需要怎么做?
其实还有一个标签能够实现强制换行
2.段落标签
语法规则:
。
大家发现没有,这个标签和我们之前见过的标签不一样,我们之前见过的标签基本都是“内容标签名>”,而强制换行标签,是一个单标签他只有开始标签,没有结束标签。我们只需要在需要换行的文本的地方放
就可以了,请看下面例子:
<html lang="zh-CN"><head> <meta charset="UTF-8"> <title>段落和换行标签title>head><body> <h2>这是一篇文章h2> <p>白马非马,花非花梦非梦p> <p>这里是一段很长的文字这里是一段文字这<br /> 里是一段文字这里是一段文字这里是一段文字这<br />段文字这里是一段文字段文字这里是一段文字段文字这里是一段文字段文<br />字这里是一段文字段文字这里是一段文字段文字这里是<br />一段文字里是一段文字这里是一段文字这里是一段文字这里是一段文字p>body>html>
浏览器中预览效果如下:
从预览效果中我们可以看到br标签在自己标签后面讲p段落文字强制换行了,但是他并没有增加段后距离只是强制换行而已,这一点需要大家注意。
3. html中换行与空格
另外我们来试试我们直接将一个段落的文字换行和在段落文字中敲多个空格看看页面会怎样?
<html lang="zh-CN"><head> <meta charset="UTF-8"> <title>段落和换行标签title>head><body> <h2>这是一篇文章h2> <p>白马非马,花非花梦非梦p> <p> 这里是 一段很长的文字这里是一段文字这 里是一段文字这里是一段文字这里是一段文字这 段文字这里是一段文字段文字这里是一段文 字段文字这里是一段文字段文 字这里是一段文字段文字这里是一段文字段文字这里 一段文字里是一段文字这里是一段文字这里是一段文字这里是一段文字 p>body>html>
预览效果如图:
大家会发现我们在段落文字中敲了很多个空格,但是其实浏览器中只是识别出来一个,其他的空格没生效,换行也是,他并没有换行,只是识别成了一个空格,这是html的一个特性就是多个空格和换行会被当成一个空格。
那既然这样,我们有没有办法在页面中让两部分文字中间隔开很大的空间呢?其实方法也是有的,后期学到CSS我们可以使用两个标签将文字包裹,然后使用css去控制距离,但是其实HTML里面有很多实体字符可以实现将诸如空格这些操作字符化的方式展现出来,比如空格的实体符号是“ ” 如果我们想要在页面敲入多个空格现在我们就可以使用 来代替 我们来试试吧:
<html lang="zh-CN"><head> <meta charset="UTF-8"> <title>段落和换行标签title>head><body> <h2>这是一篇文章h2> <p>白马非马,花非花梦非梦p> <p> 这里是 一段很长的文字这里是一段文字这 里是一段文字这里是一段文字这里是一段文字这 段文字这里是一段文字段文字这里是一段文 字段文字这里是一段文字段文 字这里是一段文字段文字这里是一段文字段文字这里 一段文字里是一段文字这里是一段文字这里是一段文字这里是一段文字 p>body>html>
我们再来看看预览图:
从预览图我们是不是看到已经有很多空格了,html实体字符还有很多比如大于符号(>)小于符号()符号时候通常也是用实体字符代替,这个课程里就给大家提一下,我不打算在后续课程体再去深入去提实体字符,小伙伴们知道有这么个东西,需要进一步了解的百度一下HTML实体字符进一步了解。