整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、输入网址
quotes.toscrape.com/，进入网站首页，观察网页的结构,我们发现网页的内容很清晰，
主要分为：名人名言，作者，标签三个主要字段，同时三个字段的内容为本次提取的内容。
2、确定需求，分析网页结构
打开开发者工具，点击networ进行网络数据抓包分析，网站是以get方式进行请求，不需要携带参数，那我们就可以以request请求库中的get()方法，进行模拟请求，需要带上headers请求，模拟浏览器信息验证，防止被网站服务器检测为爬虫请求。
也可以点击开发者工具的最左边小箭头，可以帮助我们快速定位，网页数据在element标签页所在的位置。
3、解析网页结构，提取数据。
请求成功之后，可以开始提取数据啦~，我用的是xpath的解析方法，所以，先来解析xpath页面，点击最左边小箭头，可以帮助我们快速定位数据所，网页数据在element标签页所在的位置.因为网页的请求方式数据以列表的方式逐条排序，所以我们可以先定位整个列表的数据。在通过lxm中html解析器，逐个字段抓取并保存至列表，方便下一步的数据清洗。
4、保存至csv文件
源码分享
import requests
from lxml import etree
import csv
url="https://quotes.toscrape.com/"
headers={
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'
}
res=requests.get(url,headers=headers).text
html=etree.HTML(res)
queto_list=html.xpath('//div[@class="col-md-8"]')
lists=[]
for queto in queto_list:
# 名言正文
title=queto.xpath('./div[@class="quote"]/span[1]/text()')
# 作者
authuor=queto.xpath('./div[@class="quote"]/span[2]/small/text()')
# 名言标签
tags=queto.xpath('./div[@class="quote"]/div[@class="tags"]/a[@class="tag"]/text()')
# 将数据统一添加进列表中保存
lists.append(title)
lists.append(authuor)
lists.append(tags)
with open("./名人名言.csv",'w',encoding='utf-8',newline='\n') as f:
writer=csv.writer(f)
for i in lists:
writer.writerow(x)以上就是Python爬虫抓取名人名言网站的方法，希望对大家有所帮助。
文地址: https://medium.com/free-code-camp/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431
原文作者: Per Harald Borgen
翻译作者: https://github.com/hanxiansen
在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。
在本文中，我将继续使用我在第一篇 CSS Grid 布局教程文章中的网格布局。然后，我们将在文章末尾添加图片。下面是我们初始化网格的外观：
HTML 代码：
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
CSS 代码：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
注意: 示例中有一些基础的样式，但我在这里没有写出来，因为这对 CSS 网格布局没有任何影响
如果这段代码让你感到困惑，我建议你去好好读下我的这篇文章 Learn CSS Grid in 5 minutes ，其中就详细的解释了布局的基础知识。
让我们让列开始具有自适应特性吧。
CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。
让我们将每一列更改为一个 fraction 单位宽:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
结果是栅格布局将会把整个宽度分成三个 fraction，每列占据一个 fraction 单位，效果如下：
如果我们将grid-template-columns的值更改为1fr 2fr 1fr，第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction。效果如下：
总的来说，fraction 单位值将使你可以很容易的更改列的宽度。
然而，上面列子并没有给出我们想要的响应性，因为网格总是三列宽。我们希望网格能根据容器的宽度改变列的数量。要做到这一点，你必须学习如下三个概念：
repeat()
首先我们学习repeat()函数。这是一个强大的指定列和行的方法。让我们使用repeat()函数来更改网格:
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
在上面代码中，repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度，因此它将为我们提供与开始时完全相同的布局：
然后是auto-fit。让我们跳过固定数量的列，将3替换为自适应数量：
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
效果如下:
现在，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。正如你在上图看到的，网格通常在右侧留有空白。
为了解决上述问题，我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr)，代码如下：
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
请注意，所有响应都发生在一行 css 代码中
效果如下：
正如你所见，效果完美。minmax()函数定义的范围大于或等于 min， 小于或等于 max。
因此，现在每列将至少为 100px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 100px。
添加图片
最后一步是添加图片。这与 CSS Grid 布局无关，但让我们看下代码。
我们在每个网格中添加一个图片标签：
<div><img src="img/forest.jpg"/></div>
为了使图片适应于每个条目，我们将其宽、高设置为与条目本身一样，我们使用object-fit:cover。这将使图片覆盖它的整个容器，根据需要，浏览器将会对其进行裁剪。
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
效果如下：
ok！现在你已经了解了 CSS Grid 布局中最复杂的概念之一了，请给自己一个赞吧。
浏览器兼容性
在结束本文前，我提下浏览器支持情况，在撰写本文时，全球77%的网站将支持 CSS Grid，而且比例还在逐步攀升。
我想想2018将是 CSS 网格布局的元年。它将获得突破，并成为前端开发者的必备技能，就像过去几年 CSS Flexbox 布局发生的情况一样。
天将为大家带HTML的内联框架，以及网页进阶设计，在想对网页做出更进一步的完善时，我们可以使用JavaScript对网页设计出更多的样式以及使用响应式设计来设计出更加出众的网页外观。
1、Iframe是一种可以在网页内联其他网页的元素
2、Iframe语法为：<iframe arc=“URL”></iframe>（其中URL指向不同的网页）
3、Iframe以height和width属性来定义长度和宽度，示例：
运行结果：
4、在iframe中可以用frameborder属性来定义是否显示边框，设置属性为“0”的时候移除iframe的边框，示例：
运行结果：
1、JavaScript是面向Web的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和Web应用必须掌握的基本工具。
2、在HTML中是用<script>标签来定义客户端脚本（JavaScript）。
3、JavaScript的常见用途是图像处理、表单验证和内容的动态更改。
4、JavaScript更改内容的示例：
<!DOCTYPE html>
<html>
<head>
<title>javascript示例</title>
</head>
<body>
<button type="button" onclick="myCat()">点击这里！</button>
<p id="eg1">看这里</p>
<script>
function myCat(){
document.getElementById("eg1").innerHTML="hello!";
}
</script>
</body>
</html>
运行结果：
点击前
点击后
Javascrip可以修改样式，示例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">JavaScript 可以更改 HTML 元素的样式。</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize="25px";
document.getElementById("demo").style.color="red";
document.getElementById("demo").style.backgroundColor="yellow";
}
</script>
<button type="button" onclick="myFunction()">点击我！</button>
</body>
</html>
运行结果：
点击前
点击后
1、文件路径描述了网站文件夹结构中某个文件的位置。
2、文件路径会在连接外部文件时被用到：
l 网页
l 图像
l 样式表
l JavaScript
3、绝对文件路径是指向一个因特网文件的完整URL，示例：
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">
运行结果：
4、相对路径指向了对于当前页面的文件。
1、RWD指的是响应式Web设计（Responsive Web Design）。
2、RWD 能够以可变尺寸传递网页。
3、RWD 对于平板和移动设备是必需的。
创建响应式设计的一个方法，实在急来创建它，示例：
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Welcome to the New world</h1>
<h2>Resize this responsive page!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
运行结果：
4、另一个创建响应式设计的方法，是使用现成的 CSS 框架—Bootstrap。
5、Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
6、Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机，示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Welcome to the New world</h1>
<p>Resize this responsive page!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-md-4">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="col-md-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>
运行结果：
学完这一节对网页的进阶设计内容，是不是觉得对网页设计有了更多的认识呢？
*请认真填写需求信息，我们会在24小时内与您取得联系。
