子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 属性，这个属性声明如何处理元素内的空白符。

white-space:normal;就是正常，和不设置一样，连续空格和空行都只会显示一个空格。

white-space:nowrap;不换行是什么意思呢？正常情况下，当我们的文本超出了文本域，文本就会自动折行，这个设置就是说不自动折行了，而是碰到换行标签<br />才换

white-space:pre;和方法一相同，将文本原样输出显示。当文本超出文本域时，不换行，会产生滚动条。

white-space:pre-wrap;保留空格和空行，但当文本超出文本域时，会自动换行。

white-space:pre-line;连续的空格会显示为一个空格，但保留连续的空行。

压缩。

我是没想到还是有人会说，没有基础的人才会问html空格的问题，这些细节没有什么用，而我这里给大家简单的汇报一下。

首先第一个问题，标签和标签之间空格的问题。先看一下这个家伙，这个例子，这两种写法有什么区别？直接看这里的例子。第一种写法包含了一个奇怪的空格，但是第二种写法是不包含空格的。

这个东西在html里面，它的解析，它的Dome节点中看是看不出来的，而我们看它们的表现完全一致的，要怎么去理解？毕竟写的代码不是所有的都会去挂工程画，这个地方是animate和note的区别，它们的内存结构是不一样的。

比如第一个节点，它下面包含了5个字节点，有3个是文本节点。再看第二个节点，这个节点下面只有两个节点，只有两个span的标签。去看html的时候，它的表现是字符，标签是字符的一种结构，但是最终使用的时候是document，它是节点，中间是有转换的，这是理论。

这里聊的就是text文本节点，而对于文本节点，那里面的东西就非常恶心了，东西就特别多了。比如现在就要这三个字，无压缩它的宽度，要怎么去计算？找一下无压缩节点，找的是无压缩里面文案的节点，它是没有宽度的，上面可以看到它的宽度是144，这是它渲染出来的，它的宽度是没有的，这个节点里面是不给提供它的宽高的，这是很恶心的一件事情。

必须得基于容器，基于它外侧的容器，来去获取到它最终的宽度，计算中文的宽度是多少，大家有见过这样的需求吧。

再说一个，现在要节点信息的位置，比如这里做了个例子，现在要定义文案的偏移量，要怎么去计算？当用第一种方式里面写的有SPA标签以后，直接获取标签，用行内的标签来去进行获取，里面包含了左边定位的信息，三百八十七。

·但现在要计算第二个节点，它的问题跟刚才的问题是一样的，如何去获取到text的节点？它的宽高获取不到的，没有偏移量的信息，得进行特殊的计算，这就是其中一个比较大的区别，这个东西就比较操蛋了。

·再来一个跨局跟行内元素的规则，规则包含哪些？标准的规则是所有的子元素，块菊元素当中所有的子元素要么都是块菊，要么都是内联的。看一下它们两个这种写法上有没有区别？这两种写法是没有任何区别的，因为它是跨极，它是内联的，而内联和跨极是不允许进行交叉使用的。

它的写法相当于它的外层又包含了一个隐匿的跨句元素，直接看页面中表现的效果，它俩的表现效果是一致的，虽然标签不一样，但是最终展示的结果是一样的，它俩的表现形式是一样的。

如果这个逻辑知道，再解释一下下面这种写法，这两种写法是一样的，解释一下为什么？已知div是跨距元素，跨距元素当中里面所有的节点全部都是跨距元素或者是行内元素，而又知道空格会转换成text的节点，而Tech的节点是行内元素，所以它的外层又会包成一行隐匿的节点，它是div，所以这里包含div，这里又包含div，有3个空格。

块级：所有的子元素都是块，中间两偏差的两个一，这两个元素它俩的表现是一样的，可以看到它最终表现的效果。

这里引出的额外的概念就是塌陷，没有内容，没有div它的content是0，它的高度必须得是0，否则这种实现就会跟理解是有差异的，而这种实现又会产生一些额外的其他的问题。

举一个例子，往from表单里面，往table里面插入元素，恰巧那一行的数据它就是为空，后端返回这个空词无串，这个时候要不要进行特殊处理？比如图中这个table，这个table它就是没有数据，这两行就是没有数据，最终展示的时候可能就是第一行它是正常的，它的高度可能是40，第二行第三行它就是瘪了，发现了因为没有内容产生的原因。

要怎么去解决这个问题？phone表格也是一样的，它也会有类似的问题。当然还会有一些其他的比较恶心的要求，现在是复文本，现在是编辑代码，而要求内容跟写的结构一样，现在要再怎么去处理第三类？使用PRE标签，刷新一下，空壳这个问题又得到了一个处理。

这里就涉及到了具体的解析结构、规则，而这些问题聊完以后又可以回到上一个问题，HM中有哪些标签？关于如何分类的？标签的分类其实按功能分、按和模型去区分，没问题都没问题，但至少所有的类型得加上。

比如hider meter，它们是行类的还是块儿级？包括直播的时候弹幕上已经提到过行内块级，有些内容是说错的，讲道理当时就是听个响，因为答案太普通了。可以按照另外的一种结构来去区分，可以基于转换后的元素进行区分，而它包含很多。

·第一种：空元素，没有内容的元素，它的核心是什么？现在写一个image标签，里面的标签内容不要那样写，非要这样去写，里面加一个奇怪的标签内容，肯定是标加不进去的，是没有办法放到image里面的。包括heart，包括这些里面的其他的标签全部都是这样的，最终会做一些特殊的操作来去处理里面的span或者里面文案的内容。

