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

感謝你的觀(guān)看，謝謝你。

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

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

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

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

下面編寫(xiě)代碼，其中我每行之間用了兩個(gè)換行符（<br/><br/>），為了使頁(yè)面看起來(lái)相對(duì)而言更加美觀(guān)些。

①href="#"

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

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

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

③href="本地主頁(yè)"

這個(gè)呢是我自己電腦里面的一個(gè)html文件，自己可以訪(fǎng)問(wèn)，但是別人就沒(méi)法訪(fǎng)問(wèn)了。

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

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

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

⑤target="_self"

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

⑥target="_blank"

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

⑦title="劉小愛(ài)的博客"

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

代碼編寫(xiě)完畢，做一個(gè)測(cè)試：

其中有個(gè)小常識(shí)：

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

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

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

1圖片標(biāo)簽

image，圖像的意思，簡(jiǎn)寫(xiě)為img，圖片標(biāo)簽也就是用img來(lái)表示。

①src="圖片地址"

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

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

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

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

②alt="圖片丟失了啦"

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

③title="我是劉小愛(ài)"

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

2列表標(biāo)簽

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

有序列表：ordered list，簡(jiǎn)寫(xiě)就是ol。

①type="1"

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

②type="a"

使用小寫(xiě)字母排序，詳情見(jiàn)上圖。

③type="A"

使用大寫(xiě)字母排序，詳情見(jiàn)上圖。

④type="Ⅰ"

使用羅馬字母排序，詳情見(jiàn)上圖。

⑤type="i"

使用字母i來(lái)排序，詳情見(jiàn)上圖。

無(wú)序列表：unordered list，簡(jiǎn)寫(xiě)就是 ul。

①type="disc"

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

②type="circle"

circle，圓形的意思。

③type="square"

square，正方形的意思。

三、表格標(biāo)簽

1基本介紹

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

tr，tablerow的縮寫(xiě)，表示的是表格中的行。

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

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

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

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

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

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

①caption標(biāo)簽

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

②th標(biāo)簽

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

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

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

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

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

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

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

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

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

3合并單元格

①rowspan

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

“2”的意思就是表示是跨兩行，從第1行開(kāi)始將第1行和第2行合并起來(lái)了。

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

②colspan

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

“3”的意思就是表示是跨3列，從第2列開(kāi)始將第2列第3列和第4列合并起來(lái)了。

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

最后

謝謝你的觀(guān)看。

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

篇介紹了網(wǎng)格容器、網(wǎng)格軌道的相關(guān)屬性使用方法，如果您還不熟悉網(wǎng)格，建議先去看看之前的文章前端入門(mén)——css Grid網(wǎng)格基礎(chǔ)知識(shí) ，前端入門(mén)——css 網(wǎng)格軌道詳細(xì)介紹 學(xué)習(xí)下網(wǎng)格基本知識(shí)。

本篇主要介紹網(wǎng)格項(xiàng)的相關(guān)屬性：

• grid-column-start 和 grid-row-start（網(wǎng)格列、行的開(kāi)始位置）
• grid-column-end 和 grid-row-end（網(wǎng)格列、行結(jié)束位置）
• grid-column 和 grid-row （網(wǎng)格行、列屬性簡(jiǎn)寫(xiě)）
• grid-area （網(wǎng)格區(qū)域，更簡(jiǎn)單簡(jiǎn)寫(xiě)方式）

以上四組屬性都和網(wǎng)格線(xiàn)密切相關(guān)，它們定義了網(wǎng)格項(xiàng)如何根據(jù)網(wǎng)格線(xiàn)來(lái)定位網(wǎng)格項(xiàng)的位置。

網(wǎng)格行和列的開(kāi)始和結(jié)束

語(yǔ)法如下：

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

屬性值說(shuō)明：

• <number> | <name> – 一個(gè)以數(shù)字或名稱(chēng)作為編號(hào)的網(wǎng)格線(xiàn)
• span <number>– 設(shè)置網(wǎng)格項(xiàng)跨越的網(wǎng)格數(shù)目
• span <name>– 設(shè)置網(wǎng)格項(xiàng)跨越網(wǎng)格直到此名稱(chēng)的網(wǎng)格線(xiàn)為止
• auto– 表示自動(dòng)跨越，默認(rèn)跨度為 1網(wǎng)格

如下示例：

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

如果沒(méi)有聲明grid-column-end/ grid-row-end ，則默認(rèn)情況下該項(xiàng)目將跨越 1 個(gè)網(wǎng)格。

項(xiàng)目可以相互重疊。您可以使用 z-index 它們來(lái)控制它們的堆疊順序。

網(wǎng)格列和行屬性簡(jiǎn)寫(xiě)

上面介紹的grid-column-start / grid-row-start 、grid-column-end/ grid-row-end四個(gè)屬性還可以使用grid-row-start 和 grid-row-end 進(jìn)行簡(jiǎn)寫(xiě)。

語(yǔ)法：

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

屬性值：

• <start-line> / <end-line> – 每一個(gè)都接受與上面四個(gè)屬性相同的值，包括跨度（span）。

如下示例：

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

如果沒(méi)有聲明結(jié)束值，則默認(rèn)情況下該項(xiàng)目將跨越 1 個(gè)網(wǎng)格。

網(wǎng)格區(qū)域 —— grid-area

使用此屬性可以命名一個(gè)網(wǎng)格區(qū)域，以便在 grid-template-areas 屬性創(chuàng)建的模板中引用此網(wǎng)格區(qū)域，或者作為grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短的簡(jiǎn)寫(xiě)。

語(yǔ)法如下：

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

屬性值：

• <name> – 命名的網(wǎng)格區(qū)域名稱(chēng)。
• <row-start>/<column-start>/<row-end>/<column-end> 以數(shù)字或名稱(chēng)命名的網(wǎng)格線(xiàn)，和上面介紹的屬性用法一樣。

如下示例：

為網(wǎng)格區(qū)域分配名稱(chēng)的一種方式

.item-d {
  grid-area: header;
}

作為簡(jiǎn)寫(xiě)

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

參考資料：

https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid