在HTML代码中要如何插入空格？

短命女 2022-01-05 10:05 368阅读 0赞

> [超文本标记语言（HTML）][HTML]会自动忽略空格。平常在编写代码的时候，用空格键、Tab键以及回车键产生的空格，都会被[HTML][HTML 1]自动忽略。那么我们该用什么方法来实现HTML的空格效果呢？有专门的空格代码吗？不少初学者和W3Cschool小编一样都会有这样的疑问，特整理以下资料希望对你有所帮助

![Image 1][]

在HTML代码中要如何插入空格？

HTML将这样的键视为空白字符， 是会被自动忽略的。 当你需要在文本、单词、字母、标点或其他地方输入空格时，你需要输入相应的代码来表示空格。 下面介绍几种HTML中添加空格的方法：

## 一、添加单个空格 ##

--------------------

*  当你需要插入单个空格时，在目的位置处输入代码` `—— 代表不换行空格。 当你想要在字符或单词之间插入少量空格时，在特定位置使用` ` 代码能插入一个或两个空格。这样既能保持文本体裁格式上的统一性，又能提升文本的美学效果。
 *  如果你希望别人在阅读某段文本时，在指定位置处停顿几秒钟，那么你可以在该处插入空格。例如，在“`学技术，从W3Cschool.cn开始！`”的例句中，你可以在“`学技术`”后插入间隔，就变为了“`学技术，  从W3Cschool.cn开始！`”

![Image 1][]

添加单个空格代码

## 二、 使用HTML（超文本标记语言）添加段落间距 ##

--------------------

![Image 1][]

使用HTML（超文本标记语言）添加段落间距1

如果你希望接下来输入的文本形成一个[段落][Link 1]，那么在段落前插入`<p>`  
。

![Image 1][]

使用HTML（超文本标记语言）添加段落间距2

在每个段落的起始位置插入`<p>`  
。

![Image 1][]

使用HTML（超文本标记语言）添加段落间距3

在段落内句与句之间插入`</p>`来分割句子。  
**例如:**

<p>学技术， 从W3Cschool.cn开始！</p>
    <p>一个专业的编程入门教程网站！</p>

## 三、 使用HTML语言添加制表符 ##

--------------------

![Image 1][]

使用HTML语言添加制表符

使用四个或五个连续的空格，添加制表符。代码是这样的：

在HTML中，没有专用的表示制表符的代码。如果你需要使用制表符，你可以考虑选择[CSS代码][CSS]。

## 四、使用HTML添加换行符 ##

--------------------

![Image 1][]

使用HTML添加换行符1

当你想要 [换行][Link 2]时，插入 `<br>`代码。

当你使用该方法插入双倍行距时，你需要插入两个换行符：`<br><br>`。  
其中一个是为了换行，一个是为了跳过该行。

![Image 1][]

使用HTML添加换行符2

## 五、 使用HTML显示文本内容 ##

--------------------

![Image 1][]

使用HTML显示文本内容

在进行编辑的文本前，或者需要排版的文本内容之前，插入`<pre>`。  
如果要以书面形式或未排版形式显示文本，那么就意味着其中不会出现空白字符。在这种情况下，HTML中的每个空格键和回车键会和其在文字处理程序中显示的一样。

![Image 1][]

[排版][Link 3]结束时，输入 `</pre>`。  
当你要展示诗歌或代码时，你可以考虑参考这个方法。  
例如：

