項(xiàng)目二 html 結(jié)構(gòu)標(biāo)簽的使用

02html結(jié)構(gòu)標(biāo)簽的使用96任務(wù)1制作計(jì)算機(jī)樹形列表網(wǎng)頁任務(wù)2制作3C電子商務(wù)網(wǎng)站首頁97制作計(jì)算機(jī)樹形列表網(wǎng)頁任務(wù)198●1.掌握ul無序列表標(biāo)簽、ol有序列表標(biāo)簽和dl定義列表標(biāo)簽的用法?！?.掌握列表標(biāo)簽的嵌套用法。99本任務(wù)主要通過嵌套使用ul無序列表標(biāo)簽來完成樹形列表網(wǎng)頁的制作，網(wǎng)頁完成效果如圖所示。100樹形列表網(wǎng)頁效果101步驟一：新建html文件，在body標(biāo)簽中加入<h4></h4>，并在h4標(biāo)簽中加入標(biāo)題內(nèi)容“我的電腦文件列表”，代碼和網(wǎng)頁效果如圖所示。加入標(biāo)題標(biāo)簽網(wǎng)頁102步驟二：在標(biāo)題標(biāo)簽下方加入無序列表標(biāo)簽ul，這里注意，只需要一個(gè)列表項(xiàng)，所以只用寫一組“<li></li>”，如圖所示。加入無序列表網(wǎng)頁103步驟三：在“<li></li>”里“我的電腦”文字下方加入一組新的無序列表標(biāo)簽ul，這里注意，需要寫兩個(gè)盤符列表項(xiàng)，所以寫兩組“<li></li>”，如圖所示。加入嵌套u(yù)l標(biāo)簽網(wǎng)頁1104步驟四：在“本地磁盤（C:）”和“本地磁盤（D:）”文字的下方重復(fù)步驟三中的操作，這里注意，在“本地磁盤（C:）”下方的ul標(biāo)簽中加入兩組“<li></li>”，在“本地磁盤（D:）”下方的ul標(biāo)簽中加入三組“<li></li>”，列表項(xiàng)中文字信息添加如圖所示。105加入嵌套u(yù)l標(biāo)簽網(wǎng)頁2106步驟五：保存文件后使用瀏覽器打開網(wǎng)頁文件，網(wǎng)頁效果如圖所示。樹形列表網(wǎng)頁效果107一、無序列表無序列表是網(wǎng)頁中最常見的列表，之所以稱為“無序列表”，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間沒有順序級(jí)別之分，通常以并列的形式呈現(xiàn)。定義無序列表的基本語法格式如下。108在上述語法中，<ul></ul>用于定義無序列表，<li></li>嵌套在<ul></ul>中，用于描述具體的列表項(xiàng)，每對(duì)<ul></ul>中至少包含一對(duì)<li></li>。下面通過一個(gè)案例來演示無序列表的應(yīng)用，如圖所示。無序列表的應(yīng)用109無序列表的type屬性可以取不同的值，用于指定不同的列表項(xiàng)符號(hào)，見表。無序列表的type屬性值110二、有序列表有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列，例如，網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。定義有序列表的基本語法格式如下。111在上述語法中，<ol></ol>用于定義有序列表，<li></li>為具體的列表項(xiàng)，和無序列表類似，每對(duì)<ol></ol>中也至少包含一對(duì)<li></li>。下面通過一個(gè)案例來演示有序列表的應(yīng)用，如圖所示。有序列表的應(yīng)用112從上圖中可以看出，有序列表默認(rèn)的列表項(xiàng)為阿拉伯?dāng)?shù)字，并且按照1、2、3…的順序排列。有序列表的type屬性可以取不同的值，用于指定不同的排序編號(hào)，見表。有序列表的type屬性舉例及說明113三、定義列表定義列表常用于對(duì)術(shù)語或名詞進(jìn)行解釋和描述，與無序列表和有序列表不同，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)。其基本語法如下。114在上面的語法中，<dl></dl>用于指定定義列表，<dt></dt>和<dd></dd>并列嵌入<dl></dl>中，其中，<dt></dt>用于指定列表項(xiàng)標(biāo)題，<dd></dd>用于指定列表項(xiàng)內(nèi)容。一對(duì)<dt></dt>可以對(duì)應(yīng)多對(duì)<dd></dd>。下面通過一個(gè)案例來演示定義列表的應(yīng)用，如圖所示。定義列表的應(yīng)用115上圖中定義了一個(gè)定義列表，其中<dt></dt>內(nèi)為列表項(xiàng)標(biāo)題“物聯(lián)網(wǎng)”，其后緊跟著三對(duì)<dd></dd>，為“物聯(lián)網(wǎng)”列表項(xiàng)的具體內(nèi)容。運(yùn)行上圖中的代碼，效果如圖所示。定義列表網(wǎng)頁效果制作3C電子商務(wù)網(wǎng)站首頁任務(wù)2

