Document

2.爬虫必备基础知识(html+css)

2024-04-18
dfer
253
爬虫 html css CSDN

文章目录

HTML(HyperText Markup Language)
CSS层叠样式表

HTML(HyperText Markup Language)

前言

软件架构

B/S

Browser/Server 网站

C/S

Client/Server QQ

HTML的简介、发展史：

万维网联盟（W3C）维护。包含HTML内容的文件最常用的扩展名是.html，但是像DOS这样的旧操作系统限制扩展名为最多3个字符，所以.htm扩展名也被使用。虽然现在使用的比较少一些了，但是.htm扩展名仍旧普遍被支持。

一、什么是HTML？

超文本标记语言

(1) 标签也叫做标记+

(2) html是由标签/标记和内容组成的

(3) 标签是由标签名称和属性组成的

实例：

<人肤色=“黄色” 眼镜=“很大”></人>

扩展：

使用协议为 http超文本传输协议

普通文本：文字内容

超文本：视频、音频、图片、文字…

二、HTML的主体标签

实例

<!DOCTYPE html>  #H5的头   声明文档类型 为html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">  #之前的头文件 现在不用
<html>
<head>
	<title>标题内容</title>
  	<meta charset="UTF-8"> #设置字符集
</head>
<body>
  	放html的主体标签
</body>
</html>

html:文件是网页，浏览器加载网页，就可以浏览
head:头部分，网页总体信息
- title:网页标题
- meta：网页主体信息，会根据name(author/description/keywords)
- link:引入外部文件和C#中的using异曲同工
- style：写入CSS
- script：写入JS
body:身体部分，网页内容

三、HTML的标签

标签分为：单标签/单标记

如：<br /> /<br >

双标签/双标记

如: <p></p>

1、文本标签

<div></div> 块标签作用是设定字、画、表格等的摆放位置
<p></p> 段落标签自成一段会将上下的文字和它保持一定的距离
<h1>-</h6> 标题标签字体加粗自占一行

注意： 建议一个页面h1只能出现一次

2、图片标签

<img /> 在网页中插入一张图片

属性：

src：图片名及url地址 (必须属性)
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度

实例:

<img src="图片地址" title="文字提示" alt="图片加载失败显示得信息" width="宽" height="高" border="边框" />

注意：

如果宽和高只给一个那么为等比缩放如果俩个都给那么会按照你所给的宽和高来显示

3、路径

相对路径
- ./ 当前
- …/ 上一级
绝对路径
- 一个固定得链接地址(如域名)
- 从根磁盘一直到你的文件得路径
  
  file协议打开本地磁盘文件得协议（试一下火狐）

4、超链接

<a href=“链接地址” title=“提示信息” target=“打开方式”>点击显示得内容</a>

属性：

href必须，指的是链接跳转地址

target:

_blank 新建窗口得形式来打开

_self 本窗口来打开(默认)

**title：**文字提示属性（详情）

5、列表

无序列表*

<ul>
	<li></li>  
</ul>
<!--
属性：
	type 显示得类型
	square 方形显示
	disc 默认圆点
	circle 空心圆
-->

有序列表

<ol>
 	<li></li>
</ol>
<!--
属性 
	type i a A 1 
	start 起始值
-->

自定义列表

<dl>
  	<dt>列表头</dt>
  	<dd>列表内容</dd>
</dl>

6、 HTML注释

多行注释：

注释的作用：

代码的调试
解释说明

四、分帧

frameset

1、定义和用法

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

2、可选的属性

属性	值	描述
cols	pixels % *	定义框架集中列的数目和尺寸
rows	pixels % *	定义框架集中行的数目和尺寸
frameborder	1/0	是否显示边框
name		给当前分帧窗口起名称
src		连接的页面名称
noresize	noresize	页面不会被拖拽

实例

<frameset rows="20%,*,20%" frameborder="1/0">
  <frame src="" name="分帧名1">
  <frameset cols="20%,*" frameborder="1/0">
    <frame src="" name="分帧名1">
    <frame src="" name="分帧名2">
  </frameset>
  <frame src="" name="分帧名3">
