2.爬虫必备基础知识(html+css)
文章目录
HTML(HyperText Markup Language)
前言
软件架构
B/S
Browser/Server 网站
C/S
Client/Server QQ
HTML的简介、发展史：
万维网联盟（W3C）维护。包含HTML内容的文件最常用的扩展名是.html，但是像DOS这样的旧操作系统限制扩展名为最多3个字符，所以.htm扩展名也被使用。虽然现在使用的比较少一些了，但是.htm扩展名仍旧普遍被支持。
相关历程：
-
超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)
-
HTML 2.0 – 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
-
HTML 3.2 – 1996年1月14日,W3C推荐标准
-
HTML 4.0 – 1997年12月18日,W3C推荐标准
-
HTML 4.01(微小改进) – 1999年12月24日,W3C推荐标准
-
ISO/IEC 15445:2000(“ISO HTML”)–2000年5月15日发布,基于严格的HTML4.01语法,是国际标准化组织和国际电工委员会的标准
-
XHTML 1.0 – 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
-
XHTML 1.1 – 于2001年5月31日发布
-
XHTML 2.0
- XHTML 1.0 – 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
-
XHTML – W3C工作草案
网站：
把所有的网站资源文件（HTML,CSS,JS,图片,视频等）整合到一起(的一个文件夹)
编程语言：解释型和编译型
解释型：HTML、PHP、Javascript，Python
编译型语言：C、C++、Java
WEB前端：HTML+CSS+JavaScript
HTML：结构标准，超文本标记语言，负责通过标签来表达网页的页面结构。
css：外观标准，层叠样式表标记语言，负责通过属性标记来表达网页的外观效果。
javascript: 行为标准，js，负责通过编程代码来表达网页的行为特效。
HTML5:
HTML5+CSS3+Api+JavaScript+框架
一、什么是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: 背景图片