视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
关于html中空格的问题解决
2020-11-27 15:28:57 责编:小采
文档


<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

上边三种写法图标和文字的距离为什么都不一样?和inline-block的图标和换行有关系吗?如果我换5行

<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

上边两种效果是一样的,为什么呢?

<h2><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

nasp和实际打出来的空格效果是一样的为什么还要用nbsp呢?

<h2><span class="glyphicon glyphicon-send"></span>  联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span>  联系我们</h2>

像这种1个空格1个nbsp和5个空格1个nbsp的效果也一样是为什么?

浏览器解析html文档时, 多个相连的空格,回车或者TAB会直接解析成一个...

内联元素(span,b,a 等等之类的) 之间的空格或者回车会被解析成空格, 所以第一段代码相当于:

<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span>  联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

通常情况下,HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格,那么 HTML 会去掉其中的9个。如果使用 ,就可以在文档中增加空格。

nbsp是英文Non-Breaking SPace的缩写,可以直接翻译成“不被折断的空格”。HTML中使用 表示1个空格字符(英文的1个空格字符),1个中文汉字占2个英文字符,也就是要用两个 。

DOM 中的空白符会让处理节点结构时增加不少麻烦。
在Mozilla 的软件中,原始文件里所有空白符都会在 DOM 中出现(不包括标签内含的空白符)。这样的处理方式有其必要,一方面编辑器中可迳行排列文字、二方面 CSS 里的 white-space: pre 也才能发挥作用。
如此一来就表示:
-有些空白符会自成一个文本节点。
-有些空白符会与其他文本节点合成为一个文本节点。

Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

下载本文
显示全文
专题