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

admin 2024-12-09 14:33:18 阅读:35 评论:0
例子1:(文本内容中的连续空格) &<p&>这段文本中,输入连续的空格 大概输入了十个。&</p&> 显示效果:“格”和“大” 之间的是个空格显示出来只是一个空格...

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

版权声明

本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。文章内容、图片素材等内容均为用户上传,仅供学习参考。如有侵犯您的版权,请联系我们,本站将在三个工作日内改正、删除。


热门标签:代表什么生肖,正确的生肖,指什么生肖,打一生肖,解一生肖,猜一生肖,是什么生肖

分享:

扫一扫在手机阅读、分享本文

10668文章数 0评论数
热门文章
  • 一朝成名打一个生肖,答案释义解释落实

    一朝成名打一个生肖,答案释义解释落实
    答案:龙 释义解释落实 释义: 一朝:早晨,指短时间。 成名:名声大噪,知名度提高。 解释: 龙是一种传说中的动物,常被形容为神圣、威严、强大的生物。在中国传统文化中,龙是吉祥的象征,代表着权势、地位和荣誉。因此,“一朝成名”比喻一个人在很短的时间内名声大噪,获得了极高的知名度和地位。 落实: 在现实生活中,“一朝成名”往往与以下情况有关: 获得重大的奖项或荣誉。 创作出广受好评的作品...
  • 务必谨慎应对 属鼠者今年面临重大考验

    务必谨慎应对 属鼠者今年面临重大考验
    属鼠者今年整体运势呈现较大的波动性,吉凶相伴,考验重重。 事业运势 属鼠者今年事业运势呈现两极分化的态势。 上半年:受到吉星庇佑,工作顺利,升职加薪的机会较多。 下半年:运势有所起伏,需注意人际关系的维护,避免与同事或上司发生冲突。对于创业者而言,今年是拓展业务的好时机,但需稳扎稳打,切勿盲目扩张。 财运运势 属鼠者今年财运运势较为稳定,正财收入丰厚。 正财:收入稳定,有望获得升职加薪的机会。 偏...
  • 女子网购羽绒服未退货,巧舌如簧称没偷没抢

    女子网购羽绒服未退货,巧舌如簧称没偷没抢
    近日,一位女子网购了一件羽绒服,收到商品后,她以质量问题为由要求退货,但商家拒绝了她的请求。女子于是巧舌如簧,声称自己没有偷也没有抢,商家不给她退货是不合理的。 女子称,她购买的羽绒服存在以下几个问题:羽绒填充不均匀,导致衣服保暖效果差;面料薄透,容易起毛;拉链不顺滑,容易卡顿。 商家表示,女子提出的质量问题都是不成立的。羽绒填充均匀,保暖效果良好;面料厚实,不易起毛;拉链顺滑,无卡顿现象。商家还提供了检测报告,证明羽绒服符合国家标准。 女子对商家的检测...
  • 精准阐释:猪狗不如对应的最佳生肖,透彻释义

    精准阐释:猪狗不如对应的最佳生肖,透彻释义
    猪狗不如对应的最佳生肖 “猪狗不如”一词常用来形容一个人品质卑劣、行为不端。但你知道吗?在十二生肖中,“猪”和“狗”对应着不同的生肖,而这些生肖往往是“猪狗不如”的反义词,代表着善良、忠诚等美德。 猪对应的最佳生肖:羊 “猪”对应着十二生肖中的“羊”。羊性情温和,温婉可人,富有同情心。它与猪的贪婪、懒惰形成鲜明对比,代表着善良、纯洁和牺牲精神。 狗对应的最佳生肖:兔 “狗”对应着十二生肖中的“兔”。兔机灵聪明,温顺乖巧,有亲和力。它与狗的忠诚、守信形成呼应,...
  • 98年虎何时踏入囍门最吉利 1998年属虎2025年最佳结婚月份

    98年虎何时踏入囍门最吉利 1998年属虎2025年最佳结婚月份
    1998年属虎人2025年结婚大利月份解析及注意事项 俗话说,男大当婚,女大当嫁。1998年的属虎人如今也已经32岁了,这个年纪在人们的认知中已经是大龄青年,所以大家都十分慎重看待此时。若是已经有了伴侣,大部分人都会选择尽快结婚。那么如果98年属虎人打算在今年结婚,大利的月份是在什么时候呢? 1998属虎2025年最佳结婚月份 每个月都有相应的吉日,人们会根据新人的双方属相、生辰八字来选择避开对冲煞的日子,选择相合的有利吉日。以下这几...