一篇文章教会你利用Python网络爬虫获取分类图片

【一、项目背景】

博海拾贝是一支互联网从业者在线教育的团队,扎根于中国教育行业以及互联网行业的创新和眼球中,打造专业体系化的互联网人在线教育平台。精心创作许多精彩的文章,提供了很多有趣的图片。

今天来教大家如何使用Python来爬取博海拾贝的图片,分类保存,写入文档。

一篇文章教会你利用Python网络爬虫获取分类图片

【二、项目目标】

创建一个文件夹, 分类保存所有文章图片。下载成功,结果显示控制台。

【三、项目分析】

1、如何找到真正访问的地址,多网页请求?

滑动鼠标,观察网站,右键F12 。鼠标滚轮滑动加载新内容。如图:

一篇文章教会你利用Python网络爬虫获取分类图片

点开随机网页 , 点开Request URL ,观察网址的规律。

一篇文章教会你利用Python网络爬虫获取分类图片
https://bh.sb/page/1/
https://bh.sb/page/2/
https://bh.sb/page/3/
https://bh.sb/page/4/

观察到,每增加一页page/{}/自增加1,用{}代替变换的变量,再用for循环遍历这网址,实现多个网址请求。

2. 反爬处理

1)获取正常的 http请求头,并在requests请求时,设置这些常规的http请求头。

2)使用 fake_useragent ,产生随机的UserAgent进行访问。

【四、涉及的库和网站】

1、网址如下:

https://www.doutula.com/photo/list/?page={}

2、涉及的库:requestslxmlfake_useragenttimeos

3、软件:PyCharm

【五、项目实施】

1、我们定义一个class类继承object,然后定义init方法继承self,再定义一个主函数main继承self。导入需要的库和网址,创建保存文件夹。

import requests, os
from lxml import etree
from fake_useragent import UserAgent
import timeclass bnotiank(object):    def __init__(self):
        os.mkdir("图片")  # 在创建文件夹 记住只有第一次运行加上,如果多次运行请注释掉本行。
    def main(self):
          pass
if __name__ == '__main__':
    Siper=bnotiank()
    Siper.main()

2、随机UserAgent ,构造请求头,防止反爬。

ua = UserAgent(verify_ssl=False)
    for i in range(1, 50):
        self.headers = {            'User-Agent': ua.random
        }

3、发送请求 ,获取响应,页面回调,方便下次请求。

'''发送请求  获取响应'''
    def get_page(self, url):
        res = requests.get(url=url, headers=self.headers)        html = res.content.decode("utf-8")
        return html

4、定义parse_page函数,获取二级页面地址,for遍历获取需要的字段。

 def parse_page(self, html):
        parse_html = etree.HTML(html)        image_src_list = parse_html.xpath('//p/a/@href')
        # print(image_src_list)

5、对二级页面发生请求,xpath解析数据,获取大图片链接。

reo = parse_html1.xpath('//div//div[@class="content"]') #父结点
    for j in reo:
        d = j.xpath('.//article[@class="article-content"]//p/img/@src')[0]
        text = parse_html1.xpath('//h1[@class ="article-title"] //a/text()')[0].strip()

6、请求图片地址,写入文档。

 html2 = requests.get(url=d, headers=self.headers).content
    dirname = "./d/" + text + ".jpg" #定义图命名
    with open(dirname, 'wb') as f:
        f.write(html2)        print("%s 【下载成功!!!!】" % text)

7、调用方法,实现功能。

url = self.url.format(page)
print(url)
html = self.get_page(url)
self.parse_page(html)

8、设置延时。(防止ip被封)。

  time.sleep(1) """时间延时"""

【六、效果展示】

1、点击绿色小三角运行输入起始页,终止页。

一篇文章教会你利用Python网络爬虫获取分类图片

2、将下载成功信息显示在控制台。

一篇文章教会你利用Python网络爬虫获取分类图片

3、text 作为图片命名,展示效果如下所示。

一篇文章教会你利用Python网络爬虫获取分类图片

【七、总结】

1、不建议抓取太多数据,容易对服务器造成负载,浅尝辄止即可。

2、本文基于Python网络爬虫,讲述了反爬技巧,利用爬虫库,实现了分类图片的获取,存入文档。

3、希望通过这个项目,能够帮助了解xpath,字符串是如何拼接,format函数如何运用。

4、实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

5、需要本文源码的小伙伴,后台回复“博海拾贝”四个字,即可获取。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

趣味解读Python面向对象编程 (类和对象)

一、面向对象简介

考虑现实生活中,我们的思维方式是放在学生这个个人上,是学生做了自我介绍。而不是像我们刚刚写出的代码,先有了介绍的行为,再去看介绍了谁。

用我们的现实思维方式该怎么用程序表达呢?

  • 面向过程:根据业务逻辑从上到下写代码。
  • 面向对象:将数据与函数绑定到一起,进行封装,这样能够更快速的开发程序,减少了重复代码的重写过程。面向过程编程最易被初学者接受,其往往用一长段代码来实现指定功能,开发过程的思路是将数据与函数按照执行的逻辑顺序组织在一起,数据与函数分开考虑。

今天来学习一种新的编程方式:面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)。

面向对象编程的2个非常重要的概念:类和对象。

对象是面向对象编程的核心,在使用对象的过程中,为了将具有共同特征和行为的一组对象抽象定义,提出了另外一个新的概念——类。

类就相当于制造飞机时的图纸,用它来进行创建的飞机就相当于对象。

二、分析类与对象

1. 类

物以类聚,人以群分。
具有相似内部状态和运动规律的实体的集合(或统称为抽象)。
具有相同属性和行为事物的统称。

类是抽象的,在使用的时候通常会找到这个类的一个具体的存在,使用这个具体的存在,一个类可以找到多个对象。

趣味解读Python面向对象编程 (类和对象)

2. 对象

某一个具体事物的存在 ,在现实世界中可以是看得见摸得着的。可以是直接使用的。

趣味解读Python面向对象编程 (类和对象)

3. 类和对象之间的关系

趣味解读Python面向对象编程 (类和对象)

小总结:类就是创建对象的模板。

