1. 主页
  2. 文档
  3. HTML
  4. 案例解析
  5. 多媒体与语义化标签案例

多媒体与语义化标签案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小慕医生 - 责任、品质、关爱</title>
    <meta name="Description" content="小慕医生是专业的医院,理念就是责任、品质、关爱">
    <meta name="Keywords" content="美容,减脂,内科,外科">
</head>

<body>
    <!-- 页面头部 -->
    <header>
        <!-- 网页的logo -->
        <div class="logo">
            <h1>小慕医生</h1>
        </div>

        <!-- 网页的功能区 -->
        <div class="tool">
            <img src="images/tel.png" alt="">
            <span class="telnumber">088-88888888</span>
            <a href=""><img src="images/chinese_icon.png" alt=""></a>
            <a href=""><img src="images/english_icon.png" alt=""></a>
        </div>
        <!-- 网页的导航条 -->
        <nav class="main-nav">
            <ul>
                <li>首页</li>
                <li>医院概况</li>
                <li>医院动态</li>
                <li>专家学科</li>
                <li>服务指南</li>
                <li>医院文化</li>
                <li>信息公开</li>
                <li>互动交流</li>
            </ul>
        </nav>
    </header>
    <!-- 网页的banner -->
    <section class="banner">
        <img src="images/banner.png" alt="">
        <h2>责任,科学,严谨</h2>
        <!-- 小圆点 -->
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </section>

    <!-- 网页的主要内容 -->
    <section class="content">
        <!-- 常用链接 -->
        <div class="useful-links">
            <ul>
                <li>
                    <a href="">
                        <img src="images/icon_jzxz.png" alt="">
                        <span>就诊须知</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/icon_jylc.png" alt="">
                        <span>就医流程</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/icon_zjjs.png" alt="">
                        <span>专家介绍</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/icon_ksjs.png" alt="">
                        <span>科室介绍</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/icon_ybjy.png" alt="">
                        <span>医保就医</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/icon_jktj.png" alt="">
                        <span>健康体检</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 医院动态和医院公告区域 -->
        <div class="news-and-notice">
            <!-- 医院动态 -->
            <div class="news">
                <h3>医院动态</h3>
                <div class="news-content">
                    <!-- 图片新闻 -->
                    <div class="hot-news">
                        <!-- 放新闻的大图片 -->
                        <a href="">
                            <img src="images/news_pic.png" alt="">
                            <div>
                                “全国首届健康预防与商业医疗保险论坛”在北京医院举办
                            </div>
                        </a>
                    </div>
                    <!-- 新闻列表 -->
                    <ul>
                        <li><a href="">年度医疗机构用血自查评分表和科室基本信息表</a></li>
                        <li><a href="">关于上报北京市医疗机构临床用血信息的通知</a></li>
                        <li><a href="">北京医院输血科通过验收并获批开展“临床基…</a></li>
                        <li><a href="">国家药品监督管理局关于修订都梁软胶囊非处…</a></li>
                        <li><a href="">关于将多拉司琼注射剂等药品纳入本市基本医…</a></li>
                        <li><a href="">关于调整完善本市基本医疗保险门诊特殊疾病…</a></li>
                        <li><a href="">广东省药学会:关于印发《超药品说明书用药…</a></li>
                        <li><a href="">人力资源社会保障部关于将36种药品纳入国家…</a></li>
                    </ul>
                </div>
            </div>
            <!-- 医院公告 -->
            <div class="notice">
                <h3>医院公告</h3>
                <ol>
                    <li>
                        <dl>
                            <dt><a href="">《养生堂》</a></dt>
                            <dd><a href="">公郭立新主任 特殊时期糖尿病人的新冠…</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><a href="">《养生堂》</a></dt>
                            <dd><a href="">王少为主任 新型冠状病毒防控指引十八…</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><a href="">《我要当医生》</a></dt>
                            <dd><a href="">谭玲副主任 李同舟 姚晨蕊药师</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><a href="">《全民健康学院》</a></dt>
                            <dd><a href="">王建业院长 “医”路有你 健康同行</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt><a href="">《健康北京》</a></dt>
                            <dd><a href="">王建业院长 莫把衰老当病治</a></dd>
                        </dl>
                    </li>
                </ol>
            </div>
        </div>

        <!-- 广告图片 -->
        <aside class="ad-images">
            <a href="">
                <img src="images/xuanchuan.png" alt="">
            </a>
        </aside>

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

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

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

        <!-- 小慕医生联系方式 -->
        <address>
            <h3>小慕医生</h3>
            <ul>
                <li>地址:北理工国防大厦111号</li>
                <li>电话:088-88888888</li>
                <li>邮箱:kefu@imooc.com</li>
                <li>邮编:666666</li>
                <li>网址:<a href="">http://imooc.com</a></li>
                <li>举报热线:088-88888888</li>
            </ul>
        </address>
    </footer>
</body>

</html>
这篇文章对您有用吗?

我们要如何帮助您?