Web编程调研报告

目录

前言

1. 网站选取

2. HTML部分调研报告

1) 首页

顶部

内容

页脚

2) 点击一个游戏之后的页面

3) 点击开始游戏之后的页面

4) 点击一个游戏分类之后的页面

5) 搜索页面

6) 更多游戏页面

3. CSS部分调研报告

4. JS部分调研报告

总结

---

前言

这个作业当时确实做的有点麻Orz，你会发现写到后面我已经开始摆烂了😅，这里建议大家不要选那种太大型的网站，不然根本写不完，点开源码就是上万行，看都够你看的了，可以用我下面的网站先查一下预估日均PV，符合要求再看源码多不多。HTML部分就截个图，说说哪里的部分对应哪里，CSS部分就说一下页面效果，最好是那种比较明显的，JS部分则写一下用户交互、注册登录那些，反正我写那么烂都有99分，相信优秀的你不会比我差。(；・∀・)

请选择满足下列条件的某个网站，对该网站的设计、实现进行调研，并完成分析报告。本调研报告由HTML+CSS+JS三部分组成，本次先完成HTML部分

1. 网站选取

网站的概述（简略说明这是一个什么网站，以及你为什么打算调研这个网站）。要求所选择的网站有一定规模（包括10个以上的不同网页；每个网页有10个以上的不同HTML元素和10个以上的不同样式属性）和用户浏览量（最近一个月内的日均PV超过100个）。简介你所选择的网站，说明理由并给出对应的支撑材料。

我选择调研的网站是17yy小游戏(17yy.com)，这个网站始建于2010年，目前已经连续稳定运行超过12年，是国内专业的休闲游戏站点之一，网站作为全球小游戏资源分享平台，强调经典，不断为用户呈现免费、经典、好玩的休闲游戏。

作为一个以游戏为主的网站，它的网站规模理所当然是巨型的，首页就根据游戏类型在导航栏划分了差不多上百种不同的游戏标签供用户选择，

关于网站的用户浏览量，我用了爱站网上的SEO综合查询，获得以下结果：

由图可见网站的预估日均PV在一万二千左右，以下还有关于此网站的关键词搜索、alexa趋势等其他的数据信息，这边附上查询网址：https://www.aizhan.com/cha/17yy.com/

2. HTML部分调研报告

1. 查看2-3个主要页面的HTML源码（删掉CSS和JS后，剩下的HTML部分，看明白它），说明介绍这些页面的主要结构、组织
2. 网站的整体设计思路分析（通过页面间的导航连接，分析不同网页间的设计分析）
3. 你对网站、网页中HTML部分内容的理解，思考如何使用HTML构建一个简单的个人网站。

1) 首页

• 顶部

通过观察HTML源码，一开始建立了一个表单，这个表单共有6个<input>标签，包括一个普通文本输入框和一个"submit"类型的提交键以及4个类型为"hidden"的隐式输入，推测这4个隐式输入是用于后台数据处理，在此表单上方还有一个<a>标签，根据id选择器名字不难发现这是一个logo，点击后目标地址与原本网址一样，推测在别的不同网页上也有此标签，目的是让用户在别的网页可以通过此标签回到本页。以上内容对应以下模块：

页面效果：

HTML源码：

接下来是顶部的剩余部分，左方文字是通过<a>标签包着<span>标签，然后整体是一个<div>标签来实现，右方文字则是通过无序列表<ul>和有序列表<ol>嵌套包着<a>标签来实现，而他们之间的间隔是由数个空格符&nbsp;来体现。

页面效果：

HTML源码：

这里主要是透过无序列表<ul>来实现了一个横向的导航栏。

页面效果：

HTML源码：

与上方类似，不过这里主要是透过有序列表<ol>来实现了一个横向的导航栏，而且是带图片的。

页面效果：

HTML源码：

与上方类似，整体是一个无序列表<ul>，不过这里内部主要是透过<div>块级元素来实现，具体样式要在CSS部分才能知道，每个<a>标签前都有一个空格符&#160;。

