为后面爬虫打基础

使用Visual Studio Code（VS Code）

https://code.visualstudio.com/#alt-downloads

网页基础

创建一个html网页

新建一个文件文件名后缀.html

书写网页模板

1. html:5 + 回车键（或者Tab键）
2. 英文感叹号! + 回车键

注释

Ctrl+？

运行前记得先保存。（或者设置自动保存）

标签

由包裹的关键字称作标签，内部也有属性值。

单标签：只有一个开头的标签

双标签：有开头有结束区分：（/结束符）

常用标签

1.div标签

2.h系列标签（h1~h6）

3.p文本段落标签

4.span包裹文字标签 可以在一行显示

盒子标签
一级标题
二级标题
六级标题
文本段落标签单行显示
span我啊，是可以在一行显示出来的
嵌套lala

5.a超链接标签

点击这里的文字会跳转到该链接的网站

6.
换行标签

顶部文字



点击回到顶部点击这里在当前页面中打开点击新开标签页,可以开多个点击这里在当前页面中打开，只能开一个（但是有的网站会强制新开多个）

7.img图片标签

8.列表标签

有序/无序/自定义列表

第一条(1.)
第二条(2.)
内容前面
是圆点点
第一大点
第一大点的第一小点
第一大点的第二小点
第二大点
123
自定义

9.加粗标签 （视觉上加粗）

加粗标签（突出重要性标签，更容易被搜索引擎找到）

10.文本倾斜标签 （视觉上倾斜）

文本倾斜标签（突出重要性标签，更容易被搜索引擎找到）

11.文本下划线标签 （视觉上加了下划线）

文本下划线标签（突出重要性标签，更容易被搜索引擎找到）

12.删除线标签 （视觉上加了删除线）

删除线标签（突出重要性标签，更容易被搜索引擎找到）

13.语义化标签:为了更好的规范而存在(以w3c为规范)

特殊符号标签

< 小于号<

> 大于号>

¥ 人民币符号￥

空格符

©版权符

css基础样式

css 层叠样式表 修饰网页内容 文字大小 颜色 排版 高宽等

行内样式

写法：直接写在标签属性中

优点：书写简单

缺点：不利于维护，不能重复利用，结构和样式分离

内部样式

写法：直接写在html的文档里 通过style标签

style标签通常会放在head标签中的title下方

优点：部分结构和样式分离，比较利于维护

缺点：没有真正的结构样式分离

外部样式

1. 先单独创建一个文件 并且文件后缀名.css
2. 再通过导入

优点：结构和样式进行分离，可以重复利用

缺点：书写较麻烦

初级选择器

1.标签名选择器 标签名{}

/* 标签名选择器 */p{color: pink;}/* 选择器{属性：属性值；属性2：属性值2；} */

2.id选择器#id名{} 使用：(命名是唯一的)

/* id选择器 */#bos{color: red;}

3.类名选择器.类名{}使用：

/* 类名选择器 */.text{color: blue;}

也可以这样多调用

4.后代选择器

#wap .ip{font-size: 20px;}

父代用id=’id名’调用，子代用class=’类名’来调用

5.通配符所有的内容都会变色

*qq{color: purple;}

6.子级选择器

/* 选择到wrap类名的子级-->p标签 */.wrap>p{color: pink;}

7.相邻兄弟选择器与div标签相邻的p标签颜色改变，但中间如果还有标签则不会改变。

/* 相邻兄弟选择器 */div+p{color: blue;}

8.同级兄弟选择器 即便p标签与div标签没有相邻，颜色也可以改变。

/* 同级兄弟选择器 */div~p{color: skyblue;}

9.并列/合并选择器都改变颜色了

/* 并列/合并选择器 */div, span, p{color: darkblue;}

10.交集选择器 找到p标签中有text类名的标签

/* 交集选择器 */p.text{color: aqua;}