.列表标签 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鼠标滑过抖动图标 非常可爱

这是一款简单的利用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最新动画源码，你喜欢么？

出处：极客头条