HTML 第4章 列表
Dome 01 常用列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表</title>
</head>
<body>
无序列表:(默认实心圆)
<ul>
<li>入门模式</li>
<li>初级模式</li>
<li>中级模式</li>
</ul>
<ul type="circle">
<li>图书开发部</li>
<li>软件开发部</li>
<li>财务部</li>
</ul>
<ul type="square">
<li>ASP.NET部</li>
<li>C#</li>
<li>JAVA</li>
</ul>
有序列表:
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>
<ol type="a">
<li>字母列表a项</li>
<li>字母列表b项</li>
<li>字母列表c项</li>
</ol>
<ol type="A" start="4">
<li>周四煮一顿大餐</li>
<li>周五煮一顿大餐</li>
<li>周六煮一顿大餐</li>
</ol>
<ol type="i">
<li>卧室</li>
<li>客厅</li>
<li>厨房</li>
</ol>
<ol type="I">
<li>穿越时光术</li>
<li>隐形透明术</li>
<li>神秘读心术</li>
</ol>
定义列表:
<dl>
<dt>名词</dt><dd>解释</dd>
<dt>A:穿越时光术</dt><dd>你在浪费时间,所有你想穿越回去,弥补损失!</dd><br />
<dt>B:隐形透明术</dt><dd>凡是都喜欢保存距离,不喜欢成为注目的焦点!</dd><br />
<dt>C:秘密读心术</dt><dd>八卦到处有,你处特别多,因为你知道!</dd><br />
</body>
</html>
Dome 02 特殊列表
<body>
菜单列表:
<menu>
<li>菜单项一</li>
<li>菜单项二</li>
<li>菜单项三</li>
</menu>
目录列表:
<dir>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</dir>
嵌套列表:
<dl>
<dt>名词一</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dt>名词二</dt>
<dd>解释1</dd>
<dd>解释2</dd>
</dl>
无序与有序嵌套:
<ul type="square">
<li><font size="+1" color="#FF9900"></font>Question:当你赶路累了,一好心的女巫说你可以选择一处休息</li>
</ul>
<ol type="1">
<li>七个小矮人</li>
<li>美人鱼</li>
<li>饼屋</li>
</ol>
<ul type="square">
<li><font size="+1" color="#336600"></font>Answer:</li>
</ul>
<ol type="A">
<li>纯情</li>
<li>有幻想</li>
<li>实在</li>
</ol>
</body>
</html>
Dome 01 常用列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表</title>
</head>
<body>
无序列表:(默认实心圆)
<ul>
<li>入门模式</li>
<li>初级模式</li>
<li>中级模式</li>
</ul>
<ul type="circle">
<li>图书开发部</li>
<li>软件开发部</li>
<li>财务部</li>
</ul>
<ul type="square">
<li>ASP.NET部</li>
<li>C#</li>
<li>JAVA</li>
</ul>
有序列表:
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>
<ol type="a">
<li>字母列表a项</li>
<li>字母列表b项</li>
<li>字母列表c项</li>
</ol>
<ol type="A" start="4">
<li>周四煮一顿大餐</li>
<li>周五煮一顿大餐</li>
<li>周六煮一顿大餐</li>
</ol>
<ol type="i">
<li>卧室</li>
<li>客厅</li>
<li>厨房</li>
</ol>
<ol type="I">
<li>穿越时光术</li>
<li>隐形透明术</li>
<li>神秘读心术</li>
</ol>
定义列表:
<dl>
<dt>名词</dt><dd>解释</dd>
<dt>A:穿越时光术</dt><dd>你在浪费时间,所有你想穿越回去,弥补损失!</dd><br />
<dt>B:隐形透明术</dt><dd>凡是都喜欢保存距离,不喜欢成为注目的焦点!</dd><br />
<dt>C:秘密读心术</dt><dd>八卦到处有,你处特别多,因为你知道!</dd><br />
</body>
</html>
Dome 02 特殊列表
<body>
菜单列表:
<menu>
<li>菜单项一</li>
<li>菜单项二</li>
<li>菜单项三</li>
</menu>
目录列表:
<dir>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</dir>
嵌套列表:
<dl>
<dt>名词一</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dt>名词二</dt>
<dd>解释1</dd>
<dd>解释2</dd>
</dl>
无序与有序嵌套:
<ul type="square">
<li><font size="+1" color="#FF9900"></font>Question:当你赶路累了,一好心的女巫说你可以选择一处休息</li>
</ul>
<ol type="1">
<li>七个小矮人</li>
<li>美人鱼</li>
<li>饼屋</li>
</ol>
<ul type="square">
<li><font size="+1" color="#336600"></font>Answer:</li>
</ul>
<ol type="A">
<li>纯情</li>
<li>有幻想</li>
<li>实在</li>
</ol>
</body>
</html>