当前位置:首页 > 生活百科

html代码格式(初学者看懂代码的方法)

栏目:生活百科日期:2024-12-09浏览:0

例子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;连续的空格会显示为一个空格,但保留连续的空行。

“html代码格式(初学者看懂代码的方法)” 的相关文章

开直通车有什么技巧,注意事项有哪些

很多新手卖家刚开始做淘宝的时候,盲目地开直通车,自己以为不开直通车就不算做淘宝,结果直通车花了很多钱,店铺还是没有做起来,整个人都泄气了。想要把直通车这一付费工...

怎么今日头条广告价格表(投放广告费用介绍)

今日头条旗下包括今日头条、火山小视频、悟空问答、抖音等多款知名产品,平均日活用户过亿,单用户日均使用时长超过76分钟,单用户启动次数更是高达9次,在用户数量、活...

单个关键词排名怎么提升,百度搜索关键词排行

想必应该是大部分企业个人工作室都已经在一年前意识到互联营销的重要性,都开始建设网站,然后进行网站推广以及营销工作,在进行SEO网站推广时,不管是个人还是企业更关...

2020年变频冰箱排行榜(公认最值得入手的变频冰箱)

冰箱反复开门会引起温度波动,影响食材鲜度。变频冰箱有电子控温技术,可实时监控内部温度,调整变频压缩机运行状态,控温精确。小天鹅BCD-312WTPZLA触屏变频...

微信文章阅读量怎么算(全面了解文章阅读量)

摘要:随着传播技术的快速发展,新媒体在传播信息时所表现出来的迅速性、灵活性、互动性,给重大新闻事件全方位、多角度报道提供了更多方式。如何挖掘新媒体在重大新闻事件...

如何推广淘宝店铺宝贝(淘宝店铺宝贝推广攻略)

淘宝运营营销推广的方法很多,但大多数对提高淘宝的流量没有什么效果。以下是麦淘网总结的几个有效的淘宝推广方法。一、友情链接在店铺装修页面,有一个友情链接,可能有些...

dlp数据防泄密软件排名(细说数据防泄漏dlp厂商排名)

2019年上半年,公开报道的数据泄露事件达到了空前的3800次,总共泄露了41亿条记录。这些数字可以使任何可能受到数据泄露影响的人(无论是商人,首席执行官,云服...

c语言在线编程(c语言编程题经典例子)

一、大内存分区内存分成5个区,它们分别是堆、栈、自由存储区、全局/静态存储区和常量存储区。1、栈区(stack):FIFO就是那些由编译器在需要的时候分配,在不...

html自学网站有哪些(html5零基础入门教程)

微信推出小程序后,html5越来越火热了,未来H5方向的专业人才必定水涨船高。我整理了一些关于html的书籍响应式Web设计:HTML5和CSS3实战BenFr...

怎么挽回老公的心(挽回老公最有效的套路)

第三者逼老公离婚,怎样挽回老公的心?老公出轨导致的婚姻危机,通常第三者也会很着急,逼着老公离婚,这个是好以后原配该怎么挽回?沐荣情感在本文中支招。  一、先找到...