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

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

     本项目旨在能够灵活运用整章知识点设计页面。本项目创建了“唐朝诗人群像”网站的第三个页面——即李白个人生平页面,主要完成其 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.lryc.cn/news/499204.html

相关文章:

  • 计算机视觉与各个学科融合:探索新方向
  • 数据分析类论文通过stata进行数据预处理(一)
  • 力扣——1.返回字符串中第一个唯一的字符;2.把字符串转换成整数(C++)
  • M-LAG【根桥方式】
  • 新书速览|循序渐进Node.js企业级开发实践
  • Xlsxwriter生成Excel文件时TypeError异常处理
  • 【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处?
  • 2021 年“泰迪杯”数据分析技能赛B 题肥料登记数据分析
  • 网络原理之 IP 协议
  • 在 Spring Boot 项目中使用 Thymeleaf 时,通常情况下,你需要配置热加载(Hot Reload)来在开发过程中更快速地看到页面的变化。
  • arm-linux GPIO控制-脚本及shell格式
  • Go 语言基础知识语法
  • 贪心算法part05
  • 02、SpringMVC核心(上)
  • EasyPlayerPro的同一个组件实例根据url不同展示视频流
  • 哈希表介绍、实现与封装
  • 使用vm配置网络
  • OpenStack介绍
  • 力扣93题:复原 IP 地址
  • mock.js介绍
  • React开发 - 技术细节汇总一
  • 【论文复现】分割万物-SAM
  • 实现RAGFlow-0.14.1的输入框多行输入和消息框的多行显示
  • Pointnet++改进71:添加LFE模块|高效长距离注意力网络
  • C++STL容器vector容器大小相关函数
  • 阿里云CPU超载解决记录
  • 【工具变量】上市公司企业商业信用融资数据(2003-2022年)
  • 2024数字科技生态大会 | 紫光展锐携手中国电信助力数字科技高质量发展
  • ES语法(一)概括
  • (vue)el-cascader多选级联选择器,值取最后一级的数据