4. 区分类和对象

奔驰smart 类
张三的那辆奔驰smart 对象
水果 类
苹果 类
红苹果 类 红富士苹果 类
我嘴里吃了一半的苹果 对象

5. 类的构成

类(Class) 由3个部分构成

  • 类的名称:类名
  • 类的属性:一组数据
  • 类的方法:允许对对象进行操作的方法 (行为)

举例:

1)人类设计,只关心3样东西:

  • 事物名称(类名):人(Person)
  • 属性:身高(height)、年龄(age)
  • 方法(行为/功能):跑(run)、打架(fight)

2)狗类的设计

  • 类名:狗(Dog)
  • 属性:品种 、毛色、性别、名字、 腿儿的数量
  • 方法(行为/功能):叫 、跑、咬人、吃、摇尾巴
趣味解读Python面向对象编程 (类和对象)

6. 类的抽象

如何把日常生活中的事物抽象成程序中的类?

拥有相同(或者类似)属性和行为的对象都可以抽像出一个类。

方法:一般名词都是类(名词提炼法)

<1> 坦克发射3颗炮弹轰掉了2架飞机

  • 坦克 –> 可以抽象成类。
  • 炮弹 –> 可以抽象成类。
  • 飞机 –> 可以抽象成类。

<2> 小明在公车上牵着一条叼着热狗的狗

  • 小明 –> 人类。
  • 公车 –> 交通工具类。
  • 热狗 –> 食物类。
  • 狗 –> 狗类。

<3>【想一想】如下图中,有哪些类呢?

趣味解读Python面向对象编程 (类和对象)

说明:

  • 子弹
  • 手榴弹
  • 刀子
  • 箱子

<4>【想一想】如下图中,有哪些类呢?

趣味解读Python面向对象编程 (类和对象)

说明:

  • 向日葵
  • 类名:xrk
  • 属性:颜色、品类
  • 行为:放阳光
  • 豌豆
  • 类名:wd
  • 属性:颜色 、发型、血量
  • 行为:发炮、摇头
  • 坚果:
  • 类名:jg
  • 属性:血量、类型
  • 行为:阻挡
  • 僵尸:
  • 类名:js
  • 属性:颜色、血量、 类型、速度
  • 行为:走、跑跳、吃、死

三、项目

1. 定义类

定义一个类,格式如下:

class 类名:
    方法列表

demo:定义一个Cat类

# 定义类
class Cat:
   # 方法   def eat(self):
       print("猫在吃鱼....")
   def drink(self):
       print("猫在喝可乐...")

说明:

  • 定义类时有2种:新式类和经典类,上面的Cat为经典类,如果是Cat(object)则为新式类
  • 类名的命名规则按照”大驼峰”。

2. 创建对象

Python中,可以根据已经定义的类去创建出一个个对象。

创建对象的格式为:

对象名 = 类名()

创建对象demo:

# 定义一个类
class Cat:
   # 属性
   # 方法
   def eat(self):
       print("猫在吃鱼....")
   def drink(self):       print("猫在喝可乐...")
# 根据类,创建一个对象tom = Cat()

3. 调用对象的方法

class Cat:
   # 属性
   # 方法
   def eat(self):
       print("猫在吃鱼....")
   def drink(self):       print("猫在喝可乐...")
# 创建了一个对象tom = Cat()tom.eat() # 调用对象的eat方法tom.drink()

运行结果,如图所示:

趣味解读Python面向对象编程 (类和对象)

4. 给对象添加属性

class Cat:
    # 属性    # 方法    def eat(self):        print("猫在吃鱼....")
    def drink(self):        print("猫在喝可乐...")
# 创建了一个对象tom = Cat()# 给对象tom添加了一个属性,叫name,里面的值是"汤姆"
tom.name = "汤姆"
# 给对象tom添加了一个属性,叫age,里面的值是30
tom.age = 30
# 调用tom的方法tom.eat()tom.drink()print(tom.name)
print(tom.age)

运行结果,如图所示:

趣味解读Python面向对象编程 (类和对象)

5. 通过方法获取对象属性。

class Cat:
    # 属性    # 方法    def eat(self):        print("猫在吃鱼....")
    def drink(self):        print("猫在喝可乐...")
    def introduce(self):        # print("名字是:%s, 年龄是:%d" % (汤姆的名字, 汤姆的年龄))
        print("名字是:%s, 年龄是:%d" % (tom.name, tom.age))
# 创建了一个对象tom = Cat()# 给对象tom添加了一个属性,叫name,里面的值是"汤姆"
tom.name = "汤姆"
tom.age = 30
# 调用tom的方法tom.eat()tom.drink()# 直接通过对象获取其属性print(tom.name)
print(tom.age)
print("-"*30)
# 调用tom的方法,在其方法中获取它的属性tom.introduce()

运行结果,如图所示:

趣味解读Python面向对象编程 (类和对象)

四、总结

本文以生活中的基础现象为切入点,主要介绍了Python的面向对象基础知识,用丰富的案例帮助大家更好的去了解对象,最后以一只猫作为小项目,使用Python编程语言,方便大家增加对类和对象的认识,希望对大家的学习有帮助。

IT共享之家

入群请在微信后台回复【入群】

****看完本文有收获?请转发分享给更多的人****

—————— End ——————

往期精彩文章推荐:

一篇文章教会你利用Python网络爬虫成为斗图达人

【一、项目背景】

你是否在寻找可以与高手斗图的应用? 你是否在寻找可以自制表情的应用?你是否在寻找最全、最爆笑的表情库?

斗图网是一个收集了成千上万的撕逼斗图表情包,在这里你可以快速找到想要的表情, 更好的“斗图”,助您成为真正的斗图终结者!

一篇文章教会你利用Python网络爬虫成为斗图达人

【二、项目目标】

下载表情包,保存文档。

【三、涉及的库和网站】

1、网址如下:

https://www.doutula.com/photo/list/?page={}

2、涉及的库:requests****、lxml、ssl****、time

3、软件:PyCharm

【四、项目分析】

1、如何找到表情包图片地址?

F12右键检查,找到对应的图片的地址。

一篇文章教会你利用Python网络爬虫成为斗图达人

