當前位置 : IT培訓網 > Web前端 > Web教程 > 如何設置html段落

如何設置html段落

時間:2016-11-15 16:56:30??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
一個網頁是否完美,很多程度上取決于網頁排版,在頁面中出現大量的文字或者段落,我們通常都會用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培訓網(cnitedu.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培訓網(cnitedu.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培訓網(cnitedu.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培訓網(cnitedu.cn)</title>

</head>

<body>

<h1>春曉</h1>

<p>

    春眠不覺曉,

      處處聞啼鳥。

        夜來風雨聲,

          花落知多少。

</p>

<p>注意,瀏覽器忽略了源代碼中的排版(省略了多余的空格和換行)。</p>

</body>

</html>

運行結果:

春曉

春眠不覺曉, 處處聞啼鳥。 夜來風雨聲, 花落知多少。

注意,瀏覽器忽略了源代碼中的排版(省略了多余的空格和換行)。

一個網頁是否完美,很多程度上取決于網頁排版,在頁面中出現大量的文字或者段落,我們通常都會用html標簽來進行分段規劃。對段落之間的換行也是有嚴格要求的,如果你想要學好這方面課程,那就趕緊聯系我們吧,IT培訓網等你到來。

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
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)播放
激情色播