過昨天的學(xué)習(xí)算是對HTML有了一點(diǎn)點(diǎn)了解，知道了什么是前端，什么是HTML、前端三大標(biāo)準(zhǔn)、主流瀏覽器和html的基本結(jié)構(gòu)及常用標(biāo)簽。那么今天繼續(xù)看看html還有什么新的知識吧。

特殊字符（了解即可）

有常見性就有特殊性，我們使用電腦時經(jīng)常會用到空格鍵，在html文檔上有時也會使用到空格鍵等等，那怎么在html上又是以什么形式展示給瀏覽器解析呢？

表格標(biāo)簽

作用：在瀏覽器上清晰美觀地顯示、展示數(shù)據(jù)。

表格標(biāo)簽的語法

<table>

<tr>

<td></td>

</tr>

</table>

表格標(biāo)簽：<table></table>，一個table標(biāo)簽中可嵌套多個tr標(biāo)簽。

行標(biāo)簽：<tr></tr>，一個tr標(biāo)簽代表一行。一個行標(biāo)簽中可以嵌套多個單元格標(biāo)簽。

單元格標(biāo)簽：<td></td>，一個td標(biāo)簽代表一個單元格。在單元格中可以填充文本、圖片、超鏈接等等內(nèi)容。

在html中表格不是由橫線劃分行和列，而是大大小小的矩形盒子來劃分。Table是一個最大的矩形盒子，里面包含tr標(biāo)簽，這個是一個和table長度差不多的矩形盒子，table一行僅容納一個tr盒子。在tr盒子中還包含有N個td盒子，td盒子就是單元格。

表格示例：

在html文檔中編輯表格標(biāo)簽結(jié)構(gòu)時，除了一個標(biāo)簽一個標(biāo)簽地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table標(biāo)簽中輸入：“tr*5>td*3”然后敲回車，就將其表格結(jié)構(gòu)迅速展現(xiàn)出來。

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

運(yùn)行界面示例：默認(rèn)狀態(tài)下表格是沒有線條分界，表格對齊方式左對齊。

表頭單元格標(biāo)簽

<th></th>：位于表格的第一行或第一列，可以使其內(nèi)容加粗居中顯示。

語法：

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

運(yùn)行界面示例：

表格結(jié)構(gòu)標(biāo)簽

表格結(jié)構(gòu)標(biāo)簽分為表格頭部標(biāo)簽和表格主體標(biāo)簽。類似于head標(biāo)簽和body標(biāo)簽對于html標(biāo)簽之間的關(guān)系。

表格頭部標(biāo)簽：<thead></thead>。定義表格頭部，嵌套在<table></table>中，一般位于第一行。

表格主體標(biāo)簽：<tbody></tbody>。定義表格主體，嵌套在<table></table>中，主要用于顯示數(shù)據(jù)。

代碼示例：

<h1>表格結(jié)構(gòu)標(biāo)簽</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>

運(yùn)行界面：

表格屬性

雖然表格屬性在實(shí)際開發(fā)過程中不常使用，一般都是通過CSS樣式設(shè)置，但是還是需要記住這些屬性關(guān)鍵詞，在css中屬性關(guān)鍵詞也會用到。

注：這些屬性都要寫在table標(biāo)簽的開始標(biāo)簽中，多個屬性之間需要使用空格分隔。

align：表格的對其方式。

align=“l(fā)eft”：在瀏覽器中居左顯示。也是默認(rèn)顯示。

align=“center”：在瀏覽器中居中顯示。

align=“right”：在瀏覽器中居右顯示。

border：表格是否具有邊框。

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

cellpadding：單元格內(nèi)的元素和td邊框的距離。

舉個例子，如果表格是一件教室的話，桌子就是單元格，桌子上放的書本就是單元格內(nèi)的元素，書本邊緣和桌子邊緣之間產(chǎn)生的空白區(qū)域就是cellpadding的值。

cellspacing：單元格和單元格之間的距離。默認(rèn)是有空隙的，可設(shè)置為零，使其空隙清零，成為一條直線。

還是以教室為表格，桌子為單元格。桌子和桌子之間的距離就是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>

運(yùn)行界面：

合并單元格

合并單元格是指將兩個或兩個以上的單元格合并成一個單元格。合并屬性一般寫在單元格標(biāo)簽的開始標(biāo)簽上。合并代碼屬性設(shè)置后，要將沒有寫合并的單元格代碼的其他合并單元格標(biāo)簽刪除掉。

目標(biāo)單元格：（合并代碼存在位置）

跨行合并：最上側(cè)單元格為目標(biāo)單元格，寫合并代碼。

跨列合并：最左側(cè)單元格為目標(biāo)單元格，寫合并代碼。

合并單元格的方式：

跨行合并：將處于不同行的單元格進(jìn)行合并

語法：rowspan=“合并單元格個數(shù)”

代碼示例：

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

運(yùn)行界面：

跨列合并：將處于不同列的單元格進(jìn)行合并

語法：colspan=“合并單元格個數(shù)”

代碼示例：

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

運(yùn)行示例：

今天學(xué)習(xí)的表格內(nèi)容就到這里了，明天開始學(xué)習(xí)列表。

天是劉小愛自學(xué)Java的第76天。

感謝你的觀看，謝謝你。

話不多說，繼續(xù)html的學(xué)習(xí)：

昨天學(xué)習(xí)了最基礎(chǔ)的文本標(biāo)簽及屬性，除此之外還有很多其它標(biāo)簽，今天逐一學(xué)習(xí)。

一、鏈接標(biāo)簽（a標(biāo)簽）

