웹 프론트엔드 HTML 튜토리얼 给产品经理讲技术|一步一步写爬虫之网页分析_html/css_WEB-ITnose

给产品经理讲技术|一步一步写爬虫之网页分析_html/css_WEB-ITnose

Jun 21, 2016 am 08:47 AM

【文章摘要】爬虫说白了就是一个脚本程序。说到脚本,我们平时遇到一些费时费力又容易出错的活儿,都可以把用到的命令写到脚本里,让计算机自动来执行。

【相关推荐】

给产品经理讲技术|向前兼容、向后兼容

给产品经理讲技术|产品经理应该这样提需求之“状态机”

给产品经理讲技术|撩妹技术三部曲之“设计模式”

给产品经理讲技术丨没线,并不可怕?

给产品经理讲技术丨提需求的正确姿势是什么

还记得之前文章里说的要把所有文章整理成pdf的计划吗?今天我们准备迈出第一步了。

既然确定了用爬虫来自动整理文章,你得先理解爬虫是什么。爬虫说白了就是一个脚本程序。说到脚本,我们平时遇到一些费时费力又容易出错的活儿,都可以把用到的命令写到脚本里,让计算机自动来执行。测试同学说的自动化脚本,运维同学说的环境配置脚本,都是这个意思。一个脚本包含了很多命令,一个接一个,告诉计算机第一步干什么,之后干什么,最后干什么。

在这里,我们的目标很明确,就是写一个爬虫脚本,让计算机一步一步的把「给产品经理讲技术」的所有历史文章,保存成pdf。

历史文章哪里去找?正好,微信公众号的关注界面有一个查看历史消息的链接。

点开历史消息,这个页面每次显示10篇文章,如果用户滑到底,就会再加载10篇出来,典型的异步加载。我们要找的,就是每篇文章的URL地址。只要找到所有文章的URL,就能下载到每篇文章的内容和图片,然后就可以进一步加工处理成pdf了。

为此,我们长按页面选择在浏览器中打开,然后把地址栏里的URL复制出来,发送到电脑上,用Chrome打开。用Chrome的最大好处,就是它有一个「开发人员工具」,可以直接查看网页的源码。按下command+option+L,打开开发人员工具,就能看到这个网页的源码了。我们要找的东西,就藏在这些乱七八糟的HTML代码里。

如何从HTML源码里找到我们想要的文章链接呢?

这要从HTML的结构说起。HTML全称超文本标记语言,所谓标记,就是说是它通过很多标签来描述一个网页。你看到很多像以开始,以结束的标志,就是标签。这些标签一般成对出现,标签里面还可以套标签,表示一种层级关系。最外面的html标签是最大的,head、body次之,一层一层下来,最后才是一段文字,一个链接。你可以把它类比成一个人,这个人叫html,有head,有body,body上有hand,hand上面有finger。

扯远了,一些常用的标签:

1、

。一个网页的很多重要信息,都是在这里声明的。比如说标题,就是在下的里定义的。一个网页用到的CSS样式,可以在下的<style>里定义。还有你写的JavaScript代码,也可以在<head>下的<script>里定义。 <p>2、<body>。它包含的东西就多了,基本上我们能看到的东西,一段文字,一张图片,一个链接,都在这里面。比如说: <ul> <li><p>表示一个段落 <li><h1>是一段文字的大标题 <li><a>表示一个链接 <li><img alt="给产品经理讲技术|一步一步写爬虫之网页分析_html/css_WEB-ITnose" >表示一张图 <li><form>是一个表单 <li><div>是一个区块 <p>计算机是如何理解HTML的标签的呢?其实很简单,它就是一棵树。你可以把<html>当做树根,从树根上分出<head>和<body>,各个分支上又有新的分支,直到不能再分为止。这有点类似我们电脑上存放的文件。假设你有一本《21天学习C++》的电子书,存在D盘、study文件夹下的CS文件夹里。而study文件夹里除了CS文件夹,还有GRE、岛国文化等目录,代表着另一个分支体系。这也是一棵树。树上的每一片叶子,都有一条从根部可以到达的路径,可以方便计算机去查找。 <p>回到正题,有了这些基础知识,我么再来看微信这个历史消息页面。从最外层的<html>标签开始,一层一层展开,中间有<body>、有<div>、最后找到一个<a>标签,标签里面的hrefs就是每篇文章的URL了。把这个URL复制下来,在新的TAB打开,确认确实是文章的地址。 <p> <p>现在我们通过分析一个网页的结构、标签,找到了我们想要的文章URL,我们就可以写爬虫去模拟这个过程了。爬虫拿到网页之后,我们可以用正则表达式去查找这个<a>标签,当然,也可以用一些更高级的手段来找。但是,这个页面里面毕竟只有10篇文章,我们还要研究它的延迟加载机制,想办法让爬虫能自动找到剩下的文章,这里面会涉及到网络抓包相关的知识,我们后面再聊。 <p> 欢迎添加微信公众号:给产品经理讲技术 <p> <p> <p>本文由产品壹佰为你推荐并呈现 <p>文章来源:微信公众号:给产品经理讲技术(ID:pm_teacher) <p>文章作者:果果 <p>友情提示: <p>若出处标注错误,请联系QQ:2977686517及时更正,感谢理解和支持! <p> 少年关注我们的官方微博@产品100和微信订阅号:chanpin100ghsd,有惊喜哦! <p> </style>
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML은 초보자를 위해 쉽게 배우나요? HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구 HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구 Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작 HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작 Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드 HTML의 미래 : 웹 디자인의 진화 및 트렌드 Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향 HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향 Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 ​​문제의 최적화가 필요합니다.

See all articles