观察网址的变化(一般取前三页):

https://www.doutula.com/photo/list/?page=1
https://www.doutula.com/photo/list/?page=2
https://www.doutula.com/photo/list/?page=3

发现点击下一页时,page{}每增加一页自增加1,用{}代替变换的变量,再用for循环遍历这网址,实现多个网址请求。

2. 如何解除ssl验证?

因为这个网址是https,需要导入一个ssl模块,忽略ssl验证。

一篇文章教会你利用Python网络爬虫成为斗图达人

3. ****如何获取Cookie?

右键检查,找到NetWork,随便复制一个Cookie即可。

一篇文章教会你利用Python网络爬虫成为斗图达人

【五、项目实施】

1、我们定义一个class类继承object,然后定义init方法继承self,再定义一个主函数main继承self。导入需要的库。

import requests
from lxml import etree
from fake_useragent import UserAgent
import ssl  # ssl验证import time
ssl._create_default_https_context = ssl._create_unverified_contextclass  Emoticon(object):
    def __init__(self):        pass    def main(self):        passif __name__ == '__main__': 
    spider = Emoticon()    spider.main()

2、导入网址和构造请求头,防止反爬。

 def __init__(self):
        self.headers = {'User-Agent': 'Mozilla/5.0'}
        self.url = 'https://www.doutula.com/photo/list/?page={}'

3、发送请求 ,获取响应,页面回调,方便下次请求。

 def get_page(self, url):
        res = requests.get(url=url, headers=self.headers)
        html = res.content.decode("utf-8")
        return html

4、xpath解析页面。

这里我们先获取父节点,在通过for循环遍历,找到对应的子节点(图片地址)。

一篇文章教会你利用Python网络爬虫成为斗图达人
  image = parse_html.xpath('//ul[@class="list-group"]/li/div/div//a')
  for i in image:      image_src_list = i.xpath('.//img/@data-original')[0]
      image_name = i.xpath('.//img//@alt')[0]

运行的结果:

一篇文章教会你利用Python网络爬虫成为斗图达人

5、对图片地址发生请求,取对应图片地址后10位,作为图片的命名,写入文件(每一张图片的后缀名不一样,所有这里不采用image_name作为图片的命名)。

 html2 = requests.get(url=image_src_list, headers=self.headers).content
  name = "/图/" + image_src_list[-20:]
  #print(name[-10:])
  with open(name[-10:], 'wb') as f:
      f.write(html2)      print("%s 【下载成功!!!!】" % image_name)
      print("==================================")

6、调用方法,实现功能。

   html = self.get_page(url)
   self.parse_page(html)
           print("======================第%s页爬取成功!!!!=======================" % page)

7、time模块打出执行时间。

 start = time.time()
  end = time.time()
  print('执行时间:%.2f' % (end - start))

【六、效果展示】

1、点击绿色小三角运行输入起始页,终止页。

一篇文章教会你利用Python网络爬虫成为斗图达人

2、将下载成功信息显示在控制台。

一篇文章教会你利用Python网络爬虫成为斗图达人

3、保存文档,在本地可以看到斗图。

一篇文章教会你利用Python网络爬虫成为斗图达人

【七、总结】

1、不建议抓取太多数据,容易对服务器造成负载,浅尝辄止即可。

2、本文基于Python网络爬虫,利用爬虫库,获取表情包,存入文档。

3、希望通过这个项目能够了解到,对于HTTPS网站,解除ssl验证的有大致的了解。

4、可以尝试的去爬取其他的分类的表情包,按照步骤去实现,实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

5、需要本文源码的小伙伴,后台回复“斗图达人”四个字,即可获取。

IT共享之家

入群请在微信后台回复【入群】

****看完本文有收获?请转发分享给更多的人****

—————— End ——————

往期精彩文章推荐:

前端基础——一篇文章带你了解HTML语法

前言

在做web开发时,我们必不可少的要使用到Html,因为它包含了最基础的网页结构,虽然Html只能帮助我们构建静态网页,但是却是我们最不能缺少的部分,如果把网页比作一个房子,那么Html就是地基,也就是第一件要做的事,可见它的重要性。那么,现在大家就跟随我的脚步去学习下吧。

一、Html基本语法

要想知道Html的语法规则,首先我们得创建一个以Html为后缀的文件,当然也可以是Htm 或者是XHtml,这里不讲述它们的区别。

在写Html之前容我给大家介绍一个神器,它拥有所见即所得的神器效果,也就是说有了它,我们可以编写Html代码边看结果,完全不用浏览器,可以说是相当方便,它就是ExHtmlEditor。

下载地址:

https://u062.com/file/7715018-445508413

下载解压后即可使用,无需安装,方便快捷。

下面就让我们通过这个软件来正式敲开Html的大门吧。

1.标题

我们经常写文章的时候,常会使用标题,可以发现标题的字体一般比段落的字体要大,因为它要突出整篇文章的核心,用最简短的文字描绘出来。Html中设置标题的相关代码就是<h1>~<h6>,注意一定要写</h1>关闭它们,否则会引发位置的错误。我们常常将这些尖括号里的东西叫做标签,下面我们来看下:

可以看到,标题的字体越来越小。

2.段落

一篇文章除了标题,当然就是一个个段落了,段落中我们常常使用的标签有p标签,写法同上,只是标签名不同而已。

3.段落中的文本样式

我们都知道,一个段落里的文字总是比较多的,这就不乏会有一些比较大的引人注目的文字,也会有比较小的文字,更有带颜色的文字。那么这是怎么实现的了,下面我们来看看:

<b>粗体</b> 
<big>大号字</big>
<em>着重文字</em>
<i>斜体字</i>
<small>小号字</small>
<strong>加重语气</strong>
<sub>下标</sub>
<sup>上标</sup>
<ins>插入字</ins>
<del>删除字</del>
<u>下划线</u>
<code>计算机代码</code>
<kbd>键盘文本</kbd>
<samp>计算机代码样本</samp>
<tt>打字机代码</tt>
<var>变量</var>
<pre>预格式文本</pre>
<abbr>缩写</abbr>
<address>地址</address>
<acronym>首字母缩写</acronym>
<bdo>文字方向</bdo>
<blockquote cite='www.baidu.com'>长引用</blockquote>
<q>短引用</q>
<cite>引用</cite>
<dfn>定义项目</dfn> 

