整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
面小編為大家帶來的是解決網頁制作中的空格問題，這里詳細的介紹了解決網頁制作中的空格問題的相關知識，希望能對大家有所幫助。
Dreamweaver是一個非常簡單易用但又功能強大的網頁制作軟件。但是，它卻又一個令很多初學者很困惑的問題。那就是空格。在Dreamweaver中使用空格遠遠沒有象word中一樣方便。比如首行無法空格，句子中間空一格以上都是不行的。原因是什幺呢？這是因為在HTML語言中多于一個的空格都被忽略不計。這樣就造成了空格困難的原因。如何很好地解決Dreamweaver的空格問題呢？解決的方案有很多：1、 制作一張很小的透明圖片。嵌入到文本當中或者行首。這種方法實現起來比較麻煩。2、 使用全角空格。為什幺這種方案可行呢？因為全角空格實現起來比較簡單。雖然也是空格但是對應的HTML代碼卻不是空格代碼。而是另外的代碼，因此Dreamweaver把他當字符處理而不是空格。所以可以相安無事。但是在不支持中文字符集的瀏覽器看來就是亂碼了。3、 使用軟空格。即在要插入空格的地方按Ctrl+shift+空格。這樣的空格所有瀏覽器都能認識。但是缺點是在頁面編輯的時候無法看見插入了多少空格，只能在瀏覽器預覽的時候才能看清楚。不夠直觀。軟空格其實使用的是代碼。是不間斷空距標記。他可以生成軟空格。每按一下Ctrl+shift+空格就是增加一個代碼。代碼雖然簡單，但是它的作用也很大。在做網頁時候我們空出一行或者幾行就要靠這個代碼來幫忙。學過HTML語言的朋友都知;;標簽是用來標記一個段落的。如果光寫;;這段代碼是不是就可以生成空行呢？這是無效的。必須在;標簽中增加“；”代碼才行。; ;這樣的代碼才會有空行效果。這里該標記也是起了占據位置的作用。另外如果用Dreamweaver生成一張表格，察看源代碼的時候會發現。
子1：（文本內容中的連續空格）
<p>這段文本中，輸入連續的空格 大概輸入了十個。</p>顯示效果：“格”和“大” 之間的是個空格顯示出來只是一個空格。
這段文本中，輸入連續的空格 大概輸入了十個。例子2：（代碼之間的連續空格）
<span>span是一個行內標簽</span> <span>和前面的span元素之間隔了很多個空格</span>顯示效果:兩個span元素之間連續的空格，顯示出來即"簽"與“和”之間的空格，只有一個空格。
span是一個行內標簽 和前面的span元素之間隔了很多個空格上面兩個例子證明：HTML代碼中連續的空格在顯示時會顯示為一個空格，其余的多余的空格會被移除或者說被忽略。
段落文本其實也是HTML代碼的一部分，只不過它在p標簽內部，而例子2的空格是在兩個span標簽之間。
理解了空格，現在看看空行，同理
例子3：（文本內容中的空行）
<p>這段文本中，輸入連續的空行
大概輸入了五行。</p>顯示效果：如我們所見，文本代碼中的五行空行，顯示出來也只是一個空格。
這段文本中，輸入連續的空行 大概輸入了五行。例子4：（元素之間/標簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會顯示為一個空格。
<span>span是一個行內標簽</span>
<span>和前面的span元素之間隔了很多空行</span>span是一個行內標簽 和前面的span元素之間隔了很多空行得證：HTML 代碼中的所有連續的空格或空行（換行）都會被顯示為一個空格。
既然如此，如果我們希望擴大兩個字符之間的間距，讓代碼中的連續空格或空行顯示出來的結果也是連續的空格或空行，那該怎么辦？其實很簡單。
方法一：我們可以用預格式化標簽<pre>，無論是空格或空行都適用。
<pre>
這是
預格式文本。
它保留了 空格
和換行。
</pre>顯示效果
這是
預格式文本。
它保留了 空格
和換行。方法二：我們可以用空格實體符 代替空格，用換行標簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對搜索引擎不是最友好的方式，因為 和<br/>在HTML中都是沒有語義的。所以建議盡量少用。另外需要注意的是， 必須小寫，而且最后面的分號是不能省略的。
方法三：（適合空格）使用全角空格
全角空格被解釋為漢字，所以不會被被解釋為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;連續的空格會顯示為一個空格，但保留連續的空行。
代碼示例
java復制代碼public static String generateContent(String content) {
// 將 content 進行 url 編碼
String ans;
try {
ans = URLEncoder.encode(content, "UTF-8");
} catch (UnsupportedEncodingException e) {
// 處理異常情況
throw new RuntimeException(e);
}
return ans;
}
java復制代碼public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最終生成的 URL 的值為：" + ansUrl);
}
運行結果：
perl復制代碼https://example.com/resource?a=%E5%B0%8F%E9%BB%91
粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:
ini復制代碼example.com/resource?a=小黑
網頁截圖：
java復制代碼public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小 黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最終生成的 URL 的值為：" + ansUrl);
}
運行結果：
perl復制代碼https://example.com/resource?a=%E5%B0%8F+%E9%BB%91
粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:
ini復制代碼https://example.com/resource?a=小+黑
網頁截圖：
java復制代碼public static String generateContent(String content) {
// 將 content 進行 url 編碼
String ans;
try {
// -----------------------調整-----------------------
ans = URLEncoder.encode(content, "UTF-8").replace("+", "%20");
} catch (UnsupportedEncodingException e) {
// 處理異常情況
throw new RuntimeException(e);
}
return ans;
}
public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小 黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最終生成的 URL 的值為：" + ansUrl);
}
運行結果：
perl復制代碼https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91
粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:
ini復制代碼https://example.com/resource?a=小 黑
網頁截圖：
其中 %20 是空格經過編碼后的結果
從上面的案例可以看到，如果 url 中有空格出現，且不經過特殊處理，那么將會導致瀏覽器無法正確解析 url，從而導致 url 重定向失敗，那么問題的原因是什么呢？首先來看一下URL的組成部分
下面是一個簡單的 URL 鏈接：
bash復制代碼http://localhost:8080/path/to/index.html?id=123#content它主要有下面幾個部分組成
在 URL 編碼過程中，會遵循以下的規則：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
