浅谈HTML代码中的空格和空行

时间:2017-04-09

既然如此,如果我们希望扩大两个字符之间的间距,让代码中的连续空格或空行显示出来的结果也是连续的空格或空行,那该怎么办?其实很简单。

方法一:我们可以用预格式化标签<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 属性,这个属性声明如何处理元素内的空白符。

  • 共3页:
  • 上一页
  • 2/3
  • 下一页
  • 上一篇:全面了解html.css溢出 下一篇:HTML (css样式规范)必看篇

    相关文章

    最新文章