`标签来定义。实验报告中会详细记录这些标签的使用情况及其所代表的含义。
接着是对页面样式的分析和复刻。开源中国的样式是通过CSS来定义的，这包括了字体、颜色、布局等视觉表现形式。在复刻过程中，需要对CSS文件进行研究，理解其对于页面元素样式的描述方式。例如，可能会使用类选择器来控制某些特定类的样式，或者使用ID选择器来针对特定元素设置样式。实验报告中会展示如何通过修改这些样式定义来复刻出与原网站相似的视觉效果。
在实验的过程中，还会涉及到对图像资源的处理。页面中的图像如图片和GIF动画在复刻时需要保证其清晰度和加载速度。实验报告中会包括图像文件的处理过程，如何选择合适的格式来减小文件大小，同时保持图像质量。例如，PNG格式的图片用于需要背景透明的场景，而JPEG格式适合普通的照片展示。报告中还会讨论如何使用图片优化工具来进一步减小图像文件的体积，提高网页的加载速度。
整个实验是一个系统性的工程，它不仅仅是对单个文件的操作，而是涉及到了前端开发的多个方面。实验报告二不仅是对开源中国静态页面的复刻，更是对前端开发能力的一次全面锻炼。通过实践，可以加深对HTML结构、CSS样式表以及图像资源处理的认识，为未来的前端开发工作打下坚实的基础。
此次实验的目的在于通过复刻知名网站的静态页面，来加深对网页设计和前端开发的理解。通过对开源中国网站的静态复刻，学习了如何利用HTML、CSS等前端技术来构建网页，并且如何优化网页资源以提高用户体验。实验中涉及的技术细节和知识点对于理解现代Web开发流程至关重要。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实验报告二：开源中国静态复刻</title>
<link rel="stylesheet" href="os.css">
</head>
<body>
<header>
<div class="top">
<div class="link top-left">
<span><a href="" xss=removed>首页</a></span>
<span><a href="" xss=removed>资讯</a></span>
<span><a href="" xss=removed>动弹</a></span>
<span><a href="" xss=removed>专区</a></span>
<span><a href="" xss=removed>问答</a></span>
<span><a href="" xss=removed>GOTC2023</a></span>
<span><a href="" xss=removed>活动</a></span>
<span><a href="" xss=removed>软件库</a></span>
<span><a href="" xss=removed>Too</a>l</span>
<span><a href="" xss=removed>博客</a></span>
<span><a href="" xss=removed>Gitee</a></span>
<span id="icon_mayun_wide">
DevOps
</span>
</div>
<div class="link top-right">
<span><a href="" xss=removed>登录</a></span>
<span><a href="" xss=removed>注册</a></span>
</div>
</div>
<div class="nav">
<div class="link logo">开源软件</div>
<div class="link menu">
<span><a class="unselected" href="">软件首页</a></span>
<span><a class="unselected" href="">软件分类</a></span>
<span><a class="unselected" href="">国产开源</a></span>
<span><a class="selected" href="">开源公司</a></span>
<span><a class="unselected" href="">软件资讯</a></span>
</div>
<button type="button" id="td" style="cursor: pointer;"><b>＋ 投递软件</b></button>
<input placeholder=" 大家都在搜..." type="text" id="text1"></input><button type="submit" id="button1">⚁</button>
</div>
</header>
<div class="substance">
<div class="li1">
<div class="a1">
<span><a href="">开源软件</a></span>
<span>⚁</span>
<span><a href="">开源公司</a></span>
<span>⚁</span>
<span><strong><a href="" xss=removed>开源中国</a></strong></span>
<span xss=removed>(1)</span>
</div>
<div class="a2">
<span xss=removed><strong xss=removed>推荐软件</strong></span>
<span xss=removed><a href="" xss=removed>更多推荐</a></span>
</div>
<a href="" class="image1" xss=removed>Kooder-源码托管系统代码搜索工具</a>
<a href="" class="image1" xss=removed>Gitee Jenkins Plugin-码云持续集成插件</a>
<a href="" class="image1" xss=removed>CodeCloud VisualStudio-码云Visual Studio 插件</a>
<div class="a3">
<select required id="select1">
<option value="">所有编程语言</option>
<option value="Java">Java</option>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="Kotlin">Kotlin</option>
<option value="C">C</option>
</select>
<select required id="select2">
<option value="">所有操作系统</option>
<option value="Windows">Windows</option>
<option value="Linux">Linux</option>
<option value="Unix">Unix</option>
<option value="macOS">macOS</option>
</select>
<input type="checkbox" id="tj" style="zoom:140%;">
<label for="tj" xss=removed>只看推荐</label>
<span xss=removed>排序：</span>
<strong id="slsj"><a href="" xss=removed>收录时间</a></strong>
<a href="" id="lls">浏览数</a>
<a href="" id="scs">收藏数</a>
</div>
</div>
<div class="li2">
<a class="tmain" href=""><span class="title1">Kooder</span><span class="title2"> - 源码托管系统代码搜索工具</span>
<span class="jian">荐
<span class="tuijian" xss=removed>推荐</span></span>
<span class="guo">国
<span class="guochan" xss=removed>国产</span></span>
</a>
<span class="text2">Kooder 是一个开源的代码搜索工具，目标是为包括 Gitee/GitLab/Gitea 在内的代码托管系统提供自动的源码、仓库和 lssue 的搜索服务。一个企业里往往有大量的项目，每个项...</span>
<span class="sc1">收藏:60</span><a href="" class="pl1">评论:24</a><span class="gxrq1">更新于 2021/06/03</span>
<a class="tmain" href="https://www.oschina.net/p/xuanwan"><span class="title1">玄湾OS</span><span class="title2"> - 云原生镜像构建系统</span>
<span class="jian">荐
<span class="tuijian" xss=removed>推荐</span></span>
<span class="guo">国
<span class="guochan" xss=removed>国产</span></span>
</a>
<span class="text2">玄湾OS是云原生OS的重要组件之一。玄湾OS项目聚焦于镜像的构建和升级。常规的OS镜像一般是通过Linux发行版衍生而来，在云原生场景下，具有体积臃肿、版本零散、攻击面广等不足。玄湾OS项目的引...</span>
<span class="sc1">收藏:10</span><a href="" class="pl1">评论:15</a><span class="gxrq1">更新于 2024/03/20</span>
</div>
<div class="li3">
<span xss=removed><strong>本类热门软件</strong></span>
<a href="https://www.oschina.net/p/github" class="tmain2">GitHub - 代码托管服务平台</a>
<span class="sc2">收藏:349</span><a href="" class="pl2">评论:74</a>
<a href="https://www.oschina.net/p/github" class="tmain2">GitHub - 代码托管服务平台</a>
<span class="sc2">收藏:349</span><a href="" class="pl2">评论:74</a>
<a href="https://www.oschina.net/p/github" class="tmain2">GitHub - 代码托管服务平台</a>
<span class="sc2">收藏:349</span><a href="" class="pl2">评论:74</a>
<a href="https://www.oschina.net/p/github" class="tmain2">GitHub - 代码托管服务平台</a>
<span class="sc2">收藏:349</span><a href="" class="pl2">评论:74</a>
<a href="https://www.oschina.net/p/github" class="tmain2">GitHub - 代码托管服务平台</a>
<span class="sc2">收藏:349</span><a href="" class="pl2">评论:74</a>
<a href="https://www.oschina.net/p/github" class="tmain2">GitHub - 代码托管服务平台</a>
<span class="sc2">收藏:349</span><a href="" class="pl2">评论:74</a>
<a href="https://www.oschina.net/p/github" class="tmain2">GitHub - 代码托管服务平台</a>
<span class="sc2">收藏:349</span><a href="" class="pl2">评论:74</ 相关资源
隅逝需要积分:2(1积分=1元)
web-homework2.zip 大约有7个文件 
1.gif 2.31KB