整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
子1：（文本内容中的连续空格）
<p>这段文本中，输入连续的空格 大概输入了十个。</p>显示效果：“格”和“大” 之间的是个空格显示出来只是一个空格。
这段文本中，输入连续的空格 大概输入了十个。例子2：（代码之间的连续空格）
<span>span是一个行内标签</span> <span>和前面的span元素之间隔了很多个空格</span>显示效果:两个span元素之间连续的空格，显示出来即"签"与“和”之间的空格，只有一个空格。
span是一个行内标签 和前面的span元素之间隔了很多个空格上面两个例子证明：HTML代码中连续的空格在显示时会显示为一个空格，其余的多余的空格会被移除或者说被忽略。
段落文本其实也是HTML代码的一部分，只不过它在p标签内部，而例子2的空格是在两个span标签之间。
理解了空格，现在看看空行，同理
例子3：（文本内容中的空行）
<p>这段文本中，输入连续的空行
大概输入了五行。</p>显示效果：如我们所见，文本代码中的五行空行，显示出来也只是一个空格。
这段文本中，输入连续的空行 大概输入了五行。例子4：（元素之间/标签之间的空行），只要把例子2中的空格换成空行就可以了，显示效果和例子2的一样，多行空行都只会显示为一个空格。
<span>span是一个行内标签</span>
<span>和前面的span元素之间隔了很多空行</span>span是一个行内标签 和前面的span元素之间隔了很多空行得证：HTML 代码中的所有连续的空格或空行（换行）都会被显示为一个空格。
既然如此，如果我们希望扩大两个字符之间的间距，让代码中的连续空格或空行显示出来的结果也是连续的空格或空行，那该怎么办？其实很简单。
方法一：我们可以用预格式化标签<pre>，无论是空格或空行都适用。
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>显示效果
这是
预格式文本。
它保留了 空格
和换行。方法二：我们可以用空格实体符 代替空格，用换行标签<br/>代替空行。虽然这种方法可以得到我们想要的显示效果，但是对搜索引擎不是最友好的方式，因为 和<br/>在HTML中都是没有语义的。所以建议尽量少用。另外需要注意的是， 必须小写，而且最后面的分号是不能省略的。
方法三：（适合空格）使用全角空格
全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示。
问题：怎么使用全角输入法？
以搜狗输入法为例，我们通常使用的是半角输入，其状态栏中有个月亮的标志，就说明正在使用的是半角输入，如果是太阳的标志，就说明使用的是全角输入。全角/半角的切换可以通过点击标志，也可以通过快捷键 Shift+Space（空格符）切换。
半角输入（月亮）
全角输入（太阳）
方法四：使用CSS样式中字间隔属性控制，CSS中的word-spacing 属性可以改变字（单词）之间的标准间隔。我们知道英文中两个单词之间是通过空格隔开的，所以我们视觉上可以这样认为，word-spacing改变了（拉长或缩短）单词之间那个空格的宽度。
方法五：使用CSS样式中的white-space 属性，这个属性声明如何处理元素内的空白符。
值 | 描述 |
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列，但是正常地进行换行。 |
pre-line | 合并空白符序列，但是保留换行符。 |
white-space:normal;就是正常，和不设置一样，连续空格和空行都只会显示一个空格。
white-space:nowrap;不换行是什么意思呢？正常情况下，当我们的文本超出了文本域，文本就会自动折行，这个设置就是说不自动折行了，而是碰到换行标签<br />才换
white-space:pre;和方法一相同，将文本原样输出显示。当文本超出文本域时，不换行，会产生滚动条。
white-space:pre-wrap;保留空格和空行，但当文本超出文本域时，会自动换行。
white-space:pre-line;连续的空格会显示为一个空格，但保留连续的空行。
们今天不多说那么多序言，直接上干货。
我们之前讲了div标签，它里面可以嵌套任何东西，我们先运行如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.abc{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="abc">salkgnoaijrngajlhcgausdsfhjfgjkulagorhgj</div>
</body>
</html>
上述代码的结果（字母瞎打的）
通过运行上述代码我们发现，我们写的英文字母应该在div里面呀，他怎么出去了而没有换行。我们把英文字母换成汉字试试。再来看下。
换成汉字后的结果
我们把英文字母换成汉字发现，我们写的内容又都在div里面了，他自动换行了。
其实原因很简单，浏览器把那一串英文字母看成了一个单词而导致他没有换行，毕竟浏览器不能把一个字给硬生生的分开呀，所以就允许他超出范围了。而我们对字母串进行一下更改，dag yji yroey uoyir ndfjh sui fghs dh。
我们将它中间加了几个空格再来看一下。
加空格之后的
加完空格之后我们发现他自己换行了，是因为空格在编码中还有一个特殊的意义“单词分割符”。我们再来看一下代码
运行结果
我们通过代码的图片可以看出我在代码中输入了很多空格，而在结果中只显示出了一个，这是因为浏览器认为文字分割符有一个就行了，所以多个他也只输出一个，那我们要真的想在网页中输出多个空格怎么办，那就要用到html编码符了。
作者写完在预览的时候发现代码居然会在头条上直接运行出结果，所以作者只能截图给大家展示编码了[捂脸]
注意分号也要写上
大家可以动手操作一下看看都有怎么样的结果，也可以找找其他的编码符呦。
TML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
HTML 实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
&entity_name;
或
&#entity_number;
如需显示小于号，我们必须这样写：< 或 < 或 <
提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格(Non-breaking Space)
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
结合音标符
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
以下是一些实例:
| 音标符 | 字符 | Construct | 输出结果 |
|---|---|---|---|
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
HTML字符实体
实体名称对大小写敏感！ |
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
