企业网站建设怎样做好_浅谈HTML代码中的空格和空

2020-12-28 10:03 jianzhan
浅谈HTML代码中的空格和空行   发布     下面小编就为大家带来一篇浅谈HTML代码中的空格和空行。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格。

例子1:(文本内容中的连续空格)

代码

XML/HTML Code复制内容到剪贴板
span span是一个行内标签 /span   span 和前面的span元素之间隔了很多个空格 /span  

上面两个例子证明:HTML代码中连续的空格在显示时会显示为一个空格,其余的多余的空格会被移除或者说被忽略。

段落文本其实也是HTML代码的一部分,只不过它在p标签内部,而例子2的空格是在两个span标签之间。


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

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

代码

XML/HTML Code复制内容到剪贴板
例子4:(元素之间/标签之间的空行),只要把例子2中的空格换成空行就可以了,显示效果和例子2的一样,多行空行都只会显示为一个空格。

XML/HTML Code复制内容到剪贴板

得证:HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格。

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

方法一:我们可以用预格式化标签 pre ,无论是空格或空行都适用。

XML/HTML Code复制内容到剪贴板

方法二:我们可以用空格实体符 nbsp;代替空格,用换行标签 br/ 代替空行。虽然这种方法可以得到我们想要的显示效果,但是对搜索引擎不是最友好的方式,因为 nbsp;和 br/ 在HTML中都是没有语义的。所以建议尽量少用。另外需要注意的是, nbsp; 必须小写,而且最后面的分号是不能省略的。

 

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

全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。

问题:怎么使用全角输入法?

以搜狗输入法为例,我们通常使用的是半角输入,其状态栏中有个月亮的标志,就说明正在使用的是半角输入,如果是太阳的标志,就说明使用的是全角输入。全角/半角的切换可以通过点击标志,也可以通过快捷键 Shift+Space(空格符)切换。

            半角输入(月亮)                                  全角输入(太阳)

方法四:使用CSS样式中字间隔属性控制,CSS中的word-spacing 属性可以改变字(单词)之间的标准间隔。我们知道英文中两个单词之间是通过空格隔开的,所以我们视觉上可以这样认为,word-spacing改变了(拉长或缩短)单词之间那个空格的宽度。

方法五:使用CSS样式中的white-space 属性,这个属性声明如何处理元素内的空白符。


white-space:normal;就是正常,和不设置一样,连续空格和空行都只会显示一个空格。

white-space:nowrap;不换行是什么意思呢?正常情况下,当我们的文本超出了文本域,文本就会自动折行,这个设置就是说不自动折行了,而是碰到换行标签 br / 才换

white-space:pre;和方法一相同,将文本原样输出显示。当文本超出文本域时,不换行,会产生滚动条。

white-space:pre-wrap;保留空格和空行,但当文本超出文本域时,会自动换行。

white-space:pre-line;连续的空格会显示为一个空格,但保留连续的空行。

以上就是小编为大家带来的浅谈HTML代码中的空格和空行全部内容了,希望大家多多支持凡科~


HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。下面通过本文分别给大家介绍HTML中的5种空格各

这篇文章主要介绍了HTML大于号、小于号、空格、引号等常用的转义代码写法一览表,需要的朋友可以参考下

在编写 HTML 模板时,有时候会利用空格来充当文字排版的手段,最为常见的情况是在一段文字之间插入空格,来分隔相对独立的词汇。接下来通过本文给大家介绍HTML不同空格的特

今天小编就来小编就来跟大家说说什么是html空格代码?以及html空格的一些基本使用方法

这篇文章主要介绍了HTML/CSS中的空格处理及如何保留页面中的空格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考