第2章 HTML5页面元素及属性_补充案例.docxVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 1 第2章 补充案例 【案例2-1】 创建三级列表 一、案例描述 考核知识点 列表的嵌套 练习目标 掌握列表嵌套的方法。 熟练地使用列表的嵌套制作多级列表。 需求分析 在使用列表时，列表项中有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。为了让初学者熟悉列表嵌套的方法，本案例通过无序列表和有序列表进行嵌套，实现一个三级列表效果。 案例分析 效果如图2-1所示。 列表的嵌套效果 具体实现步骤如下： 定义无序列表ul。 在无序列表ul的子列表项li中嵌套有序列表。 二、案例实现 新建HTML文件，具体代码如下： !doctype html html head meta charset=“utf-8” title列表的嵌套应用/title /head body ul li咖啡 ul li摩卡/li li蓝山/li /ul /li li茶 ul li红茶/li li绿茶 ol li龙井/li li碧螺春/li /ol /li /ul /li li牛奶/li /ul /body /html 保存后，在谷歌浏览器中预览，效果如图2-2所示。 列表的嵌套 注意： 1、li与/li之间相当于一个容器，可以容纳所有的元素。 2、ul/ul和ol/ol中只能嵌套li/li，直接在ul/ul或ol/ol标记中输入文字的做法是不被允许的。 【案例2-2】 header元素的使用 一、案例描述 考核知识点 header元素 练习目标 掌握header元素的使用方法。 需求分析 在浏览一些网页时，网页的头部一般会存放Logo，或者是对网页宗旨性的描述语句。这些内容都可以通过header元素来定义，本案例通过header元素的使用，来实现相关效果。 案例分析 效果如图2-3所示。 header元素的应用效果 具体实现步骤如下： 在页面主体body中添加header元素。 h2标记用于定义标题。 p标记用于定义描述语句。 二、案例实现 新建HTML文件，具体代码如下： !doctype html html head meta charset=“utf-8” titleheader元素的使用/title /head body header h2传智播客/h2 p——改变中国IT教育，我们正在行动/p /header /body /html 保存后，在谷歌浏览器中预览，效果如图2-4所示。 header元素的应用效果 【案例2-3】 nav元素的使用 一、案例描述 考核知识点 nav元素 练习目标 掌握nav元素的使用方法。 需求分析 侧边栏导航相信大家并不陌生，一般定位于网页的左侧或右侧，方便用户点击。本案例通过nav元素的使用来定义一款侧边栏导航效果。 案例分析 效果如图2-5所示。 侧边栏导航效果 具体实现步骤如下： 在页面主体body中添加nav元素。 通过无序列表定义导航内容。 二、案例实现 新建HTML页面，代码如下： !doctype html html head meta charset=“utf-8” titlenav元素的使用/title /head body nav ul liUI设计/li li网页制作/li liJAVA/li liiOS/li li安卓/li /ul /nav /body /html 保存后，在谷歌浏览器中预览，效果如图2-6所示。 如何插入特殊字符效果 注意： 1、nav元素中也可通过插入a链接搭建导航结构。 【案例2-4】 北京旅游景点介绍 一、案例描述 考核知识点 hgroup元素 figcaption元素 练习目标 掌握hgroup元素与figcaption元素的搭配使用。 需求分析 在浏览一些旅游网站时，经常会看到一些文字与图片相结合的展示效果，采用这种展示效果既能使用户了解景点的由来，又能通过图片展示出诱人的景色。本案例通过hgroup元素和figcaption元素相结合的方法，来展示北京旅游景点的介绍。 案例分析 效果如图2-7所示。 北京旅游景点介绍效