116●1.掌握表格的創(chuàng)建方法。●2.掌握table標(biāo)簽、tr標(biāo)簽、td標(biāo)簽、th標(biāo)簽的用法。●3.熟練使用表格相關(guān)標(biāo)簽制作網(wǎng)頁。117本任務(wù)主要通過使用表格相關(guān)標(biāo)簽的嵌套，來完成3C電子商務(wù)網(wǎng)站首頁的制作，最終網(wǎng)頁效果如圖所示。1183C電子商務(wù)網(wǎng)站首頁效果119步驟一：新建一個(gè)html文件，在body標(biāo)簽中創(chuàng)建一個(gè)寬度為1300像素、邊框?yàn)?、單元格之間沒有間距且內(nèi)容居中的表格，表格3行1列，代碼如圖所示。120創(chuàng)建表格的基本結(jié)構(gòu)121步驟二：設(shè)置表格第一行tr標(biāo)簽的高度為50像素，背景顏色為藍(lán)色，然后在表格中寫入5組超鏈接<a></a>，中間的空隙用空格標(biāo)簽“ ”來填充，每組a標(biāo)簽中加入文字信息，文字信息統(tǒng)一通過font標(biāo)簽的color屬性設(shè)置為白色“white”，第一個(gè)文字信息“首頁”通過size屬性值設(shè)置為“5”，使它的字體變大。代碼如圖所示，網(wǎng)頁效果如圖所示。表格寫入第一行代碼后的網(wǎng)頁效果122表格的第一行代碼123步驟二：設(shè)置表格的第二行即第二個(gè)tr標(biāo)簽，通過分析網(wǎng)頁設(shè)計(jì)圖可知需要在這一行的唯一列中嵌套一個(gè)3行7列的子表格，且子表格第一行需要跨7列，設(shè)置子表格第一行的高度為50像素；第二行的第1列需要跨2行，設(shè)置高度為250個(gè)像素；第三行的高度也設(shè)置為250像素。代碼如圖2-2-5所示，網(wǎng)頁效果如圖所示。表格的第二行代碼124表格的第二行代碼表格寫入第二行代碼后的網(wǎng)頁效果125步驟四：表格的第三行即第三個(gè)tr標(biāo)簽，在其唯一列中放上一張圖片，代碼如圖所示。表格的第三行代碼126一、表格的創(chuàng)建表格的開始是<table>，結(jié)束是</table>，即所有的表格內(nèi)容都位于<table></table>之間。要想創(chuàng)建一個(gè)完整的表格，除了要有表格標(biāo)簽外，還需要有行標(biāo)簽tr和單元格標(biāo)簽td。創(chuàng)建表格的具體語法格式如下127對(duì)上述語法的具體解釋如下。1.<table></table>用于定義一個(gè)表格。2.<tr></tr>用于定義表格中的一行，必須嵌套在<table></table>中，在<table></table>中一般包含多對(duì)<tr></tr>。3.<td></td>用于定義表格中的單元格，必須嵌套在<tr></tr>中，一對(duì)<tr></tr>中一般包含多對(duì)<td></td>。128下面來舉例創(chuàng)建一個(gè)表格，如圖所示。創(chuàng)建表格129創(chuàng)建表格130二、table標(biāo)簽的屬性html語言為table標(biāo)簽提供了一系列屬性，用于控制表格的顯示樣式，見表。table標(biāo)簽的屬性、含義及常用屬性值1311.border屬性在table標(biāo)簽中，border屬性會(huì)為每個(gè)單元格應(yīng)用邊框。如果border的屬性值改變，那么單元格的邊框就會(huì)改變。默認(rèn)情況下border的屬性值為1，如果想去掉邊框，則需設(shè)置border的屬性值為0。為了更好地理解border屬性的用法，現(xiàn)將上圖中table標(biāo)簽的border屬性值設(shè)置為10，即將代碼<tableborder="1">更改為<tableborder="10">。132保存html文件，刷新頁面，效果如圖所示。從圖可以看出，表格的外邊框變寬了，內(nèi)邊框沒有發(fā)生變化。其實(shí)，在出現(xiàn)的雙線邊框中，外邊框?yàn)楸砀駎able的邊框，內(nèi)邊框?yàn)閱卧駎d的邊框。也就是說，table標(biāo)簽的border屬性值改變的是外邊框?qū)挾龋瑑?nèi)邊框?qū)挾热匀粸?像素。設(shè)置border="10"后的網(wǎng)頁效果1332.cellspacing屬性cellspacing屬性用于設(shè)置單元格與單元格之間的空白間距，默認(rèn)值為2像素?，F(xiàn)將上圖中table標(biāo)簽的cellspacing屬性值設(shè)置為20，即將代碼<tableborder="1">更改為<tableborder="10"cellspacing="20">。保存html文件，刷新頁面，效果如圖所示。設(shè)置cellspacing="20"后的網(wǎng)頁效果1343.cellpadding屬性cellpadding屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距，默認(rèn)為1像素?，F(xiàn)將上圖中的table標(biāo)簽應(yīng)用cellpadding="10"，即將代碼<tableborder="1">更改為<tableborder="10"cellspacing="20"cellpadding="10">。保存html文件，刷新頁面，效果如圖所示。設(shè)置cellpadding="10"后的網(wǎng)頁1354.width與height屬性默認(rèn)情況下，表格的寬度和高度都是靠其自身的內(nèi)容來撐開的，如果想要更改表格的尺寸，就需要設(shè)置其寬度和高度的屬性。下面對(duì)圖中的表格設(shè)置寬度和高度，即將代碼<tableborder="1">更改為：136設(shè)置表格的寬、高后網(wǎng)頁效果1375.align屬性align屬性用于設(shè)置表格在網(wǎng)頁中的水平對(duì)齊方式，其可選屬性值為left、center、right。當(dāng)對(duì)table標(biāo)簽應(yīng)用align屬性時(shí)，可以控制表格在頁面中的水平對(duì)齊方式，但單元格中的內(nèi)容不受align屬性的影響。6.bgcolor屬性通過table標(biāo)簽中的bgcolor屬性，可以為表格指定一個(gè)背景顏色。1387.background屬性通過table標(biāo)簽中的background屬性，可以為表格指定一個(gè)背景圖像。保存html文件，刷新頁面，效果如圖所示。為表格添加背景圖像后的網(wǎng)頁效果139三、tr標(biāo)簽的屬性前面已經(jīng)介紹過了table標(biāo)簽的相關(guān)屬性，通過對(duì)table標(biāo)簽應(yīng)用各種屬性，可以控制表格的整體顯示樣式。如果想單獨(dú)設(shè)置表格中某一行的樣式，就需要對(duì)tr標(biāo)簽應(yīng)用屬性，其屬性、含義及屬性值見表。tr標(biāo)簽的屬性、含義及屬性值140上表中列出了tr標(biāo)簽的常用屬性，其中大部分屬性與table標(biāo)簽的屬性用法相同。下面通過圖所示案例來演示tr標(biāo)簽的常用屬性效果。行標(biāo)簽tr的應(yīng)用141行標(biāo)簽tr的應(yīng)用142行標(biāo)簽tr的應(yīng)用143作為初學(xué)者，學(xué)習(xí)tr標(biāo)簽的屬性時(shí)需要注意以下幾點(diǎn)。1.tr標(biāo)簽無寬度屬性width，其寬度取決于表格標(biāo)簽table的寬度。2.可以對(duì)tr標(biāo)簽應(yīng)用valign屬性，用于設(shè)置行中內(nèi)容的垂直對(duì)齊方式。3.雖然可以對(duì)tr標(biāo)簽應(yīng)用background屬性，但是在tr標(biāo)簽中此屬性存在兼容問題，建議不要使用此屬性。144四、td標(biāo)簽的屬性在網(wǎng)頁制作過程中，通過為單元格標(biāo)簽td定義屬性，可以單獨(dú)對(duì)某一個(gè)單元格設(shè)置樣式，具體見表。td標(biāo)簽的屬性、含義及屬性值145下面對(duì)td標(biāo)簽colspan屬性和rowspan屬性的用法做具體演示，如圖所示。td標(biāo)簽colspan屬性和rowspan屬性的應(yīng)用146td標(biāo)簽colspan屬性和rowspan屬性的應(yīng)用147td標(biāo)簽colspan屬性和rowspan屬性的應(yīng)用148五、th標(biāo)簽及其屬性th是tableheading的簡(jiǎn)寫，意為表格標(biāo)題（也稱表格表頭）。th標(biāo)簽與td標(biāo)簽的區(qū)別在于：th標(biāo)簽的表頭一般位于表格的第一行，且th標(biāo)簽控制的文本默認(rèn)顯示為粗體。下面在上圖的基礎(chǔ)上對(duì)代碼進(jìn)行修改，用于演示th標(biāo)簽的使用方法，將第10～15行代碼更改如下。149保存html文件，刷新頁面，效