a標(biāo)簽有一個必不可少的屬性：href。href也就是超鏈接的意思。

下面編寫代碼，其中我每行之間用了兩個換行符（<br/><br/>），為了使頁面看起來相對而言更加美觀些。

①href="#"

作用是跳轉(zhuǎn)本頁面。

②href="對應(yīng)網(wǎng)頁鏈接地址"

作用是跳轉(zhuǎn)到對應(yīng)網(wǎng)頁。

③href="本地主頁"

這個呢是我自己電腦里面的一個html文件，自己可以訪問，但是別人就沒法訪問了。

②中的是只要網(wǎng)址能打開，所有人都能訪問。

④href="mailto:對應(yīng)郵箱地址"

作用是用本地的郵箱客戶端，給填寫的郵箱發(fā)送郵件。

⑤target="_self"

self，自身的意思，作用就是在當(dāng)前頁面中打開填入的網(wǎng)頁鏈接。

⑥target="_blank"

blank，空白的意思，作用就是在新窗口中打開填入的網(wǎng)頁鏈接。

⑦title="劉小愛的博客"

title，又是標(biāo)題，這里的作用是：當(dāng)我們將鼠標(biāo)放在當(dāng)前鏈接上的時候會出現(xiàn)一個標(biāo)題提示。

代碼編寫完畢，做一個測試：

其中有個小常識：

左鍵直接點(diǎn)擊，會在當(dāng)前頁面中打開對應(yīng)鏈接。

Ctrl+左鍵點(diǎn)擊，會在新的頁面中打開對應(yīng)鏈接。

二、圖片標(biāo)簽和列表標(biāo)簽

1圖片標(biāo)簽

image，圖像的意思，簡寫為img，圖片標(biāo)簽也就是用img來表示。

①src="圖片地址"

如果是本地圖片，寫出圖片所在的路徑即可。

如果是網(wǎng)絡(luò)圖片，寫出其對應(yīng)的鏈接即可。

其中width為寬度，height為高度，如果只設(shè)置其中一項(xiàng)，高度和寬度是等比例縮放的。

當(dāng)然也可以寬度高度同時設(shè)置不同的值。

②alt="圖片丟失了啦"

如果圖片丟失了，就會顯示alt里面的內(nèi)容。

③title="我是劉小愛"

同a標(biāo)簽一樣，當(dāng)鼠標(biāo)放在該圖片上時，會顯示title里的內(nèi)容。

2列表標(biāo)簽

list，即列表的意思，其中又分為有序列表和無序列表。

有序列表：ordered list，簡寫就是ol。

①type="1"

數(shù)字排序，這也是默認(rèn)的有序排序規(guī)則，所以可以省略不寫。

②type="a"

使用小寫字母排序，詳情見上圖。

③type="A"

使用大寫字母排序，詳情見上圖。

④type="Ⅰ"

使用羅馬字母排序，詳情見上圖。

⑤type="i"

使用字母i來排序，詳情見上圖。

無序列表：unordered list，簡寫就是 ul。

①type="disc"

disc，唱片、圓盤的意思，這是無序列表的默認(rèn)屬性，所以可以省略不寫。

②type="circle"

circle，圓形的意思。

③type="square"

square，正方形的意思。

三、表格標(biāo)簽

1基本介紹

table，表格的意思，這在學(xué)數(shù)據(jù)庫時就接觸過。

tr，tablerow的縮寫，表示的是表格中的行。

td，tabledata的縮寫，表示的是表格中的數(shù)據(jù)。

①單元格：cell：細(xì)胞的意思，在表格中就表示為一個單元格。

②表格外邊框：border，邊界的意思，用其可以設(shè)置外邊框的粗細(xì)。

③單元格外間距：cellspacing，用其設(shè)定外間距。

④單元格內(nèi)間距：cellpadding，用其設(shè)定內(nèi)間距。

其中width表示表格的寬度，并且外間距一般都會設(shè)定為0，不然都不像是個表格的樣子。

①caption標(biāo)簽

標(biāo)題的意思，用以說明表格的標(biāo)題，我這邊還用了一個b標(biāo)簽將其給加粗了。

②th標(biāo)簽

table head的簡寫，也就是表格的表頭，它是默認(rèn)居中加粗的。

當(dāng)然我們也可以根據(jù)align屬性來設(shè)定排序位置（居左，居中，居右）。

此外，其中也可以使用thead、tbody、tfoot標(biāo)簽來劃分表格。

• thead表示表格的頭部。
• tbody表示表格的主體。
• tfoot表示表格的腳部。

這個稍作了解即可，感覺使用這些標(biāo)簽和不使用這些標(biāo)簽對表格本身沒有影響。

2表格快速模板設(shè)置

看到左上角那個黃燈后點(diǎn)擊，選擇Language Injection Settings，最后選擇html即可。

這樣設(shè)置后就可以使用表格快速創(chuàng)建模板了。

先輸入table>tr*4>td*4，再加上Tab鍵，即可快速創(chuàng)建一個4*4的表格。

3合并單元格

①rowspan

合并行的意思，相同的列不同的行。

“2”的意思就是表示是跨兩行，從第1行開始將第1行和第2行合并起來了。

既然如此，那么第2行總共也就只需要3列了，所以將其第2行第1列刪除。

②colspan

合并列的意思，相同的行不同的列。

“3”的意思就是表示是跨3列，從第2列開始將第2列第3列和第4列合并起來了。

既然如此，那么第3行總共也就只需要2列了，所以將第3行中第3列第4列刪除。

最后

謝謝你的觀看。

如果可以的話，麻煩幫忙點(diǎn)個贊，謝謝你。