别看着挺多的内容就被吓到了,其实这些东西很好学的,主要是现在的Html编辑器都有自动提示功能,所以你根本不需要记住它们的全称就可以很轻松写出代码来,不过,光是这样还不行。

4.换行,水平线

当我们写文章时必须要换行,有时候还要使用水平线进行分割才能让文章显得更有层次感,那么该怎么做了,也是很简单的。

5.注释代码

在写代码时难免会写注释,这个时候我们需要写一写注释来说明代码的作用。格式为:

<!-- 这是注释 -->
<!-- 注释完毕-->

6.链接

我们在浏览网页时点击一个地方的按钮它会跳到另一个地方,那么这就是所谓的链接了。

一般它用a标签包裹,里面有标签名,标签跳转的地址等信息,我们来看看。

1).链接的表现形式

<a href="https://www.baidu.com">百度</a> #可以是一个url地址,点击即可打开百度首页
<a href="1.Html">百度</a> #也可以是一个Html文件
<a href="mailto:2091500484@qq.com">发送邮件</a>#创建电子邮箱链接

2).链接的跳转方式

另外,它还可以定义你打开的页面是当前页面还是新的页面或者说是上一个页面:

<a href="https://www.baidu.com" target="_blank">百度</a> #新窗口打卡百度
<a href="https://www.baidu.com" target="_top">百度</a> #上一个窗口打开百度
<a href="https://www.baidu.com" target="_parent">百度</a> #父窗口打开百度
<a href="https://www.baidu.com" target="_self">百度</a> #当前窗口打开百度

3).锚链接

它可以快速定位页面中的某些标题,可以通过设置name属性来设置锚链接。

<a href='#mao'>锚链接创建</a>
<p><a name='mao'>这是一个锚链接</a></p>

7.图片

为了美化我们的网页,有时候肯定会添加图片,那么该怎样添加图片了,下面请看:

1).插入图片

#我们只需输入图片地址即可,后面两项为鼠标放在图片上显示的内容和图片显示不出来的时候的替代文本
<img src="1.jpg" title='图片' alt='图片无法显示'/>

2).设置背景图片

需要在body标签中设置背景为图片地址。

<body background="1.jpg">

3).图片映射

通过点击图片跳转到相应链接页面。

<a href="https://www.baidu.com"><img src="1.png" title='图片' alt='图片无法显示'/></a>

8.表格

有时候我们也需要插入表格来展示一些数据,表格的制作稍微有点麻烦,不过用Sublime Text 3它可以十分轻松的创建表格。表格一般由表头,表的标题,表的内容组成。最常用的就是Table标签了。

<!-- 表格边框1px,单元格边距5px,单元格间距10px,背景颜色灰色,背景图片1.jpg-->
<table border="1" cellpadding="5" cellspacing="10" bgcolor="gray"  background='1.jpg'>
<col bgcolor='red'/> <!-- 设置表格列的属性 -->
<colgroup bgcolor='blue'></colgroup> <!-- 设置表格列组的属性 -->
<caption>表格标题</caption>
<!-- 页眉 -->
<thead>
<tr>       <!-- 表格的行 -->
<th colspan="2">1--one</th> <!-- 表格表头,相当于列 跨两行 -->
<th>2--two</th>
<th>3--three</th>
<th>4--four</th>
</tr>
</thead>

<!-- 表格主体 -->
<tbody>
<tr>
<td>a</td>   <!-- 表格单元 -->
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>

<!-- 表格页脚 -->
<tfoot>
<tr>
<td>h</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</tfoot>
</table>

9.列表

列表就是我们常常见到的一篇文章的目录,它一般以一种树型状存在着,它可以分为有序列表和无序列表。

1).有序列表

以标签ol为主体,li为父目录,具体表现为:

<ol>
<li>任性</li>
<li>90后</li>
<li>boy</li>
</ol>

<ol start="45">
<li>90后</li>
<li>boy</li>
<li>任性</li>
</ol>

<ol type="a">
<li>90后</li>
<li>boy</li>
<li>任性</li>
</ol>

<ol type="A">
<li>90后</li>
<li>boy</li>
<li>任性</li>
</ol>

<ol type="I">
<li>90后</li>
<li>boy</li>
<li>任性</li>
</ol>

<ol type="i">
<li>90后</li>
<li>boy</li>
<li>任性</li>
</ol>

可以看出有序列表支持多种排序前缀,它就好比Word中的项目符号一样。

2).无序列表

与有序列表唯一不同的就是没有数字也没有字母,只有图形,也是犹如项目符号一样。

<ul>
 <li>任性</li>
 <li>90后</li>
 <li>boy</li>
</ul>

<ul type="disc">
 <li>90后</li>
 <li>boy</li>
 <li>任性</li>
</ul>

<ul type="circle">
 <li>90后</li>
 <li>boy</li>
 <li>任性</li>
</ul>

<ul type="square">
 <li>90后</li>
 <li>boy</li>
 <li>任性</li>
</ul>

可以看出无序列表的默认项目符号就是类型就是黑圆圈

3).自定义列表

<dl>
<dt>1</dt>
  <dd>计算机</dd>
  <dt>2</dt>
  <dd>电脑</dd>
  <dt>3</dt>
  <dd>PC</dd>
</dl>

可以看到自定义列表由我们自己定义列表项目符号,项目的内容

10.块级元素和内联元素

1).块级元素

什么是块级元素,其实就是这个元素在进行显示后会换行输出下一个元素,比如我们的P标签,还有Blockquote 标签都是,不过今天我们要说的是Html中运用的最广的块级元素,它就是Div。

<div align="center">
<p>小花猫</p>
<a href="">小色猫</a>
<img src="1.png" />
<a href="">小白猫</a>
<blockquote>小懒猫</blockquote>
</div>

可以看到在Div中的块级元素都换行了,然而内联元素都没有换行。

2).内联元素