页面效果：

HTML源码：

• 内容

接下来是这个网页的内容部分，首先第一行的右方文字，这里用了<span>标签加<a>标签的方式实现，再来是左方文字，用的是<div>标签加<a>标签的方式实现。

下面是游戏内容，用的是无序列表<ul>，<li>内是<a>加上图片<img>，点击可以去到游戏对应的页面。

页面效果：

HTML源码：

页面效果：

HTML源码：

接下来是两个排行榜的实现，它们都大同小异，共有24个元素，每一个都用一个<div>标签表示，前5个元素与后面19个元素略有不同，主要体现在样式上，前5个元素多了一个<div>标签、<img>标签以及用了一个<ul>无序列表示星星数量。

页面效果：

 

HTML源码：

在两个排行榜的正下方也是一个排行榜，标题为页游公告，实现上与上方排行榜基本一致，也是一个元素对应一个<div>标签，并且用<a>标签绑定了跳转内容，不过没有上方前5个元素的特别处理。

页面效果：

HTML源码：

       

       

这部分用了两个<div>标签表示两组标题，一组在左边只有一个元素，另一组在右边共有5个元素，下面内容的部分用的是有序列表<ol>来实现，一个<li>表示一个游戏，<li>里是<a>和<img>标签。

页面效果：

HTML源码：

接下来这部分根据游戏类别分了14个区块，一个区块用一个<div>标签表示，先是用<p>和<a>标签表示游戏类别，再来是<a>和<img>标签表示一个标志性的图片，然后是用一个无序列表<ul>表示5行元素。

页面效果：

HTML源码：

       

下面这部分的标题是全部专题，用到了两个无序列表<ul>表示元素，上面的部分用的是图片加文字，下面的部分则只有文字。

页面效果：

HTML源码：

       

接下来也是一个排行榜，标题为专题排行榜，共20个元素，一个元素用一个<div>标签表示，带有图片和文字。

页面效果：

HTML源码：

      

• 页脚

下面是网页底部页脚的部分，可以分为2个区块。

首先是用一个<div>标签表示标题，里面带有<span>、<a>以及<img>标签，然后用是一个无序列表<ul>表示文字内容。

页面效果：

HTML源码：

       

最后是用了4个<p>标签表示4行文字内容，其本身是一个<div>区块。

页面效果：

HTML源码：

      

2) 点击一个游戏之后的页面

3) 点击开始游戏之后的页面

4) 点击一个游戏分类之后的页面

5) 搜索页面

6) 更多游戏页面

3. CSS部分调研报告

注意到源码中CSS的部分共有两处内部以及三处外部引用的。

首先是对整体html生效，用到了CSS3中的filter(滤镜) 属性，filter: grayscale(100%);，效果为使网页的图像转换为灰度图像，对应了先前全国悼念江泽民先生逝世的活动，其中不同的filter对应的是不同的浏览器。

接下来是对整体body生效，用到了font-family，也就是设置了字体，再来有四个class选择器，其中两个设置了边框margin的大小，另外两个则是设置了空白属性white-space: nowrap;，当CSS的空白属性设置为nowrap时，两个或多个white-spaces的每个序列将显示为单个空白。除非明确指定，否则元素中的内容不会换行，然后还有两个id选择器，一个设置了边框margin为0，另一个则是设置了宽度width。

接下来仔细查看外部引入的CSS文件，注意到把大部分HTML标签都设置了margin与padding为0，推测是为了网页的排版。注意到ol,ul li{list-style:none}，结合之前HTML调研的部分，不少地方都有到了有序或无序列表，因此设置list-style:none可以把列表前的点或标号去除，更加美观。剩下的部分基本上都是局部区块的样式设置，比如设置高度和宽度（height、width）、位置和显示方式（position、display）、上下左右的偏移（Top、right、bottom、left）、浮动和溢出处理方式（float、overflow）、内容方位和行高（text-align、line-height）、边界边框和填充（border、margin、padding）、颜色和背景图片（color、background）以及一些字体上的样式（font-weight、font-size、font-family）等等。