·第二个元素，模板元素。它是用来定义下面模板用的，是比较特殊的，里面的内容不会进行额外的解析。比如现在写了一个奇怪的标签，里面加了一个script，这个时候刷起甲会怎样？刷新一下标签会进行执行。当然是如果用time play就不会进行执行，它是一个元素的，是一个模板类的标签，刷新一下不会进行执行。

·第三类，原始文本元素。这类元素其实往下看，主要是看这两个元素包含可转移和不可转移，一般是两个，提示器写的也行，一般是两个。这两个会进行解析，需要其他的解析器来对里面的代码去进行解析。但是textl里边放的这些元素是不会进行解析的。

比如现在把tablet改成taxl，大家注意里面的节点会怎么处理？会去执行吗？不会执行，并且会把里面的内容放到里面的内容，这个东西也是以前代替template的核心原因。去看一些比较老的实现的时候，比如百度中里面会用一些taxl代替template，因为以前没这个元素。

·第五个，这两原始文本算两个，第五个就是外来元素，这里写的又比较清楚，非HTML规范的一些元素。特殊的一些元素，外来的不是html里面规范的。

最后就是普通元素，打鼓本身就是笔试题的平替，但是它的内容跟笔试是不一样的，笔试是有标准答案的，是要打分的，60分以后继续聊，没有超过60分就可以走了。

但打鼓不是，抛出一个问题，永远是论述题，大家来相互的沟通，有可能面试官的这个点不会没关系，完全可以主动地去提。面试官我觉得这个点不重要，我更了解浏览器中编语原理的部分，了解浏览器中关于渲染引擎的这一部分，可以基于这个问题来探讨一下关于节点，关于刚才这些问题到底是有一个什么样的答案，这是没有问题的。

反正一句话，我是不认可没有技术的人才会问hmr空格问题的，更不认可这些细节问题没有任何用的言论。

过昨天的学习算是对HTML有了一点点了解，知道了什么是前端，什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。

特殊字符（了解即可）

有常见性就有特殊性，我们使用电脑时经常会用到空格键，在html文档上有时也会使用到空格键等等，那怎么在html上又是以什么形式展示给浏览器解析呢？

表格标签

作用：在浏览器上清晰美观地显示、展示数据。

表格标签的语法

<table>

<tr>

<td></td>

</tr>

</table>

表格标签：<table></table>，一个table标签中可嵌套多个tr标签。

行标签：<tr></tr>，一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。

单元格标签：<td></td>，一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。

在html中表格不是由横线划分行和列，而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子，里面包含tr标签，这个是一个和table长度差不多的矩形盒子，table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子，td盒子就是单元格。

表格示例：

在html文档中编辑表格标签结构时，除了一个标签一个标签地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table标签中输入：“tr*5>td*3”然后敲回车，就将其表格结构迅速展现出来。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

运行界面示例：默认状态下表格是没有线条分界，表格对齐方式左对齐。

表头单元格标签

<th></th>：位于表格的第一行或第一列，可以使其内容加粗居中显示。

语法：

<table>

<th>

<td></td>

</th>

</table>

表头表格代码示例：

<h1>表头表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

运行界面示例：

表格结构标签

表格结构标签分为表格头部标签和表格主体标签。类似于head标签和body标签对于html标签之间的关系。

表格头部标签：<thead></thead>。定义表格头部，嵌套在<table></table>中，一般位于第一行。

表格主体标签：<tbody></tbody>。定义表格主体，嵌套在<table></table>中，主要用于显示数据。

代码示例：

<h1>表格结构标签</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三丰</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

运行界面：

表格属性

虽然表格属性在实际开发过程中不常使用，一般都是通过CSS样式设置，但是还是需要记住这些属性关键词，在css中属性关键词也会用到。

注：这些属性都要写在table标签的开始标签中，多个属性之间需要使用空格分隔。

align：表格的对其方式。

align=“left”：在浏览器中居左显示。也是默认显示。

align=“center”：在浏览器中居中显示。

align=“right”：在浏览器中居右显示。

border：表格是否具有边框。

border=”1”：表格添加边框。

cellpadding：单元格内的元素和td边框的距离。

举个例子，如果表格是一件教室的话，桌子就是单元格，桌子上放的书本就是单元格内的元素，书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。

cellspacing：单元格和单元格之间的距离。默认是有空隙的，可设置为零，使其空隙清零，成为一条直线。

还是以教室为表格，桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。

width：表格的宽度，属性值可以是像素值也可以是百分比。

height：表格的高度，属性值可以是像素值也可以是百分比。

代码示例：

<h1>表头表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

运行界面：

合并单元格

合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后，要将没有写合并的单元格代码的其他合并单元格标签删除掉。

目标单元格：（合并代码存在位置）

跨行合并：最上侧单元格为目标单元格，写合并代码。

跨列合并：最左侧单元格为目标单元格，写合并代码。

合并单元格的方式：

跨行合并：将处于不同行的单元格进行合并

语法：rowspan=“合并单元格个数”

代码示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

运行界面：

跨列合并：将处于不同列的单元格进行合并

语法：colspan=“合并单元格个数”

代码示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

运行示例：

今天学习的表格内容就到这里了，明天开始学习列表。