<head>
      <style>
      body {
          
        background-image: url(http://img.w3cschool.cn/attachments/knowledge/201610/14632.png);            
        background-size: 100%;
        background-origin: content;
        background-repeat: no-repeat;
                 }
      </style>
    </head>
    <body>
      <body background="http://img.w3cschool.cn/attachments/knowledge/201610/14632.png"> 
      <p><br></p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p style="font-size:10pt;"> </p>
      <center> <a href="http://www.w3cschool.cn"><font size="6">W3Cschool 首页</font></a>
      <a href="http://www.w3cschool.cn/tutorial"><font size="6">编程教程入门</font></a>
      <a href="http://www.w3cschool.cn/manual"><font size="6">参考手册</font></a>
      <a href="http://www.w3cschool.cn/examples"><font size="6">编程实例</font></a></center>
    </body>

小提示：  
如果在你检查最后的文本时，看到一些额外的符号“浮”在代码上，你需要仔细查看是不是有不完全的代码，比如“`<br>`”写成了“`<br`”。  
**\*注意**：预格式的文本和普通的文本的字体和宽度不同。\*  
当给段落排版时，你需要注意段落之间的空格数量。空格数量取决于你的CSS代码。  
如果个别的空格和页面的格式密切相关，你最好使用CSS代码处理它。  
在[代码编辑器][Link 4]或纯文本文件中编写[HTML语言][HTML 2]。在文字编辑处理软件中编写代码，可能导致错误，这是因为这样的程序会在文本内容上附加额外的信息，这些信息无法被网页浏览器识别。

另外也可以到[W3Cschool.cn首页][W3Cschool.cn] 查看《[HTML教程][HTML]》，里面有关于[HTML空格知识集合（][HTML 3][http://www.w3cschool.cn/html/html-space.html][HTML 3]）。

**出处**：[http://www.w3cschool.cn/html5/question-10231597.html][http_www.w3cschool.cn_html5_question-10231597.html]

转载于:https://www.cnblogs.com/w3cschool/p/6802634.html

[HTML]: http://www.w3cschool.cn/html
[HTML 1]: http://www.w3cschool.cn/htmltags
[Image 1]: 
[Link 1]: http://www.w3cschool.cn/html/html-paragraphs.html
[CSS]: http://www.w3cschool.cn/css
[Link 2]: http://www.w3cschool.cn/htmltags/tag-br.html
[Link 3]: http://www.w3cschool.cn/vgprrs
[Link 4]: http://www.w3cschool.cn/html/html-editors.html
[HTML 2]: http://www.w3cschool.cn/htmltags/html-language-codes.html
[W3Cschool.cn]: http://www.w3cschool.cn/
[HTML 3]: http://www.w3cschool.cn/html/html-space.html
[http_www.w3cschool.cn_html5_question-10231597.html]: http://www.w3cschool.cn/html5/question-10231597.html

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML插入空格方法

HTML提供了多种空格实体，它们拥有不同的宽度。 <table> <thead> <tr> <th>名称</th> <th>代码</th>

朴灿烈づ我的快乐病毒、/ 2022年12月27日 14:09/ 0 赞/ 221 阅读

相关在html中插入图片

在html中插入图片 ![在这里插入图片描述][20210324104409182.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

系统管理员/ 2022年11月12日 13:46/ 0 赞/ 181 阅读

相关 HTML中如何键入空格？

HTML中如何键入空格当我们要在HTML中键入空格的话，直接按空格键是错误的书写行为，因为直接按空格键对于后期不太好，在HTML中写空格是用这个字符来写的，我们称是

偏执的太偏执、/ 2022年10月01日 12:50/ 0 赞/ 140 阅读

相关如何在HTML页面中保留空格和换行符

我们知道，在浏览器对HTML页面进行渲染显示的时候，会对HTML文件中的空格和换行符进行处理，这样我们原来写在HTML文件中的格式化就可能起不到效果，尤其是在我们想展示结构化程

忘是亡心i/ 2022年08月21日 11:58/ 0 赞/ 182 阅读

相关 14. 如何在XPages中插入HTML

在经典的Notes Web开发中，我们经常需要在表单中插入HTML，即Pass-Through HTML，因为Domino Web引擎将表单上的设计元素转换成HTML时既原始丑

淡淡的烟草味﹌/ 2022年05月11日 16:52/ 0 赞/ 203 阅读

相关 java中如何在字符串的每个字符间隔中插入空格

java中如何在字符串的每个字符间隔中插入空格投机取巧的使用String里面自带的replace()方法，也可以用这种方法插入固定字符。 String str

曾经终败给现在/ 2022年01月15日 12:05/ 0 赞/ 511 阅读

相关在HTML代码中要如何插入空格？

> [超文本标记语言（HTML）][HTML]会自动忽略空格。平常在编写代码的时候，用空格键、Tab键以及回车键产生的空格，都会被[HTML][HTML 1]自动忽略。那么我们

短命女/ 2022年01月05日 10:05/ 0 赞/ 369 阅读

相关如何在HTML上插入图片

在HTML中插入图片的方法有：直接在html代码上插入、在CSS样式中插入、在JavaScript中通过给img设置src值来插入图片、innerHTML插入img属性来...

红太狼/ 2021年02月01日 17:29/ 0 赞/ 716 阅读

相关 html空格代码是什么？html中空格怎么打

html空格代码是什么？html中空格怎么打？对于刚刚入门的新手来说可能比较陌生，下面我们来总结一下html空格代码。

你的名字/ 2021年01月30日 17:34/ 0 赞/ 701 阅读

相关如何在html页面中插入视频

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签`<so...

小灰灰/ 2020年05月14日 10:34/ 0 赞/ 898 阅读