IT培訓網 - IT職場人學IT技術上IT培訓網
如何設置html段落
時間:2016-11-15 16:56:30??來源:web前端培訓網??作者: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培訓網等你到來。
- 上一篇:Html標題有多重要
- 下一篇:如何學習html文本格式化