HTML空格代码

最新推荐文章于 2023-06-18 02:37:23 发布

六毛饭

最新推荐文章于 2023-06-18 02:37:23 发布

阅读量3.3k

点赞数

分类专栏： html javascript

本文链接：https://blog.csdn.net/cruelchen/article/details/9308411

版权

html javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML空白

HTML

<h1>HTML空白</h1>


  结尾 </p>

<h2>控制空白的抵消情况</h2>

<h2>在标签中嵌入空白</h2>

<p>开始<span

class

"spaced"

>中间</span

>结尾</p>

<h2>嵌入空白实体</h2>

<code>&thinsp; </code><span class="border"> </span>  

CSS

em { padding-left:50px; }

p { font-family:monospace; font-size:18px; }

*.border { font-weight:bold;

border-left:2px solid black; border-right:2px solid black; }

HTML空白

问题	需要通过在标记中使用空白来为代码提高可读性，但是不希望空白影响对文档的解析。
解决方案	浏览器会消除同一行中重复的空白。这让你可以在代码中插入额外的空格、制表位、换行和回车来提高它的可读性，但是不会显示在解析后的文档中。浏览器只把以下字符当作空白进行解析：空格（）、制表位（）、换行（）和回车（）。空元素和只含有空白的元素并不会中断连续的空白。值得注意的是，在例子的第一段中，浏览器只会在“start”、“middle”和“end”之间产生一个空格，尽管在这几个词中有很多字符：空格、制表位、新行、断行、空白实体、一个空的span和一个含有空白的span。在连续的空白字符中，第一个空白字符决定了被移除的空白的位置与样式。换句话说，浏览器解析被移除的空白时，会给第一个空白字符赋予font- family、font-size、font-weight、line-height和letter- spacing。大字体、宽letter-spacing和高line-height会创建出更加宽而高的空白。因此，空白在HTML文档中的位置会决定它的宽和高的大小。例子中的第二、三段展示了空白的位置决定了它是在元素内还是元素外被移除的。如果是在元素内被移除的，它会遵循元素的样式规则。因为空白会从右向左移除，所以可以通过在元素前放一个空白来移除元素前的其他空白。如果想移除元素内的空白，就必须去掉元素前面的所有空白，并且在元素内至少放一个空白。如果想在元素内保留空白，并且把它放在内容后面，只要在内容后紧跟一个空白就可以了。如果想去掉元素关闭标签后面的空白，就必须去掉元素内容后所有的空白，并在元素后插入一个空白。可以把额外的空白放在开始和结束标签内，这并不会在内容中产生多余的空白。还能在开始标签的名字与它的属性之间插入额外的空白，属性名字、等号和值之间也可插入，或者它们与开始标签的大于号之间也可以插入。同理，也能在结束标签的名字和它的大于号之间插入额外的空白。第四段就是一个极端的例子，在标签中充满了大量的空白，但是内容中一个也没有。
空格实体	HTML 提供了5种空格实体（space entity），它们拥有不同的宽度。这些都不属于空白！非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（&zwnj;、 、&ensp;和&emsp;）在不同浏览器中宽度各异。
保留	<pre>元素会保留其中的所有空白。
相关	分割、非包裹、保留空白、填充内容、内联空白、断行（详见第11章）。