4. JS部分调研报告

注意到源码中JS的部分共有三处外部引用，接下来按内容进行分析。

这里重点调研网站的注册登录系统。

可以看到源码中首先定义了一些全局变量，如unameRegStr（用户名）、pwdStr（密码）、emailStr（邮箱）、repwdStr（确认密码）、truenameStr（真实姓名）、cardidStr（身份证号）、phoneStr（手机号）、keyCodeStr（验证码）、phoneCodeStr（短信验证码）、agreeStr（阅读并同意用户服务协议），这些变量对应了网页要用户填写的信息。

注意到源码中当用户点击顶部导航栏中的登录、注册、收藏本站时会调用函数，定位到这些函数查看。

登录调用函数

阅读函数，可以知道此函数作用为弹出登录窗口（不是跳转），并且带有多个隐藏方式的输入框，推测是为了传递信息用在后台的操作。

注册调用函数

阅读函数，可以知道此函数作用为弹出注册窗口（不是跳转），并且带有多个隐藏方式的输入框，推测是为了传递信息用在后台的操作。

页面效果

 

账号、手机号切换函数，对应了网站的两种注册登录方式，该函数作用为在这两种方式之间进行切换。

登录函数，可以看到有基本的对于输入信息的判断以及对应的错误提示信息，还有成功登录后的操作。

登出函数，与登录函数有所对应，进行了登出的操作，设置了对应的跳转页面等等。

注册信息检查函数，在用户提交注册信息会调用的函数，可以看到对全部的输入信息都进行了严谨的格式判断，如果有错误，则给出对应的提示信息，其中对于部分信息判断是在另一个函数，此函数为一个把检查功能整合到一起的函数。

判断是否已经登录函数，若是，则不用注册，给出提示信息。

验证用户名函数，检查用户输入格式是否合法。

验证邮箱函数，检查用户输入格式是否合法。

验证密码函数，检查用户输入格式是否合法。 

验证确认密码函数，检查用户输入格式是否合法（与密码输入一致）。

验证真实姓名函数，检查用户输入格式是否合法。

验证身份证号码函数，检查用户输入格式是否合法，并且检查用户是否已经满18周岁，若否，则不能注册。

验证手机号函数，检查用户输入格式是否合法。

验证验证码函数，检查用户输入格式是否合法。

验证短信验证码函数，检查用户输入格式是否合法。

        计时函数，规定用户只能每60秒发送一次短信验证码。

验证用户协议函数，检查用户是否已经同意用户服务协议，若否，则给出提示信息。

网页的cookie函数

总结

这是一个功能比较齐全的游戏网站，有基本的注册和登录系统，但我认为导航连接的部分有点太多，注意到对HTML内容分析的时候，导航栏的部分占了不少地方，无论是顶部、内容、尾部都有，也就是说此网站到处都可以见到不同的导航栏，这样可能会让用户有点困惑，我觉得可以做得更简洁一点，减少多余的部分，这样网站看上去也美观一些，能够吸引更多用户。游戏内容方面自然是非常丰富的，数不完的分类说明该网站有着非常可观的内容，因此设置分类显然是非常好的选择，让用户在浏览的时候也能更加便利。 CSS样式的部分可能就显得比较普通，因为这个网站其实也有十多年历史了，基本上没怎么更新过，因此如果拿来了和现在的网站进行比较的话基本上是没什么可比性的，注意到该网站基本上所有元素都是静态，没有任何动画，而且重覆内容比较多，所以观赏性是大打折扣的，如果要作出改动的话，我认为可以从这里开始下手。 JS部分也是一些比较基本的功能，比如注册登录系统以及一些跳转和窗口弹出或切换。

总的来说，这次调研让我学到了很多网站的基本构造，获取了不少经验，也让我明白要想写一个优秀的网站，一定要熟悉HTML、CSS、JAVASCRIPT三件套，缺一不可。