【前端基础--1】

为后面爬虫打基础

使用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  层叠样式表   修饰网页内容 文字大小 颜色 排版 高宽等

行内样式

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

<标签名 style="css代码">

优点：书写简单

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

内部样式

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

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

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

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

外部样式

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

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

缺点：书写较麻烦

初级选择器

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

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

2.id选择器     #id名{}           使用：<标签名 id='id名'>     (命名是唯一的)

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

3.类名选择器     .类名{}         使用：<标签名 class='类名'>

        /* 类名选择器 */
        .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;
        }