HTML代碼中的空格和空行

子1：（文本內(nèi)容中的連續(xù)空格）

<p>這段文本中，輸入連續(xù)的空格          大概輸入了十個(gè)。</p>

顯示效果：“格”和“大” 之間的是個(gè)空格顯示出來(lái)只是一個(gè)空格。

這段文本中，輸入連續(xù)的空格 大概輸入了十個(gè)。

例子2：（代碼之間的連續(xù)空格）

<span>span是一個(gè)行內(nèi)標(biāo)簽</span>               <span>和前面的span元素之間隔了很多個(gè)空格</span>

顯示效果:兩個(gè)span元素之間連續(xù)的空格，顯示出來(lái)即"簽"與“和”之間的空格，只有一個(gè)空格。

span是一個(gè)行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多個(gè)空格

上面兩個(gè)例子證明：HTML代碼中連續(xù)的空格在顯示時(shí)會(huì)顯示為一個(gè)空格，其余的多余的空格會(huì)被移除或者說(shuō)被忽略。

段落文本其實(shí)也是HTML代碼的一部分，只不過(guò)它在p標(biāo)簽內(nèi)部，而例子2的空格是在兩個(gè)span標(biāo)簽之間。

理解了空格，現(xiàn)在看看空行，同理

例子3：（文本內(nèi)容中的空行）

<p>這段文本中，輸入連續(xù)的空行





大概輸入了五行。</p>

顯示效果：如我們所見(jiàn)，文本代碼中的五行空行，顯示出來(lái)也只是一個(gè)空格。

這段文本中，輸入連續(xù)的空行 大概輸入了五行。

例子4：（元素之間/標(biāo)簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會(huì)顯示為一個(gè)空格。

<span>span是一個(gè)行內(nèi)標(biāo)簽</span>





<span>和前面的span元素之間隔了很多空行</span>

span是一個(gè)行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多空行

得證：HTML 代碼中的所有連續(xù)的空格或空行（換行）都會(huì)被顯示為一個(gè)空格。

既然如此，如果我們希望擴(kuò)大兩個(gè)字符之間的間距，讓代碼中的連續(xù)空格或空行顯示出來(lái)的結(jié)果也是連續(xù)的空格或空行，那該怎么辦？其實(shí)很簡(jiǎn)單。

方法一：我們可以用預(yù)格式化標(biāo)簽<pre>，無(wú)論是空格或空行都適用。

<pre>
這是
預(yù)格式文本。
它保留了      空格
和換行。
</pre>

顯示效果

這是
預(yù)格式文本。
它保留了      空格
和換行。

方法二：我們可以用空格實(shí)體符代替空格，用換行標(biāo)簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對(duì)搜索引擎不是最友好的方式，因?yàn)?和<br/>在HTML中都是沒(méi)有語(yǔ)義的。所以建議盡量少用。另外需要注意的是，必須小寫，而且最后面的分號(hào)是不能省略的。

方法三：（適合空格）使用全角空格

全角空格被解釋為漢字，所以不會(huì)被被解釋為HTML分隔符，可以按照實(shí)際的空格數(shù)顯示。

問(wèn)題：怎么使用全角輸入法？

以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態(tài)欄中有個(gè)月亮的標(biāo)志，就說(shuō)明正在使用的是半角輸入，如果是太陽(yáng)的標(biāo)志，就說(shuō)明使用的是全角輸入。全角/半角的切換可以通過(guò)點(diǎn)擊標(biāo)志，也可以通過(guò)快捷鍵 Shift+Space（空格符）切換。

半角輸入（月亮）

全角輸入（太陽(yáng)）

方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。我們知道英文中兩個(gè)單詞之間是通過(guò)空格隔開(kāi)的，所以我們視覺(jué)上可以這樣認(rèn)為，word-spacing改變了（拉長(zhǎng)或縮短）單詞之間那個(gè)空格的寬度。

方法五：使用CSS樣式中的white-space 屬性，這個(gè)屬性聲明如何處理元素內(nèi)的空白符。

值	描述
normal	默認(rèn)。空白會(huì)被瀏覽器忽略。
pre	空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。
nowrap	文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。
pre-wrap	保留空白符序列，但是正常地進(jìn)行換行。
pre-line	合并空白符序列，但是保留換行符。

white-space:normal;就是正常，和不設(shè)置一樣，連續(xù)空格和空行都只會(huì)顯示一個(gè)空格。

white-space:nowrap;不換行是什么意思呢？正常情況下，當(dāng)我們的文本超出了文本域，文本就會(huì)自動(dòng)折行，這個(gè)設(shè)置就是說(shuō)不自動(dòng)折行了，而是碰到換行標(biāo)簽<br />才換

white-space:pre;和方法一相同，將文本原樣輸出顯示。當(dāng)文本超出文本域時(shí)，不換行，會(huì)產(chǎn)生滾動(dòng)條。

white-space:pre-wrap;保留空格和空行，但當(dāng)文本超出文本域時(shí)，會(huì)自動(dòng)換行。

white-space:pre-line;連續(xù)的空格會(huì)顯示為一個(gè)空格，但保留連續(xù)的空行。

lt;marquee>...</marquee>普通卷動(dòng)

<marquee behavior=slide>...</marquee>滑動(dòng)

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動(dòng)

<marquee behavior=alternate>...</marquee>來(lái)回卷動(dòng)

<marquee direction=down>...</marquee>向下卷動(dòng)

<marquee direction=up>...</marquee>向上卷動(dòng)

<marquee direction=right></marquee>向右卷動(dòng)