和块级元素正好相反,不用换行输出的那种,比如a标签,或者是Big  Small这些段落中的文本标签都是内联元素,当然也有例外,比如Pre标签,这里不再细说。今天我们要着重讨论的是Span标签。
<span>
<p>小花猫</p>
<a href="">小色猫</a>
<img src="1.png" />
<a href="">小白猫</a>
<blockquote>小懒猫</blockquote>
</span>

注意:Span标签是没有Align属性的。

11.框架

框架是什么?框架就是在一个窗口可以显示多个页面内容的一个容器。框架又分为垂直和水平框架。

1).垂直框架

不可与Body标签同时出现

<frameset cols="50%,50%"> #设置框架的列占有比例
  <frame src="1.png" noresize="noresize"> #无法调整框架的大小
  <frame src="1.png">
</frameset>

2).水平框架

不可与Body标签同时出现

<frameset rows="50%,50%"> #设置框架的行占有比例
  <frame src="1.png" noresize="noresize"> #无法调整框架的大小
  <frame src="1.png">
</frameset>

3).内联框架

#存在body标签中
frameborder:是否显示框架周围的边框 0隐藏 1显示
scrolling:是否显示滚动条 yes显示 no隐藏 auto自动
width:宽度
height:高度
name:锚点名称
<iframe src="" frameborder="0" scrolling='no' width=500 height=400 name='if'>
<img src='1.jpg'/>
</iframe>
<a href="https://www.baidu.com" target="if">fadf</a>  

4).判断是否支持框架

<noframes>
<body>您的浏览器不支持框架</body>
</noframes>

12.表单元素

这个算是Html中的重中之重了,因为用的比较多,基本上所有的表单元素都包含在Form标签中。每一个表单中的空间要么独立存在,要么处于Input中,下面我们来详细了解下:

<form action='' method='get' accept-charset="" target="" autocomplete="" enctype="" novalidate>
<fieldset> #字段组
<legend>表单数据</legend> 字段组名
表单控件的标记
<label for='sex'> for必须指向id
<input type="text" name="sex" id='sex'>
</label>
文本输入框:<input type="text"> 
密码输入框:<input type="password" name="">
单选框:<input type="radio" name="性别" value="男" checked>
<input type="radio" name="性别" value="女">
多选框:<input type="checkbox" name="爱好" value='踢足球'>
<input type="checkbox" name="爱好" value='打篮球'>
<input type="checkbox" name="爱好" value='打排球'>
<input type="checkbox" name="爱好" value='羽毛球'>
<input type="checkbox" name="爱好" value='橄榄球'>
按钮:<button>button1</button>
下拉列表:
<select name='seq'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
文本域:
<textarea name='area' rows=10 cols=20> 行占10个字符 列占20个字符,一个汉字等于两个字符
hello world
</textarea>
菜单:
<menu type="list"> 列表菜单 还有上下文菜单(context) 工具栏菜单(toolbar)
<menu label="文件">
<button type="button">新建</button>
<button type="button">打开</button>
<button type="button">退出</button>
</menu>
</menu>
<menu type="context" id="menu">
<menuitem label="menu" type='checkbox' icon="1.png"> 多选菜单项目 还有单选(radio)和命令(command)
</menuitem>
</menu>
<input type="button" name="" value='button2'>
提交:<input type="submit" name="" value="Submit">
</fieldset>

Html5表单类型
预定义选项列表
<input list="rice">
<datalist id="rice">
  <option value="1">
  <option value="2">
  <option value="3">
  <option value="4">
  <option value="5">
</datalist> 

表单的密钥对生成器字段
当提交表单时,私钥存储在本地,公钥发送到服务器。
<keygen name="security"  keytype="rsa" disabled="disabled"/>

输入框只允许数字输入
<input type="number">

日期
<input type="date" name="">

颜色
<input type="color" name="">

范围
<input type="range" name="">

月份和年份
<input type="month" name="">

星期和年份
<input type="week" name="">

时间
<input type="time" name="">

日期时间选择(有时区)
<input type="datetime" name="">

日期时间选择(无时区)
<input type="datetime-local">

邮箱
<input type="email" name="">

搜索
<input type="search" name="">

电话
<input type="tel" name="">

url
<input type="url" name="">
</form>

action:处理表单数据的服务器脚本语言(如php)
method:请求方法 如get post
accept-charset:提交表单时的字符编码 如utf-8
target:页面跳转方式
autocomplete:自动完成表单 off关闭 on开启
enctype:表单数据的编码 如application/x-www-form-urlencoded(默认),multipart/form-data(文件上传),text/plain
novalidate:浏览器不验证表单


formtarget   覆盖target属性,用于type="submit"type="image"。
formnovalidate覆盖novalidate属性,用于 type="submit"
formmethod   覆盖method 属性,用于 type="submit"以及type="image"
formenctype   覆盖enctype属性,用于type="submit"以及type="image",仅针对method="post"的表单
formaction   提交表单时处理该输入控件的文件的URL
form         规定input元素所属的一个或多个表单
autofocus     当页面加载时自动获得焦点
disabled     输入字段应该被禁用
max           输入字段的最大值
maxlength     输入字段的最大字符数
min           输入字段的最小值
pattern       通过其检查输入值的正则表达式
readonly     输入字段为只读
required     输入字段是必需的
size         输入字段的宽度
step         输入字段的合法数字间隔
value         输入字段的默认值
multiple     常用于邮箱和文件,可多个上传文件
placeholder   提示用户该如何正确输入

13.Html 头部,标题

之所以现在讲这个,是不想一开始就长篇大论,增加一些没必要的修饰,免得扰乱学习的进度。

我们都知道Html,既然是Html,怎么可以没有Html标签了,当然是有的,只是我一开始没有写罢了,当然也可以不用写,不过为了美观为了不出错,建议写上。浏览器标题在浏览器头部里面被它包裹着。

<Html>
<head> 浏览器头部
 <title>浏览器标题</title> 
