WEB前端：(4)HTML5③列表

@有序列表order list

<h3>有序列表</h3>

<!--有序列表-->
<ol type="1">
    <!--列表条目-->
    <li>学习html</li>
    <li>学习css</li>
    <li>学习javascript</li>
</ol>

里面的条目：<li></li>

@无序列表unorder list

<h3>无序列表</h3>
<!--type squre方块 disc原点 circle圆圈-->
<ul type="circle">
    <li>新闻标题一</li>
    <li>新闻标题一</li>
    <li>新闻标题一</li>
    <li>新闻标题一</li>
</ul>

@列表条目中嵌套超链接

<h3>列表条目中嵌套超链接</h3>
<ul>
    <li><a href="http://www.baidu.com"><img src="../../ztest/images/pic2x.jpg"></a></li>
    <li><a href="http://www.baidu.com">新闻标题</a></li>
    <li><a href="http://www.baidu.com">新闻标题</a></li>
    <li><a href="http://www.baidu.com">新闻标题</a></li>
    <li><a href="http://www.baidu.com">新闻标题</a></li>
</ul>

点击图片或者新闻标题跳转到百度网页。

@自定义列表：展示目录大纲的时候非常适用

<h3>自定义列表</h3>
<dl>
    <!--列表名称-->
    <dh>前端三大利器</dh>

    <!--一个dt统帅若干个dd-->
    <dt>html</dt>
    <dd><a href="http://www.baidu.com">负责页面的结构</a></dd>
    <dd>负责页面的结构</dd>
    <dd>负责页面的结构</dd>
</dl>

• <dl></dl> :自定义列表
• <dh></dh>: 表头
• <dt></dt>: 一个dt代表局部标题
• <dd></dd> :<dd>代表标题下的内容