当前位置 : IT培训网 > Web前端 > Web教程 > 如何设置html段落

如何设置html段落

时间：2016-11-15 16:56:30  来源：web前端培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   html(100)html段落(5)如何设置html(1)
一个网页是否完美，很多程度上取决于网页排版，在页面中出现大量的文字或者段落，我们通常都会用html标签来进行分段规划。对段落之间的换行也是有严格要求的，如果你想要学好这方面课程，那就赶紧联系我们吧，IT培训网等

一篇文章是由很多段落组成的，一个网页也是有很多html标签组成的，这些标签让网页中的段落分成了一段段的，如此我们看起来才会通顺，那么我们该如何设置html段落呢，如何去学习html段落呢？

HTML 段落

HTML 可以将文档分割为若干段落。

HTML 标签参考手册

标签

描述

<p>

定义一个段落

<br>

插入单个折行（换行）
 

HTML 段落

段落是通过 <p> 标签定义的。

实例

<p>这是一个段落 </p>

<p>这是另一个段落</p>

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

</body>

</html>

运行结果：

这是一个段落。

这是一个段落。

这是一个段落。

注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

不要忘记结束标签

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

实例

<p>这是一个段落

<p>这是另一个段落

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<p>这是一个段落

<p>这是另一个段落

</body>

</html>

运行结果：

这是一个段落

这是另一个段落

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释: 在未来的 HTML 版本中，不允许省略结束标签。

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

实例

<p>这个<br>段落<br>演示了分行的效果</p>

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<p>这个<br>段落<br>演示了分行的效果</p>

</body>

</html>

运行结果：

这个

段落

演示了分行的效果

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML 输出- 使用提醒

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

（这个例子演示了一些 HTML 格式化方面的问题）

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<h1>春晓</h1>

<p>

    春眠不觉晓，

      处处闻啼鸟。

        夜来风雨声，

          花落知多少。

</p>

<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>

</body>

</html>

运行结果：

春晓

春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。

注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。

一个网页是否完美，很多程度上取决于网页排版，在页面中出现大量的文字或者段落，我们通常都会用html标签来进行分段规划。对段落之间的换行也是有严格要求的，如果你想要学好这方面课程，那就赶紧联系我们吧，IT培训网等你到来。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频（Videos）播放