<base href="https://www.baidu.com"> 规定所有链接的默认地址
<link rel="stylesheet" type="text/css" href=""> 引入外部css文件
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' /> 
<meta http-equiv="Content-Type" content="text/Html" charset="utf-8">设置浏览器内容类型为Html,编码为utf-8
<meta http-equiv="Refresh" content="5" /> 五秒刷新
<meta http-equiv="Refresh" content="5;url=https://www.baidu.com" /> 五秒后跳转到百度
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡"> 设置搜索关键字 SEO
http-equiv   浏览器的内容头部
content-type 内容类型
expires     cookie过期时间
refresh     刷新
set-cookie   设置cookie
charset     编码

name   一般做搜索关键词
author         作者
description   页面描述内容
keywords   关键词
generator   生成器
revised       修改后的值
others         其它

scheme 用于翻译网页文本的格式
http https 协议
YYYY-MM-DD 日期格式

<script type="text/javascript">编写脚本</script> 
<style type="text/css">编写css样式</style>
</head>
<body>
浏览器主体内容
</body>
</Html>

14.音、视频

在Html中也是可以播放音频和视频的,不过这项功能添加在了Html最新版5.0版中的,下面来看看:

1).音频

比如说我们经常熟知的Mp3,Wav,可以通过Audio标签来进行播放。

1)).embed

<embed src="1.mp3" /> 还可播放Flash动画 只需将src属性中的内容换位1.swf即可,不过得先保证你有1.swf这个文件

2)).object

<object data="1.mp3"></object>

3)).audio

<audio controls="controls"> h5中的标准,带有播放控制按钮 支持mp3 wav wma等格式
 <source src="1.mp3" type="audio/mp3" />
</audio>

4)).a标签

<a href="1.mp3">播放</a>

2).视频

1)).embed

<embed src="qw.mp4" />

2)).object

<object data="qw.mp4"></object>

3)).video

<video controls="controls"> 支持MP4 avi wmv flv格式播放
 <source src="qw.mp4" type="video/mp4" />
</video>

4)).a标签

<a href="qw.mp4">播放</a>

15.Html5中的文章布局

可以帮我们省去一些不必要的排版标签,利用新式布局标签会显得更加专业,而且代码量更少。

header   页眉
nav       导航
section   文档中的节
article   独立的自包含文章
aside     侧栏
footer   页脚
details   额外的细节
summary   details的标题
<header>
<h1>CCTV</h1>
</header>

<nav>
CCTV-1<br>
CCTV-2<br>
CCTV-3<br>
</nav>

<section>
<h1>新闻联播</h1>
<p>
大家好,欢迎来到新闻联播。下面请看简讯
</p>
<p>
一男子每天靠摆地摊赚钱,这是怎么回事呢?
</p>
</section>
<summary>
<h3>其它简讯</h3>
<details>
后浪们,摆摊吧~
</details>
<details>
摆摊入门知识
</details>
</summary>
<footer>
商务合作www.这你都信.com
</footer>

可以看到,文章结构紧凑,排版更加让人觉得一目了然。

二、总结

虽然Html总体来说,可能难度不是很大,但是要想学好,也不是一件容易的事,把一件小事做好,定能出彩。

想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/

IT共享之家

入群请在微信后台回复【入群】

****看完本文有收获?请转发分享给更多的人****

—————— End ——————

往期精彩文章推荐:

上古神器Gvim–从入门到精通

前言

Gvim是一款十分优秀的文本编辑器,被网友称为‘上古神器’,它是Window下的Vim编辑器,可以十分方便的帮助开发者进行文本内容的定位和其它操作,下面就让我们来看看这个上古神器到底是啥样的吧。

一、安装GVim

这里为了方便大家的使用,我给大家提供了个下载地址:

https://u062.com/file/7715018-446595897

下载后直接双击按照提示来操作即可。

二、Gvim的操作模式

Gvim和Vim差不多,都是有三个模式:

1.命令模式

在这个模式下可以输入命令来操控文件,但它不会输入字符,我们刚启动Gvim时的模式就是命令模式。

2.插入模式

在这个模式下可以输入文本内容到文件中。可以在几种不同的情况下插入字符。

3.尾行模式

可以在里面输入很多命令,先按ESC,然后通过“:”符号进入到这个模式,输入:

q:退出程序

w:保存文件

注:如果尚未保存文件则无法退出,会有提示。可以WQ一起使用。

三、Gvim的基本操作

1.控制光标的位置

进入命令模式,然后输入方向按键,如下:

h(←)光标向左移动一个字符
j(↓)光标向下移动一个字符
k(↑)光标向上移动一个字符
l(→)光标向右移动一个字符
+   光标移动到非空格符的下一行
-   光标移动到非空格符的上一行
n+空格光标会移动到n个空格处
0+回车   在尾行模式中 按下0然后回车,会将光标移动到第一位 插入命令中的‘H’也可以 gg和1G也可以
$+回车   在尾行模式中 按下$然后回车,会将光标移动到最后一位 插入命令中的‘L’也可以
M插入命令中,光标移动到屏幕的中央那一行的第一个字符
G插入命令中,光标移动到最后一行
num+G n为数字。移动到这个档案的第 n 行
b     移动光标在某行首位
e   移动光标在某行末尾
w     移动到光标的下一行

2.删除字符

删除字符的方式也有很多种。

1).删除光标所在位置字符

进入到命令模式,然后输入”x(右边的值删除)” “s(删除并进入插入模式)” “cl(同s)” “dl(同x)” “dh(左边的值删除)”

2).删除光标所在位置全部字符

进入到命令模式,然后输入”dd”,也可以输入”cc”,只是它删除完后就会进入插入模式

3).删除光标所在的位置的换行符

进入到命令模式,然后输入”J”

4).删除光标所在某行位置以及后面的所有值

进入到命令模式,然后输入“d$”

5).删除光标所在某行位置以及后面的所有值并进入插入模式

进入到命令模式,然后输入“c$”

3.插入字符

首先你得按下ESC ,这是第一步,然后:

1). 按下”i“

将内容插入到当前光标所在的位置的前面

2).按下”o”

将内容插入到当前光标所在的位置的下一行

3).按下”a”

将内容插入到当前光标所在的位置的后面

4.替换字符

进入命令模式,输入“r”,然后输入替换的文本即可,“R”可替换多个字符

