超文本標記語言的段落與換行顯示！

TML 段落

段落是通過 <p> 標簽定義的。

實際例子

<p>This is a paragraph</p>
<p>This is another paragraph</p>

注釋：瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素）

提示：使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標簽代替它！（但是不要用 <br /> 標簽去創建列表。）

不要忘記結束標簽

即使忘了使用結束標簽，大多數瀏覽器也會正確地將 HTML 顯示出來：

實際例子

<p>This is a paragraph
<p>This is another paragraph

上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。

注釋：在未來的 HTML 版本中，不允許省略結束標簽。（現在開發已經不允許了）

提示：通過結束標簽來關閉 HTML 是一種經得起未來考驗的 HTML 編寫方法。清楚地標記某個元素在何處開始，并在何處結束，不論對您還是對瀏覽器來說，都會使代碼更容易理解。

HTML 折行（換行）

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標簽：

<p>This is<br />a para<br />graph with line breaks</p>

<br /> 元素是一個空的 HTML 元素。由于關閉標簽沒有任何意義，因此它沒有結束標簽。

你會發現 <br> 與 <br /> 很相似。

在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結束標簽（閉合標簽）的 HTML 元素。

即使 <br> 在所有瀏覽器中的顯示都沒有問題，使用 <br /> 也是更長遠的保障。

HTML 輸出 - 有用的提示

我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整都可能導致不同的結果。

對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。

知識總結

標簽描述

<p> 定義段落。

<br /> 插入單個折行（換行）。

如果您覺得有用，麻煩點個贊，支持一下！！

歡迎提問與建議。

TML（超文本標記語言）中的元素可以分為兩類：塊級元素和內聯元素。塊級元素會自動占據一行，并且可以設置寬度和高度。內聯元素不會自動占據一行，而是根據文本內容的長度自動調整寬度。塊級元素可以包含其他元素，包括文本、圖像、鏈接等。內聯元素通常不包含其他元素。

1. 塊級元素具有以下特點：

塊級元素會自動占據一行，并且可以設置寬度和高度。
塊級元素可以包含其他元素，包括文本、圖像、鏈接等。
塊級元素可以設置背景顏色、邊框、字體等樣式屬性。

以下是一些常見的塊級元素：

<div>：用于定義一個塊級容器，可以包含其他元素。
<p>：用于定義段落，通常包含文本內容。
<h1>到<h6>：用于定義標題，從h1到h6分別表示從大到小的標題級別。
<table>：用于定義表格，包含多個行和列。
<form>：用于定義表單，包含輸入框、按鈕等元素。
<ul>和<ol>：用于定義無序列表和有序列表，包含多個列表項。
<img>：用于定義圖像，用于在網頁中顯示圖片。

這些塊級元素可以通過設置 CSS 樣式屬性來實現不同的布局和樣式效果，例如設置背景顏色、邊框、字體、大小、顏色等。同時，塊級元素還可以通過設置 CSS 定位屬性來實現定位和浮動效果，例如設置position: relative;、float: left;

2. 內聯元素具有以下特點：

內聯元素不會自動占據一行，而是根據文本內容的長度自動調整寬度。
內聯元素可以設置字體、顏色、大小等樣式屬性。
內聯元素通常不包含其他元素，而是直接嵌入文本內容中。

以下是一些常見的內聯元素：

<a>：用于定義超鏈接，通常用于鏈接到其他網頁或文件。
<em>：用于定義強調文本，通常呈現為斜體效果。
<strong>：用于定義加粗文本，通常呈現為粗體效果。
<span>：用于定義自定義樣式的文本，通常用于應用特定的 CSS 樣式。
<img>：用于定義圖像，通常用于在網頁中顯示圖片。

這些內聯元素可以通過設置 CSS 樣式屬性來實現不同的樣式效果，例如設置字體、顏色、大小等。同時，內聯元素還可以通過設置 CSS 定位屬性來實現定位和浮動效果，例如設置position: relative;、float: left。

<img> 元素在 HTML 中既可以是塊元素，也可以是內聯元素，這取決于它的 display 屬性的值。

默認情況下，<img> 元素是內聯元素，它會根據文本的流動方式進行布局。這意味著如果在一行中放置了多個 <img> 元素，它們會在一行中排列，并且不會自動換行。

但是，如果將 <img> 元素的 display 屬性設置為 block，那么它就會成為塊元素。塊元素會占據一行，并且可以設置寬度和高度。在這種情況下，多個 <img> 元素會自動換行，并且可以通過設置 margin 屬性來調整它們之間的間距。

html

<img src="image.jpg" alt="圖片描述" style="display: block;">

在上面的示例中，<img> 元素的 display 屬性被設置為 block，這會使它成為一個塊元素。你可以根據需要調整圖片的寬度和高度，以及 margin 屬性來控制圖片之間的間距。

期，在項目開發中需要對內容的首行添加一個換行，但是設置后，再次進入設置界面發現換行丟失了，不過數據庫中保存的值是正確的，首行有換行的。

眾所周知，textarea中的換行是\n，html中的換行是<br>標簽，但是有一點可能是你沒有注意到的，就是textarea中他會忽略緊跟這 <textarea>標記的的換行，如下圖所示

textarea多行文本域中的換行的小陷阱

可以看到以上兩個寫法在顯示時是沒有任何區別的，而且經過測試，提交到后臺的值也是一樣的，是沒有換行符\r\n的。經過在IE6,7,8,9,10,11， chrome，firefox中測試，效果均一致。

PS: 但是我并沒有找到有資料說明瀏覽器解析textarea是會忽略首行換行，包括W3C中的規范也沒有看到有類似說明。

在線咨詢

上一篇：每日SQL自學知識點（第六天）—窗口函數全面滲透用法
下一篇：找工作靠譜網站有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商