python爬取网页信息

最新推荐文章于 2024-04-30 13:19:06 发布

xumeng7231488

最新推荐文章于 2024-04-30 13:19:06 发布

阅读量3.1k

点赞数 1

分类专栏： python

本文链接：https://blog.csdn.net/xumeng7231488/article/details/78472845

版权

一、简单了解html网页

1.推荐浏览器：

使用Chrome浏览器，在检查元素中可以看到HTML代码和css样式。

2.网页构成：

网页的内容主要包括三个部分：javascript主要针对功能，html针对结构，css针对样式。在本地文件中通常是三部分，html+images+css。

3.常用标签和结构

<div></div> 划分区域
<div class=”aasdf”></div>说明样式
<p>wowiji</p>说明文字内容
<li></li>列表
<img>图片
<h1></h1>....<h6></h6>六种字体不同的标题格式
<a href=”” ></a>超链接

标签可以互相嵌套

4.实战做一个网页

使用工具：pycharm

文件内容：sample.html

Main.css

主要框架：head（标题栏+导航栏），content（主体），footer（页脚）

5.网页效果

6.html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The blah</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="header">
        <img src="images/blah.png">
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Site</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>
    <div class="main-content">
        <h2>Article</h2>
        <ul class="article">
            <li>
                <img src="images/0001.jpg" width="100" height="90">
                <h3><a href="#">The blah</a></h3>
                <p>Say something</p>
            </li>
            <li>
                <img src="images/0002.jpg" width="100" height="90">
                <h3><a href="#">The blah</a></h3>
                <p>Say something</p>
            </li>
            <li>
                <img src="images/0003.jpg" width="100" height="90">
                <h3><a href="#">The blah</a></h3>
                <p>Say something</p>
            </li>
            <li>
                <img src="images/0004.jpg" width="100" height="90">
                <h3><a href="#">The blah</a></h3>
                <p>Say something</p>
            </li>
        </ul>
    </div>
    <div class="footer">
        <p>@xumeng</p>
    </div>
</body>
</html>

7.css源码

body {
    padding: 0 0 0 0;
    background-color: #ffffff;
    background-image: url(images/bg3-dark.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Helvetica, Arial, sans-serif;
}
.main-content {
    width: 500px;
    padding: 20px 20px 20px 20px;
    border: 1px solid #dddddd;
    border-radius:25px;
    margin: 30px auto 0 auto;
    background: #f1f1f1;
    -webkit-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
    -moz-box-shadow:    0 0 22px 0 rgba(50, 50, 50, 1);
    box-shadow:         0 0 22px 0 rgba(50, 50, 50, 1);
}
.main-content p {
    line-height: 26px;
}
.main-content h2 {
    color: dimgray;
}
 
.nav {
    padding-left: 0;
    margin: 5px 0 20px 0;
    text-align: center;
}
.nav li {
    display: inline;
    padding-right: 10px;
}
.nav li:last-child {
    padding-right: 0;
}
.header {
    padding: 10px 10px 10px 10px;
 
}
 
.header a {
    color: #ffffff;
}
.header img {
    display: block;
    margin: 0 auto 0 auto;
}
.header h1 {
    text-align: center;
}
 
.article {
    list-style-type: none;
    padding: 0;
}
.article li {
    border: 1px solid #f6f8f8;
    background-color: #ffffff;
    height: 90px;
}
.article h3 {
    border-bottom: 0;
    margin-bottom: 5px;
}
.article a {
    color: #37a5f0;
    text-decoration: none;
}
.article img {
    float: left;
    padding-right: 11px;
}
 
.footer {
    margin-top: 20px;
}
.footer p {
    color: #aaaaaa;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    font-style: italic;
    text-transform: uppercase;
}
 
 
 
 
 
 
.post {
    padding-bottom: 2em;
}
.post-title {
    font-size: 2em;
    color: #222;
    margin-bottom: 0.2em;
}
.post-avatar {
    border-radius: 50px;
    float: right;
    margin-left: 1em;
}
.post-description {
    font-family: Georgia, "Cambria", serif;
    color: #444;
    line-height: 1.8em;
}
.post-meta {
    color: #999;
    font-size: 90%;
    margin: 0;
}
 
.post-category {
    margin: 0 0.1em;
    padding: 0.3em 1em;
    color: #fff;
    background: #999;
    font-size: 80%;
}
.post-category-design {
    background: #5aba59;
}
.post-category-pure {
    background: #4d85d1;
}
.post-category-yui {
    background: #8156a7;
}
.post-category-js {
    background: #df2d4f;
}
 
.post-images {
    margin: 1em 0;
}
.post-image-meta {
    margin-top: -3.5em;
    margin-left: 1em;
    color: #fff;
    text-shadow: 0 1px 1px #333;
}

8.注意：

共有十张图片，注意路径关系，CSS、HTML、IMages文件夹在同一目录下。

写给自己：此项目路径在：F:\Python实战：四周实现爬虫系统\作业代码\第一周\上课_1

二、解析本地文件中的元素

最低0.47元/天解锁文章

xumeng7231488

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
python爬取网页信息

一、简单了解html网页1.推荐浏览器：使用Chrome浏览器，在检查元素中可以看到HTML代码和css样式。2.网页构成：网页的内容主要包括三个部分：javascript主要针对功能，html针对结构，css针对样式。在本地文件中通常是三部分，html+images+css。3.常用标签和结构划分区域说明样式wowiji说明文字内容列表图片....六种字体不同
复制链接

扫一扫