爬虫准备 - 认识HTML&css

最新推荐文章于 2022-12-30 20:59:30 发布

HoneyGrapefruit

最新推荐文章于 2022-12-30 20:59:30 发布

阅读量181

点赞数

文章标签： python

本文链接：https://blog.csdn.net/Lemon_Review/article/details/119580978

版权

本文介绍了HTML作为网页结构标准，CSS作为样式标准的基本概念和使用。讲解了HTML的标签结构，如标题、段落、行内标签、列表、图片和超链接的使用。同时，概述了CSS的选择器、语法和样式应用方式，包括内联、内部和外部样式表。内容适合爬虫初学者了解前端基础知识。

摘要由CSDN通过智能技术生成

爬虫准备 - 认识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>
		<!--空格:&nbsp、&emsp-->
		&nbsp;&nbsp;
		<span>我前面有两个nbsp空格，它的单位是像素</span>&emsp;<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;
}

以上分享只是爬虫前对于前端一些常用基础知识的分享；

HoneyGrapefruit

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
爬虫准备 - 认识HTML&css

爬虫准备 - 认识HTML&css爬虫之前除Python基础外还需要认识HTML与css。网页的技术结构:HTML、css、JSHTML(结构标准) — 提供网页内容(通过不同的标签提供不同的内容)CSS(样式标准) — 负责网页内容的样式布局JS(行为标准) — 负责控制网页变化HTMLHTML — 超文本标记语言一个网页就是一个HTML，HTML代码一般写在可以被浏览器直接解析的HTML文件中 1)、HTML基本结构：一个HTML标签里面包含
复制链接

扫一扫