介绍爬虫基础知识,包括网络,前端界面HTML,CSS, JS 等。
第一章 爬虫基础-网络传输协议 2021-09-03
第一章 爬虫基础-前端HTML 2021-09-03
重点掌握:
1、掌握CSS中的各种选择器
2、熟悉CSS基础样式
CSS是一种用来表现**HTML文件样式**的语言。CSS不仅可 以静态地修饰网页,还可以配合各种脚本语言动态地对 网页各元素进行格式化。CSS 能够对网页中元素位置的 排版进行像素级精确控制,支持几乎所有的字体字号样 式,拥有对网页对象和模型样式编辑的能力。
基本用法: 选择器 { 属性:值 }
在标签内使用style属性指定css代码,只能改变当前标签的样式。不能批量对某个标签生效。
<div style="color:red;">hello css</div>
color 设置文字的颜色,如: color:yellow;
font-size 设置文字的大小,如:font-size:15px;
font-family 设置文字的字体,如:font-family:‘微软雅黑’;
font-style 设置字体是否倾斜,如:font- style:‘normal’; 设置不倾斜,默认设置; font- style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗,如:font- weight:bold; 设置加粗 ; font-weight:normal 设置不加粗
line-height 设置文字的行高,设置行高相当于在每行文 字的上下同时加间距, 如:line-height:24px; 注意是本行文字的底部到下一行文字的底部算完整的行高
font: 同时设置文字的几个属性,建议按照如下顺序写: 是否加粗 字号/行高 字体;如: font:normal 24px/48px ‘宋体’;
text-decoration 设置文字的下划线,如:text- decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进,如:text- indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式,如text- align:center 设置文字水平居中;
过id名来选择元素,元素的id名称不能重复,所以使 用id作为选择器只能对应一个页面上的元素,不能服 用。id一般来说是给程序使用,不推荐作为CSS选择器使 用。
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器*/ div { color: blue;} /*id 选择器*/ #box1 {color: red;} /*类选择器*/ .b {color: blue} .r {color: red; font-size: 36px} </style> </head> <body> <div id="box">1</div> <div id="box1">2</div> <p class="b">字体为蓝色</p> <p class="r">字体为?色</p> <!-- 当多个类选择器同事修改一个标签的属性时, 会选择CSS样式中类选择器中的最后一个--> <p class="r b">你猜我是什么颜色</p> </body>
层级选择器主要是用来选择父元素下的子元素,或者子元素下的子元素,可以和标签元素结合使用,减少命名,也可以通过层级,防止命名冲突。综合使用以上三种选择器, .box1 p{color: gold;}
box 下的 p 标签。
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{color: red;} .box1 p{color: gold;} </style> </head> <body> <div class="box1"> <p>我是box1中的P标签</p> </div> <p>我是单独的外部的P标签</p> <div class="box2"> <p>P标签</p> </div> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <style> .a{color: blue} .a:hover{ color: red; } .b:before{ content: "插入在前"; } .c:after{ content: "插入在后"; } </style> </head> <body> <p class="a">悬浮以后颜色变红色</p> <p class="b">before</p> <p class="c">after</p> </body>
代码效果呈现:
CSS盒模型本质上是一个盒子,封装周围的HTML元素,盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
设置对应的样式分别为:
盒子的真实大小是:
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
设置宽高(width,height):不是整个盒子的宽度、高度,指的内容的的宽度、高度。
设置内间距padding, padding同样可以指定设置某一个边,但是也可以全部都设置,
border-top-color: blue; /*设置顶部边框 的颜色为蓝色*/ border-top-width: 10px; /*设置顶部边框 线条粗细为10px*/ /*常用的有solid(实线) dashed(虚线) dotted(点线)*/ border-top-style: solid; /*设置顶部边 框线条为实线*/ border-top: blue 10px solid; /*三个顺序可以变 换*/ border: blue 10px solid; /*四个边设置的一样可以直接*/
compadding-top:30px; /* 设置顶部内间距为30px */ padding-left: 30px; /* 设置左边内间距为30px */ padding-right: 50px; /* 设置右边内间距为50px */ padding-bottom: 50px; /* 设置底部内间距为50px; */ /*padding的4个值是有特定位置的,按照顺时针的方向设置,分别是 上、右、下、左*/ padding: 30px 50px 50px 30px; /*3个值*/ /*设置顶部内边距为30px,左右内边距为50px,底部内边距为30px*/ padding: 30px 50px 30px; /*2个值*/ /*设置上下内边距为30px,左右内边距为50px*/ padding: 30px 50px; /*一个值*/ /*设置四边内边距都为30px */ padding: 30px;
功能实现:
<head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 556px; height: 556px; border: 2px red solid; padding-left: 20px; padding-right: 20px; } .title{ border-bottom: 2px red solid; padding: 0; line-height: 48px; } ul{ padding: 0; } li{ list-style: none; } .s{ margin-bottom: 14px; height: 14px; line-height: 14px; border-bottom: 1px dashed black; } </style> </head> <body> <div class="box1"> <div class="title">科技滚动新闻</div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li class="s"></li> </ul> </div>
background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的。background可以分解为以下几个选项:
<style> div { width: 800px; height: 800px; background: red url('img.png') center fixed; /*“red”设置background-color; “url(bg.jpg)”是设置background-image; “no-repeat”是设置background-repeat; “left center”是设置background-position; “fixed”是设置background-attachment 每个设置之间用空格隔开, 不需要设置的可以不写,不写的 会使用默认值。 */ } </style>
当子元素所需大小超过了父元素的大小时,就会出现元素溢出的现象,此时就需要通过设置父元素的显示溢出元素的属性overflow来进行解决。
<head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 60px; height: 120px; border: 2px black solid; overflow: auto; } </style> </head> <body> <div> <p>当子元素所需大小超过了父元素的大小</p> </div>
实现下图效果需要使用到浮动。不设置浮动,会出现什么情况。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 500px; height: 140px; border: 2px black solid; } .box2{ width: 100px; height: 100px; border: 1px red solid; margin: 20px; float: left; } .box3{ width: 100px; height: 100px; border: 1px red solid; margin: 20px; float: right; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div>