使用HTML添加表格1（基本元素）-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

格元素詳解與練習(xí)

提到表格，大家最先想到的就是EXCEL這款軟件，實(shí)際上在對(duì)表格的操作上，HTML與EXCEL非常相似。

在展示數(shù)據(jù)，統(tǒng)計(jì)數(shù)據(jù)方面，表格比文字描述更具表達(dá)優(yōu)勢(shì)，在網(wǎng)頁(yè)中，表格也經(jīng)常被用來(lái)展示數(shù)據(jù)、計(jì)劃日常安排等內(nèi)容。如圖所示：

今天我們就來(lái)學(xué)習(xí)一下如何向頁(yè)面中添加表格元素。

首先來(lái)介紹一下表格元素中的基本標(biāo)簽。

NO.1：<table></table>

這個(gè)標(biāo)簽是書(shū)寫(xiě)表格的第一個(gè)標(biāo)簽，它本身在頁(yè)面上看不出什么內(nèi)容，但是它的屬性可以控制表格顯示的全局樣式。這個(gè)標(biāo)簽的開(kāi)始標(biāo)簽寫(xiě)在表格元素的開(kāi)頭，結(jié)尾標(biāo)簽寫(xiě)在表格元素的結(jié)尾。

NO.2：<caption></caption>

這個(gè)標(biāo)簽是表格的標(biāo)題標(biāo)簽。

NO.3：<tr></tr>

這個(gè)標(biāo)簽定義表格的列標(biāo)簽。

NO.4：<th></th>

這個(gè)標(biāo)簽是列表標(biāo)題標(biāo)簽，例如，男生、女士、姓名等。

NO.5：<td></td>

這個(gè)標(biāo)簽定義表格的行標(biāo)簽。

OK，這些基本標(biāo)簽就可以構(gòu)建一個(gè)基礎(chǔ)的表格元素。示例代碼如下：

頁(yè)面效果如圖所示：沒(méi)有表格的外邊框。

如何添加外邊框呢？在<table>標(biāo)簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。

<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->

效果如圖所示：

這時(shí)，您會(huì)發(fā)現(xiàn)表格在頁(yè)面上的尺寸非常小，可不可以按照頁(yè)面尺寸來(lái)顯示表格嗎？當(dāng)然可以，這就需要為<table>標(biāo)簽修改第二個(gè)屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->

效果如圖所示：

ok！今天的講解先到這里，明天我會(huì)繼續(xù)為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個(gè)標(biāo)簽，以及合并單元格操作。

今天的完整代碼示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個(gè)網(wǎng)頁(yè)</title>
</head> 
<body><h1>第一個(gè)網(wǎng)頁(yè)</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格標(biāo)題</caption>
<tr>
  <th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所謂萬(wàn)丈高樓平地起，html技術(shù)雖然簡(jiǎn)單，但是內(nèi)容相對(duì)繁瑣，也是以后進(jìn)一步學(xué)習(xí)網(wǎng)頁(yè)制作的基礎(chǔ)，希望大家動(dòng)手寫(xiě)每一段代碼，把每一步踩堅(jiān)實(shí)。

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

對(duì)路徑與絕對(duì)路徑的使用方法

在《HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》這一篇教程最后內(nèi)容中，我們?cè)敿?xì)展示了"絕對(duì)路徑"與"相對(duì)路徑"在寫(xiě)法上的區(qū)別。示例代碼如下：

<img src="file:///D:/零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作/image1.jpg"/><!--絕對(duì)路徑-->
<img src="image1.jpg"/><!--相對(duì)路徑-->

那什么時(shí)候使用"相對(duì)路徑"什么時(shí)候使用"絕對(duì)路徑"呢？

搞清楚這個(gè)問(wèn)題就要介紹一下網(wǎng)頁(yè)制作的最后一步，上傳服務(wù)器的過(guò)程與要求。

我們所有的可以通過(guò)網(wǎng)絡(luò)在瀏覽器上顯示的頁(yè)面都是存儲(chǔ)在網(wǎng)絡(luò)服務(wù)器中的文件。

