码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记(四)使用列表

时间:2016-04-03 15:45:44      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:

     <ul>无序列表、<ol>有序列表、<dir>目录列表、<dl>定义列表、<menu>菜单列表、<dt><dd>定义列表的标记、<li>列表项目的标记

     无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>等标记和type属性,<li>中可以单独使用type属性。

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>创建无序列表</title>
 6 </head>
 7 <font size="+3" color="#00FF99">明日科技部门分布:</font><br /><br />
 8 <ul type="circle">
 9 <li type="disc">图书开发部</li>
10 <li>软件开发部</li>
11 <li>质量部</li>
12 <li>财务部</li>
13 </ul>
14 <hr color="#3300FF" size="2" />
15 <font size="+3" color="#00FFFF">图书开发部分布:</font><br /><br />
16 <ul type="disc">
17 <li type="circle">PHP部</li>
18 <li>ASP.NET部</li>
19 <li>C#部</li>
20 <li>Java部</li>
21 </ul>
22 <body>
23 </body>
24 </html>
View Code

    在有序列表中,主要使用<ol>和<li>两个标记以及type和start两个属性。默认情况下,有序列表的序号是数字,列表项是从数字1开始的,通过start参数可以调整起始数值。 

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>有序列表</title>
 6 </head>
 7 <font size="+4" color="#00FFFF">长春的旅游景点:</font><br />
 8 <ol start="3">
 9 <li>长春净月潭森林公园</li><br />
10 <li>长春伪皇宫博物馆</li><br />
11 <li>长影世纪城</li><br />
12 </ol>
13 <hr  size="4" color="#3300FF"/>
14 <font size="+3" color="#0099FF">每周的安排</font>
15 <ol type="A" start="4">
16 <li>周四煮一顿大餐</li>
17 <li>周五看一场电影</li>
18 <li>周六回家陪父母吃饭</li>
19 </ol>
20 <body>
21 </body>
22 </html>
View Code

     定义列表标记<dl><dt></dt><dd></dd></dl>,<dt>后面就是要解释的名称,在<dd>后面则添加该名词的具体解释。

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>创建定义列表</title>
 6 </head>
 7 <font color="#00FFCC">如果可以让你有一种超能力,你会想要有哪一种?</font><br />
 8 <ol type="A">
 9 <li>穿越时光术</li>
10 <li>隐形透明术</li>
11 <li>神秘读心术</li>
12 <li>青春不老术</li>
13 </ol>
14 <hr color="#00FFCC" size="3" />
15 <dl>
16 <dt>A:穿越时光术</dt><dd>第一种解释名词</dd>
17 <dt>B:隐形透明术</dt><dd>第二种解释名词</dd>
18 <dt>C:神秘读心术</dt><dd>第三种解释名词</dd>
19 <dt>D:青春不老术</dt><dd>第四种解释名词</dd>
20 </dl>
21 <body>
22 </body>
23 </html>
View Code

     菜单列表标记主要用于设计单列的菜单列表,菜单列表在浏览器中的显示效果和无序列表是相同的<menu><li></li></menu>

     目录列表用于显示文件内容的目录大纲<dir><li></li></dir>

    

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>建立目录列表</title>
 6 </head>
 7 <font size="+2" color="#FF9900">文学世界:</font>
 8 <dir>
 9 <li>散文精选</li>
10 <li>小说天地</li>
11 <li>诗词歌赋</li>
12 </dir>
13 <body>
14 </body>
15 </html>

 

    

HTML学习笔记(四)使用列表

标签:

原文地址:http://www.cnblogs.com/yyxiangjava/p/5349646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!