最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

关于html中空格的问题解决

来源:动视网 责编:小采 时间:2020-11-27 15:28:57
文档

关于html中空格的问题解决

关于html中空格的问题解决:<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2> <h2><span class="glyphicon glyphicon-send"></span
推荐度:
导读关于html中空格的问题解决:<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2> <h2><span class="glyphicon glyphicon-send"></span


<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 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

文档

关于html中空格的问题解决

关于html中空格的问题解决:<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2> <h2><span class="glyphicon glyphicon-send"></span
推荐度:
标签: 解决 空白 空格
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top