【前端基础--1】

为后面爬虫打基础

使用Visual Studio Code（VS Code）

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

网页基础

创建一个html网页

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

书写网页模板

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

注释

Ctrl+？

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

标签

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

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

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

html 复制代码

<!DOCTYPE html>
<!-- 规定这个网页是什么文档类型 -->
<html lang="en">
    <!-- 
    html：网页根标签开始 
    lang(属性)：表示网页字体语言
    en：英文网页
    zh-cn：中文网页'-->
<head>
    <!-- head：网页头标签   给浏览器看的内容 -->
    <meta charset="UTF-8">
    <!-- 
    meta：辅助网页标签
    charset：字符编码格式
    utf-8：万国码/通用码
    防止网页乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 
    name：描述属性
    viewport：初始化浏览器操作
    content：内容属性
    width：宽度初始化浏览器的宽度
    device-width：设备宽度
    initial-scale=1.0：初始化浏览器窗口缩放比例
    1.0：表示100%
    /适配当前设备宽度/
     -->
    <title>Document</title>
    <!-- title：标题标签 -->
</head>
<body>
<!-- body：网页身体标签   给用户展示的区域 -->
</body>
</html>
<!-- 网页根标签结束 -->

常用标签

**1.**div标签

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

**3.**p文本段落标签

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

html 复制代码

<body>
    <!-- div标签/盒子标签 -->
    <div>盒子标签</div>
    <!-- 标题标签 -->
    <!-- 一级标题标签尽量只在这个网页出现一次 -->
    <h1>一级标题</h1>
    <!-- 二级或其他级标签都可以出现多次 -->
    <h2>二级标题</h2>
    <h6>六级标题</h6>
    <!-- p文本标签 -->
    <p>文本段落标签  单行显示</p>
    <!-- span包裹文字标签 -->
    <span style="color: pink;">span我啊，是可以在一行显示出来的</span>
    <!-- p标签里面不可嵌套其他块级标签 如div h1-h6等 -->
    <p>嵌套<span>lala</span></p>
</body>

**5.**a超链接标签

html 复制代码

<!-- 超链接（可以放在p标签里面）  href：超链接跳转的地址/图片等 -->
<a href="网站链接">点击这里的文字会跳转到该链接的网站</a>
    <!-- href 可以放网络路径也可以放本地路径
        相对路径访问方式：./文件名.html  (同一文件夹下)
                        ../ ：(找上一级文件的内容)
        绝对路径访问方式：从什么盘开始一直到文件后缀名结束
        （最好不要用绝对路径的访问方式，每一个人电脑的盘内容不一样）
     -->

6. 换行标签

html 复制代码

<h1 id="top">顶部文字</h1>
    <br>
    <br>
    <br>
    <!-- 添加锚点 -->
    <a href="#top">点击回到顶部</a>
    <!-- a标签的target属性:指定打开位置 -->
    <a href="网站链接" target="_self">点击这里在当前页面中打开</a>
    <a href="网站链接" target="_blank">点击新开标签页,可以开多个</a>
    <a href="网站链接" target="_new">点击这里在当前页面中打开，只能开一个（但是有的网站会强制新开多个）</a>

**7.**img图片标签

html 复制代码

<!-- img用来放网页中展示的图片 -->
<img src="在这里放图片地址" alt="这里写图片描述/提示" title="当鼠标移到这里就会提示相应文字" width="修改图片宽度" height="修改图片高度">
    <!-- 如果只修改图片的高/宽，图片就会按照比例相应缩放 -->

**8.**列表标签

有序/无序/自定义列表

html 复制代码

    <!-- ol有序列表（默认数字序号，可通过type属性更改（type='a',字母排序)（type='I',罗马数字排序） -->
    <ol>
        <li>第一条(1.)</li>
        <li>第二条(2.)</li>
    </ol>
    <!-- ol标签规范：子标签必须是li标签 -->
    
    <!-- ul无序列表（子标签也必须是li标签） -->
    <ul type="circle">
        <li>内容前面</li>
        <li>是圆点点</li>
    </ul>
    <!-- 可通过type属性更改，disc:实心黑点，circle：空心圆点，squ：实心方块，none：不显示 -->
    <!-- dl自定义列表，dt：自定义列表题目，dd：列表项目 -->
    <dl>
        <dt>第一大点</dt>
        <dd>第一大点的第一小点</dd>
        <dd>第一大点的第二小点</dd>
        <dt>第二大点</dt>
    </dl>
    
    <!-- 列表之间可以多个嵌套 -->
    <ul>
        <ol>
            <li>123</li>
            <li>
                自定义
                <dl>
                    <dt></dt>
                </dl>
            </li>
        </ol>
    </ul>

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

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

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

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

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

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

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

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

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

特殊符号标签

< 小于号<

> 大于号>

¥ 人民币符号￥

  空格符

css基础样式

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

行内样式

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

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

优点：书写简单

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

内部样式

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

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

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

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

外部样式

先单独创建一个文件并且文件后缀名.css
再通过<link rel="stylesheet" href="./文件名.css">导入

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

缺点：书写较麻烦

初级选择器

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

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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

也可以这样多调用

html 复制代码

<div class="text text2"></div>

4.后代选择器

css 复制代码

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

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

html 复制代码

<div id="wap"><p class="ip"></p></div>

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

css 复制代码

        *qq{
            color: purple;
        }

6.子级选择器

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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