面小編為大家帶來的是解決網頁制作中的空格問題,這里詳細的介紹了解決網頁制作中的空格問題的相關知識,希望能對大家有所幫助。
Dreamweaver是一個非常簡單易用但又功能強大的網頁制作軟件。但是,它卻又一個令很多初學者很困惑的問題。那就是空格。在Dreamweaver中使用空格遠遠沒有象word中一樣方便。比如首行無法空格,句子中間空一格以上都是不行的。原因是什幺呢?這是因為在HTML語言中多于一個的空格都被忽略不計。這樣就造成了空格困難的原因。如何很好地解決Dreamweaver的空格問題呢?解決的方案有很多:1、 制作一張很小的透明圖片。嵌入到文本當中或者行首。這種方法實現起來比較麻煩。2、 使用全角空格。為什幺這種方案可行呢?因為全角空格實現起來比較簡單。雖然也是空格但是對應的HTML代碼卻不是空格代碼。而是另外的代碼,因此Dreamweaver把他當字符處理而不是空格。所以可以相安無事。但是在不支持中文字符集的瀏覽器看來就是亂碼了。3、 使用軟空格。即在要插入空格的地方按Ctrl+shift+空格。這樣的空格所有瀏覽器都能認識。但是缺點是在頁面編輯的時候無法看見插入了多少空格,只能在瀏覽器預覽的時候才能看清楚。不夠直觀。軟空格其實使用的是代碼。是不間斷空距標記。他可以生成軟空格。每按一下Ctrl+shift+空格就是增加一個代碼。代碼雖然簡單,但是它的作用也很大。在做網頁時候我們空出一行或者幾行就要靠這個代碼來幫忙。學過HTML語言的朋友都知;;標簽是用來標記一個段落的。如果光寫;;這段代碼是不是就可以生成空行呢?這是無效的。必須在;標簽中增加“;”代碼才行。; ;這樣的代碼才會有空行效果。這里該標記也是起了占據位置的作用。另外如果用Dreamweaver生成一張表格,察看源代碼的時候會發現。
擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
由于HTML代碼的空格通常會被瀏覽器忽略,所以我們很有必要對瀏覽器處理空格的一些規則有個詳細的認識,這樣我們后面才能詳述它的解決辦法。
效果是這樣的:
由此可此可以知道瀏覽器的默認處理規則一:文字的前后空格都會忽略,內部連續空格只有自作一個。
原樣輸出可能是我們這樣寫代碼的本意,要讓這段代碼原樣輸出的方法有兩個(使用標簽/使用表示空格的實體代碼):
方法一:<pre><span class="space"> 小鄭 搞碼 </span></pre>
方法二:<span class="space"> 小鄭 搞碼 </span>
關于規則部分還有一點,來看一段代碼:
效果是:
表示,瀏覽器對字符的處理不僅限于空格,還有制表符(\t),換行符(\r和\n)。
同樣讓這段代碼換行可能是我們寫的本意,讓這段代碼換行的方法有兩個:
方法一:套一個pre標簽
方法二:<span class="space">小鄭<br/>搞碼</span>
最后總結一下:
HTML語言的空格處理,基本上就是直接過濾。這樣的處理過于粗糙,完全忽視了原始文本內部的空格可能是有意義的。所以CSS提供了一個屬性white-space屬性來靈活控制空格。下篇詳述。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。