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

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

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

一、添加单个空格


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

添加单个空格代码

二、 使用HTML(超文本标记语言)添加段落间距


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

如果你希望接下来输入的文本形成一个段落,那么在段落前插入<p>

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

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

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

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

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

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


使用HTML语言添加制表符

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

&nbsp;&nbsp;&nbsp;&nbsp;

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

四、使用HTML添加换行符


使用HTML添加换行符1
 
当你想要换行时,插入<br>代码。

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

使用HTML添加换行符2

五、 使用HTML显示文本内容


使用HTML显示文本内容

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

 

排版结束时,输入 </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代码处理它。
代码编辑器或纯文本文件中编写HTML语言。在文字编辑处理软件中编写代码,可能导致错误,这是因为这样的程序会在文本内容上附加额外的信息,这些信息无法被网页浏览器识别。

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

出处http://www.w3cschool.cn/html5/question-10231597.html

在HTML代码中要如何插入空格?的更多相关文章

  1. [Eclipse配置] Eclipse代码中显示空白字符(空格,TAB和回车)的方法

    在代码页面点击右键进入 Preferences --> General --> Editors --> Text Editors. 在 Show whitespace charact ...

  2. Eclipse删除代码中所有注释及空格

    替换方法: Ctrl+F 删除java注释:  /\*{1,2}[\s\S]*?\*/ Ctrl+F 删除xml注释:  <!-[\s\S]*?--> Ctrl+F 删除空白行:   ^\ ...

  3. vscode用户自定义代码中如何表示table空格

    "Print to phpfuntion": { "scope": "php", "prefix": "pfu ...

  4. 如何在Markdown文档中插入空格?

    简单说 在 Markdown 文档中,可以直接采用 HTML 标记插入空格(blank space),而且无需任何其他前缀或分隔符.具体如下所示: 插入一个空格 (non-breaking space ...

  5. HTML代码中的空格和空行

    HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格. 例子1:(文本内容中的连续空格) 代码 <p>这段文本中,输入连续的空格 大概输入了十个.</p> 显示效 ...

  6. php - 去除php代码中的多余空格

    <?php class Test{ public function test(){ $tmplContent = file_get_contents('./test.php'); $tmplCo ...

  7. 成功在Caterpillar代码中插入事件对象-20200917

    首先搞清楚了Caterpillar的solidity代码生成机制.Caterpillar分为Caterpillar Core和 executepanel两部分. executePanel是UI前端,用 ...

  8. 在C#代码中应用Log4Net(三)Log4Net中配置文件的解释

    一个完整的配置文件的例子如下所示,这个是”在C#代码中应用Log4Net(二)”中使用的配置文件. <log4net> <!-- 错误日志类--> <logger nam ...

  9. 在C#代码中应用Log4Net 中配置文件的解释

    一个完整的配置文件的例子如下所示,这个是”在C#代码中应用Log4Net(二)”中使用的配置文件. <log4net> <!-- 错误日志类--> <logger nam ...

随机推荐

  1. 关于直播学习笔记-005 nginx-rtmp、sewiseplayer

    1.视频采集推流及服务器端:nginx-rtmp-windows 2.视频播放段:sewiseplayer 3.双击nginx.exe运行nginx-rtmp-win32-master的nginx服务 ...

  2. DEMO6:坐标添加文字标签的JavaScript插件

    Google地图API   MarkerWithLabel Example http://google-maps-utility-library-v3.googlecode.com/svn/tags/ ...

  3. java.lang.IncompatibleClassChangeError: Implementing class

    项目中使用了quartz,但是jar包却有两个,一个1.8版本,一个2.1版本,导致jar包冲突,所以导致一启动tomcat就出现: Caused by: java.lang.Incompatible ...

  4. 第三篇:基于K-近邻分类算法的手写识别系统

    前言 本文将继续讲解K-近邻算法的项目实例 - 手写识别系统. 该系统在获取用户的手写输入后,判断用户写的是什么. 为了突出核心,简化细节,本示例系统中的输入为32x32矩阵,分类结果也均为数字.但对 ...

  5. [SQL]躺着也中枪的datetime类型

    写在前面 本来这个东西,我是不想在这里总结的,今天有初学者的朋友问我了,那就不得不说说了,你肯定也踩过这样的坑,没遇到,说明你运气好,编码习惯好.那还是言归正传吧.避免你中枪,还是扫一眼这篇文章吧. ...

  6. 为什么说在js当中所有类的父类是Object类

    代码如下所示: function Parent(add,net,no,teacher) { this.add = add; this.net = net; this.no = no; this.tea ...

  7. timerWithTimeInterval 方法详用

    1.初始化 + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelect ...

  8. 《C#高级编程》学习笔记------抗变和协变

    1.协变和抗变 在.NET 4之前,泛型接口是不变的..NET 4通过协变和抗变为泛型接口和泛型委托添加了一个重要的扩展.协变和抗变指对参数和返回值的类型进行转换.例如,可以给一个需要Shape参数的 ...

  9. 关于Java中按值传递和按引用传递的问题详解

    写了两个方法,一个是多关键字的快速排序,一个是基于多关键字的基速排序.两个方法的参数列表是一样一样的,但是快速排序正常工作,但是基数排序传出来的参数一点没有改变,苦思冥想了半天也没想通是怎么回事,于是 ...

  10. setTimeout原来有这种用途

    setTimeout有两个参数,第一个是需要执行的函数,第二个是将该函数推入UI队列的时间. 需要注意的两点: 1.第二个参数中设置的时间,是从执行setTimeout开始计算,而不是从整个函数执行完 ...