</frameset>

注意：

不可以和body在一起需要将body删掉

五 TABLE表格

table表格

1、属性：

width 宽
height 高
border 边框
align位置 center/left/right
valign规定单元格内容的垂直排列方式。
- top 对内容进行上对齐。
- middle 对内容进行居中对齐（默认值）。
- bottom 对内容进行下对齐。
- baseline 与基线对齐。
rowspan合并行
colspan合并列

2、标签：

caption 表格标题

*tr 行标签

*th 列头标签
*td 列标签

实例：

<table>
<caption>我是表格的标题</caption>
<tr>
 <th>我是表头</th>
 <th>我是表头</th>
 <th>我是表头</th>
</tr>
<tr>
 <td>我是单元格</td>
 <td>我是单元格</td>
 <td>我是单元格</td>
</tr>
</table>

六 FORM表单

标签： <form></form>

1、 form属性

action	提交的地址
method	提交的方式
	get
		(1) 默认不写 为get传参  url地址栏可见
		(2) 长度受限制 （IE浏览器2k火狐8k）
		(3) 相对不安全
	post
		(1) url地址栏不可见 长度默认不受限制
		(2) 相对安全
enctype 提交的类型
	enctype属性 在表单有文件上传的时候 需要设置值 值为multipart/form-data

2、input 标签

<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。

具体在下面有详解：

如：

<input type="text" name="username">

3、 select 标签创建下拉列表。

属性：

*name属性:定义名称,用于存储下拉值的
disabled 当该属性为 true 时，会禁用该菜单。

内嵌标签：

*<option> 下拉选择项标签,用于嵌入到<select>标签中使用的;

属性：

*value属性:下拉项的值
*selected属性:默认下拉指定项.

4、 *textarea 多行的文本输入区域

属性：

* name :定义名称,用于存储文本区域中的值。
*cols ：规定文本区内可见的列数。
*rows ：规定文本区内可见的行数。

5、input 标签

搭配label标签使用

label 可以使标签内的区域指向label标签for属性指代的对象的事件。

实例：

<label for="male">Male</label>
<input type="radio" name="sex" id="male" />

*type属性:表示表单项的类型:

值如下:

text:单行文本框
password:密码输入框
checkbox:多选框注意要提供value值
radio:单选框注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:表单隐藏域,是要和表单一块提交的信息,但是不需要用户修改

七、HTML中HEAD头部设置(了解)

设置网页编码：

<meta charset="utf-8"/>

自动刷新：

<meta http-equiv="refresh" content="时间;url=网址" />

关键字：

<meta name="Keywords" content="关键字" />

描述：

<meta name="Description" content="简介、描述" />

站点作者:

<meta name="author" content="root,root@xxxx.com">告诉搜索引擎你的站点的制作的作者；

网页标题：

<title>本网页标题</title>

导入CSS文件：

<link type="text/css" rel="stylesheet" href="**.css"/>

CSS代码：

<style type="text/css">嵌入css样式代码</style>

JS文件或代码：

<script >。。。</script>

设置网页小图标:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

注意：

头标签中的内容不会显示在浏览器中

CSS层叠样式表

一、css的语法

什么是css？

层叠样式表
命名规则：

使用字母、数字或下划线和减号构成，不要以数字开头
格式：

选择器{属性:值;属性:值;属性:值;…}

其中选择器也叫选择符
CSS中注释
```
/* ... */
```

二、在HTML中如何使用css样式（html中嵌入css的方式）

1、内联方式（行内样式）

就是在HTML的标签中使用style属性来设置css样式
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签

2、内部方式（内嵌样式）

就是在head标签中使用<style type="text/css">....</style>标签来设置css样式
格式：

 <style type="text/css">
 	....css样式代码
 </style>

**特点：**作用于当前整个页面

3、外部导入方式（外部链入）

（推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置

格式：
```
<link href="文件名.css" type="text/css" rel="stylesheet"/>
```
- 还可以使用import在style标签中导入css文件。
特点：作用于整个网站

三、**css2的选择符：

1、html选择符（标签选择器）