網(wǎng)絡(luò)服務(wù)器是什么？大家可以理解為一臺(tái)電腦，和我們使用的個(gè)人計(jì)算機(jī)在構(gòu)造上差不多，但是功能更加強(qiáng)大、穩(wěn)定。因此服務(wù)器的價(jià)格相比個(gè)人電腦更加昂貴，可靠性也要更高。

服務(wù)器圖片

如果我們的網(wǎng)頁(yè)或網(wǎng)站的制作完成后，需要去找一個(gè)網(wǎng)絡(luò)服務(wù)器或是網(wǎng)絡(luò)服務(wù)器中的部分內(nèi)存（也可以自己搭建簡(jiǎn)單服務(wù)器用來(lái)測(cè)試），之后會(huì)給我們相關(guān)的賬號(hào)，我們自己設(shè)置密碼后，使用ftp工具上傳到網(wǎng)絡(luò)服務(wù)器中，然后給我們分配一個(gè)臨時(shí)的域名用來(lái)測(cè)試網(wǎng)站。這樣我們就可以使用手機(jī)或電腦通過(guò)瀏覽器在線打開(kāi)自己的頁(yè)面了。這是筆者做過(guò)的一個(gè)全景展館頁(yè)面----在線齊越教育館（http://qiyueehibitionhall.gz01.bdysite.com/indexWeiXin.html）。

那頁(yè)面或網(wǎng)站如何上傳呢？

還記得最開(kāi)始我們建立的那個(gè)"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"文件夾嗎？簡(jiǎn)單來(lái)說(shuō)通過(guò)把這個(gè)文件夾上傳就可以了，把里面"第一個(gè)頁(yè)面.html"改成"index.html"這個(gè)頁(yè)面就變成了我們的主頁(yè)。

如果，這個(gè)頁(yè)面中的所有路徑都是使用絕對(duì)路徑寫(xiě)的，這時(shí)問(wèn)題就來(lái)了，

<img src="file:///D:/零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作/image1.jpg"/><!--絕對(duì)路徑-->

頁(yè)面及其所在文件夾在我的電腦上是在D盤(pán)，我上傳服務(wù)器之后，文件就不一定還在服務(wù)器的D盤(pán)上，也許是在服務(wù)器的F盤(pán)呢？或者把文件發(fā)給同事，同事接收后在C盤(pán)上打開(kāi)，絕對(duì)路徑是不是就不能指示正確的位置了？因此頁(yè)面就不能正確的找到相應(yīng)信息了。

為了解決因?yàn)樯蟼鞣?wù)器或者換電腦而不能正確找到資源路徑的問(wèn)題，相對(duì)路徑的概念就產(chǎn)生了，相對(duì)路徑是不管你在哪個(gè)磁盤(pán)上，它只是遵循資源與頁(yè)面文件的相對(duì)位置，只要文件夾中的相對(duì)位置沒(méi)變，無(wú)論你把文件夾搬運(yùn)到天涯海角，頁(yè)面依然可以循著路徑找到相關(guān)信息。

<img src="image1.jpg"/><!--相對(duì)路徑-->

下面為家具體展示一下相對(duì)路徑的寫(xiě)法以及頁(yè)面文件與路徑指定文件的位置關(guān)系。

<img src="image1.jpg"/><!--相對(duì)路徑-->

這句代碼指的是頁(yè)面文件"第一個(gè)頁(yè)面.html"與圖片"image1.jpg"在一個(gè)文件夾中。如圖所示：

如果，圖片比較多，我們建立一個(gè)叫做"img"的文件夾來(lái)專(zhuān)門(mén)存放圖片，那代碼該怎么寫(xiě)呢？

如圖所示：

打開(kāi)文件夾，里面有一張圖片"image2.jpg"。如圖：

下面我們把這個(gè)文件召喚出來(lái)！

代碼示例：

<img src="image1.jpg"/><!--相對(duì)路徑--><img src="img/image2.jpg"/><!--相對(duì)路徑-->

效果如下：兩張圖片都進(jìn)來(lái)了。

