「前端开发」html入门列表标签

[toc]

概况

我们下面来学习html的三总列表

标签 标签名称
<ul></ul> 无序列表
<ol></ol> 有序列表
<dl></dl> 定义列表

无序列表

无序列表指没有刻意的排序, 无序列表使用<ul></ul>每一个列表中都有<li></li>标签

注意:<ul></ul><li></li>必须组合(嵌套)使用, , <li></li>必须放在<ul></ul>或者<ol></ol>中使用,<ul></ul>标签中只能放<li>, 但是<li>里面可以放其他标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>面包</li>
        <li>牛奶
          <p>注意:要低脂的</p>
          </li>
        <li>鸡蛋</li>
        <li>奶酪</li>
    </ul>
</body>
</html>

有序列表

指有刻意排序的列表

注意: <li></li>必须放在<ul></ul>或者<ol></ol>中使用,<ol></ol>标签中只能放<li>, 但是<li>里面可以放其他标签。

ol标签有type属性

type属性值 意义
a 表示小写编号排序
A 表示大写编号排序
i 表示小写罗马编号排序
I 表示大写罗马编号排序
1 表示按数字排序(默认)

start属性

指排序从多少开始

reversed属性

指顺序还是倒序, 在属性栏出添加reversed就是变成倒序,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <h1>一年级2班期末考试成绩排名</h1>
    <ol type="A", start="5">
        <li>小慕</li>
        <li>小李</li>
        <li>小明</li>
        <li>小刚</li>
    </ol>
</body>
</html>

定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>北京</dt>
        <dd>国家首都、政治中心、文化中心</dd>
        <dt>上海</dt>
        <dd>国际经济、金融、科技创新中心</dd>
        <dt>深圳</dt>
        <dd>经济特区、国际化都市</dd>
    </dl>  
</body>
</html>

实战

