子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>

運行示例：

今天學習的表格內容就到這里了，明天開始學習列表。