婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > 淺談HTML代碼中的空格和空行

淺談HTML代碼中的空格和空行

熱門標簽:商丘電話自動外呼系統怎么收費 昌邑外呼系統 東莞人工外呼系統多少錢 朝陽自動外呼系統 地圖標注地點下載 周口導航地圖標注 400電話辦理尚景 默納克系統外呼顯示inns 400電話是在哪里申請

HTML 代碼中的所有連續的空格或空行(換行)都會被顯示為一個空格。

例子1:(文本內容中的連續空格)

代碼

XML/HTML Code復制內容到剪貼板
  1. <p>這段文本中,輸入連續的空格          大概輸入了十個。</p>  
顯示效果:“格”和“大”之間的是個空格顯示出來只是一個空格。

XML/HTML Code復制內容到剪貼板
  1. 這段文本中,輸入連續的空格 大概輸入了十個。  

例子2:(代碼之間的連續空格)

代碼

XML/HTML Code復制內容到剪貼板
  1. <span>span是一個行內標簽</span>               <span>和前面的span元素之間隔了很多個空格</span>  
顯示效果:兩個span元素之間連續的空格,顯示出來即"簽"與“和”之間的空格,只有一個空格。
XML/HTML Code復制內容到剪貼板
  1. span是一個行內標簽 和前面的span元素之間隔了很多個空格  

上面兩個例子證明:HTML代碼中連續的空格在顯示時會顯示為一個空格,其余的多余的空格會被移除或者說被忽略。

段落文本其實也是HTML代碼的一部分,只不過它在p標簽內部,而例子2的空格是在兩個span標簽之間。


理解了空格,現在看看空行,同理

例子3:(文本內容中的空行)

代碼

XML/HTML Code復制內容到剪貼板
  1. <p>這段文本中,輸入連續的空行  
  2.   
  3.   
  4.   
  5.   
  6.   
  7. 大概輸入了五行。</p>  
顯示效果:如我們所見,文本代碼中的五行空行,顯示出來也只是一個空格。

XML/HTML Code復制內容到剪貼板
  1. 這段文本中,輸入連續的空行 大概輸入了五行。  
例子4:(元素之間/標簽之間的空行),只要把例子2中的空格換成空行就可以了,顯示效果和例子2的一樣,多行空行都只會顯示為一個空格。

XML/HTML Code復制內容到剪貼板
  1. <span>span是一個行內標簽</span>  
  2.   
  3.   
  4.   
  5.   
  6.   
  7. <span>和前面的span元素之間隔了很多空行</span>  
XML/HTML Code復制內容到剪貼板
  1. span是一個行內標簽 和前面的span元素之間隔了很多空行  

得證:HTML 代碼中的所有連續的空格或空行(換行)都會被顯示為一個空格。

既然如此,如果我們希望擴大兩個字符之間的間距,讓代碼中的連續空格或空行顯示出來的結果也是連續的空格或空行,那該怎么辦?其實很簡單。

方法一:我們可以用預格式化標簽<pre>,無論是空格或空行都適用。

XML/HTML Code復制內容到剪貼板
  1. <pre>  
  2. 這是  
  3. 預格式文本。  
  4. 它保留了      空格  
  5. 和換行。  
  6. </pre>  
顯示效果
XML/HTML Code復制內容到剪貼板
  1. 這是  
  2. 預格式文本。  
  3. 它保留了      空格  
  4. 和換行。  

方法二:我們可以用空格實體符&nbsp;代替空格,用換行標簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果,但是對搜索引擎不是最友好的方式,因為&nbsp;和<br/>在HTML中都是沒有語義的。所以建議盡量少用。另外需要注意的是,&nbsp; 必須小寫,而且最后面的分號是不能省略的。

 

方法三:(適合空格)使用全角空格

全角空格被解釋為漢字,所以不會被被解釋為HTML分隔符,可以按照實際的空格數顯示。

問題:怎么使用全角輸入法?

以搜狗輸入法為例,我們通常使用的是半角輸入,其狀態欄中有個月亮的標志,就說明正在使用的是半角輸入,如果是太陽的標志,就說明使用的是全角輸入。全角/半角的切換可以通過點擊標志,也可以通過快捷鍵 Shift+Space(空格符)切換。

            半角輸入(月亮)                                   全角輸入(太陽)

方法四:使用CSS樣式中字間隔屬性控制,CSS中的word-spacing 屬性可以改變字(單詞)之間的標準間隔。我們知道英文中兩個單詞之間是通過空格隔開的,所以我們視覺上可以這樣認為,word-spacing改變了(拉長或縮短)單詞之間那個空格的寬度。

方法五:使用CSS樣式中的white-space 屬性,這個屬性聲明如何處理元素內的空白符。

描述
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。
pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合并空白符序列,但是保留換行符。

white-space:normal;就是正常,和不設置一樣,連續空格和空行都只會顯示一個空格。

white-space:nowrap;不換行是什么意思呢?正常情況下,當我們的文本超出了文本域,文本就會自動折行,這個設置就是說不自動折行了,而是碰到換行標簽<br />才換

white-space:pre;和方法一相同,將文本原樣輸出顯示。當文本超出文本域時,不換行,會產生滾動條。

white-space:pre-wrap;保留空格和空行,但當文本超出文本域時,會自動換行。

white-space:pre-line;連續的空格會顯示為一個空格,但保留連續的空行。

以上就是小編為大家帶來的淺談HTML代碼中的空格和空行全部內容了,希望大家多多支持腳本之家~

原文地址:http://www.cnblogs.com/web-HCJ/p/4543093.html

標簽:湖南 福建 那曲 阿拉善盟 沈陽 健身房 揭陽 銅陵

巨人網絡通訊聲明:本文標題《淺談HTML代碼中的空格和空行》,本文關鍵詞  淺談,HTML,代碼,中的,空格,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《淺談HTML代碼中的空格和空行》相關的同類信息!
  • 本頁收集關于淺談HTML代碼中的空格和空行的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 常州市| 宜宾县| 稻城县| 都江堰市| 卢龙县| 开封县| 鱼台县| 南溪县| 翁牛特旗| 凌海市| 无锡市| 曲周县| 贵德县| 台山市| 永善县| 岳普湖县| 石阡县| 沙坪坝区| 徐州市| 樟树市| 界首市| 怀集县| 青海省| 牟定县| 城口县| 灌阳县| 大丰市| 寿宁县| 昌都县| 武冈市| 新沂市| 卢氏县| 喀什市| 昌江| 梅州市| 德化县| 白银市| 仁化县| 疏勒县| 饶平县| 安康市|