头疼,我搞不懂网页中空格的使用了

  空格在编程类的网站上比较重要,例如:代码缩排,今天,在网上看了一下有关css样式表的知识。有如下收获:

  1、网页中连续的空格在网页上只显示一个;

  2、html文件中的<font face="宋体">宋体字</font>在css文件中相当于{font-family:"宋体"};

  但是,处理“学习日记”上的空格把我搞昏了,只得暂时放弃,情况如下:

  1、原来,把文章格式化成html格式的内容是每行的前导空格用转义字符“&nbsp;”替换,行中的空格不变,这样,行中如果有超过1个的空格在网页中只会显示一个空格;但是,如果把所有的空格用“&nbsp;”替换,整个网页中的表格无论是在IE6或Mozilla 1.7中都会严重变形!搞不懂;

  2、如果把网页的样式单独写成一个css文件,然后在jsp文件中link这个文件,在IE6.0中空格的宽度就会小于一个英文字符的宽度,而在Mozilla 1.7中的两个宽度是一样的;而如果把css样式直接写在jsp文件的<head>与</head>之间,在IE6.0中空格的宽度又和一个英文字符的宽度一样了!搞不懂;

  头疼,暂时不去管这个事情了,以后有机会找朋友帮忙看看是怎么样一回事。

6 thoughts on “头疼,我搞不懂网页中空格的使用了”

  1.   下面这篇文章可以解决上面的问题1。这样,把内容中连续的2个或以上的空格转换成“&nbsp;”,就应该可以正常显示文中所有的空格了而不会引起副作用。

    (转自:http://www.sdau.edu.cn/support/html/line.htm)

    换行和非换行空格

    --------------------------------------------------------------------------------

    在文本编辑中,我们会遇到换行的问题。在HTML中有换行元素和

    非换行空格符来解决换行问题。 1、换行 在文本的任何一点都可插入换行标签(<BR>)来插入换行。 例如:

    feijie<br>

    carboy homepage<br>

    2、禁止换行 有时可能要求浏览器不按常规换行,例如,显示的公司名很长,

    但又希望浏览器的显示页面很窄也不要换行,为达到这一目的,

    单词之间就不能使用常规的空格符,而要用一种特殊的非换行空格符。

    在HTML代码中非换行空格符事实上不是单个字符,单它的显示效果

    就跟普通的空格符一样,非换行空格符也是一种归类的标签。

    我们用一种新的标记实体(entity)来标记非换行空格符。实体用来表示在

    HTML代码中不易表示的特殊字符,实体的格式为“&XXXX”,

    在此“XXXX”是用来标识特定实体的字符串,非换行空格表示为

    “& nbsp”。

    Netscape为了防止换行还增加 了另一种元素:<NOBR> </NOBR>.但这种标签 只对Netscape有效。

    回到入门之二

      问题2的解决方法:

      在jsp文件的显示文章内容的<td>和</td>之间直接加上:<font face="宋体"><font face="Ms Song">文章内容</font></font>

      这样,空格的宽度在IE6.0和Mozilla1.7中都和一个英文字符的宽度一样了。

      连续几个<font face="***"></font>的用法来自下面的网页:(转自:http://bairui.blogchina.com/933410.html)

    Jsp分页显示代码(备忘)- -

                                          

    以下摘自本人一OA项目采用的分页显示源码

              <% List compMonth=(List)session.getAttribute("compAch");                    if (compMonth == null) compMonth = Collections.EMPTY_LIST;                    int  intPageSize;  //一页显示的记录数                    int  intRowCount;  //记录总数                    int  intPageCount;  //总页数                    int  intPage;  //待显示页码                    String  strPage;                    int i,j;                    //设置一页显示的记录数                    intPageSize  =  8;                    //取得待显示页码                    strPage  =  request.getParameter("page");                    if(strPage==null)                    {//表明在QueryString中没有page这一个参数,此时显示第一页数据                     intPage  =  1;                    }else{//将字符串转换成整型                     intPage  = Integer.parseInt(strPage);                     if(intPage<1)  intPage  =  1;                    }                    intRowCount  = compMonth.size();                    //记算总页数                    intPageCount  =  (intRowCount+intPageSize-1) / intPageSize;                    //调整待显示的页码                    if(intPage>intPageCount)  intPage  =  intPageCount;                    CompanyAchievement compAch;                    i=((intPage-1) * intPageSize+1);                    for(j=0;j<intPageSize&&j<compMonth.size()-1&&

    i<compMonth.size();i++,j++)                    {                      compAch=(CompanyAchievement)compMonth.get(i-1);          %>          <tr>            <td><div align="center"><font color="#336699"><font size="3">

    <font face="黑体"><font color="#336699"><font size="3"><font face="黑体">

    <font face="华文细黑"><%=i%></font></font></font></font><font face="华文细黑">

    </font></font></font></font></div></td>            <td><div align="center"><font color="#336699"><font size="3">

    <font face="黑体"><font color="#336699"><font size="3"><font face="黑体">

    <font face="华文细黑"><%=compAch.getCompanyName()%></font></font></font>

    </font><font face="华文细黑"></font></font></font></font></div></td>            <td><div align="center"><font color="#336699"><font size="3">

    <font face="黑体"><font color="#336699"><font size="3"><font face="黑体">

    <font color="#336699"><font size="3"><font face="黑体"><font face="华文细黑">

    <%=compAch.getTicketYear()+"年"+compAch.getTicketMonth()+"月"%></font>

    </font></font></font></font></font></font><font face="华文细黑">

    </font></font></font></font></div></td>            <td width="20%"> <div align="center"><font color="#336699">

    <font size="3"><font face="黑体"><font color="#336699"><font size="3">

    <font face="黑体"><font color="#336699"><font size="3"><font face="黑体">

    <font face="华文细黑"><%=compAch.getTicketAmount()%></font></font></font>

    </font></font></font></font><font face="华文细黑"></font></font></font>

    </font></div></td>            <td><div align="center"><font color="#336699"><font size="3">

    <font face="黑体"><font color="#336699"><font size="3"><font face="黑体">

    <font color="#336699"><font size="3"><font face="黑体"><font face="华文细黑">

    <%=compAch.getTicketPrice()%></font></font></font></font></font></font>

    </font><font face="华文细黑"></font></font></font></font></div></td>          </tr>          <%}%>          <%compAch=(CompanyAchievement)compMonth.get(i-1);            if(intPage==intPageCount){          %>          <tr>            <td colspan="3"><div align="center"><font color="#336699" size="3"

     face="华文细黑"><strong>合                计</strong></font></div>              <div align="center"></div>              <div align="center"></div></td>            <td width="20%"> <div align="center"><font color="#336699">

    <font size="3"><font face="黑体"><font color="#336699"><font size="3">

    <font face="黑体"><font color="#336699"><font size="3"><font face="黑体">

    <font face="华文细黑"><%=compAch.getTicketAmount()%></font></font></font>

    </font></font></font></font><font face="华文细黑"></font></font></font>

    </font></div></td>            <td><div align="center"><font color="#336699"><font size="3">

    <font face="黑体"><font color="#336699"><font size="3"><font face="黑体">

    <font color="#336699"><font size="3"><font face="黑体"><font face="华文细黑">

    <%=compAch.getTicketPrice()%></font></font></font></font></font></font>

    </font><font face="华文细黑"></font></font></font></font></div></td>          </tr>          <%}%>        </table>        <font color="#336699" size="3" face="华文细黑"></font></div></td>  </tr></table><p></p>第<%=intPage%>页  共<%=intPageCount%>页  <%if(intPage<intPageCount){%><a  href="right3-companysalemonth.jsp?page=<%=intPage+1%>">下一页</a><%}%>  <%if(intPage>1){%><a  href="right3-companysalemonth.jsp?page=<%=intPage-1%>">上一页</a><%}%>  <%if(intPage>1){%><a  href="right3-companysalemonth.jsp?page=<%=1%>">首页</a><%}%>  <%if(intPage<intPageCount){%><a  href="right3-companysalemonth.jsp?page=<%=intPageCount%>">末页</a><%}%>

  2.   用<pre>内容</pre>预格式化内容是把所有的换行和空格都自动替换,所以,假如一段英文有1000个字符,其中有100个空格,这100个空格都会被替换成“&nbsp;”,由于如上述原因实体空格不会换行,所以在html页面中,这1000个字符将显示在1行里。这显然是不行的。但是单独征对程序代码段也还是有用得到的地方的。下面是一篇相关的转载文章,转自:http://www.blabla.cn/html_tag_ref/pre.html

    HTML元素 - pre

    大字体 小字体

    定义

    以固定宽度字体显示文本。

    Renders text in a fixed-width font.

    注释

    PRE 元素内的文字是已经格式化的。空格和回车都是保留的。

    此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用,在 Internet Explorer 4.0 及以上版本的脚本中可用。

    此元素是块元素。

    此元素需要关闭标签。

    Text within the PRE element is formatted. Spaces and carriage returns are preserved.

    This element is available in HTML as of Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

    This element is a block element.

    This element requires a closing tag.

    示例代码

    <PRE>

    此文本的格式化效果



    输入



    完全

    相同。

    </PRE>

     

     

     

     

     

  3.   改写了Util.java中的htmlFormat()方法,使每行首空格一定转换,每行中间1个空格的不转换,连续的空格超过一个空格的转换前面的空格,余下一个空格不转换(方便程序实现,效果一样)。再配合在jsp页面上要显示的内容前面直接加<font face="***">标记。这样,困挠我很久的空格显示问题解决了。这么一个小问题这么久才解决,真是笨。

      下面是空格的使用示例:

    ------------------------------

    |           header           |

    ------------------------------

    |   m   |                    |

    |   e   |     body-content   |

    |   n   |                    |

    |   u   |                    |

    ------------------------------

    |           footer           |

    ------------------------------

      (there are two space before.)

      (there are   (three space before)two space before.)(three spaces behind)  

      关于连续<font>标记谁起作用的问题:

      <font face="宋体"><font face="黑体">字体</font></font>

      中间的“字体”二字将是黑体,即靠近内容的最先起作用,如果客户端的浏览器没有这种字体,再依次使用前面的字体来进行客户端的显示。  

      htmlFormat()方法的源代码:(因为在网页无法显示空格的实体标记,所以用“&”代替“&”)

      static public String htmlFormat(String source) {

        //if (source==null) return null;//WHEN the source is "",run at line 33,will happen ArrayIndexOutOfBoundsException.

        //because char[0] don't exist a charactor.

        if ((source==null)||(source.length()==0)) return "";

        String temp=source.replaceAll("<", "<").replaceAll(">", ">");

        String[] strArray = temp.split("\n");

        StringBuffer sB = new StringBuffer();

        for (int i = 0; i < strArray.length; i++) {

          String lineStr = strArray[i];

          char[] charArray = lineStr.toCharArray();

     

          //if no any char in this line,then add a <br> to the end of sB,

          //continue loop(don't excute the code behind continue in this loop).

          if (charArray.length == 0){

            sB.append("<br>");

            //System.out.println("come here.");

            continue;

          } 

          int j=0;

          while (j<charArray.length-1){

            if (j==0 && charArray[0] == ' ') {//the first space of a line must be converted to "&nbsp;",or it will be ignored.

            sB.append("&nbsp;");

              j++;

              continue;

            }else if(j==0 && charArray[0] !=' ') {//if the first character isn't a space,then add it into a StringBuffer:sB.

              sB.append(charArray[0]);

              j++;

              continue;

            }

            if (charArray[j]==' ' && charArray[j+1]==' '){//if there is a space after the current space,then convert this space to "&nbsp;"

              sB.append("&nbsp;");                        //else add it into the StringBuffer directly.

              j++;                                        //the last space of a spaces series will not to be convert to "&nbsp;",

            }else {                                       //but this is no problem,it will display all the spaces on the web page.

              sB.append(charArray[j]);

              j++;

            }

          }

          sB.append(charArray[j]);//add the last character in the line.

          if(i==strArray.length-1)//can't add "<br>" at the end of last line

            break;

          sB.append("<br>");

        }

             

        String result=sB.toString();

        /*re-writed the implementation code above,so commented the part below.

        //replace "<>"

        String tempStr = source.replaceAll("<", "<").replaceAll(">", ">");

       

        //replace space at beginning and add "<br>" at end of every line

        String[] strArray = tempStr.split("\n");

        StringBuffer sB = new StringBuffer();

        for (int i = 0; i < strArray.length; i++) {

          String lineStr = strArray[i];

          //System.out.println(i +" : lineStr is: " + lineStr+"ok");

          char[] charArray = lineStr.toCharArray();

     

          //if no any char in this line,then add a <br> to the end of sB,

          //continue loop(don't excute the code behind continue in this loop).

          if (charArray.length == 0){

            sB.append("<br>");

            //System.out.println("come here.");

            continue;

          } 

         

          if (charArray[0] != ' ') {

            sB.append(lineStr);

            sB.append("<br>");

          } else {

          for (int j = 0; j < charArray.length; j++) {//if the first char of this String is space,need convert the first space to "&nbsp;"

            if (charArray[j] == ' ')//if there are several spaces at the begin of this String,need convert every space to "&nbsp;".

              sB.append("&nbsp;");  

              else {//once meet a char isn't a space,then every space after this char needn't to be converted to "&nbsp;" in this string.

                    //we can add the all charaters after this char,then ,add "<br>" to the end of this String.

                sB.append(charArray, j, charArray.length - j);

                //sB.append("<br>");

                break;

              }

            }

            sB.append("<br>");//need add "&nbsp;" to the end of this string.why put this sentence at here?

                              //if every character is space in this string,it also needs adding "<br>" at the end of this string.

          }

        }

       

        String resultTemp = sB.toString();

        String result = resultTemp.substring(0, resultTemp.length() - 4);       

        */

        return result;

      }

      实际,应该找一个成熟的UBB控件来做这些事情,等把同步blog的目标实现了再说吧。

  4. 这可是个好消息!

      以后再写日记,

        可以更好看一些了。

          呵呵……

  5.   学习日记的页面是utf-8编码的。utf-8的页面中如果字体是link到css文件的,一个空格的宽度比起一个英文字符的宽度来就要窄一些。如果不是utf-8编码的页面就没有问题。真是怪事!

      我把空格问题的示例放在了网上,页面是utf-8编码。你访问一下这个网址就明白了:http://www.learndiary.com/testSpace/test1.html

      初步试验是utf-8编码页面的问题。你用ie浏览器试一下吧。

      也希望知道这个问题的朋友提示一下。谢谢。

Comments are closed.