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

1.1ul無序列表標簽

基本結構:

<ul>

<li>國際新聞</li>

<li>國內新聞</li>

<li>軍事熱點</li>

<li>數碼、科技</li>

<li>時裝</li>

</ul>

注意：

1.ul標簽和li標簽是組合使用。

2.li標簽里面可以添加任何內容，或者嵌套標簽也可以

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

1.2有序列表ol

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

<ol>

<li>小西瓜</li>

</ol>

注意：

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

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

a表示編號是小寫字母

I表示編號是羅馬數字

i表示編號是小寫羅馬數字

默認情況下顯示的是數字

實例：

<ol type="1" start="5">

<li><a href="">小蘋果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西紅柿</a></li>

<li><a href="">獼猴桃</a></li>

<li><a href="">藍莓</a></li>

</ol>

<ol type="a" >

<li><a href="">小蘋果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西紅柿</a></li>

<li><a href="">獼猴桃</a></li>

<li><a href="">藍莓</a></li>

</ol>

<ol type="A">

<li><a href="">小蘋果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西紅柿</a></li>

<li><a href="">獼猴桃</a></li>

<li><a href="">藍莓</a></li>

</ol>

<ol type="i">

<li><a href="">小蘋果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西紅柿</a></li>

<li><a href="">獼猴桃</a></li>

<li><a href="">藍莓</a></li>

</ol>

<ol type="I">

<li><a href="">小蘋果</a></li>

<li><a href="">小西瓜</a></li>

<li><a href="">草莓</a></li>

<li><a href="">西紅柿</a></li>

<li><a href="">獼猴桃</a></li>

<li><a href="">藍莓</a></li>

</ol>

2.3定義列表dl

什么是定義列表

dl標簽定義了定義列表，通常用于名稱的解釋或者概念的定義。每個子項分為2個部分，一部分負責定義，另一部分負責解釋

<dl>

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

<dd>H5前端開發</dd>

<dd>JavaScript</dd>

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

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

<dt>文學書籍</dt>

<dd>詩歌</dd>

<dd>小說</dd>

<dd>散文</dd>

</dl>

<!--

dl:定義了一個定義列表

dt:術語部分

dd:對術語或項目進行解釋的部分

-->

2. 表格table

2.1表格的使用

（1）table標簽

（2）表格行、列的合并

<table>：定義表格

<tr>:定義表格的行

<td>：定義表格的列

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

<thead>:定義表格中表頭的內容

<tbody>:定義表格中的主體內容

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

<caption>:定義表格標題

<!--

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

cellpadding：內容與單元格之間的距離

border：單元格邊框寬度

bgcolor:設置背景色

-->

<table width="360" border="1" cellspacing="0" cellpadding="0" align="center" >

<tr bgcolor="aqua"><th>學號</th><th>姓名</th></tr>

<tr align="center"><td>001</td><td>張三</td></tr>

<tr align="center"><td>002</td><td>李四</td></tr>

<tr align="center"><td>003</td><td>王五</td></tr>

<tr align="center"><td>004</td><td>趙六</td></tr>

</table>

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

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

很久以前我在網上看到一篇帖子，是專門分享創意404頁面的，很可惜我已經找不到了。但是今天我找到一款利用HTML5實現的404機器人動畫，當你進入該404頁面時，就會出現一個機器人在跳舞，非?？蓯?。這個機器人跳舞的動作是利用HTML5和CSS3的動畫屬性實現的。

2、HTML5/CSS3鼠標滑過抖動圖標 非?？蓯?/strong>

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

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

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

4、CSS3各大網站分享按鈕 帶網站Logo小圖標

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

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

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

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

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

7、HTML5/CSS3實現蝙蝠俠人物動畫 蜘蛛俠變身

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

8、HTML5 SVG環形圖表應用 很酷的數據初始動畫

之前我們也分享過幾個HTML5餅狀圖表應用，像HTML5 Canvas餅狀圖表，可以很清晰的展示各個數據的所占比例。今天要分享的這款HTML5圖表是一個環形的，和餅狀圖表類似，主要特點也是能清晰的了解每項數據所占的比例。這款HTML5環形圖表是利用SVG實現的，圖表數據在初始化的時候將出現非?？岬膭赢嬓Ч?。

9、HTML5迷你音樂播放器 3D翻轉播放按鈕

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

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

出處：極客頭條