全部替换:进入尾行模式下,输入“%s/要替换的字符/替换后的字符/g”

5.恢复删除的字符

进入命令模式,输入”u”,也可在尾行模式中输入“put”

6.复制字符

进入命令模式,然后

输入”y2w”即可复制两个字符

输入“yy”即可复制某行全部字符

输入“2yy”即可复制两行全部字符

输入”y0″ 即可复制光标所在的那个字符到该行行首的所有数据

输入“y$”即可复制光标所在的那个字符到该行行尾的所有数据

输入“yG”即可复制光标所在行到最后一行的所有数据

输入”y1G”即可复制光标所在行到第一行的所有数据

7.粘贴字符

进入命令模式,输入“p”即可在光标位置处的上一行粘贴复制的字符

输入”P”即可在光标位置处的下一行粘贴复制的字符

8.帮助

你可以通过帮助文件具体了解Gvim的神器功能,当然你可以直接在Gvim上获取。

可以按“F1”获取,也可以在尾行模式下输入“:help”也可获取到。

9.搜索指定字符

进入命令模式,输入“/要搜索的字符”,然后便会高亮显示搜索到的字符,在回车输入”n”,便会移动到检索到的值上。“3n”则查找第三次出现的字符,输入“?要搜索的字符”也可以达到同样的效果,只是搜索方向相反。

有时候搜索字符你如果不考虑大小写的话,可以设置忽略大小写:

先进入命令模式,然后回车输入:

:set ignorecase

然后 进行检索,这个时候只要是符合条件的都会高亮显示,不管是否大小写。

10.分隔窗口

可将一个文件的命令窗口分为两个,命令模式下输入“:split”即可。

11.其它操作

1).保存

尾行模式下输入:“w”

2).退出

尾行模式下输入:“q”

3).保存并退出

尾行模式下输入:“wq”

4).执行shell命令

尾行模式下输入:“!”

5).把shell执行结果读入文档

尾行模式下输入:“r!”

四、总结

通过对Gvim 的初步了解,我们认识到了这款编辑器的神奇之处,堪称上古神器是一点都不夸张。其实,它的强大功能远不止我所讲到的这些,它还有更多实用的功能,只是我所讲的已经够我们平时开发使用了。

****看完本文有收获?请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

****看完本文有收获?请转发分享给更多的人****

—————— End ——————

往期精彩文章推荐:

CSS样式更改——用户界面和指针类型

前言

上篇文章主要讲述了CSS样式更改中的多列、元素是否可见、图片透明度基础知识,这篇文章我们来介绍下CSS样式更改中用户界面和指针类型基础用法。

1.用户界面 UserGui

1).重设元素大小 resize

div
{
resize:both
}
none           不调整
both           调整元素的高度和宽度
horizontal     调整元素的宽度
vertical       调整元素的高度

2).规定两个并排的带边框的框 box-sizing

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
content-box  宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

3).对轮廓进行偏移outline-offset

div
{
outline-offset:15px  轮廓与边框边缘的距离
}

2.指针类型Cursor

div{
  cursor:auto
}
光标形状:
default       默认光标(箭头)
auto        浏览器设置的光标。
crosshair           十字线
pointer             一只手
move                指示某对象可被移动。
e-resize            指示矩形框的边缘可被向右(东)移动
ne-resize           指示矩形框的边缘可被向上及向右移动(北/东)
nw-resize           指示矩形框的边缘可被向上及向左移动(北/西)
n-resize            指示矩形框的边缘可被向上(北)移动
se-resize           指示矩形框的边缘可被向下及向右移动(南/东)
sw-resize           指示矩形框的边缘可被向下及向左移动(南/西)
s-resize            指示矩形框的边缘可被向下移动(南)
w-resize            指示矩形框的边缘可被向左移动(西)
text                指示文本
wait                指示程序正忙(通常是一只表或沙漏)
help                指示可用的帮助(通常是一个问号或一个气球)

参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的用户界面和指针类型基础知识,希望让大家对CSS样式更改有个简单的认识和了解。

——————- End ——————-

往期精彩文章推荐:

CSS样式更改——多列、元素是否可见、图片透明度

前言

上篇文章主要讲述了CSS样式更改中的过渡、动画基础知识,这篇文章我们来介绍下CSS样式更改中多列、元素是否可见、图片透明度知识。。

1.多列 DoubleCol

1).创建多列

div
{
-moz-column-count:2;   /* Firefox */
-webkit-column-count:2; /* Safari 和 Chrome */
column-count:2;
}
div被分隔成两列

2).规定列之间的间隔

div
{
-moz-column-gap:30px;    /* Firefox */
-webkit-column-gap:30px;  /* Safari 和 Chrome */
column-gap:30px;
}
规定列之间30像素的间隔

3).列规则

div
{
-moz-column-rule:1px dotted red;  /* Firefox */
-webkit-column-rule:1px dotted red;  /* Safari and Chrome */
column-rule:1px dotted red;
}
column-rule-width   列之间的宽度规则
column-rule-style   列之间的样式规则
column-rule-color   列之间的颜色规则

4).规定列的宽度和列数

div
{
columns:10px 3;
-moz-columns:10px 3; /* Firefox */
-webkit-columns:10px 3; /* Safari 和 Chrome */
}
column-width   列的宽度
column-count   列数

5).填充列

div
{
column-fill:auto;
}
balance 列处理
auto   自动填充

2.元素是否可见Visibility

div{
  visibility:hidden
  }
visible      元素可见
hidden      元素不可见
collapse     用在表格中元素可见,其它标签元素不可见

3.图片透明度0pacity

opacity:0.4  范围为0~1的小数
filter:alpha(opacity=100) 范围为0~100的整数

参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的多列、元素是否可见、图片透明度知识,希望让大家对CSS样式更改有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/

****看完本文有收获?请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

—————— End ——————

往期精彩文章推荐:

CSS样式更改——过渡、动画

前言

上篇文章主要讲述了CSS样式更改中的2D转换,这篇文章我们来介绍下CSS样式更改中的过渡、动画基础用法。

1.过渡

元素从一种样式逐渐改变为另一种的样式

