HTML学习笔记使用列表
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML学习笔记使用列表相关的知识,希望对你有一定的参考价值。
<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>
在有序列表中,主要使用<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>
定义列表标记<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>
菜单列表标记主要用于设计单列的菜单列表,菜单列表在浏览器中的显示效果和无序列表是相同的<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学习笔记使用列表的主要内容,如果未能解决你的问题,请参考以下文章