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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線:

          使用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ǔ)的表格元素。示例代碼如下:

          <table><!-- 寫(xiě)在表格元素的開(kāi)頭 --><caption>表格標(biāo)題</caption><!-- 表格標(biāo)題 --><tr>標(biāo)題標(biāo)簽<th>姓名</th><!-- 標(biāo)題標(biāo)簽 --><th>年齡</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 寫(xiě)在表格元素的結(jié)尾 -->

          頁(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è)制作


          主站蜘蛛池模板: 久久精品无码一区二区日韩AV| 无码人妻精品一区二区三区久久久 | 视频精品一区二区三区| 久久一区二区精品综合| 日韩社区一区二区三区| 国产91大片精品一区在线观看| 99久久国产精品免费一区二区| 亚洲国产成人精品无码一区二区| 亚洲国产一区二区三区| 国产SUV精品一区二区四| 亚洲色偷偷偷网站色偷一区| 国产品无码一区二区三区在线蜜桃| 精品乱码一区内射人妻无码| 精品一区狼人国产在线| 色一情一乱一区二区三区啪啪高| 一区二区三区四区视频| 亚洲一区二区三区四区在线观看| 成人影片一区免费观看| 国产美女视频一区| 久久毛片免费看一区二区三区| 人成精品视频三区二区一区| 日本夜爽爽一区二区三区| 国产日韩视频一区| 国产成人一区二区三区高清| 亚洲一区二区三区乱码在线欧洲| 亚洲一区二区成人| 乱码精品一区二区三区| 精品国产AV一区二区三区| 亚洲熟妇av一区| 亚洲乱色熟女一区二区三区蜜臀 | 波多野结衣中文一区二区免费| 国产精品成人免费一区二区| 精品国产亚洲第一区二区三区| 在线观看一区二区三区视频| 天天躁日日躁狠狠躁一区| 国产伦精品一区二区三区四区| 四虎一区二区成人免费影院网址 | 国产午夜一区二区在线观看| 无码欧精品亚洲日韩一区夜夜嗨 | 国产高清视频一区二区| 亚洲Aⅴ无码一区二区二三区软件|