那如果我們圖片種類(lèi)比較多，在img文件夾內(nèi)部也要分文件夾，導(dǎo)入不同文件夾中的方法相信大家已經(jīng)猜到了。圖片分類(lèi)如下：

代碼如下：

<img src="image1.jpg"/><!--相對(duì)路徑-->
<img src="img/辦公室/image2.jpg"/><!--相對(duì)路徑-->
<img src="img/戰(zhàn)斗機(jī)/image3.jpg"/><!--相對(duì)路徑-->

效果如圖：

大家發(fā)現(xiàn)書(shū)寫(xiě)規(guī)律沒(méi)有？

相對(duì)于絕對(duì)路徑來(lái)說(shuō)，相對(duì)路徑只需要寫(xiě)工程文件夾（將要上傳服務(wù)器并且包含頁(yè)面或網(wǎng)站所有內(nèi)容的文件夾）內(nèi)部的路徑就可以了。這里"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"文件夾可以看做是工程文件夾。因此，包括"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"文件夾，以及以前的路徑信息在"相對(duì)路徑中"都不需要寫(xiě)出。如圖：紅框以?xún)?nèi)的都不用寫(xiě)了。

那什么時(shí)候使用絕對(duì)路徑呢？一般情況下，在需要引入其他網(wǎng)站的圖片或頁(yè)面或其他信息時(shí)使用絕對(duì)路徑！

示例代碼如下：

<img src="https://bkimg.cdn.bcebos.com/pic/38dbb6fd5266d01694f698369a2bd40734fa35c4?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UyNzI=,xp_5,yp_5"/>

這樣我們就通過(guò)訪問(wèn)百度百科的地址在自己的頁(yè)面中打開(kāi)了殲20的圖片，如圖：

這樣做的好處是可以節(jié)省自己服務(wù)器的空間，減小工程文件夾的體積。

總結(jié)一下：

在頁(yè)面中顯示工程文件夾內(nèi)的資源或信息使用"相對(duì)路徑"，不使用"絕對(duì)路徑"。

在頁(yè)面中顯示其他網(wǎng)站的資源或信息使用"絕對(duì)路徑"，不使用"相對(duì)路徑"。

今天的內(nèi)容結(jié)束了。

最后請(qǐng)大家思考一個(gè)問(wèn)題，為什么多個(gè)<p></p>標(biāo)簽中的內(nèi)容會(huì)自動(dòng)換行，而多個(gè)<img>標(biāo)簽卻并排顯示而不會(huì)換行呢？這個(gè)問(wèn)題我們會(huì)在后面的講解中給出答案！

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

下一篇繼續(xù)為大家介紹常用元素的使用方法。

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

序列表

經(jīng)過(guò)之前關(guān)于表格、表單的學(xué)習(xí)后，再來(lái)學(xué)習(xí)列表，就顯得非常的簡(jiǎn)單和容易理解了。

學(xué)習(xí)是構(gòu)建知識(shí)體系的過(guò)程，沒(méi)有形成體系的知識(shí)學(xué)習(xí)再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎(chǔ)的初學(xué)者，第一次看我的教程，如果時(shí)間允許的話(huà)，請(qǐng)務(wù)必從目錄中找尋第一篇，循序漸進(jìn)的學(xué)習(xí)。

列表分為有序列表、無(wú)序列表和定義列表，同時(shí)列表之中還能嵌套列表，和表格非常相似。

首先介紹有序列表

要用<ol></ol>標(biāo)簽告訴瀏覽器這里是列表。

然后在里面添加<li></li>標(biāo)簽，在這個(gè)標(biāo)簽中添加內(nèi)容即可。

示例代碼如下

<p>我喜歡的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋(píng)果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一個(gè)新的html框架中看看效果。

完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜歡的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>蘋(píng)果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

頁(yè)面效果如下：

通過(guò)修改<ol>標(biāo)簽中的type屬性我們可以改變序號(hào)顯示的樣式，默認(rèn)的是數(shù)字，大家看一下不同的type值的不同效果吧！示例代碼如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋(píng)果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋(píng)果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋(píng)果</li> <li>桃子</li></ol>