div
{
transition: width 1s;
-moz-transition: width 1s;  /* Firefox 4 */
-webkit-transition: width 1s;  /* Safari 和 Chrome */
-o-transition: width 1s;  /* Opera */
}
transition-property:应用过渡的Css属性的名称 比如宽度width
transition-duration:过渡效果花费的时间   比如1s
transition-timing-function:渡效果的时间曲线 如下所示:
linear 匀速
ease 先慢后快
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 慢速开始和结束
cubic-bezier(n,n,n,n) 在cubic-bezie 函数中定义自己的值,可能的值是0至1之间的数值
transition-delay:过渡效果何时开始 如1s

2.动画 Animation

1).首先定义@keyframes 规则

@keyframes my
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes my /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes my /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes my /* Opera */
{
from {background: red;}
to {background: yellow;}
}

为了丰富元素的变化过程,你可以把from to改为百分比的样子:

@keyframes my
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes my /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes my /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes my /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
定义好了,接下来我们就可以启动我们的动画了。

2).animation启动动画效果

div
{
animation-name: my;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: my;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: my;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: my;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

animation-name                   选择器的 keyframes 的名称
animation-duration               动画所花费的时间
animation-timing-function        匀速播放动画
animation-delay           动画过多久开始
animation-iteration-count        播放动画次数
animation-direction       是否在下一周期逆向地播放 normal 正常播放  alternate 轮流反向播放
animation-play-state             暂停动画  paused 动画已暂停  running 动画正在播放
animation-fill-mode
none         不填充
forwards     当动画完成后,保持最后一个属性值
backwardsanimation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值
both        向前和向后填充模式都被应用。

参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的过度和动漫基础知识,希望让大家对CSS样式更改有个简单的认识和了解。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

CSS样式更改——2D转换

前言

上篇文章主要讲述了CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。

2D转换

1).元素位移translate(左边,顶边)

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);    /* IE 9 */
-webkit-transform: translate(50px,100px);  /* Safari and Chrome */
-o-transform: translate(50px,100px);    /* Opera */
-moz-transform: translate(50px,100px);    /* Firefox */
}

2).元素旋转rotate(角度)

div
{
transform: rotate(10deg);
-ms-transform: rotate(10deg);    /* IE 9 */
-webkit-transform: rotate(10deg);  /* Safari and Chrome */
-o-transform: rotate(10deg);    /* Opera */
-moz-transform: rotate(10deg);    /* Firefox */
}
rotate()
scale()
skew()
matrix()

3).元素缩放scale(宽度倍数,高度倍数)

div
{
transform: scale(1,2);
-ms-transform: scale(1,2);  /* IE 9 */
-webkit-transform: scale(1,2);  /* Safari 和 Chrome */
-o-transform: scale(1,2);  /* Opera */
-moz-transform: scale(1,2);  /* Firefox */
}

4).元素翻转给定的角度 skew(x,y)

div
{
transform: skew(13deg,21deg);
-ms-transform: skew(13deg,21deg);  /* IE 9 */
-webkit-transform: skew(13deg,21deg);  /* Safari and Chrome */
-o-transform: skew(13deg,21deg);  /* Opera */
-moz-transform: skew(13deg,21deg);  /* Firefox */
}

5).将前面所有方法进行组合matrix()

div
{
transform:matrix(1.30.32,1.32,0.220.54,0.65);
-ms-transform:matrix(1.30.32,1.32,0.220.54,0.65);    /* IE 9 */
-moz-transform:matrix(1.30.32,1.32,0.220.54,0.65);  /* Firefox */
-webkit-transform:matrix(1.30.32,1.32,0.220.54,0.65);  /* Safari and Chrome */
-o-transform:matrix(1.30.32,1.32,0.220.54,0.65);    /* Opera */
}

定义6个数的矩阵

6).2D过度到3D

div{
transform:rotate(1deg);
-ms-transform:rotate(1deg);   /* IE 9 */
-moz-transform:rotate(1deg);   /* Firefox */
-webkit-transform:rotate(1deg); /* Safari 和 Chrome */
-o-transform:rotate(1deg);       /* Opera */
}
它包含了所有的2D方法和3D方法,并且可以单个设置每一种的方法的x,y轴转向值,比如:
rotate(angle) 定义 2D 旋转,在参数中规定角度。测试
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
其它的都是差不多的用法,不过还有一个用法不同的就是:
perspective(n)     为3D转换元素定义透视视图。

参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的2D转换基本设置,希望对大家的学习有帮助。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

CSS样式更改——裁剪、Z-Index、清除、改变元素的特性

前言

上篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识,这篇文章主要分享CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,一起来看看吧。

1.裁剪Clip

对元素某块区域就行剪切

img{
   clip:rect(23px,14px,45px,54px)
}
rect (top, right, bottom, left)  设置元素的形状
auto 不应用任何剪裁

2.Z-Index

设置元素的堆叠顺序

div{
z-index:1
}
p{
z-index:10
}
a{
z-index:-1
}
z-index 值越大,所在的元素越靠前显示

3.清除Clear

专门用来清除浮动

div{
  clear:both
}
left   清除左侧浮动
right  清除右侧浮动
both   清除左右两侧浮动
none   允许浮动

4.改变元素的特性Display

互相调换元素之间的特性

div{
    display:inline
}
none                元素不会被显示。
block                元素将显示为块级元素,此元素前后会带有换行符。
inline               元素将被显示为内联元素,元素前后没有换行符。
inline-block         行内块元素
list-item            元素会作为列表显示。
run-in               元素会根据上下文作为块级元素或内联元素显示。
table                元素会作为块级表格来显示,表格前后带有换行符。
inline-table         元素会作为内联表格来显示,表格前后没有换行符。
table-row-group       元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group    元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group    元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row             元素会作为一个表格行显示(类似 <tr>)。
table-column-group    元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column          元素会作为一个单元格列显示(类似 <col>)
table-cell            元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption         元素会作为一个表格标题显示(类似 <caption>)

此时的块级元素div就有了内联元素的特性了。
参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的裁剪、Z-Index、清除、改变元素的特性,希望让大家对CSS样式有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐: