HTML5之列表的使用

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

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

?第一階段 01 HTML5

06列表

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

列表最大的特點就是整齊、整潔、有序

1 無序列表ul（重點）

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

顯示效果：

· 列表項1

· 列表項2

· 列表項3

2 無序列表注意事項

1.<和l<><>

3.無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

3 有序列表ol（了解）

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

顯示效果：

1. 中國

2. 美國

5 自定義列表（理解）

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

顯示效果：

四大名著

水滸傳

西游記

三國演義

紅樓夢

瀏覽器

谷歌

火狐

6 課程總結(jié)

看不懂的小伙伴不要氣餒，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

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

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

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

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

<ul>

</ul>

注意：

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

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

3.無序列表會自動生成一個小圓點，一般在實際應(yīng)用中會去掉。

1.2有序列表ol

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

<ol>

</ol>

注意：

有序列表type屬性的幾個值：

A表示顯示的編號是大寫字母

a表示編號是小寫字母

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

i表示編號是小寫羅馬數(shù)字

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

實例：

</ol>

</ol>

</ol>

</ol>

</ol>

2.3定義列表dl

什么是定義列表

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

<dl>

<dt>計算機資料</dt>

<dd>JavaScript</dd>

<dd>NodeJS入門到精通</dd>

<dd>PhP語法入門到精通</dd>

</dl>

<!--

dl:定義了一個定義列表

dt:術(shù)語部分

dd:對術(shù)語或項目進(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：單元格邊框?qū)挾?/p>

bgcolor:設(shè)置背景色

-->

</table>

們分享過很多漂亮的HTML5動畫，包括CSS3菜單、HTML5 Canvas動畫等。今天我們精選了9款非常不錯的超炫HTML5最新動畫，一起來看看。

1、HTML5可愛的404頁面動畫很逗的機器人

很久以前我在網(wǎng)上看到一篇帖子，是專門分享創(chuàng)意404頁面的，很可惜我已經(jīng)找不到了。但是今天我找到一款利用HTML5實現(xiàn)的404機器人動畫，當(dāng)你進(jìn)入該404頁面時，就會出現(xiàn)一個機器人在跳舞，非常可愛。這個機器人跳舞的動作是利用HTML5和CSS3的動畫屬性實現(xiàn)的。

2、HTML5/CSS3鼠標(biāo)滑過抖動圖標(biāo) 非常可愛

這是一款簡單的利用CSS3實現(xiàn)的圖標(biāo)抖動特效，首先我們精選了幾款常用而且漂亮的圖標(biāo)，并在圖標(biāo)下方寫有描述性的文字。當(dāng)我們把鼠標(biāo)滑過圖標(biāo)時，圖標(biāo)即會不停的抖動，像是在告訴用戶“點我吧”，這個功能很多地方應(yīng)該能用到。

3、HTML5/jQuery 3D焦點圖插件多種超酷切換動畫

之前我們分享過一些很酷的焦點圖插件了，有些是基于jQuery的焦點圖應(yīng)用，今天我們要分享一款基于HTML5和jQuery的3D焦點圖插件，該HTML5焦點圖有多種超酷的切換動畫，包括3D百葉窗、3D翻轉(zhuǎn)等特效，有些切換效果在高版本Chrome中有效果。

4、CSS3各大網(wǎng)站分享按鈕帶網(wǎng)站Logo小圖標(biāo)

對于CSS3分享按鈕，我們在之前的文章中已經(jīng)分享幾款了，像純CSS3社會化分享按鈕可固定網(wǎng)頁頂部、CSS3發(fā)光社會分享按鈕等。今天我又收集了一款非常強大的CSS3各大網(wǎng)站分享按鈕，非常多的按鈕，基本上一些國外的社交網(wǎng)站都有。另外，這款CSS3分享按鈕還帶有社交網(wǎng)站的Logo小圖標(biāo)，外觀非常漂亮。

5、CSS3滑塊菜單菜單動畫很酷

我們之前分享過不少很酷且非常實用的CSS3菜單，今天我們再來分享一款CSS3滑塊菜單，這款菜單初始化時是幾個很漂亮的小圖標(biāo)，當(dāng)鼠標(biāo)滑過菜單項時，小圖標(biāo)即展開成具體菜單內(nèi)容，這些內(nèi)容可以自己定義，效果非常不錯。

6、HTML5畫圖特效超酷的筆刷動畫

之前我們分享過一款HTML5畫圖工具HTML5 Canvas畫板畫圖工具可定義筆刷和畫布，我們基本對HTML5的畫圖功能有一定的了解。今天我們要分享一款超酷的HTML5筆刷動畫，我們可以選擇不同的筆刷形狀，筆刷在畫布上移動時就會播放非常絢麗的動畫效果。

7、HTML5/CSS3實現(xiàn)蝙蝠俠人物動畫蜘蛛俠變身

利用CSS3實現(xiàn)人物動畫效果非常多，我們在html5tricks上也分享了不少，像HTML5/CSS3實現(xiàn)笑臉動畫、純CSS3繪制可愛小男孩動畫等。今天我們再分享一款利用純CSS3實現(xiàn)的蝙蝠俠動畫，頁面加載后就會啟動蝙蝠俠的繪制，就像組裝汽車一樣。

8、HTML5 SVG環(huán)形圖表應(yīng)用很酷的數(shù)據(jù)初始動畫

之前我們也分享過幾個HTML5餅狀圖表應(yīng)用，像HTML5 Canvas餅狀圖表，可以很清晰的展示各個數(shù)據(jù)的所占比例。今天要分享的這款HTML5圖表是一個環(huán)形的，和餅狀圖表類似，主要特點也是能清晰的了解每項數(shù)據(jù)所占的比例。這款HTML5環(huán)形圖表是利用SVG實現(xiàn)的，圖表數(shù)據(jù)在初始化的時候?qū)⒊霈F(xiàn)非常酷的動畫效果。

9、HTML5迷你音樂播放器 3D翻轉(zhuǎn)播放按鈕

上一篇我們分享了一款外觀很酷的HTML5音樂播放器，這次分享的播放器比較小巧迷你，雖然外觀沒有上一個播放器那么精致，但是功能卻是很齊全的。該HTML5音樂播放器的特點是有一個3D的翻轉(zhuǎn)播放按鈕。當(dāng)然對于HTML5播放器的外觀，大家可以自己設(shè)計定義。

以上就是9款超炫HTML5最新動畫源碼，你喜歡么？

出處：極客頭條

在線咨詢

上一篇：Chrome，不要隨意點擊網(wǎng)站上的“更新瀏覽器”
下一篇：HTML 顏色

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5之列表的使用

?第一階段 01 HTML5

06列表

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

2. 表格table

您的項目需求