頁(yè)面效果如下：

下面給大家介紹一下搜狗輸入法中如何輸入羅馬數(shù)字。

step1.點(diǎn)擊"輸入方式"

step2.點(diǎn)擊"特殊符號(hào)"后選擇數(shù)字序號(hào)，找到羅馬數(shù)字即可

除此之外我們還可以使用CSS的方法為有序列表的序號(hào)提供更多樣式。在<ol>標(biāo)簽中修改style屬性可以直接調(diào)用這些css中的屬性。寫(xiě)法是style="list-style-type:屬性值；"

示例代碼如下：(使用日語(yǔ)中的片假名表示序號(hào))

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋(píng)果</li> 
  <li>桃子</li>
</ol>

頁(yè)面效果如圖所示：

是不是很有趣，這里的測(cè)試就不一一做了。為大家奉上list-style-type的值的列表與說(shuō)明，大家自己課下去嘗試，這個(gè)列表中既有有序列表的值也有無(wú)序列表的值。

如圖：

資料來(lái)自w3school

無(wú)序列表

無(wú)序列表與有序列表的區(qū)別在于最外層的標(biāo)簽，它的寫(xiě)法是這樣的：<ul></ul>。

有一個(gè)記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫(xiě)為ol。

無(wú)序?yàn)閡norder，無(wú)序列表為unorder list，縮寫(xiě)為ul。

無(wú)序列表<ul>標(biāo)簽的type屬性用來(lái)控制列表前的標(biāo)記顯示演示。

示例代碼如下：

<h>無(wú)序列表</h>
<p>我喜歡的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋(píng)果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋(píng)果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋(píng)果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋(píng)果</li> 
  <li>桃子</li>
</ul>

頁(yè)面效果如下：

通過(guò)圖片我們可知，無(wú)序列表默認(rèn)的列表標(biāo)識(shí)就是type="disc"。

style屬性的話(huà)大家自己試試吧，這里就不啰嗦了。

定義列表

這個(gè)列表比較特殊，也比較不常見(jiàn)，主要就是顯示名詞定義的。

首先要寫(xiě)入<dl></dl>標(biāo)簽。這是告訴瀏覽器這里是個(gè)定義列表，和<ol>或<ul>一樣。

定義的英文是definition，定義列表就是definition list，縮寫(xiě)是dl。

下面在<dl></dl>標(biāo)簽中間寫(xiě)入定義的名稱(chēng)<dt></dt>,即definition title（標(biāo)題）。

與定義名稱(chēng)標(biāo)簽并列的是定義描述<dd></dd>,即definition describe（描述）。

示例代碼如下：

<dl> 
  <dt>計(jì)算機(jī)</dt> 
  <dd>用來(lái)計(jì)算的儀器 ... ...</dd> 
  <dt>顯示器</dt> 
  <dd>以視覺(jué)方式顯示信息的裝置 ... ...</dd>
</dl>

頁(yè)面效果如下：

今天的內(nèi)容結(jié)束了！

列表嵌套列表的測(cè)試大家自己試試吧，學(xué)到現(xiàn)在，相信你們都可以完成了！

如果您喜歡我的教程請(qǐng)關(guān)注我，點(diǎn)贊也能讓我充滿(mǎn)動(dòng)力！

如果您有任何疑問(wèn)請(qǐng)給我留言，如有問(wèn)題或錯(cuò)誤請(qǐng)予以斧正！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在線咨詢(xún)

上一篇：網(wǎng)頁(yè)中如何實(shí)現(xiàn)圖片的展示，自己圖片大小的修改#html
下一篇：軟件更新丨Atom 1.39 發(fā)布，跨平臺(tái)文本編輯器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

使用HTML添加表格1（基本元素）-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML完整學(xué)習(xí)目錄

對(duì)路徑與絕對(duì)路徑的使用方法

HTML完整學(xué)習(xí)目錄

HTML完整學(xué)習(xí)目錄

您的項(xiàng)目需求