html之列表标签

来源:互联网 发布:食堂刷卡机数据采集 编辑:程序博客网 时间:2024/06/05 12:40
一,无序列表
<!--    列表标签    1,作用:    2,html中的列表标签分类    (1),无序列表(最多) unordered list    (2),有序列表(最少) ordered list    (3),定义列表(其次) definition list    3,无序列表的作用:    4,无序列表格式: <ul>                <li> 要显示的内容</li>            </ul>    5,无序列表注意点:    (1),HTML标签是给一堆数据做了予以的限制,但是并不能修改其显示样式,修改显示样式就会用到css    (2),ul和li标签是同时出现的    (3),ul和li是一个组合,不推荐其他的标签写在里面    (4),复杂的内容可以放在li标签里面    (5),最重要的一点,嵌套使用,可以在ul li 列表标签里面嵌套使用 ul li 列表标签,只能在li标签里面其那套    6,无序列表应用场景:    (1)新闻列表    (2)商品列表    (3)导航条--><h2>中国的城市有哪些</h2><ul>    <li>广州</li>    <li>北京</li>    <li>定西</li>    <li>兰州</li>    <li>上海</li></ul><!--    无序列表ul li 标签中可以嵌套无序列表标签ul li,只能嵌套在li中    小技巧:在webStorm里面快速敲出ul li标签的方法        先敲出 ul>li 然后点击 tab 键就会补全,        如果是要多个li,先敲出 ul>li*4(表示有4个li) 然后点击 tab 键就会补全--><h1>物品清单</h1><ul>    <li>        <h2>蔬菜</h2>        <ul>            <li>白菜</li>            <li>萝卜</li>            <li>黄瓜</li>        </ul>    </li>    <li>        <h2>水果</h2>        <ul>            <li>橘子</li>            <li>苹果</li>            <li>香蕉</li>        </ul>    </li></ul>
二,有序列表
<!--    有序列表格式    <ol>        <li></li>    <ol>--><ol>    <li>演员</li>    <li>小丑</li>    <li>女人不应该让男人流泪</li>    <li>唱歌</li></ol>
三,定义列表
<!--    定义列表格式    <dl>        <dt></dt>        <dd></dd>    </dl>    dt:definition title 定义的标题    dd:definition description 定义的描述应用场景:    (1)做网站尾部的相关信息    (2)图文混排--><dl>    <dt>北京</dt>    <dd>中国首都</dd>    <dt>上海</dt>    <dd>大都市</dd></dl>
0 0