h5中的列表

来源:互联网 发布:小米手环 知乎 编辑:程序博客网 时间:2024/03/29 21:05

有序列表:<ol> <li>..</li> </ol:

代码显示:

<ol>    <li>填写信息</li>    <li>收电子邮件</li>    <li>注册成功</li></ol>


无序列表:<ul> <li>...</li> </ul>

代码显示:


<ul>    <li>填写信息</li>    <li>收电子邮件</li>    <li>注册成功</li></ul>



从代码和显示结果可以看出二者的区别,ul是写项目的时候很常用的。

还有一种就是

定义列表:<dl>  <dt>标题</dt>  <dd>描述...</dd>:

代码显示:


<dl>    <dt>        <img src="../iamges/115.png">    </dt>    <dd>商品名称</dd>    <dd>商品价格</dd>    <dd>商品简介</dd></dl><dl>    <dt>烟台高校</dt>    <dd>工商学院</dd>    <dd>烟台大学</dd>    <dd>鲁东大学</dd></dl>



跟其类似还有一种列表,不过不常见:

定义描述标签(组合标签)<figure> <img src=""alt/ <figcaption>标题 </figcaption> </figure>

代码显示:


  <img src="../iamges/115.png">    <figcaption>人物头像</figcaption></figure>

分区标签<div></div>:      div-ul(ol)-li 用于分类导航或菜单    div-dl-dt-dd 用于图文混编的场合    table-tr-td 用于图文布局或显示数据    form-table-tr-td 用于布局表单       行级元素:* span(文本),* img(图片),* em(强调),* strong(强烈强调),q(短引用),    * a(超链接) i(倾斜),b(加粗),small(缩小字体)
    
<div>    <ul>        <li>            <dl>                <dt style="display:inline-block ">                    <img src="../iamges/4.png">                </dt>                <div  style="display:inline-block ">                    <dd>私募教父赵丹阳揭秘主盘砸盘手段,震怒整个私募界</dd>                    <dd>搜狐网</dd>                </div>            </dl>        </li>    </ul>    <ul>        <li>            <dl>                <dt>                    <img src="../iamges/5.png">                </dt>                <dd>上午存款600万下午只剩600元 银行:请耐心等待答复</dd>                <dd>重庆晨报 10 02</dd>            </dl>        </li>    </ul></div><div>    <dl>        <dt style="display: inline-block">            <img                    src="images/star1.jpg"                    width="200px"                    height="200px">        </dt>        <div style="display: inline-block">            <dd>拍卖Acer上网本</dd>            <dd>奔腾,1G内存,200G硬盘</dd>            <dd>跳楼疯抢价<span style="color: red;font-size: 60px">1</span>元</dd>        </div>    </dl></div>


0 0