爬虫准备 - 认识HTML&css
爬虫之前除Python基础外还需要认识HTML与css。
网页的技术结构:HTML、css、JS
HTML(结构标准) — 提供网页内容(通过不同的标签提供不同的内容)
CSS(样式标准) — 负责网页内容的样式布局
JS(行为标准) — 负责控制网页变化
HTML
HTML — 超文本标记语言
一个网页就是一个HTML,HTML代码一般写在可以被浏览器直接解析的HTML文件中
1)、HTML基本结构:一个HTML标签里面 包含一个head标签和一个body标签
HTML标签 — 代表整个页面
head — 网页顶部负责显示网页图标和标题部分(还负责不可见的设置性的内容)
body — 负责网页内容的显示
2)、标签语法
HTML是通过不同的标签来提供不同的,标签从结构上分为两种:
a)、双标签 <标签名 属性1 = 属性值1 属性2 = 属性值2…>标签内容</标签名>
b)、<标签名 属性1 = 属性值1 属性2 = 属性值2…>、<标签名 属性1 = 属性值1 属性2 = 属性值2…/>
说明:
1)、标签名和’<‘与’>'之间不能存在空隙
2)、属性值不管是什么类型的数据都必须用双引号引起来
3)、双标的标签内容可以是任何内容:包括纯文字、也可以是一个或多个标签或者文字和标签的混合
4)、标签名是HTML提供的
文本标签
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<p>《出师表》</p>
<p>先帝(1)创业(2)未半而中道(3)崩殂(4),今(5)天下三分(6),益州疲弊(7),此(8)诚危急存亡之秋也。 然(9)侍卫之臣不懈于内,忠志之士忘身(10)于外者,盖追先帝之殊遇(11),欲报之于陛下也。 诚宜(12)开张圣听,以光(13)先帝遗德,恢弘(15)志士之气,不宜妄自菲薄(16),引喻失义(17),以塞忠谏之路也(18)。 宫中府中,俱为一体(19);陟罚臧否(20),不宜异同:若有作奸犯科(21)及为忠善者(22), 宜付有司(23)论其刑赏(24),以昭陛下平明之理(25);不宜偏私(26),使内外异法也(27)。 侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯(28),是以先帝简拔以遗陛下(29): 愚以为宫中之事,事无大小,悉以咨之(30),然后施行,必能裨补阙漏(31),有所广益(32)。
</p>
行内标签
<span>行内文本1</span>
<label>行内文本2</label>
<font>行内文本3</font>
文字效果相关标签和符号
<b>我被b标签加粗了</b>
<strong>我被strong加粗了</strong>
<!--倾斜:em-->
<em>我在em标签里,所以我倾斜啦</em>
<!--换行:br-->
<br />
<p>我头上有个br换行</p>
<!--空格: 、&emsp-->
<span>我前面有两个nbsp空格,它的单位是像素</span> <span>我前面有一个emsp的空格
他就是常规的空格
</span>
div标签
1、作为普通双标签提供内容
2、作为一个盒子对网页中的内容进行分块分组
input标签
<!--普通输入框
value:输入框中的内容
-->
<input type="" value="" placeholder="来我这搜索"/>
<br />
<!--单选按钮-->
<input type="radio" name="sex" id="s1" value="" />
<label for="s1">男</label>
<input type="radio" name="sex" id="s2" value="" />
<label for="s2">女</label>
<br />
<!--多选按钮-->
<input type="checkbox" name="hobby" id="c1" value="" />
<label for="c1">草莓</label>
<input type="checkbox" name="hobby" id="c2" value="" />
<label for="c2">香蕉</label>
<input type="checkbox" name="hobby" id="c3" value="" />
<label for="c3">柚子</label>
<br />
<!--普通按钮-->
<input type="button" name="" id="" value="确定" />
<button type="button">取消</button>
<button type="button"><img src="img/jd_logo.ico"/></button>
<br />
<!--其他功能-->
<input type="color" name="" id="" value="" />
<input type="file" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="datetime-local" name="" id="" value="" />
列表
<!--无序列表-->
<ul>
<li>
无序列表选项1
</li>
<li>
无序列表选项2
</li>
<li>
无序列表选项3
</li>
</ul>
<!--有序列表-->
<ol>
<li>
有序列表选项1
</li>
<li>
有序列表选项2
</li>
<li>
有序列表选项3
</li>
</ol>
图片与超链接
<!--
图片标签:img
属性:src 设置图片地址(本地、网络)
title(设置图片标题)
-->
<!--图片标签:img-->
<h1>----------1、图片标签----------</h1>
<!--显示本地图片-->
<p>本地图片</p>
<img src="img/mmexport1573830159890.jpg" title="林思意" alt="林思意" />
<p>网络图片</p>
<img src="https://img2.baidu.com/it/u=1810171082,1266198879&fm=26&fmt=auto&gp=0.jpg" title="宝儿姐" alt="宝儿姐" />
<!--
超链接:a
-->
<h1>----------2、超链接标签----------</h1>
<a href="https://www.baidu.com/">百度一下</a>
<p>图片超链接</p>
<a href="https://www.jd.com/">
<img src="img/jd_logo.ico" />
</a href="https://www.jd.com/">
<br />
<a href="https://www.jd.com/">
<img src="img/jd_logo.ico"/>
<p>链接</p>
</a>
选择器
选择器的作用:
1、标签选择器(元素选择器) - 直接将标签名作为选择器,选中所有指定标签
例:a{} - 选中所有的a标签
2、id选择器 - 在id属性值前加#作为一个选择器,选中id属性值为指定值的标签(同一页面中的id是唯一的)
例:#a1{} - 选中id值为a1的标签
3、class选择器(类选择器) - 在class属性值前加.作为一个选择器,选中所有class属性值为指定值的标签
例:.a1{} - 选中所有class值为a1的标签
4、群组选择器 - 将多个选择器用’,‘隔开作为一个选择器,选中用’,'隔开的的每个选择器选中的所有标签
例:p,#a1,.a1 - 选中所有p标签和id是p1的标签以及class属性值为a1的class标签
5、后代选择器 - 多个选择器用空格隔开
例:div p{} - 选择所有div后代的p标签(选中所有div里面的p标签);div和p之间是后代关系
6、子代选择器 - 多个选择器用>隔开
CSS
1、css语法:
css是用来给标签添加样式和布局的
css语法:
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}
说明:
选择器 — 选择需要添加样式的标签。(若为内敛样式 选择器{} 需省略)
属性 — 属性名是由css决定的,不同的竖向表示不同的样式
常用属性:color - 文字颜色;background-color - 背景颜色
font-size - 字体大小;width - 宽度;height - 高度;border - 边框…
2、css代码位置:
1)、内联样式表:将css代码写在标签的style属性里;
<p style="color: pink; font-family: 'imprint mt shadow'; font-size: 25px;">
我被内联样式改变了
</p>
2)、内部样式表:将css代码写在style中
<div class="div1">
我被内部样式改变了
</div>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
border: 5px solid plum;
line-height: 200px;
text-align: center;
color: palegreen;
}
</style>
3)、外部样式表:将css代码写在css文件中,再通过link标签导入
<div class="div2">
我被外部样式改变了
</div>
.div2{
width: 200px;
height: 200px;
border: 5px solid peachpuff;
line-height: 200px;
text-align: center;
color: powderblue;
margin-top: 20px;
}
以上分享只是爬虫前对于前端一些常用基础知识的分享;