就是把html标签作为选择符使用
如 p{…} 网页中所有p标签采用此样式

h2{....}  网页中所有h2标签采用此样式

2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

定义： .类名{样式…} 匿名类

其他选择符名.类名{样式…}
使用：<html标签 class="类名">...</html标签>

.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */

p .ps{color:green;} /只有p标签中class属性值为ps的才采用此样式/

注意：类选择符可以在网页中重复使用

3、Id选择符(ID选择器)

定义： #id名{样式…}
使用：<html标签 id="id名">...</html标签>

注意：id选择符只在网页中使用一次

选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]

4、关联选择符（包含选择符）

格式：选择符1 选择符2 选择符3 …{样式…}
例如： table a{…} /*table标签里的a标签才采用此样式*/

h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

5、组合选择符（选择符组）

格式：选择符1,选择符2,选择符3 …{样式…}

h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

6、*通配符（全局选择器）

说明：

通配符的写法是“*”，其含义就是所有元素。

用法：

常用来重置样式

*{padding:0; margin:0;}

7、伪类选(伪元素)择符：

格式：标签名:伪类名{样式…}

 a:link {color: #FF0000; text-decoration: none} 	    /* 未访问的链接 */

 a:visited {color: #00FF00; text-decoration: none} 	    /* 已访问的链接 */

 a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */

 a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

例如：

a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。

伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态

优先级:行内->css3选择器->id->class->html->html属性

四、 CSS3中的选择器

关系选择器：

div>p 选择所有作为div元素的子元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后面的所有兄弟元素p

属性选择器：

[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。

结构性伪类选择器：

伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
:before设置在对象前（依据对象树的逻辑结构）发生的内容。
:after设置在对象后（依据对象树的逻辑结构）发生的内容。

span:before{
    content: '必须存在的属性';
    display: block;
    border:1px solid red;
}
span:after{
    content: '必须存在的属性';
    display: block;
    border:1px solid red;
}

五、CSS中常用的属性：

1、color颜色属性：

color 英文单词

{color:red;}

2、字体属性： font

font
*font-size: 字体大小：20px，60%基于父对象的百分比取值
*font-family：字体：宋体，Arial
*font-weight：字体加粗：bold

3、文本属性：

*text-align: 文本的位置：left center right
*text-decoration: 字体画线：none无、underline下画线，line-through贯穿线
*line-height：行高
*color：字体颜色

5、背景属性：background

*background-color: 背景颜色
*background-image: 背景图片

上一篇： PHP 网络基本概念

下一篇： Web开发：CSS和

Document

2.爬虫必备基础知识(html+css)

文章目录

HTML(HyperText Markup Language)

前言

一、什么是HTML？

二、HTML的主体标签

三、HTML的标签

1、 文本标签

2、 图片标签

3、路径

4、 超链接

5、 列表

无序列表*

有序列表

自定义列表

6、 HTML注释

四、分帧

1、定义和用法

2、可选的属性

五 TABLE表格

1、属性：

2、标签：

六 FORM表单

1、 form属性

2、input 标签

3、 select 标签创建下拉列表。

内嵌标签：

属性：

4、 *textarea 多行的文本输入区域

5、input 标签

七、HTML中HEAD头部设置(了解)

CSS层叠样式表

一、css的语法

二、在HTML中如何使用css样式（html中嵌入css的方式）

1、内联方式（行内样式）

2、内部方式（内嵌样式）

3、外部导入方式（外部链入）

三、**css2的选择符：

1、html选择符（标签选择器）

2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

3、Id选择符(ID选择器)

4、关联选择符（包含选择符）

5、组合选择符（选择符组）

6、*通配符（全局选择器）

7、伪类选(伪元素)择符：

例如：

优先级:行内->css3选择器->id->class->html->html属性

四、 CSS3中的选择器

关系选择器：

属性选择器：

结构性伪类选择器：

五、CSS中常用的属性：

1、color颜色属性：

2、字体属性： font

3、文本属性：

5、背景属性：background

1、文本标签

2、图片标签

4、超链接

5、列表