前端基础day-02

最新推荐文章于 2024-07-24 16:49:00 发布

klspree

最新推荐文章于 2024-07-24 16:49:00 发布

阅读量74

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/weixin_41615044/article/details/112230607

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

爬虫违法吗？
爬虫的分类？
爬虫的作用？
写爬虫程序？
- 1. 获取页面：
- 2. 解析页面：
HTML标签选择器

爬虫违法吗？

法不禁止即为许可，灰色地带，写爬虫程序一定要注意隐匿身份
爬虫协议：robots.txt

爬虫的分类？

通用爬虫：搜索引擎
定向爬虫：只爬取自己需要的数据

爬虫的作用？

中小企业一般情况下，数据都是短板，只能靠爬虫去采集数据
舆情监控
竞品分析、了解行情

写爬虫程序？

1. 获取页面：

requests.get(url)
resp.text

2. 解析页面：

正则表达式解析：
- re.compile(’…’)
- Pattern
- findall / match / search
CSS选择器解析：
- BeautifulSoup4
- BeautifulSoup
- select
- Tag
- text / attrs
XPath解析

HTML标签选择器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS的例子</title>
        <!-- 外部样式表 -->
        <!-- 内部样式表 -->
        <style>
            /* 通配符选择器 */
            * {
                margin: 0;
                padding: 0;
                /* border: 1px solid black; */
            }
            /* ID选择器（比类选择器具体） */
            #hello {
                color: blue !important;
                text-align: left;
                background: url('../images/print-06.jpg') no-repeat;
                padding-left: 200px;
                height: 150px;
                line-height: 150px;
                margin-top: 120px;
                /* background-image: url('../images/print-06.jpg');
                background-repeat: no-repeat; */
            }
            #hello {
                color: pink;
            }
            /* 类选择器（比标签选择器具体）*/
            .foo {
                color: green;
                text-align: right;
            }
            /* 标签选择器 */
            h1 {
                color: red;
                text-align: center;
                letter-spacing: 20px;
                text-decoration: line-through;
                font: bold italic 36px 'Courier New';
                /* font-family: 'Courier New';
                font-size: 76px;
                font-style: italic; */
            }
            div {
                border: 1px solid black;
            }
            .a, .b {
                width: 320px;
                /* height: 70px; */
                /* overflow: scroll; */
                margin-left: 50px;
                float: right;
            }
            /* 父子选择器 */
            .a>p {
                color: red;
            }
            /* 后代选择器 */
            .b p {
                color: green;
            }
            /* 相邻兄弟选择器 */
            h1+p {
                font-size: 1cm;
            }
            /* 兄弟选择器 */
            h1~p {
                text-decoration: underline;
            }
            .c {
                clear: both;
                margin-left: 120px;
            }
            #loginForm {
                width: 240px;
                height: 120px;
                margin: 50px auto;
            }
            #loginForm input {
                width: 240px;
                height: 36px;
                border: none;
                outline: none;
                border-bottom: 1px dotted lightgray;
            }
            /* 属性选择器 */
            #loginForm input[type=submit] {
                border: none;
                margin-top: 10px;
                color: white;
                background-color: rgb(136, 211, 145);
            }
        </style>
    </head>
    <body>
        <form id="loginForm" action="" method="post">
            <p>
                <input type="tel" placeholder="手机号">
            </p>
            <p>
                <input type="password" placeholder="口令">
            </p>
            <p>
                <input type="submit" value="登录">
            </p>
        </form>
        <!-- 层叠样式表盒子模型（Box Model）-->
        <!-- 内嵌样式表（行内样式表）-->
        <!-- 如果为一个标签写了多套样式且不冲突，那么所有的样式会叠加 -->
        <!-- 如果样式发生了冲突，需要遵循重要性原则、具体性原则和就近原则 -->
        <h1>Hello, world!</h1>
        <h1 class="foo">Goodbye, world!</h1>
        <p>日照香炉生紫烟</p>
        <h1 id="hello" class="foo">你好，世界！</h1>
        <div class="a">
            <p>白日依山尽</p>
            <p>黄河入海流</p>
            <p>欲穷千里目</p>
            <p>更上一层楼</p>
            <div>
                <p>Hello</p>
                <p>Goodbye</p>
            </div>
        </div>
        <div class="b">
            <p>锄禾日当午</p>
            <p>汗滴禾下土</p>
            <p>谁知盘中餐</p>
            <p>粒粒皆辛苦</p>
            <div>
                <p>Hello</p>
                <p>Goodbye</p>
            </div>
        </div>
        <p class="c">遥看瀑布挂前川</p>
    </body>
</html>