HTML学习记录<五> :列表

学习网站:http://www.w3school.com.cn/html/index.asp

参考博客如下:

http://blog.csdn.net/kevin_samuel/article/details/8627853

http://blog.csdn.net/youyajie/article/details/7493639/


列表类型:

有序列表 ol

无序列表 ul

      应用之一: 嵌套列表

定义列表 dl

菜单列表 menu

目录列表 dir


有序列表:

<html>
<meta charset="utf-8">
<h2>数字显示(默认)</h2>
<ol>
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ol>

<h2>字母显示</h2>
<ol type="a">
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ol>

<h2>字母显示</h2>
<ol type="A">
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ol>

<h2>小写罗马数字显示</h2>
<ol type="i">
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ol>

<h2>大写罗马数字显示</h2>
<ol type="I">
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ol>

<h2>自己确定开始的序号</h2>
<ol type = "I" start="5">
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ol>
<html>

显示效果如下:

HTML学习记录<五> :列表_第1张图片


无序列表:

<html>
<meta charset="utf-8">
********默认为实心圆*********
<ul>
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ul>
********实心圆显示*********
<ul type="disc">
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ul>
********空心圆显示*********
<ul type="circle">
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ul>

********实心矩形显示*********
<ul type="square">
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ul>
</html>

显示效果如下:

HTML学习记录<五> :列表_第2张图片

应用:嵌套列表:

<html>
<body>
<h4>Lists inside a list:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

显示效果如下:



定义列表:

<dl>       
<dt>计算机</dt>       
<dd>用来计算的仪器 ... ...</dd>       
<dt>显示器</dt>      
<dd>以视觉方式显示信息的装置 ... ...
</dd> 
</dl> 

其中:

    dt :define list title

    dd:define list define

显示效果如下:

HTML学习记录<五> :列表_第3张图片


菜单列表:

<!DOCTYPE html>
<html>
<body>

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="file_new()">新建</button>
   <button type="button" onclick="file_open()">打开</button>
   <button type="button" onclick="file_save()">保存</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="edit_cut()">剪切</button>
   <button type="button" onclick="edit_copy()">复制</button>
   <button type="button" onclick="edit_paste()">粘贴</button>
  </menu>
 </li>
</menu>

<p><b>注释:</b>所有主流浏览器均不支持 menu 元素。</p>

</body>
</html>

目录列表

<dir>
   <li>项目名称</li>
   <li>项目名称</li>
   <li>项目名称</li>
</dir>



你可能感兴趣的:(HTML学习记录<五> :列表)