HTML5之列表的使用

嘍大家好，我是作者“未來(lái)”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個(gè)階段，堅(jiān)持學(xué)習(xí)3個(gè)月蛻變?yōu)閃eb前端高手哦！

志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！

?第一階段 01 HTML5

06列表

把制成表以表顯示容器里面裝載著文字或圖表的一種形式，叫列表。

列表最大的特點(diǎn)就是整齊、整潔、有序

1 無(wú)序列表ul（重點(diǎn)）

無(wú)序列表的各個(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分，是并列的。其基本語(yǔ)法格式如下：

顯示效果：

· 列表項(xiàng)1

· 列表項(xiàng)2

· 列表項(xiàng)3

2 無(wú)序列表注意事項(xiàng)

1.<和l<><>

3.無(wú)序列表會(huì)帶有自己樣式屬性，放下那個(gè)樣式，一會(huì)讓CSS來(lái)！

3 有序列表ol（了解）

有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列定義，有序列表的基本語(yǔ)法格式如下：

顯示效果：

1. 中國(guó)

2. 美國(guó)

5 自定義列表（理解）

定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。其基本語(yǔ)法如下：

顯示效果：

四大名著

水滸傳

西游記

三國(guó)演義

紅樓夢(mèng)

瀏覽器

谷歌

火狐

6 課程總結(jié)

看不懂的小伙伴不要?dú)怵H，后續(xù)的分享中將持續(xù)解釋?zhuān)灰愀曳窒淼恼n程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個(gè)月后，回過(guò)頭來(lái)看之前的文章就會(huì)感覺(jué)簡(jiǎn)單極了。

本章已結(jié)束，下篇文章將分享《06列表》小伙伴們不要錯(cuò)過(guò)喲！

av元素是什么？

Nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。其中的導(dǎo)航元素可以鏈接到站點(diǎn)的其他頁(yè)面或者當(dāng)前頁(yè)的其他部分。

Nav元素可以用作頁(yè)面導(dǎo)航的鏈接組，在導(dǎo)航鏈接組里面有很多的鏈接，點(diǎn)擊每個(gè)鏈接可以鏈接到其他頁(yè)面或者當(dāng)前頁(yè)面的其他部分，并不是所有的鏈接組都要被放在Nav元素里面，只需要把最主要的、基本的、重要的放在Nav元素里面即可。

比如說(shuō)頁(yè)腳底部如果有個(gè)版權(quán)聲明，不建議使用Nav元素，而建議使用footer元素是最合適的。一個(gè)頁(yè)面中可用多個(gè)Nav元素作為整體或者不同部分的導(dǎo)航

示例代碼：

Nav元素示例代碼

在上面這段代碼中，通過(guò)在Nav元素內(nèi)部嵌套無(wú)序列表ul來(lái)搭建導(dǎo)航結(jié)構(gòu)。通常一個(gè)HTML頁(yè)面中可以包含多個(gè)Nav元素，作為頁(yè)面整體或不同部分的導(dǎo)航。

具體來(lái)說(shuō)Nav元素可以用的場(chǎng)景如下：

1.傳統(tǒng)導(dǎo)航條：目前主流網(wǎng)站上都有不同層級(jí)的導(dǎo)航條，其作用是跳轉(zhuǎn)到網(wǎng)站的其他主頁(yè)面。

2.側(cè)邊欄導(dǎo)航：目前主流博客網(wǎng)站及電商網(wǎng)站都有側(cè)邊欄導(dǎo)航，目的是將當(dāng)前文章或當(dāng)前商品頁(yè)面跳轉(zhuǎn)到其他文章或其他商品頁(yè)面。

3.頁(yè)內(nèi)導(dǎo)航：它的作用是在本頁(yè)面幾個(gè)主要的組成部分之間進(jìn)行跳轉(zhuǎn)。

4.翻頁(yè)操作：翻頁(yè)操作切換的是網(wǎng)頁(yè)的內(nèi)容部分，可以通過(guò)單擊“上一頁(yè)”或“下一頁(yè)”切換，也可以通過(guò)單擊實(shí)際的頁(yè)數(shù)跳轉(zhuǎn)到某一頁(yè)。

除此Nav元素也可以用于其他重要的、基本的導(dǎo)航鏈接組中。并不是所有的鏈接組都要被放進(jìn)Nav元素，只需要將主要的和基本的鏈接放進(jìn)Nav元素即可。

.列表標(biāo)簽 ul，ol, dl(掌握)

1.1ul無(wú)序列表標(biāo)簽

基本結(jié)構(gòu):

<ul>

</ul>

注意：

1.ul標(biāo)簽和li標(biāo)簽是組合使用。

2.li標(biāo)簽里面可以添加任何內(nèi)容，或者嵌套標(biāo)簽也可以

3.無(wú)序列表會(huì)自動(dòng)生成一個(gè)小圓點(diǎn)，一般在實(shí)際應(yīng)用中會(huì)去掉。

1.2有序列表ol

語(yǔ)法：定義子項(xiàng)順序的。一般有編號(hào)（數(shù)字或字母或希臘字母）

<ol>

</ol>

注意：

有序列表type屬性的幾個(gè)值：

A表示顯示的編號(hào)是大寫(xiě)字母

a表示編號(hào)是小寫(xiě)字母

I表示編號(hào)是羅馬數(shù)字

i表示編號(hào)是小寫(xiě)羅馬數(shù)字

默認(rèn)情況下顯示的是數(shù)字

實(shí)例：

</ol>

</ol>

</ol>

</ol>

</ol>

2.3定義列表dl

什么是定義列表

dl標(biāo)簽定義了定義列表，通常用于名稱(chēng)的解釋或者概念的定義。每個(gè)子項(xiàng)分為2個(gè)部分，一部分負(fù)責(zé)定義，另一部分負(fù)責(zé)解釋

<dl>

<dd>JavaScript</dd>

<dd>NodeJS入門(mén)到精通</dd>

</dl>

<!--

dl:定義了一個(gè)定義列表

dt:術(shù)語(yǔ)部分

dd:對(duì)術(shù)語(yǔ)或項(xiàng)目進(jìn)行解釋的部分

-->

2. 表格table

2.1表格的使用

（1）table標(biāo)簽

（2）表格行、列的合并

<table>：定義表格

<tr>:定義表格的行

<td>：定義表格的列

<th> ：定義表格表頭單元格

<thead>:定義表格中表頭的內(nèi)容

<tbody>:定義表格中的主體內(nèi)容

<tfoot>:定義表格中的腳注

<caption>:定義表格標(biāo)題

<!--

cellspacing:單元格與單元格之間的距離

cellpadding：內(nèi)容與單元格之間的距離

border：?jiǎn)卧襁吙驅(qū)挾?/p>

bgcolor:設(shè)置背景色

-->

</table>

在線咨詢(xún)

上一篇：服務(wù)器搭建綠色大氣的有機(jī)蔬菜食品公司網(wǎng)站html源碼
下一篇：ADSL撥號(hào)上網(wǎng)常見(jiàn)問(wèn)題

您的項(xiàng)目需求

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

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

HTML5之列表的使用

?第一階段 01 HTML5

06列表

.列表標(biāo)簽 ul，ol, dl(掌握)

2. 表格table

您的項(xiàng)目需求

.列表標(biāo)簽 ul，ol, dl(掌握)