标签：html5列表 块 布局
HTML列表
<ol> 有序列表
<ul> 无序列表
<li> 列表项
---------------------
<dl> 列表
<dt> 列表项
<dd> 描述
1.无序列表
使用标签：<ul><li>
属性：disc、circle、square
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（默认方式--disc）实体的圆</title> </head> <body> <ul type="disc"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（circle）空心圆</title> </head> <body> <ul type="circle"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（square）实体方块</title> </head> <body> <ul type="square"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ul> </body> </html>
2.有序列表
使用标签：<ol><li>
属性：A、a、I、i、start
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（A）大写字母ABC……</title> </head> <body> <ol type="A"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（a）小写字母abc……</title> </head> <body> <ol type="a"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（I）I II III……</title> </head> <body> <ol type="I"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（i）i ii iii……</title> </head> <body> <ol type="i"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>（属性改为start，从10开始）10 11 12……</title> </head> <body> <ol start="10"> <li>ios</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> </body> </html>
3.嵌套列表
使用标签：<ul><ol><li>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序的嵌套列表</title> </head> <body> <ul> <li>宠物</li> <ul> <li>猫</li> <li>狗</li> </ul> <li>人类</li> <ul> <li>英国人</li> <li>中国人</li> </ul> <li>植物</li> <ul> <li>吊兰</li> <li>牡丹</li> </ul> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序的嵌套列表</title> </head> <body> <ol> <li>宠物</li> <ol> <li>猫</li> <li>狗</li> </ol> <li>人类</li> <ol> <li>英国人</li> <li>中国人</li> </ol> <li>植物</li> <ol> <li>吊兰</li> <li>牡丹</li> </ol> </ol> </body> </html>
4.自定义列表
使用标签：<dl><dt><dd>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义列表</title> </head> <body> <dl> <dt>HelloWorld</dt> <dd>aaa</dd> <dt>HelloWorld</dt> <dd>aaa</dd> <dt>HelloWorld</dt> <dd>aaa</dd> </dl> </body> </html>
标签：html5列表 块 布局
原文地址：http://11317783.blog.51cto.com/11307783/1771299
