爬虫作业02-html页面分析
2017-07-15 本文已影响207人
pnjoe
课堂作业
- 选择简书解密大数据专题里面上次爬虫课的作业文档地址作为分析页面
- 分析并提交该页面的网页结构分析与元素标签位置信息
- 上次作业链接
工具
Google Chrome 浏览器，自带的开发人员工具。快捷键是
F12
Chrome浏览器 自带的开发人员工具 工作界面缩略图
软件简单使用截图
开始分析
(一)先分析整体大框架
<!DOCTYPE html>
<html>
<head>...</head>
<body lang="zh-CN" class="reader-black-font">
<!-- 1.全局顶部导航栏 -->
<nav class="navbar bavbar-default navbar-fixed-top" role="navigation">...<nav>
<!-- 2.这是主要区域,整篇文章跟评论区都在这里 -->
<div class="note">...</div>
<!-- 3.这是底部推荐区域 -->
<div class="note-bottom">...</div>
</body>
</html>
①顶部导航栏 ②中间文章主要区域 ③底部推荐区域
(二)分析网页顶部区域-导航栏
网页顶部区域导航栏 登录 前后对比缩略图
未登录 导航栏 html代码
登录后 导航栏代码
说明:下文中用"|"符号来标明代码的区块.实际上源代码并无此符号.不能这么写,会出错的.
我仅从视觉上让代码看上去规整一些. 代码是严格按两空格做缩进的.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="width-limit">
<!-- 导航栏左上角 Logo -->
<a class="logo" href="/"></a>
<!-- 导航栏右上角 -->
<!-- 未登录显示登录/注册/写文章 -->
<a class="btn write-btn" target="_blank" href="/writer#/"><i class="iconfont ic-write"></i>写文章</a>
<!-- 用户有登录了,则自动隐藏下面的注册/登录 -->
<a class="btn sign-up" href="/sign_up">注册</a>
<a class="btn log-in" href="/sign_in">登录</a>
<!-- 如果用户登录，则会显示<div class="user">及以下元素,没有登录则隐藏不会显示 -->
<div class="user">
| <!-- 用户头像,在下面<div>标签里 -->
| <div data-hover="dropdown">
| <a class="avatar" href="/u/d7b32cb5c108">
| 
| </a>
| </div>
|
| <!-- 用户下拉菜单内容 用无序<li>标签来展示菜单 -->
| <ul class="dropdown-menu">
| <li>
| <a href="/u/d7b32cb5c108">
| <i class="iconfont ic-navigation-profile"></i><span>我的主页</span>
| </a>
| </li>
| <li>
| <a href="/bookmarks">
| <i class="iconfont ic-navigation-mark"></i><span>收藏的文章</span>
| </a>
| </li>
| <li>
| <a href="/users/d7b32cb5c108/liked_notes">
| <i class="iconfont ic-navigation-like"></i><span>喜欢的文章</span>
| </a>
| </li>
| <li>
| <a href="/wallet">
| <i class="iconfont ic-navigation-wallet"></i><span>我的钱包</span>
| </a>
| </li>
| <li>
| <a href="/settings">
| <i class="iconfont ic-navigation-settings"></i><span>设置</span>
| </a>
| </li>
| <li>
| <a href="/faqs">
| <i class="iconfont ic-navigation-feedback"></i><span>帮助与反馈</span>
| </a>
| </li>
| <li>
| <a rel="nofollow" data-method="delete" href="/sign_out">
| <i class="iconfont ic-navigation-signout"></i><span>退出</span>
| </a>
| </li>
| </ul>
</div>
<!-- 以上代码在用户没登录下是隐藏不显示的 -->
<!-- 这段Aa按钮菜单代码 用户登不登录都一样存在,不变 -->
<div class="style-mode">
| <!-- Aa按钮 -->
| <a class="style-mode-btn">
| <i class="iconfont ic-navigation-mode"></i>
| </a>
|
| <!-- Aa下拉菜单 -->
| <div class="popover-modal" style="left: 0px; display: none;">
|
| <!-- 夜间模式开关 -->
| <div class="meta">
| <i class="iconfont ic-navigation-night"></i>
| <span>夜间模式</span>
| </div>
| <div class="switch day-night-group">
| <a class="switch-btn">开</a>
| <a class="switch-btn active">关</a>
| </div>
|
| <!-- <hr>是分割线标签 -->
| <hr>
|
| <!-- 字体切换开关 -->
| <div class="switch font-family-group">
| <a class="switch-btn font-song">宋体</a>
| <a class="switch-btn font-hei active">黑体</a>
| </div>
|
| <!-- 简/繁切换开关 -->
| <div class="switch">
| <a class="switch-btn active">简</a>
| <a class="switch-btn">繁</a>
| </div>
|
| </div>
</div>
<!-- 导航栏 中间部分 用户未登录状态下(首页 下载APP 搜索栏) -->
<div class="container">
| <div class="navbar-header">
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
| <span class="icon-bar"></span>
| <span class="icon-bar"></span>
| <span class="icon-bar"></span>
| </button>
| </div>
| <div class="collapse navbar-collapse" id="menu">
| <ul class="nav navbar-nav">
| <!-- 首页按钮 -->
| <li class="">
| <a href="/"><span class="menu-text">首页</span><i class="iconfont ic-navigation-discover menu-icon"></i></a>
| </li>
| <!-- 下载APP按钮 -->
| <li class="">
| <a class="app-download-btn" href="/apps"><span class="menu-text">下载App</span><i class="iconfont ic-navigation-download menu-icon"></i></a>
| </li>
| <!-- 搜索栏 -->
| <li class="search">
| <form target="_blank" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
| <input type="text" name="q" id="q" value="" placeholder="搜索" class="search-input">
| <a class="search-btn" href="javascript:void(null)"><i class="iconfont ic-search"></i></a>
| <!-- <div id="navbar-trending-search"></div> -->
| </form>
| </li>
| </ul>
| </div>
</div>
<!-- 以上<div class="container">标签以及下级元素,在用户未登录前是上面这段代码 -->
<!-- 用户登录后<div class="container">标签以及下级元素则是下面这段代码 -->
<div class="container">
<!-- 下面这一小段代码着实看不懂 --> 正阅此文的您,若您知道恳请指教一下.不胜感激.
<div class="navbar-header">
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
| <span class="icon-bar"></span>
| <span class="icon-bar"></span>
| <span class="icon-bar"></span>
| </button>
</div>
<!-- 发现 / 关注 / 消息 三个按钮 -->
<div class="collapse navbar-collapse" id="menu">
| <ul class="nav navbar-nav">
| <li class="">
| <a href="/"><span class="menu-text">发现</span><i class="iconfont ic-navigation-discover menu-icon"></i></a>
| </li>
| <li class="">
| <a href="/subscriptions"><span class="menu-text">关注</span><i class="iconfont ic-navigation-follow menu-icon"></i></a>
| </li>
| <li class="notification">
| <a data-hover="dropdown" href="/notifications" class="notification-btn"><span class="menu-text">消息</span><i class="iconfont ic-navigation-notification menu-icon"></i></a>
| <!-- 消息下拉菜单 -->
| <ul class="dropdown-menu">
| <li><a href="/notifications#/comments"><i class="iconfont ic-comments"></i><span>评论</span></a></li>
| <li><a href="/notifications#/chats"><i class="iconfont ic-chats"></i> <span>简信</span></a></li>
| <li><a href="/notifications#/requests"><i class="iconfont ic-requests"></i><span>投稿请求</span> </a></li>
| <li><a href="/notifications#/likes"><i class="iconfont ic-likes"></i> <span>喜欢和赞</span></a></li>
| <li><a href="/notifications#/follows"><i class="iconfont ic-follows"></i><span>关注</span></a></li>
| <li><a href="/notifications#/money"><i class="iconfont ic-money"></i> <span>赞赏</span></a></li>
| <li><a href="/notifications#/others"><i class="iconfont ic-others"></i> <span>其他消息</span></a></li>
| </ul>
| </li>
| <li class="search">
| <form target="_blank" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
| <input type="text" name="q" id="q" value="" placeholder="搜索" class="search-input">
| <a class="search-btn" href="javascript:void(null)"><i class="iconfont ic-search"></i></a>
| <!-- <div id="navbar-trending-search"></div> -->
| </form>
| </li>
| </ul>
</div>
</div>
<!-- 用户登录后<div class="container">标签以及下级元素则是下面这段代码 -->
</div>
</nav>
(三)分析网页中部区域-正文部分
看上去有点复杂,看得眼睛疼
评论框 登录前后对比图
网页中部区域html 登录前后 对比图
<div class="note">
<div class="post">
<div class="article">
<!-- 文章的大标题,用的是<h1>标签 -->
<h1 class="title">作业01-获取网络数据的原理</h1>
<!-- 作者区域-开始 -->
<div class="author">
<a class="avatar" href="/u/d7b32cb5c108"></a>
<div class="info">
<span class="tag">作者</span>
<span class="name"><a href="/u/d7b32cb5c108">pnjoe</a></span>
<!-- 关注用户按钮 -->
<div data-author-follow-button=""></div>
<!-- 文章数据信息 -->
<div class="meta">
<!-- 如果文章更新时间大于发布时间，那么使用 tooltip 显示更新时间 -->
<span class="publish-time" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="最后编辑于 2017.07.15 00:48">2017.06.29 14:13*</span>
<span class="wordage">字数 440</span>
<span class="views-count">阅读 39</span>
<span class="comments-count">评论 3</span>
<span class="likes-count">喜欢 3</span>
<span class="rewards-count ">赞赏 1</span>
</div>
</div>
<!-- 如果是当前作者，加入编辑按钮 -->
<a href="/writer#/notebooks/13893905/notes/14000205" target="_blank" class="edit">编辑文章</a>
</div>
<!-- 作者区域-结束 -->
<!-- 文章内容区域-开始 -->
<div data-note-content="" class="show-content">
<p><b>课堂作业</b><br></p>
<p> 要爬取的数据类别</p>
<p> 对应的数据源网站</p>
<p> 爬取数据的URL</p>
<p> 数据筛选规则(选做)</p>
<div class="image-package">
<br>
<div class="image-caption">作业有点难，但还得交。完成比完美更重要，你说呢？</div>
</div>
<p>先给自己订个小目标，先做个简单的小项目：找出<a href="http://qiang.mogujie.com/fastbuy/index" target="_blank">蘑菇街快抢频道</a>单场活动，单坑产出最高GMV的明星产品。用图表来展示各商品产出GMV情况。<br></p>
<p><b>要爬取的数据类别</b>： 商品名称，活动价格，活动数量，抢剩多少件，<br></p>
<p> [根据已知的数据，可以计算出 单坑GMV（活动价格*活动数量），</p>
<p> 实际成交的GMV（活动价格*已经成交件数），</p>
<p> 完成度（已给成交的件数/活动数量）]<br></p>
<p><b>对应的数据源网站</b>：<a href="http://qiang.mogujie.com/fastbuy/index" target="_blank">蘑菇街快抢频道</a></p>
<p><b>爬取数据的URL</b>：http://qiang.mogujie.com/jsonp/fastBuyListActionLet/1?callback=jQuery17208702880139730742_1498714398727&bizKey=rush_main&token=eXEv6%252Fkfp4T6Y4e1yZSlMlKNt5GJvSMv9fHgfq8Tk181DuUVqJ6o4XdETLI45DOo1df0S%252B7%252B67bNyV6fzJtWzA%253D%253D&_=1498714398873 </p>
<p># 不同时段去爬，URL最后面的时间戳（就是最后那串13位数字）有点差别。 网站公示的数据也是有时间限制。即 当前时间前后的6个小时内的数据可获得。</p>
<p><b>数据筛选规则</b>：返回的 JSON数据格式，需要的数据已有在里面有逐一列出。（目前不知道要用什么工具，或代码，去截取自己想要的某个特定数据。）</p>
<p><br></p>
<hr>
<p>自己现有的疑问如下，还望 tiger 指点。 </p>
<p> * URL要怎么去确认下来，时间戳要怎么生成？ </p>
<p> * 返回来的JSON数据格式。 要怎么转换，怎么筛选出自己要的特定数据？</p>
<p> * 最终得到的数据，要怎么去保存下来？</p>
</div>
<!-- 文章内容到此结束 -->
<!-- 下面是文章页脚 -->
<div class="show-foot">
<a class="notebook" href="/nb/13893905">
<i class="iconfont ic-search-notebook"></i>
<span>爬虫入门-[作业簿]</span>
</a>
<div class="copyright" data-toggle="tooltip" data-html="true" data-original-title="转载请联系作者获得授权，并标注“简书作者”。">
© 著作权归作者所有
</div>
</div>
</div>
<!-- 文章底部作者信息-开始 -->
<div class="follow-detail">
<div class="info">
<a class="avatar" href="/u/d7b32cb5c108">
</a>
<div data-author-follow-button=""></div>
<a class="title" href="/u/d7b32cb5c108">pnjoe</a>
<i class="iconfont ic-man"></i>
<p>写了 4181 字，被 6 人关注，获得了 7 个喜欢</p>
</div>
<div class="signature">目前在向[泰阁志]学习数据分析</div>
</div>
<!-- 文章底部作者信息-结束 -->
<!-- 打赏区域 -->
<div class="support-author"></div>
<!-- 喜欢 / 转发 / 分享 -->
<div class="meta-bottom">
<div class="like">
<div class="btn like-group">
<div class="btn-like"><a><i class="iconfont ic-like"></i>喜欢</a></div>
<div class="modal-wrap"><a>3</a></div>
</div>
</div>
<div class="share-group">
<a class="share-circle" data-action="weixin-share" data-toggle="tooltip" data-original-title="分享到微信">
<i class="iconfont ic-wechat"></i>
</a>
<a class="share-circle" data-toggle="tooltip" href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1881139527',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','http://cwb.assets.jianshu.io/notes/images/14000205/weibo/image_542a4a9fd9c0.jpg', '我写了新文章《作业01-获取网络数据的原理》（ 分享自 @简书 ）','http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo','页面编码gb2312|utf-8默认gb2312'));" data-original-title="分享到微博">
<i class="iconfont ic-weibo"></i>
</a>
<a class="share-circle" data-toggle="tooltip" href="http://cwb.assets.jianshu.io/notes/images/14000205/weibo/image_542a4a9fd9c0.jpg" target="_blank" data-original-title="下载长微博图片">
<i class="iconfont ic-picture"></i>
</a>
<a class="share-circle more-share" tabindex="0" data-toggle="popover" data-placement="top" data-html="true" data-trigger="focus" href="javascript:void(0);" data-content="
<ul class="share-list">
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+e('http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=qzone')+'&title='+e('我写了新文章《作业01-获取网络数据的原理》'),x=function(){if(!window.open(r,'qzone','toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();"><i class="social-icon-sprite social-icon-zone"></i><span>分享到QQ空间</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://twitter.com/share?url='+e('http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=twitter')+'&text='+e('我写了新文章《作业01-获取网络数据的原理》（ 分享自 @jianshucom ）')+'&related='+e('jianshucom'),x=function(){if(!window.open(r,'twitter','toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();"><i class="social-icon-sprite social-icon-twitter"></i><span>分享到Twitter</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://www.facebook.com/dialog/share?app_id=483126645039390&display=popup&href=http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=facebook',x=function(){if(!window.open(r,'facebook','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();"><i class="social-icon-sprite social-icon-facebook"></i><span>分享到Facebook</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://plus.google.com/share?url='+e('http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=google_plus'),x=function(){if(!window.open(r,'google_plus','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();"><i class="social-icon-sprite social-icon-google"></i><span>分享到Google+</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://www.douban.com/recommend/?url='+e('http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=douban')+'&title='+e('作业01-获取网络数据的原理')+'&sel='+e(s)+'&v=1',x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()"><i class="social-icon-sprite social-icon-douban"></i><span>分享到豆瓣</span></a></li>
</ul>
" data-original-title="" title="">更多分享
</a>
</div>
</div>
<!-- 喜欢 / 转发 / 分享 到此结束 -->
<div>
<div id="comment-list" class="comment-list">
<!-- 未登录 评论框是这样子的 -->
<div>
<form class="new-comment">
<a class="avatar"></a>
<div class="sign-container">
<a href="/sign_in" class="btn btn-sign">登录</a><span>后发表评论</span>
</div>
</form>
</div>
<!-- 登录后 评论框是这样子的 -->
<div>
<form class="new-comment">
<a class="avatar">
</a>
<textarea placeholder="写下你的评论..."></textarea>
<div class="write-function-block">
<div class="emoji-modal-wrap">
<a class="emoji"><i class="iconfont ic-comment-emotions"></i></a>
</div>
<div class="hint">Ctrl+Return 发表</div>
<a class="btn btn-send">发送</a>
<a class="cancel">取消</a>
</div>
</form>
</div>
<!-- 评论框到此结束 -->
<div id="normal-comment-list" class="normal-comment-list">
<div>
<div>
<div class="top">
<span>3条评论</span>
<a class="author-only">只看作者</a>
<a class="close-btn" style="display: none;">关闭评论</a>
<div class="pull-right">
<a class="active">按喜欢排序</a>
<a class="">按时间正序</a>
<a class="">按时间倒序</a>
</div>
</div>
</div>
<!---->
<!---->
<div class="comments-placeholder" style="display: none;">
<div class="author">
<div class="avatar"></div>
<div class="info">
<div class="name"></div>
<div class="meta"></div>
</div>
</div>
<div class="text"></div>
<div class="text animation-delay"></div>
<div class="tool-group">
<i class="iconfont ic-zan-active"></i>
<div class="zan"></div>
<i class="iconfont ic-list-comments"></i>
<div class="zan"></div>
</div>
</div>
<div id="comment-12489537" class="comment">
<div>
<div class="author">
<a href="/u/d5a46056a73f" target="_blank" class="avatar">
</a>
<div class="info">
<a href="/u/d5a46056a73f" target="_blank" class="name">波罗学</a>
<div class="meta"><span>3楼 · 2017.07.04 23:15</span>
</div>
</div>
</div>
<div class="comment-wrap">
<p>厉害了  ！我大概看了一下这个网页，
<br>1. url的参数包含callback、token、time等，应该js主动生成
<br>2. 数据为json接口异步获取，不能通过html解析
<br>没有仔细研究，下面说说自己的想法
<br>1. URL获取：
<br>a. 研究网站js，获取token和time生成方法，有点难度，但网站似乎未做严格限制，文中url今天仍可使用；
<br>b. 通过工具动态生成网页，然后便可使用html解析。我知道的工具有splash，phantomjs
<br>c. 可以问下曾老师，应该会有更多解决思路
<br>2. json如何转换
<br>python自带json解析包，获取数据非常方便，稍微介绍，如
<br>json_str为{"data":{"isEnd":true,"list":[]}，只需执行
<br>result = json.loads(json_str)
<br>result['data']['isEnd']
<br>即可获取数据
<br>3. 数据保存 视情况而定吧，可保存至文本、数据库等
<br>文本，格式可为csv、json，好像研究分析很多都喜欢用csv格式
<br>数据库，如mysql, oracle，mongo等，应用开发层面会这么搞吧
</p>
<div class="tool-group">
<a><i class="iconfont ic-zan"></i> <span>2人赞</span></a>
<a><i class="iconfont ic-comment"></i> <span>回复</span></a>
</div>
</div>
</div>
<div class="sub-comment-list">
<div id="comment-12501966" class="sub-comment">
<p>
<a href="/u/d7b32cb5c108" target="_blank">pnjoe</a>：
<span>衷心感谢您 <a href="/users/d5a46056a73f" class="maleskine-author" target="_blank" data-user-slug="d5a46056a73f">@波罗学</a>. 感谢您的指点。
<br>虽您说的，我不全懂。但我从，“我不知道我不知道的”。进前一步到，“我知道我不知道的”。可以根据您说的思路，按上面的关键词去谷歌，顺藤摸瓜学习下去。
</span>
</p>
<div class="sub-tool-group">
<span>2017.07.05 11:22</span>
<a><i class="iconfont ic-comment"></i>
<span>回复</span></a>
</div>
</div>
<div id="comment-12502258" class="sub-comment">
<p>
<a href="/u/d5a46056a73f" target="_blank">波罗学</a>：
<span><a href="/users/d7b32cb5c108" class="maleskine-author" target="_blank" data-user-slug="d7b32cb5c108">@pnjoe</a> 有什么想法可以继续在这里回复下</span>
</p>
<div class="sub-tool-group">
<span>2017.07.05 11:31</span>
<a><i class="iconfont ic-comment"></i> <span>回复</span></a>
</div>
</div>
<div class="sub-comment more-comment">
<a class="add-comment-btn"><i class="iconfont ic-subcomment"></i>
<span>添加新评论</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右下角的工具栏 side-tool. -->
<!-- 用户有登录是4项(回到顶部/文章投稿/收藏文章/分享文章),没有登录是2项(回到顶部/分享文章) -->
<div class="side-tool">
<ul>
<li data-placement="left" data-toggle="tooltip" data-container="body" data-original-title="回到顶部" style="display: none;"><a class="function-button"><i class="iconfont ic-backtop"></i></a></li>
<li data-placement="left" data-toggle="tooltip" data-container="body" data-original-title="文章投稿"><a class="js-submit-button"><i class="iconfont ic-note-requests"></i></a> </li>
<li data-placement="left" data-toggle="tooltip" data-container="body" data-original-title="收藏文章"><a class="function-button"><i class="iconfont ic-mark"></i></a></li>
<li data-placement="left" data-toggle="tooltip" data-container="body" data-original-title="分享文章">
<a tabindex="0" role="button" data-toggle="popover" data-placement="left" data-html="true" data-trigger="focus" href="javascript:void(0);" data-content="
<ul class='share-list'>
<li><a class="weixin-share"><i class="social-icon-sprite social-icon-weixin"></i><span>分享到微信</span></a></li>
<li><a href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1881139527',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','http://cwb.assets.jianshu.io/notes/images/14000205/weibo/image_542a4a9fd9c0.jpg', '我写了新文章《作业01-获取网络数据的原理》（ 分享自 @简书 ）','http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo','页面编码gb2312|utf-8默认gb2312'));"><i class='social-icon-sprite social-icon-weibo'></i><span>分享到微博</span></a></li>
<li><a href="http://cwb.assets.jianshu.io/notes/images/14000205/weibo/image_542a4a9fd9c0.jpg" target="_blank"><i class="social-icon-sprite social-icon-picture"></i><span>下载长微博图片</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+e('http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=qzone')+'&title='+e('我写了新文章《作业01-获取网络数据的原理》'),x=function(){if(!window.open(r,'qzone','toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();"><i class='social-icon-sprite social-icon-zone'></i><span>分享到QQ空间</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://twitter.com/share?url='+e('http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=twitter')+'&text='+e('我写了新文章《作业01-获取网络数据的原理》（ 分享自 @jianshucom ）')+'&related='+e('jianshucom'),x=function(){if(!window.open(r,'twitter','toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();"><i class='social-icon-sprite social-icon-twitter'></i><span>分享到Twitter</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://www.facebook.com/dialog/share?app_id=483126645039390&display=popup&href=http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=facebook',x=function(){if(!window.open(r,'facebook','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();"><i class='social-icon-sprite social-icon-facebook'></i><span>分享到Facebook</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,r='https://plus.google.com/share?url='+e('http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=google_plus'),x=function(){if(!window.open(r,'google_plus','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();"><i class='social-icon-sprite social-icon-google'></i><span>分享到Google+</span></a></li>
<li><a href="javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://www.douban.com/recommend/?url='+e('http://www.jianshu.com/p/d1acbed69f45?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=douban')+'&title='+e('作业01-获取网络数据的原理')+'&sel='+e(s)+'&v=1',x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()"><i class='social-icon-sprite social-icon-douban'></i><span>分享到豆瓣</span></a></li>
</ul>
" data-original-title="" title="" class="function-button"><i class="iconfont ic-share"></i>
</a>
</li>
</ul>
</div>
</div>
(四)分析网页底部区域-文章推荐
网页底部区域- 专题+文章推荐
专题 用户登录前后的变化
用户未登录前的 专题区域
<div>
<div class="main">
<div class="title">被以下专题收入，发现更多相似内容</div>
<div class="include-collection">
<a href="/c/9b4685b6357c?utm_source=desktop&utm_medium=notes-included-collection" target="_blank" class="item">
<div class="name">解密大数据</div>
</a>
</div>
</div>
</div>
用户登录后的 收入专题/投稿管理 html 代码
<div>
<div class="main">
<div class="title">被以下专题收入，发现更多相似内容</div>
<a class="collection-settings">
<i class="iconfont ic-settings-account"></i>
<span>投稿管理</span></a>
<div class="include-collection">
<div class="modal-wrap add-collection-wrap">
<a class="add-collection">
<i class="iconfont ic-follow"></i>收入我的专题
</a>
</div>
<a href="/c/9b4685b6357c?utm_source=desktop&utm_medium=notes-included-collection" target="_blank" class="item">
<div class="name">解密大数据</div>
</a>
</div>
</div>
</div>
底部随机推荐5篇文章
<div class="recommend-note">
<div class="meta">
<div class="title">更多精彩内容</div>
<div class="roll"></div>
</div>
<div class="list">
<!-- 随机文章第一篇 -->
<div class="note">
<a target="_blank" href="/p/0126131adfe7?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="cover" style="background-image: url("https://img.haomeiwen.com/i1322999/9ecd50084ab2caee.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240");"></a>
<a target="_blank" href="/p/0126131adfe7?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="title">因为并不聪明，所以努力把这些习惯坚持了7年</a>
<p class="description">如今又是人间三月天，乍暖还寒时，谁都愿淌一抹春色，去往心中的远方。一直热爱旅行的我，如今却被束缚在现实的牢笼中。深夜，无眠，思索着如今的处境和未来的出路。一个农村出身的姑娘，没有任何可以依附的资源，除了拼尽全力，我不知道该如何去让自己在这座城市存活下去；除了努力读书、疯狂折腾，我不知道还能怎样去获得一席之地；除了坚持不懈、不抛弃不放弃，我不知道还能怎样去改变命运。其实，我并不聪明，但却时常被同学朋友们冠以“学霸”、“大神”，我思前想后，只不过是因为我把一些习惯坚持了7年而已。这个习惯，是从高一开始养成的，至今，已有8年。学生年代的书包里、工作后的拎包里，总装着一个小...</p>
<a target="_blank" href="/u/8bde314cf568?utm_campaign=maleskine&utm_content=user&utm_medium=pc_all_hots&utm_source=recommendation" class="author">
<div class="avatar" style="background-image: url("http://upload.jianshu.io/users/upload_avatars/1322999/1fe4a948527e");"></div>
<span class="name">空白中的独舞</span>
</a>
</div>
<!-- 随机文章第二篇 -->
<div class="note">
<a target="_blank" href="/p/cf0a9cebbf4c?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="cover" style="background-image: url("https://img.haomeiwen.com/i691278/129b79218fe67a92.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240");"></a>
<a target="_blank" href="/p/cf0a9cebbf4c?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="title">如果你想提高写作能力，我推荐这6本书</a>
<p class="description">现在有越来越多的人加入了简书，开始写文章；也有越来越多的人开通了自己的微信公众号。当写作的热情褪去，很多人会开始思考如何提高自己的写作能力？我自己组织了“百日写作”的活动，常常有很多小伙伴问我，如何提高自己的写作水平？写作虽然是一个长期积累的过程，但如果有一些大师的指点，想必也能少走一些弯路。在我自己的写作过程，有幸阅读了以下几本书，对我自己的写作有非常大的帮助。现在也推荐给大家，大家可以根据自己的情况自行选择阅读。虽然这本书的书名听起来让一些刚刚开始写作的人觉得望而生畏，甚至不敢堂而皇之地推荐给别人，仿佛是告诉别人，我要成为作家。但这本书的内容绝对不会让大家失望。一年前，刚刚开始写作之...</p>
<a target="_blank" href="/u/b067d53d56b2?utm_campaign=maleskine&utm_content=user&utm_medium=pc_all_hots&utm_source=recommendation" class="author">
<div class="avatar" style="background-image: url("http://upload.jianshu.io/users/upload_avatars/691278/8d0529fa0fea.jpg");"></div>
<span class="name">弘丹</span>
</a>
</div>
<!-- 随机文章第三篇 -->
<div class="note">
<a target="_blank" href="/p/493f5f4cf1af?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="cover" style="background-image: url("https://img.haomeiwen.com/i1294118/85301cc38418ef45.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240");"></a>
<a target="_blank" href="/p/493f5f4cf1af?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="title">大学两年读了200多本书，向你推荐这7本</a>
<p class="description">文/瓯南自2014年入大学以来，已将近两年了。两年的时间过得飞快，生活虽然平淡无奇，但最让我感到骄傲的，是这两年的时间，我读了200多本书。大部分书都是我买的。在图书馆也借阅了一些，但读到一本好书时，还是会忍不住把它买下来。放在身边，不时翻阅，总能给自己新的启发。每个学期期末，我都要整理一下这学期买的书，一部分留下，一部分带回家。昨天收拾书柜的时候，发现书柜又快满了。不禁感慨，一个学期又要结束了。读的这些书里面，有很多都对我产生了非常大的影响。今天就向你们推荐其中的七本，希望你们也能从中受益。“成功的规律并非无迹可寻，甚至它并非如我们所想。”1．《异类》《异类》这本书，通过一系列的例子，...</p>
<a target="_blank" href="/u/3a7b6c17732e?utm_campaign=maleskine&utm_content=user&utm_medium=pc_all_hots&utm_source=recommendation" class="author">
<div class="avatar" style="background-image: url("http://upload.jianshu.io/users/upload_avatars/1294118/f10fa95ee4e0");"></div>
<span class="name">瓯南</span>
</a>
</div>
<!-- 随机文章第四篇 -->
<div class="note">
<a target="_blank" href="/p/fb887b3dae87?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="cover" style="background-image: url("https://img.haomeiwen.com/i6391702/edb44fa91f582ebb.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240");"></a>
<a target="_blank" href="/p/fb887b3dae87?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="title">女孩，你的大学应该这样过</a>
<p class="description">文/南下溪 海子说:“我们最终都要远行，都要与稚嫩的自己告别通向苦行之路。”有人选择按部就班地承受生活的煎熬，有人则选择肆无忌惮的享受生活的乐趣。无论怎样选择都有生活带给我们的酸甜苦辣，所以我想在我最好的时间里，去看最狂的风，最静的海，去拥抱大学这段时光里最好的我们。 去选择，去遇见，就像林深时见鹿，海蓝时见鲸，就像远山的樵夫遇见了渡河的行者，不一样的碰撞与摩擦，带给我们的将会是不同的世界！ 1、学好英语，特别是口语 作为学旅游的学生，我深深地感受到英语口语交流的重要性！从小我英语并不好，因为是在乡下长大，所以口语更是没有办法，跟城里孩子相比。 记得好几次遇见学校的外国交换生和外教沟...</p>
<a target="_blank" href="/u/21675cdbdf48?utm_campaign=maleskine&utm_content=user&utm_medium=pc_all_hots&utm_source=recommendation" class="author">
<div class="avatar" style="background-image: url("http://upload.jianshu.io/users/upload_avatars/6391702/6c7b157f-6d90-4b5c-b207-d194f9ebcc0e");"></div>
<span class="name">南下溪</span>
</a>
</div>
<!-- 随机文章第五篇 -->
<div class="note">
<a target="_blank" href="/p/a1d26c1a07f3?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="cover" style="background-image: url("https://img.haomeiwen.com/i5880188/df9af7b998165087.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240");"></a> <a target="_blank" href="/p/a1d26c1a07f3?utm_campaign=maleskine&utm_content=note&utm_medium=pc_all_hots&utm_source=recommendation" class="title">读书，在大学︱我们的《百年孤独》</a>
<p class="description"> 泡一份四毛钱一包的“大忙人”泡面，三口两口的塞下肚子，方便面的气味都还熏得人作呕的时候，女孩已经坐在了公交车上，她必须在她的家教学生放学到家时也赶到他家。从寝室快步走到公交车站要十五分钟，从公交车站坐1路公交车到国棉一厂要50分钟。辅导完熊孩子所有不会做的作业，再返回学校，一般是晚上八点多甚至九点了。夏天还好，冬天，街上已经看不到几个行人了。公交车上，从起点站坐到终点站的，也就只有女孩孤零零的一个人。 大概是那次被几个在街上晃荡的、酒气熏天的民工给吓的吧,女孩把她的害怕告诉了那个老是跟她坐同桌的长着一张娃娃脸的男生。接下来的那天晚上，当女孩裹紧身上的棉袄、百无聊赖地下...</p>
<a target="_blank" href="/u/778731a5f6fc?utm_campaign=maleskine&utm_content=user&utm_medium=pc_all_hots&utm_source=recommendation" class="author">
<div class="avatar" style="background-image: url("http://upload.jianshu.io/users/upload_avatars/5880188/312f3527-484e-42ba-bda9-8b56ef59b4a9.jpg");"></div>
<span class="name">米喜</span>
</a>
</div>
</div>
</div>