学完三种标签后,我们就开始在实际的网页中,来写列表

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小慕医生</title>
        <meta name="Description", content="小慕医生是专业的团队">
        <meta name="Keywords", content="责任、关爱">
    </head>
    <body>
        <div class="header">

            <!-- 网页logo -->
            <div class="loge">
                <h1>小慕医生</h1>
            </div>

            <!-- 工具栏 -->
            <div class="tool"></div>

            <!-- 导航栏 -->
            <div class="nav">
                <ul>
                    <li>首页</li>
                    <li>医院概况</li>
                    <li>医院动态</li>
                    <li>专家学科</li>
                    <li>服务指南</li>
                    <li>医院文化</li>
                    <li>信息公开</li>
                    <li>交流互动</li>
                </ul>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="banner">

            <!-- 小圆点 -->
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>


        <!-- 主要内容 -->
        <div class="content">

            <!-- 常用链接 -->
            <div clasee="userful-link">
                <ul>
                    <li>就诊须知</li>
                    <li>就医流程</li>
                    <li>专家介绍</li>
                    <li>医保就医</li>
                    <li>健康体检</li>
                </ul>
            </div>

            <!-- 动态和公告 -->
            <div class="news-and-notice">
                <div class="news">
                    <h2>医院动态</h2>

                    <!-- 新闻 -->
                    <div class="news-content">

                        <!-- 图片新闻 -->
                        <div class="news-hots"></div>

                        <ul>
                            <li>为病理诊断装上“千里眼”!深医与和平县人民医院实现远程病理会诊</li>
                            <li>市医保局调研组莅临深医开展门诊共济保障改革工作调研</li>
                            <li>深医许楠医生获得2022年度“豪韵达人秀”甲状腺手术视频大赛全国总冠</li>
                            <li>深圳市输血行业两项团体标准正式发布!</li>
                            <li>深医首次入选复旦版《2021年度中国医院综合排行榜》综合百强!</li>
                        </ul>


                    </div>
                </div>

                <!-- 医院公告 -->
                <div class="notice">
                    <h2>医院公告</h2>

                    <!-- 有序列表 -->
                    <ol>
                        <li>
                            <dl>
                                <dt>养生堂</dt>
                                <dd>郭主任, 特殊时期糖尿病人的新冠...</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>养生堂</dt>
                                <dd>郭主任, 特殊时期糖尿病人的新冠...</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>养生堂</dt>
                                <dd>郭主任, 特殊时期糖尿病人的新冠...</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>养生堂</dt>
                                <dd>郭主任, 特殊时期糖尿病人的新冠...</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>养生堂</dt>
                                <dd>郭主任, 特殊时期糖尿病人的新冠...</dd>
                            </dl>
                        </li>
                    </ol>

                </div>
            </div>

            <!-- 广告图片 -->
            <div class="ad-images"></div>

            <!-- 科室介绍 -->
            <div class="dep-info">
                <h2>科室介绍</h2>

                <div class="dep-content">
                    <div>
                        <h3>内科</h3>
                        <ul>
                            <li>呼吸内科</li>
                            <li>消化内科</li>
                            <li>神经内科</li>
                            <li>心血管内科</li>
                            <li>免疫内科</li>
                            <li>内分泌科</li>
                            <li>肾内科</li>
                        </ul>
                    </div>
                    <div>
                        <h3>肿瘤科</h3>
                        <ul>
                            <li>肿瘤内科</li>
                            <li>肿瘤外科</li>
                            <li>肿瘤妇科</li>
                            <li>骨肿瘤科</li>
                            <li>放疗科</li>
                            <li>肿瘤康复科</li>
                            <li>肿瘤综合科</li>
                        </ul>
                    </div>
                    <div>
                        <h3>肿瘤科</h3>
                        <ul>
                            <li>肿瘤内科</li>
                            <li>肿瘤外科</li>
                            <li>肿瘤妇科</li>
                            <li>骨肿瘤科</li>
                            <li>放疗科</li>
                            <li>肿瘤康复科</li>
                            <li>肿瘤综合科</li>
                        </ul>
                    </div>
                    <div>
                        <h3>外科</h3>
                        <ul>
                            <li>普通外科</li>
                            <li>神经外科</li>
                            <li>心胸外科</li>
                            <li>泌尿外科</li>
                            <li>肝胆外科</li>
                            <li>肛肠外科</li>
                            <li>心血管外科</li>
                            <li>烧伤科</li>
                            <li>骨外科</li>
                            <li>乳腺外科</li>
                        </ul>
                    </div>
                    <div>
                        <h3>儿科</h3>
                        <ul>
                            <li>儿科总和</li>
                            <li>小儿内科</li>
                            <li>小儿外科</li>
                            <li>新生儿科</li>
                            <li>儿童营养科</li>
                            <li>消化内科</li>
                        </ul>
                    </div>
                </div>

            </div>

            <!-- 专家介绍 -->
            <div class="exp-info">
                <h2>专家介绍</h2>
                <ul>
                    <li>
                        <div class="picbox"></div>
                        <div class="wordbox">
                            <p>姓名:李琳</p>
                            <p>科室:肿瘤内科</p>
                            <p>职称:主任医师</p>
                            <p>介绍:北京医院肿瘤内科科室主任,党支部书记,副教授,硕士研究生导师,中国老年肿瘤专业委员会肺癌分委会常务委员,北京医学……</p>
                        </div>
                    </li>
                    <li>
                        <div class="picbox"></div>
                        <div class="wordbox">
                            <p>姓名:毛永辉</p>
                            <p>科室:肾脏内科</p>
                            <p>职称:主任医师</p>
                            <p>介绍:北京医院肾内科主任,主任医师,硕士研究生导师。1989年毕业于华西医科大学临床医学院,后在北京医院内科、肾内科工作……</p>
                        </div>
                    </li>
                    <li>
                        <div class="picbox"></div>
                        <div class="wordbox">
                            <p>姓名:黄慈波</p>
                            <p>科室:风湿免疫科</p>
                            <p>职称:主任医师</p>
                            <p>介绍:教授主任医师研究生导师卫生部北京医院风湿免疫科主任 北京大学医学部风湿免疫系副主任;海峡两岸医师交流协会风湿免疫……</p>
                        </div>
                    </li>
                    <li>
                        <div class="picbox"></div>
                        <div class="wordbox">
                            <p>姓名:曹素艳</p>
                            <p>科室:特需医疗部</p>
                            <p>职称:主任医师</p>
                            <p>介绍:北京医院特需医疗部(健康管理中心)/全科医疗部主任,老年与全科医学中心副主任,主任医师,医学硕士。北京大学医学部硕士……</p>
                        </div>
                    </li>
                    <li>
                        <div class="picbox"></div>
                        <div class="wordbox">
                            <p>姓名:陈海波</p>
                            <p>科室:神经内科</p>
                            <p>职称:主任医师</p>
                            <p>介绍:北京医院神经内科主任,主任医师,北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</p>
                        </div>
                    </li>
                    <li>
                        <div class="picbox"></div>
                        <div class="wordbox">
                            <p>姓名:Jack</p>
                            <p>科室:普通外科</p>
                            <p>职称:主任医师</p>
                            <p>介绍:北京医院普通外科主任,胃肠外科主任,北京大学医学部硕士研究生导师,1985年毕业于白求恩医科大学,从事普外科临床工……</p>
                        </div>
                    </li>
                </ul>

            </div>
        </div>

        <!-- 页脚 -->
        <div class="footer">

            <!-- 友情链接 -->
            <div class="friend-links"></div>
                <h2>友情链接</h2>
                <ul>
                    <li>院长信箱</li>
                    <li>投诉信箱</li>
                    <li>在线调查</li>
                    <li>地理位置</li>
                    <li>网站地图</li>
                    <li>网站帮助</li>
                    <li>隐私声明</li>
                </ul>

            <!-- 地址 -->
            <div class="address">
                <h2>小慕医生</h2>
                <ul>
                    <li>地址:北理工国防大厦111号</li>
                    <li>电话:088-88888888</li>
                    <li>邮箱:kefu@imooc.com</li>
                    <li>邮编:666666</li>
                    <li>网址:http://imooc.com</li>
                    <li>举报热线:088-88888888</li>
                </ul>
            </div>   
        </div>
    </body>
</html>
本作品采用《CC 协议》,转载必须注明作者和本文链接
刻意学习
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
118
粉丝
88
喜欢
173
收藏
245
排名:367
访问:2.6 万
私信
所有博文
社区赞助商