<marquee direction=left></marquee>向左卷動(dòng)

<marquee loop=2>...</marquee>卷動(dòng)次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定卷動(dòng)距離

<marquee scrolldelay=300>...</marquee>設(shè)定卷動(dòng)時(shí)間

<!>字體效果

<h1>...</h1>標(biāo)題字(最大)

<h6>...</h6>標(biāo)題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強(qiáng)調(diào))

<i>...</i>斜體字

<em>...</em>斜體字(強(qiáng)調(diào))

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號(hào))

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =font-size:100 px>...</font>無(wú)限增大

<!>區(qū)斷標(biāo)記

<hr>水平線

<hr size=9>水平線(設(shè)定大小)

<hr width=80%>水平線(設(shè)定寬度)

<hr color=ff0000>水平線(設(shè)定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結(jié)格式

<base href=位址>(預(yù)設(shè)好連結(jié)路徑)

<a href=位址></a>外部連結(jié)

<a href=位址 target=_blank></a>外部連結(jié)(另開(kāi)新視窗)

<a href=位址 target=_top></a>外部連結(jié)(全視窗連結(jié))

<a href=位址 target=頁(yè)框名></a>外部連結(jié)(在指定頁(yè)框連結(jié))

<!>貼圖/音樂(lè)

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設(shè)定圖片寬度

<img src=圖片位址 height=30>設(shè)定圖片高度

<img src=圖片位址 alt=提示文字>設(shè)定圖片提示文字

<img src=圖片位址 border=1>設(shè)定圖片邊框

<bgsound src=MID音樂(lè)檔位址>背景音樂(lè)設(shè)定

<!>表格語(yǔ)法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲(chǔ)存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲(chǔ)存格合并列的列數(shù)(使用數(shù)字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset cols="20%,*">分割左右兩個(gè)框架

<frameset cols="20%,*,20%">分割左中右三個(gè)框架

<分割上下兩個(gè)框架

<frameset rows="20%,*,20%">分割上中下三個(gè)框架

<! - - ... - -> 注解

<a href target> 指定超連結(jié)的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結(jié)

<a href> 指定超連結(jié)

<a name=錨的名稱> 被連結(jié)點(diǎn)的名稱

<address>....</address> 用來(lái)顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結(jié)的分割視窗

<basefont size> 更改預(yù)設(shè)字形大小

<bgsound src> 加入背景音樂(lè)

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設(shè)定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設(shè)定表格標(biāo)題位置

<caption>...</caption> 為表格加上標(biāo)題

<center> 向中對(duì)齊

<cite>...<cite> 用於引經(jīng)據(jù)典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設(shè)定定義列表的項(xiàng)目解說(shuō)

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標(biāo)簽

<dl>...</dl> 設(shè)定定義列表的標(biāo)簽

<dt> 設(shè)定定義列表的項(xiàng)目

<em> 強(qiáng)調(diào)之用

<font face> 任意指定所用的字形

<font size> 設(shè)定字體大小

<form action> 設(shè)定戶動(dòng)式表單的處理方式

<form method> 設(shè)定戶動(dòng)式表單之資料傳送方式

<frame marginheight> 設(shè)定視窗的上下邊界

<frame marginwidth> 設(shè)定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設(shè)定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設(shè)定文字大小

<head> 標(biāo)示文件資訊

<hr> 加上分格線

<html> 文件的開(kāi)始與結(jié)束

<i> 斜體字

<img align> 調(diào)整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預(yù)設(shè)圖形大小

<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界

<img lowsrc> 預(yù)載圖片功能

<img src border> 設(shè)定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項(xiàng)目 ( 可指定符號(hào) )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標(biāo)簽

<multiple> 可同時(shí)選擇多項(xiàng)的列表欄

<noframe> 定義不出現(xiàn)分割視窗的文字

<ol>...</ol> 有序號(hào)的列表

<option> 定義表單中列表欄的項(xiàng)目

<p align> 設(shè)定對(duì)齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強(qiáng)語(yǔ)氣

<sub> 下標(biāo)字

<sup> 上標(biāo)字

<table border=n> 調(diào)整表格的寬線高度

<table cellpadding> 調(diào)整資料欄位之邊界

<table cellspacing> 調(diào)整表格線的寬度

<table height> 調(diào)整表格的高度

<table width> 調(diào)整表格的寬度

<table>...</table> 產(chǎn)生表格的標(biāo)簽

<td align> 調(diào)整表格欄位之左右對(duì)齊

<td bgcolor> 設(shè)定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設(shè)定表格欄位不換行

<td valign> 調(diào)整表格欄位之上下對(duì)齊

<td width> 調(diào)整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動(dòng)否換行

<th>...</th> 定義表格的標(biāo)頭欄位

<title> 文件標(biāo)題

<tr>...</tr> 定義表格美一行

<tt> 打字機(jī)字體

<u> 文字加底線

<ul type>...</ul> 無(wú)序號(hào)的列表 ( 可指定符號(hào) )

<var>...</var> 用於顯示變數(shù)

js中有一些字符串刪除空格的功能，今天就來(lái)說(shuō)說(shuō)用字符串刪除功能加利用正則快速替換字符串中所有空格實(shí)現(xiàn)代碼

刪除字符串中所有函數(shù)

js刪除字符串空格函數(shù)

正則替換空格

在線咨詢

上一篇：javascript實(shí)現(xiàn)的提示浮層跟隨鼠標(biāo)移動(dòng)
下一篇：簡(jiǎn)單小程序：登錄頁(yè)面（html）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML代碼中的空格和空行

您的項(xiàng)目需求