当前位置: 首页 > article >正文

项目五 李白个人生平(资源)

     本项目旨在能够灵活运用整章知识点设计页面。本项目创建了“唐朝诗人群像”网站的第三个页面——即李白个人生平页面,主要完成其 HTML部分。

【项目目的】

  • 灵活运用HTML 基本标记。
  • 掌握在 HTML页面中嵌入多媒体对象的方法。

【项目内容】

  • 利用HTML标记对网页进行结构化。
  • 能够合理的划分网页结构。

【项目步骤】

        本项目素材包括音频、图片和文本,新建 HTML 文件,命名为 libai-experiencel.html。

将“李白生平经历素材.txt” 文件的所有内容粘贴到<body>标记间。

1.网页总体结构化

素材“李白生平经历素材.tx”文件分为13个部分,见注释。分别是 !--header-->、<!-背景音乐 ->、<!--标题李白-->、 !--页面尾部-->、<!--1导读-->.••<!--10story故事3-->。在本部分做页面结构化是为了在后续项目中进行页面布局,参照项目图5-1所

(1) <header>及<nav>标签:页面头部将作为页面的主导航,因此将注释中页面头部的

"首页.•调查问卷”内容添加到指定标签内。

(2) <aside> 标签:将注释背景音乐部分,即文字〝背景音乐”,将添加到<aside>标签

内。此部分将作为背景音乐。

(3) <main>标签:此部分包括了从“1导读—10 故事3”的十个主题,将其加入到

<main>标签中。主体 main 将划分为两个部分,分别是 content 和 aside。

  1. <div id="content”>:根据注释,将“标题李白—7 当涂”划分到此部分。
  2. <aside id="story”>:根据注释,“a 故事1—10 故事3” 划分到此部分。
  3. <div id="daodu”>:根据注释,“1导读”划分到此部分。

项目图5-1网页总体结构划分

2.网页细分
(1)划分<header>细分:此部分用来做主导航,所以需要用<nav>、<ul>、<li>标签将
header部分划分为导航和列表,请参照项目图5-2所示进行结构化。

                                           


http://www.kler.cn/a/427806.html

相关文章:

  • STM32基于HAL库的串口接收中断触发机制和适用场景
  • Linux絮絮叨(三) Ubuntu桌面版添加中文拼音输入法
  • Map和Set(下)
  • Swift 扩展
  • vm ubuntu黑屏
  • 【配置查询】.NET开源 ORM 框架 SqlSugar 系列
  • 光猫开DMZ教程
  • 为什么 JavaScript 中的箭头函数不生效?
  • 基于Springboot的校园交友网站设计与实现
  • c语言的思维导图
  • Web3与人工智能的跨界融合:数据隐私与去中心化的新机遇
  • 论文笔记:Asymptotic Midpoint Mixup for Margin Balancing and Moderate Broadening
  • SQL分类:DDL、DML、DCL
  • 如果MySQL中没有MVCC,会有什么影响?
  • rockit 学习、开发笔记(六)(VENC)
  • docker批量创建cloudstack虚拟主机脚本
  • 2022-12-4----Android11(H713m)---- WiFi驱动添加写入mac号补丁
  • LabVIEW热阻炉温度控制
  • OpenResty Nginx:详细对比与部署指南
  • 【jvm】讲讲jvm中的gc