分类目录未分类

前端         - 2023.9.15 -


    VScode 下载地址　https://code.visualstudio.com/

    https://www.w3school.com.cn/tags/index.asp         // html 使用文档

VScode 使用

    变中文
        扩展(Extensions) --> chinese(搜索) --> install --> 右下角提示 重启
    中英文之间切换
        Ctrl+Shift+p  -->  configigure display language

    扩展 插件
        1. Chinese(Simplified)Language Pack   // 中文语言包
        2. Code Spell Checker                 // 拼写检查器  自动检测单词是否正确
        3. HTML CSS Support                   // 样式表的 自动补全
        4. JavaScript(ES6)code snippets       // 支持ES6 语法提示
        5. Mithril Emmet                      // 补全代码
        6. Path Intellisense                  // 路径提示插件
        7. Vue 3 Snippets                     // 快速创建常用的Vue组件和指令 可能与其他有冲突
        8. VueHelper                          // 最好的vue代码提示插件
        9. Auto Close Tag                     // 自动闭合HTML/XML标签
        10. Auto Rename Tag                   // 自动完成另一侧标签的同步修改
        11. beautify                          // 格式化 html js css
        12. Bracket Pair Colorizer            // 给括号加上不同的颜色
        13. open in browser                   // 快速打开浏览器  Alt + B
        14. Vetur                             // Vue多功能集成插件 包括 语法高亮 智能提示 错误提示 自动补全等
        15. InteIIiJ IDEA Keybindings         // 在 VScode中使用 IDEA快捷键

    快捷键
        0. !                          // 生成 网页的 基本配置
        1. Shift + Alt + F            // 格式化代码
        2. Alt + ↓                    // 向下移动一行
        3. Shift + Alt + ↓            // 复制一行
        4. Ctrl + H              
        5. Ctrl + Enter               // 光标指向下一行
        6. h$*5                       // 生成  1 - 5 标题标签
        7. Alt + b                    // 打开浏览器查看结果  需要安装 open in browser插件
        8. ul>li*3                    // 生成无序列表
        9. table>tr*3>td*2{单元格}     // 创建三行两列的表格 td里面的 文本信息是 单元格
        10. Ctrl + B                  // 隐藏目录栏

    注: 
        使用 VScode 编辑 vue 代码的时候 不能使用 快捷键 添加注释 首先检查有下角 选择语言模式是不是 vue类型  
        VScode 默认不支持vue 类型 如果其中没有vue类型 可能是插件冲突
        卸载有关 vue的插件. 重新按照 vetur 及 VueHelper插件


Avue 

    一. 在 Avue 中 添加 按钮 并 弹出窗口 需要的代码
        <avue-crud                       // 按钮 需要在 <avue-crud> 标签中添加
            <template #menu-left>        // 添加一个按钮 有多个按钮 在里面添加 <el-button>  其中 #menu-left 在窗口的 左侧添加按钮
                <el-button type="primary" v-if="permission.recruitBasisAmount_modify" @click="handleRecruitBasisAmount">批量修改招募基础金额</el-button>
            </template>
        </avue-crud>

        // 对话框窗口信息 (点击按钮后 弹出的 对话框窗口信息) 在 <avue-crud> 外添加
        <el-dialog :title="'批量修改招募基础金额'" append-to-body v-model="boxRecruitBasisAmount" width="600px" :fullscreen="dialogFull" v-if="boxRecruitBasisAmount">
          <div class="avue-crud__dialog__header">
            <div style="padding-right:40px" @click="dialogFull ? dialogFull = false : dialogFull = true">
              <i class="el-icon-full-screen"></i>
            </div>
          </div>
          <avue-form :option="optionRecruitBasisAmount" v-model="recruitBasisAmountModel"></avue-form>
          <div style="text-align:center; color: #f6a60c;">
            招募基础金额为普通合伙人每笔订单收益金额,当每日交易单数满足系统设置交易单数时,(普通合伙人分红金额=招募基础金额*单数)
          </div>
          <div style="text-align:center; margin-top: 10px">        // 新增了 确定 和 取消 按钮 隐藏溜原来的 提交 按钮
            <el-button type="primary" @click="confirmRecruitBasisAmount">确定</el-button>
            <el-button type="primary" @click="cancelRecruitBasisAmount">取消</el-button>
          </div>
        </el-dialog>

        <script>
            import { recruitBasisAmountModify } from "@/api/account/custReachStandardCaptain";  // recruitBasisAmountModify 导入 发送后端的接口
            import { optionRecruitBasisAmount } from "@/option/account/captain";   // 导入 option 这里option在另一个文件中. 如果在同一文件中则不用导入

        export default {
          data () {
          return {
              optionRecruitBasisAmount: optionRecruitBasisAmount,         // 指明 option 
              recruitBasisAmountModel: {},                                // 代表 option 从后端 获取到的数据
              boxRecruitBasisAmount: false,                               // 对话框窗口 默认设置为关闭

        methods: {
            // 批量修改招募基础金额  点击按钮后的 操作
            handleRecruitBasisAmount(){
              if (this.selectionList.length === 0) {             // 如果没有选择复选框 则给出提示
                this.$message.warning("请选择需要修改的合伙人");
                return;
              }
              this.recruitBasisAmountModel = {};                 // 在 option 中 字段中的数据
              this.boxRecruitBasisAmount = true;                 // 显示 弹出窗口对话框    
            },
            confirmRecruitBasisAmount(){                         // 点击确定按钮后的操作
              const basisAmount = this.recruitBasisAmountModel.recruitBasisAmount ;   // 获取文本框或下拉列表框中的数据
                                                             // .recruitBasisAmount 是 option 中 字段名 prop: "recruitBasisAmount", 的数据
              const reg = /^\d{1,4}(\.\d{1,4})?$/;           // 正则表达式规则，确保输入为数字（整数或小数,小数点前后个最多四位）最多万位以下
              if (!reg.test(basisAmount)) {                  // 检测 获取到的数据 是否符合
                this.$message.warning('输入有误,请重新输入');
                return;
              }
              const custIdArr = this.selectionList.map(item => item.custId).filter(id => id);
              const custId = custIdArr.join(',');            // 数组 转成 字符串 使用 逗号 分割
              recruitBasisAmountModify({                     // 调用 传入后端的接口 把 数据 传递给后端
                custId: custId,
                basisAmount: basisAmount,
              })
              .then(response => {                            // 前端返回 成功后的 处理
                console.log(response.data);
                this.$message.success('修改成功');
                this.boxRecruitBasisAmount = false;
                this.onLoad(this.page, this.query);           // 重新加载当前页面
              })
              .catch(error => {                               // 前端返回 失败后的 处理
                console.error('修改失败', error);
                this.boxRecruitBasisAmount = false;
              });
            },
            cancelRecruitBasisAmount() {                      // 点击 取消按钮 的操作
              this.recruitBasisAmountModel = {};
              this.boxRecruitBasisAmount = false;
            },


        custReachStandardCaptain.js
            export const recruitBasisAmountModify = (params) => {
              return request({
                url: '/api/fss-account/CustReachStandardCaptain/recruitBasisAmountModify',
                method: 'get',
                params: {
                  ...params,
                }
              })
            }


        captain.js
            export const optionRecruitBasisAmount = {
              menuBtn: false,
              column: [
                {
                  label: "招募基础金额",
                  prop: "recruitBasisAmount",
                  rules: [
                    {
                        required: false,
                        message: "请输入招募基础金额",
                        trigger: "blur",
                    },
                  ],
                  labelWidth: 190,
                  span: 24,
                },
              ]
            };


        注: 
            this.selectionList                                             // 可以获取到 页面中 复选框中的 数据
            this.selectionList.length                                      // 复选框中的 数据 的长度
            this.selectionList.map(item => item.custId).filter(id => id);  // 可以获取到 custId
            this.$message.warning("请选择需要修改的合伙人");                 // 警告 提示信息  会在页面显示警告信息
            const reg = /^\d{1,4}(\.\d{1,4})?$/;
                reg.test(basisAmount)                                      // 检测 正则的规则是否匹配
            custIdArr.join(',');                                           // 数组类型 转成 字符串
            this.onLoad(this.page, this.query);                            // 重新加载当前页面



    Avue3 报错解决: 
        1. 错误提示: TypeError: Cannot read properties of null (reading 'style') at TableLayout.setHeight 
            在Avue中  新添加的页面vue2 转成vue3 会出现这种情况
            解决: 在 option 中  calcHeight: "auto",    去掉就好


标签

    骨架标签
        <!DOCTYPE html>        // H5 的声明 网页必备组成部分 用于浏览器识别

        <html>
            <head>
                <title>java html python</title>      // title标签是 head里必须包括的 一般写关键字 seo优化利于
                <meta charset="utf-8">               // utf-8 是程序的通用语言
            </head>
        </html>


    标题标签
        <h1>aaaaa</h1>         // 标题标签   1最大   6最小
        <h2>bbbb</h2>
        <h3>cccc</h3>

        <h1 align="left">
        align="left|center|right"    // align 就是一个属性 "left" 是属性值
        标签的属性   在标签<h1 align="left">里面的是属性  不是两个<h1>不是属性</h1>中间的

    段落格式标签
        <p></p>                      // 段落标签      双标签  
        <br>                         // 换行标签           单标签 <br /><br>  都可以
        <hr>                         // 水平线标签
            color="red" : 设置水平线的颜色
            width="300px" : 设置水平线的长度
            size="20px" :  设置水平线的高度
            align="left|right": 设置水平线的对齐方式 默认居中 可取值 left|right

    图片标签
        <img>                    // 图片标签
            src="1.jpg"          // 图片路径
            alt="图片走丢了..."  // 当图片路径不存在时 会显示碎裂的效果并 加上这段文字
            width="300px"        // 规定图片的宽度 单位是 px  另一个但是百分比 相当于父元素的百分比
            height="100px"       // 高度 设置图片会变形 一般不设置这个属性 宽度和高度设置其中一个另一个会等比例缩放
            title="哇"           // 鼠标悬停在图片上给于的提示信息

    超链接标签
        <a></a> 超链接标签   可以嵌套其他标签 如 <img>实现图片跳转
            href="#"      // 跳转本页

            <a href="https://www.baidu.com/">超链接</a>  // 超链接标签 地址也写全 否则不能跳转
                href="https://www.baiu.com"   // 必须的属性 跳转的链接  如果没有 会以文本显示
        
        href="https://baidu.com"  // 跳转的链接
        target="_blank"           // 打开方式
            _blank                // 新开窗口
            _self                 // 当前窗口  默认的

    文本标签                      // 可以互相嵌套
        <em>大米粥</em>           // 定义着重文字
        <b>大米粥</b>             // 定义粗体文本
        <i>大米粥</i>             // 定义斜体字
        <strong>大米粥</strong>   // 定义加重语气
        <del>大米粥</del>         // 定义删除字
        <span>大米粥</span>       // 没有特定含义 可在CSS中方便调整样式

    有序列表                      // 可以嵌套列表
        <ol type="I">                     // 定义一个有序列表  有顺序标号
            <li>哈哈</li>
            <li>嘎嘎</li>
        </ol>
            type="I"              // <ol></ol> 的属性 可调整 显示样式 默认 1 2 3

    无序列表
        <ul type="none">                     // 一般多用于 导航 可用CSS调整
            <li>哈哈</li>
            <li>嘎嘎</li>
        <ul>
            type="disc|circle|square|none"   // 默认disc 小黑原点|实心圆|空心圆|什么都没有

    表格标签: 
        <tr></tr> 行
        <th></th> 表头  就是 行里面的文字 加粗 居中显示
        <td></td> 单元格 列 (一般所有列的数目相等)
            <table>                        // 三行两列
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
            </table中属性>

            table中属性
                border="1"            边框
                cellspacing="0"       设置边框中间的空白是0
                width="400px"         宽度 px可以省略
                height="200px"        高度

            表格合并 <td> 中的属性
                colspan="3"         // 水平合并3个单元格 合并3个列 有这个属性就少写2个列
                    <td colspan="2">单元格</td>    // 此单元格 占两个位置
                    <td>单元格</td>                // 一共3个列
                rowspan="2"         // 垂直合并2个单元格  合并以坐上为基准 其他删除

    Form表单
    <form action="" method="get"></form>  // 表单容器
        action="https://www.baidu.com"    // 必须有 请求给到后端服务器
        method="get|post"                 // 必须有 请求的方式 get提交的数据url可以看到,post看不到  默认是get

    <form action="https://www.baidu.com" method="get|post" name="myform">
        <input>                                       // 输入框  默认type是 text类型
        <input type='text'>                           // 文本输入框 type是表单类型
        <input type="submit">                         // 提交按钮
        用户名:<input type="text" name="username">     // 文本输入框 那么值是标记 用于调用
        密码:<input type="password" name="pwd">        // 密码输入框
    </form>

    <input>   单标签   用于 form表单里面
        <input type="text" name="username">
            name="username"                  // 用于用户名或密码必须有 名字 用于后面调用 样式等
            type='text|password|submit'      // 必须有 类型 定义 <input>标签的类型
                text       文本输入框
                password   密码输入框
                submit     提交按钮
            value="登录"                     // 更改 提交按钮的 文本 把提交改成登录. 配合submit使用  

    块元素  换行  独占一行(自上而下垂直排列) 可以设置 width height 属性 一般块元素可以包含行元素和其他块级元素
        
        <div></div>
        <form action=""></form>
        <h1></h1>
        <hr>
        <p></p>
        <table></table>
        <ol></ol>
        <ul></ul>

    内联元素(行内元素)  不换行 行元素会不占页面中的一行, 只占自身的大小,可以设置width.  
                       不能设置height 一般内联元素包含内联元素,不包含

        <a href="#"></a> 
        <b></b>
        <em></em>
        <i></i>
        <span></span>
        <strong></strong>

        行内块级元素     不换行   能够识别宽高

        <button></button>
        <img src="" alt="">
        <input type="text">

    容器标签
        <div> 容器 结构标签       本身没有任何效果 可以理解为 没有边的方框

    视频 video
        <video src="1.mp4"></video>
            controls="controls"     // 播放控件 如果 属性 = 属性值 可把属性值省略 如下
        <video src="./video/1.mp4" controls width="200px"></video>

    音频 audio
        <audio src="" controls></audio>      // 用法跟video 一样


    div 盒子模型
        <div></div>

        盒子模型组成:
            content: 内容区域
            padding: 内边距区域
            border:  边框区域

            margin: 外边框区域    不属于 盒子模型里面的  外边距
        
        div 中 CSS的样式
        div{
                width: 200px;                 // 盒子的宽  定义了内容区域的宽
                height: 200px;                // 盒子的高  定义了内容区域的高
                box-sizing: border-box;       // 边界 如果有此代码 上面定义的宽高是 整个盒子的大小 前三区域的
                background-color: #33cfeb;    // 盒子的背景色 便于观察而已 前三区域的
                padding: 20px 20px 20px 20px; // 内边距大小 分别是 上 右 下 左 的距离 如果都相同 可只写一个 padding: 20px;
                border: 10px solid red;       // 边框大小 solid red 线条的颜色
                margin: 30px 30px 30px 30px;  // 外边距大小 不属于盒子内部的大小 也是上右下左的顺序 如果指定一个值是 上右下左
                margin: 0 auto;               // 如果指定三个值是 上 右 下   如果指定两个值是 上下 和 左右 . 
            }                                 // 此设置是居中 上下是0 左右自动设置 自动就是居中


CSS样式:

    行内样式: 写在标签的style属性中
    内嵌样式: 写在style标签中(可以写在   页面的任何位置,但通常约定写在head标签中)
    外联样式: 写在一个单独的.CSS文件中(需要通过link 标签在网页中引入)

    style  是 css 的样式 行内样式和内嵌样式
    
    选择器
        <h1 id="idname" class="cls">set id CSS<h1/>
        元素选择器
            h1 { ... }
        id选择器   根据id的属性 设置   id是唯一值
            #idname { ... }
        类选择器   根据class属性 设置  class 可以重复
            .cls { ... }
        优先级: id > 类 > 元素

    属性

        color: 颜色的三种表示方法
            color: hotpink;
            color: rgb(155, 0, 155);
            color: #2235ff
        font-size: 24px;
        text-decoration-line
            a {text-decoration-line: none;}        // 定义 超链接 没有下划线


JavaScript                        // 用于和 后端 交互

    <script></script>             // 在html页面的任意地方 放置任意数量的<script>  一般会放在<body>底部
    <script>                      // 第一种 内部脚本 直接写 js 代码
        alert('hello js');        // 代码结尾以 ; 结尾 但是可以省略 不建议省略
    </script>
    
    <script src="./js/demo.js"></script>    // 第二种 外部脚本 同css一样 在文件中不用写<script></script>


    注释: //  和    /* ... */

    { ... }  代码块  作用域

    输出语句
        window.alert("aaaaaa");       // 提示框
        alert("aaaaaa");              // 上面的 window 可以省略
        document.write("bbbbbb");     // 输出到 html 页面
        console.log("ccccccc");       // 输出到 控制台  控制台在 F12的console页面

    变量的定义
        var 定义一个全局变量  可重复声明  即使在 代码块中{  }声明变量 在外面也可调用
            var a = 10;                   // var 是定义一个全局变量 并赋值 10  
            a = "张三";                    // JS是弱类型语言 变量可存储不同类型的值
            var a = 100;                   // 可以重复声明
        let 定义一个局部变量  只在代码块中有效 不可以重复声明
            let b = 10;
            alert(b);
        const 定义一个常量  不可以改变
            const c = 200;
            alert("c=" + c);

    数据类型
        number:     // 数字     可直接 定义
        string:     // 字符串   使用 单引号或 双引号定义的 是字符串
        boolean:    // 布尔     true false
        null:       // 对象为空 会返回 object 类型
        undefined:  // 当声明的变量未初始化时, 该变量的默认值是undefined
    
    typeof 变量            // 可以获取变量值的类型
        var a = 10;
        alert(typeof a);   // 获取到类型 输出

    运算符                  // 同java一样
        算术运算符: +   -   *    /    %    ++   --
        赋值运算符: =   +=  -=   *=    /=   %=
        比较运算符: >   <   >=   !=    ==   ===         // == 会进行类型转换   ===不会进行类型转换
        逻辑运算符: &&   ||  !
        三元运算符: 条件表达式?true_value:false_value

    类型转换

        字符串转数字 parseInt
            1. 如果是纯数字的字符串 会转换成 数字
            2. 如果开头是数字 中间有字母 只会转换前面的数字
            3. 如果开头是字母 结果为 NaN
            parseInt("100")                   // 将 string 转换成 number
            parseInt("12a45");         // 结果为 12  会从头匹配 遇到字母 取之前匹配的值
            parseInt("a45");           // 结果为 NaN   不是一个字母 not a number 
                var a = '1231456';
                alert("a=" + typeof(a));
                a = parseInt(a);
                alert("a=" + typeof(a));

        其他类型转换为boolean
            1. number: 0和NaN 为false 其他均为 true
            2. string: 空字符串为false 其他均为 true
            3. null 和 undefined: 为 false

    流程控制
        if(0){}         // 这里会把 0 转换成 boolean 类型
        if(null){}
        switch

        for
        while
        do ... while

    函数
        定义函数: 
            1. 定义函数 不需要 指明  参数类型  使用 function 定义函数
            2. 不需要指明 方法返回值 有返回值 直接return就可以
            方式一:
                function 函数名(参数1,参数2){}
            方式二:
                var fname = function (参数1,参数2){}     // 相当于 使用 变量 去接收函数

        调用函数:
            函数名(实际参数列表)
        方式一:
            function add(a,b){
                return a + b;
            }
            var result = add(10,20);
            alert(result);

        方式二:
            var fname = function(c,d){
                return c - d;
            }
            var result2 = fname(50,33,40,50);      // 传参的时候可以传递多个，但是只有前两个能接收，其他忽略
            alert(result2);

        箭头函数:  当函数作为参数的时候 可以简写 函数
            (...) => {...}        // function(...){...}   function可以省略 

    JS对象
      基础对象
        
        1. Array  数组对象
            定义数组对象
                方式一: var 变量名 = new Array(元素列表);
                    # var arr = new Array(1,2,3,4);
                方式二: var 变量名 = [元素列表];
                    # var arr = [1,2,3,4];
            调用数组
                arr[索引]=值;
                # arr[10] = "hello";

                # var arr = new Array(1,3,5,7);
                # alert("第二个元素是：" + arr[1]);
                # alert(arr[9]);                    // 未被赋值的变量的值是 undefined
                # arr[10] = 15;                     // 没有10号索引 也可以赋值 不会报错
                # alert(arr[10]);

            属性 
                length: 获取数组的长度

                for循环遍历数组     遍历数组的所有元素 包括没有值的元素 和 forEach 方法有所区别
                    # var arr= [2,4,6,8,9];
                    # for (let i = 0; i < arr.length; i++) {
                    #     alert(arr[i]);
                    # }
            方法:
                forEach(函数)  遍历数组中的每个有值的元素,并调用一次传入的函数.
                    # var arr= [2,4,6,8,9];
                    # arr.forEach(function(e) {
                    #     console.log(e);
                    # })

                push()     将新元素添加到数组的末尾,并返回新的长度. 
                    # var arr= [2,4,6,8,9];
                    # arr.push(7,8,9);
                    # console.log(arr);
                splice(2,2)   从数组中删除元素.  从第2号索引开始删除  删除2个元素
                    # var arr= [2,4,6,8,9];
                    # arr.splice(2,2);
                    # console.log(arr);

        2. String  字符串对象
            定义数字符串对象
                方式一: var 变量名 =  new String("变量值");
                    # var s = new String("哈哈");
                方式二: var 变量名 = "变量值";
                    # var s = "嘎嘎";

            属性:
                length: 获取字符串的长度
                # var s ="aaaa";
                    # console.log(s.length);
            方法:
                charAt(num.)   返回指定位置的字符
                indexOf(string)  检索字符串位置 查找字符 在字符串中的位置
                    # var s ="abcdefg";
                    # console.log(s.length);
                    # console.log(s.charAt(2));
                    # console.log(s.indexOf("c"));
                trim()     去除字符串两边的空格  返回一个新字符串
                    # var s1 = "  爆米花呀真好吃！ "
                    # var ss = s1.trim();
                    # console.log(s1);
                    # console.log(ss); 
                substring(start,end)       字符串截取  开始索引和结束索引 函头不含尾  空格也算
                    # var s1 = "  爆花米呀真好吃！ "
                    # var s2 = s1.substring(3,6);
                    # console.log(s2);

        自定义对象
            var 对象名 = {
                属性名1: 属性值,
                属性名2: 属性值，
                属性名3: 属性值，
                函数名称: functio(参数){},

            }


            # var user = {
            #     name: "tom",
            #     age: 10,
            #     eat: function(){
            #         alert("吃");
            #     },
            #     play(){              // 函数的 简写方法
            #       alert("玩");
            #     },                   // 最后一个逗号可省略 最好加上
            # }

            # alert(user.name);
            # user.eat();

        3. JSON 对象     与自定义对象大致相同 都是"key": "value",  成对查询 但是需要所有的key都引号
                      以逗号,结尾  在最后一个值的时候 不加 逗号, 
                      在定于数组中最后一个值 不加逗号,
            {
                "key1": "value1",
                "key2": "value2",
                "key3": "value3"

            }

            JSON 中的 value值 的数据类型  及  书写方式
                数字(整数或浮点数)  直接写
                字符串             双引号中   "janice"
                逻辑值             直接写 true false
                数组               方括号中  值加引号 最后一个值不加逗号,   ["北京","上海","广州"]  
                对象               花括号中
                null
                手

        JSON方法     将 json对象 转换成  js的对象
            JSON.parse(json);
                # var jsonstr1 = '{"name":"janice","age":"22"}';
                # var jsonstr2 ='{"name":"Teo","age":"18","addr":["北京","上海","广州"]}';
                # var j = JSON.parse(jsonstr1);
                # console.log(j.name);
                # var jsonstr3 = JSON.stringify(j);
                # console.log(jsonstr3);

      BOM对象 浏览器对象模型
        1. Window       可直接使用 window.  调用
          属性 
            history
            location
            navigator
          方法
            alent()                        弹出 消息框  警告框
            confirm()                      弹出 确认框  带有确定和取消按钮 返回一个 boolean值
                # window.alert("Hello bom");
                # var flag = window.confirm("您确认删除改记录吗?");
                # window.alert(flag);

            setInterval(Function,Number)   定时器 重复调用函数  参数分别是 函数 和  毫秒数
            setTimeout(Function,Number)    定时器 调用函数一次
                # var i = 0;
                # function f(){
                #     i++;
                #     console.log("执行第" + i + "次");
                # };
                # window.setInterval(f,2000);
                # window.setTimeout(f,5000);    

        2. Locaton  地址栏对象
          属性 
            href  获取浏览器的地址
                # var i = location.href;                  // 获取浏览器地址
                # alert(i);
                # location.href = "https://www.baidu.com";  // 可实现跳转

        3. Navigator     浏览器对象
        4. Screen        屏幕对象
        5. History       历史记录对象  上一步  下一步

    DOM 文档对象    把整个 html 的 每一个部分 封装成了对象 通过对象来改变 数据
        Document:  整个文档对象
            document.getElementById('id')            根据 id 属性 获取  返回一个Element 对象
            document.getElementsByTagName('标签')     根据 标签 获取 返回一个数组
            document.getElementsByName('name')        根据 name 属性 获取 返回一个数组   
            document.getElementsByClassName('class')  根据 class 属性 获取 返回一个数组
        
            # <img id="img1" src="./img/news_logo.png">
            # <div class="food">爆米花</div>
            # <div class="food">大米粥</div>
            # <input type="checkbox" name="hobby">旅游
            # <input type="checkbox" name="hobby">学习
            # <input type="checkbox" name="hobby">英语# 

            # var j = document.getElementById('img1');
            # alert(j);
            # var arr1 = document.getElementsByTagName('div');
            # for (let i = 0; i < arr1.length; i++) {
            #     alert(arr1[i]);
            # }
            # var arr2 = document.getElementsByName('hobby');
            # for (let i = 0; i < arr2.length; i++) {
                alert(arr2);
            # }
            # var arr3 = document.getElementsByClassName('food');
            # for (let i = 0; i < arr3.length; i++) {
            #     alert(arr3[i]); 
            # }

            # var v1 = arr1[1];      取出数组的数据 类型为  Element对象
            # v1.innerHTML = "火龙果呀真好吃";    调用           innerHTML 设置或返回元素的内容。

        查询 标签封装成对应属性的方法
            Browser Side --> 参考书 --> HTML对象 --> <div> --> Div 对象支持标准属性和事件 --> 属性 --> innerHTML
            Browser Side --> 参考书 --> HTML对象 --> Image 对象属性

        给 img 换图片  div追加字  input 勾选复选框
            # <img src="./img/1.png">
            # <div>爆米花</div>
            # <div>大米粥</div>
            # <div>棉花糖</div>
            # <div>火龙果</div>
            # <input type="checkbox" name="hobby">睡觉
            # <input type="checkbox" name="hobby">学习
            # <input type="checkbox" name="hobby">发呆

            # var arr1 = document.getElementById('img1');
            # arr1.src = './img/2.png';

            # var arr2 = document.getElementsByTagName('div');
            # for (let i = 0; i < arr2.length; i++) {
            #     const e = arr2[i];
            #     e.innerHTML += "<font color='red'>呀真好吃</font>";           //<font> 可给字体加红色
            # }

            # var arr3 = document.getElementsByName('hobby');
            # for (let i = 0; i < arr3.length; i++) {
            #     const e = arr3[i];
            #     e.checked = true;
            # }

        Element:   元素对象
        Attribute: 属性对象
        Text:      文本对象
        Comment:   注释对象

    JS事件绑定
        两种单机绑定方式
            1. 在标签内 添加 onclick 属性 , 属性值是调用函数  对应函数在 JS中给出即可
            2. 直接在JS中 根据id绑定到标签 element对象调用 onclick 属性, 此属性值是 函数
            # <input type="button" value="不要点我呀！！" onclick="on()">
            # <input type="button" value="点我呀！！" id = "click_me">

            # function on() {
            #     alert("不要点我呀 ...");
            # }

            # var cl = document.getElementById('click_me');
            # cl.onclick = function(){
            #     alert("使劲点呀 ...  ")
            # }

        常用事件
            onclick        鼠标单机事件
            onblur         元素失去焦点
            onfocus        元素获得焦点
            onload         某个页面或图像被完成加载
            onsubmit       当表单提交时触发该事件
            onkeydown      某个键盘的键被按下
            onmouseover    鼠标被移动到某元素之上
            onmouseout     鼠标从某元素移开


..................................................................................................................

VUE
    
    vue2 官网: https://v2.cn.vuejs.org/v2/guide/
        两种方式 引入  vue 
            1. 使用  脚手架
            2. 使用 <script> 引入
                在官网 https://v2.cn.vuejs.org/v2/guide/ --> 下载 vue.js 的开发版本
                参考下面的 根据入门程序中的引入 
        安装 谷歌浏览器的开发者共计 Devtools 工具  
            可以在 此网站 下载  https://chrome.zzzmh.cn/  -->  Devtools
            谷歌浏览器 --> 扩展程序 --> 管理扩展程序 --> 开发者模式 --> 把下载好的拖入即可 --> 打开 开关

        关于 首次 打开 浏览器 --> 控制台的 两个提示
            1. 提示 安装 Devtools 工具 . 安装上面的步骤安装上就会消失.
            2. 提示 不要在成产环境中使用 开发版本. 可以在 Vue.config 配置文件中 改变 productionTip:false 即可
                设置为false以阻止vue在启动时生成生产提示。  // 我用没生效 我也不知道为什么
                <body>
                    <script type="text/javascript" >
                        Vue.config.productionTip = false
                    </script>
                </body>


  VUE 入门程序
    <head>
        <script src="js/vue.js"></script>    // 使用 <script> 引入
    </head>                                  // 引入后 在浏览器的控制台中 键入 Vue  可以看到函数


    <div id="app">
        <input type="text" v-model="message">   // v-model 为 vue中的 指令
        {{message}}
    </div>

    <script>
    new Vue({           // 创建个 vue 对象
        el: "#app",     // el 是 element 简写 意思是 元素 相当于css的 id选择器 把 id是app的标签交到 vue代管
        data: {
            message: "hello vue"
        }
    })

    </script>

    指令
        v-bind       可简化为: 省略v-bing 为HTML标签绑定属性值，如设置href css 样式等
        v-model      在表单元素上创建双向数据绑定
        v-on         为HTML标签绑定事件 click为单机事件
            <script src="js/vue.js"></script>
            <div id="app">
                <a v-bind:href="url">最牛逼的网站！！！！</a>    // url 相当于 变量
                <a :href="url">最牛逼的网站！！！！</a>          // v-bind 可以省略
                <input type="text" v-model="url">  // 双向数据绑定 会获取 下面的 url的值 如果这个值改变了 其他值也会跟着改变
                <input type="button" value="点我点我！！" v-on:click="handle()">
                  <input type="button" value="点我点我啊！！" @click="handle()">      // v-on 的缩写
            </div>

            <script>
            new Vue({
                el: "#app",
                data: {                                      // 数据模型中 声明 变量值的地方
                    url: "https://www.syk.my"            // 定义 url 的值
                },
                methods: {                                   // 声明方法的地方 与变量值的地方同级别             
                    handle: function(){                      // handle 方法
                        alert("讨厌... 你点我了一下...");
                    }
                }
            })
            </script>

        v-if
        v-else-if    条件性的渲染某元素，判定为true时渲染，否则不渲染
        v-else
        v-show       根据条件展示某元素，区别在于切换的是display属性的值
            <script src="js/vue.js"></script>

            <div id="app">
                <input type="text" v-model="age">
                <span v-if="age <= 40">年轻人</span>
                <span v-else-if="age > 40 && age < 60 ">中年人</span>
                <span v-else>老年人</span>
                <br><br>
                <input type="text" v-model="age">
                <span v-show="age <= 40">年轻人</span>                  // v-show的使用
                <span v-show="age > 40 && age < 60 ">中年人</span>
                <span v-show="age > 60">老年人</span>
            </div>

            <script>
                new Vue({
                    el: "#app",
                    data: {
                        age: 75,
                    },
            })
            </script>

        v-for        列表渲染，遍历容器的元素或者对象的属性
            <script src="js/vue.js"></script>

            <div id="app">
                <div v-for="addr in addrs">{{addr}}</div>  
            </div>           // 第一个addr 是 变量 名字随便起  in 是关键字固定  addrs是数组的名字

            <script>
                new Vue({
                    el: "#app",
                    data: {
                        addrs:["北京", "上海", "西安", "成都", "深圳"]
                    },
                })
            </script>
            
    vue 的生命周期   vue从创建到 销毁的 都会执行对应的方法
        | 状态          | 阶段周期 |
        | ------------- | -------- |
        | beforeCreate  | 创建前   |
        | created       | 创建后   |
        | beforeMount   | 挂载前   |
        | mounted       | 挂载完成 |
        | beforeUpdate  | 更新前   |
        | updated       | 更新后   |
        | beforeDestroy | 销毁前   |
        | destroyed     | 销毁后   |

    mounted  方法 

    Ajax 是 异步请求 早期的技术 
    Axios  封装了 Ajax 简化了Ajax操作

        使用 Axios 发送 get 和 post 请求
            <script src="js/axios-0.18.0.js"></script>

            <input type="button" value="get" onclick="get()">
            <input type="button" value="post" onclick="post()">

            <script>
                function get(){
                    axios({
                        method: "get",
                        url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list"
                    }).then(result => {
                        console.log(result.data);
                    })
                }

                function post(){
                    axios({
                        method: "post",
                        url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
                        data: "id=1"
                    }).then(result => {
                        console.log(result.data);
                    })
                }
            </script>

        使用 axios的 get 和 post方法 简化 代码
            <script>
                function get(){
                    axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {
                        console.log(result.data);
                    })
                }

                function post(){
                    axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then(result => {
                        console.log(result.data);
                    })
                }
            </script>


    Vue 项目 创建
        # node -v                             // 需要安装node 环境
        # npm config get prefix               // 获取 nodejs 安装目录
        # npm install -g @vue/cli             // 安装vue 脚手架 功能
        # set-ExecutionPolicy RemoteSigned    // 修改 power shell 权限
        # vue --version

        # vue create vue-project         // 第一种 命令行 创建vue项目
        # vue ui                         // 第二种 图形化界面 创建vue项目

        .vue 文件  组成
        <template>       模板部分 由它生成HTML代码
        </template>

        <script>        JS 代码 控制模板的数据来源和行为
        </script>
        <style>         CSS样式部分
        </style>

        public/index.html      入口文件 在这里定义了div id="app" 引入main.js 
        src/main.js  入口文件   在此文件中 引入 App.vue 组件 代码由 vue 接管
        src/App.vue  入口文件

    安装 Vue element
        https://element.eleme.cn/#/zh-CN/component/installation    // 官网

        # npm install element-ui@2.15.3          // 在项目根目录下安装
        # vim src/main.js                        // 引入 element 组件 官网-->快速上手 有此代码
            import ElementUI from 'element-ui';
            import 'element-ui/lib/theme-chalk/index.css';
            Vue.use(ElementUI);
        # mkdir -p src/views/element
        # vim src/views/element/ElementView.vue      // 写入基本内容
            <template>
                <el-row>
                  <el-button round>圆角按钮</el-button>
                  <el-button type="primary" round>主要按钮</el-button>
                  <el-button type="success" round>成功按钮</el-button>
                  <el-button type="info" round>信息按钮</el-button>
                  <el-button type="warning" round>警告按钮</el-button>
                  <el-button type="danger" round>危险按钮</el-button>
                </el-row>
            </template>

            <script>
            export default {
                
            }
            </script>

        # vim src\App.vue
            <template>
              <div>
                <element-view></element-view>
              </div>
            </template>

            <script>
            export default {          // 声明出口 只有在这 export 才能在其他地方 import 导入 
              
            }
            </script>
            <style>

            </style>


    注: 
        api接口管理网址 https://apifox.com/

        修改 power shell 权限
            # set-ExecutionPolicy RemoteSigned
            # set-ExecutionPolicy Default

......................................................................................................................




https://v2.cn.vuejs.org/


引包: 
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>         // 开发环境   包括一些注释 警告
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>                     // 生成环境   去掉了注释 警告




插值表达式{{ }}
    插值表达式是一种Vue的模板语法
    1.作用：利用表达式进行插值，渲染到页面中
    表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
    2.语法：{{ 化表达式 }}

(1)使用的数据必须存在（data)
(2)支持的是表达式，而非语句，比如：if for.…
(3)不能在标签属性中使用{{ }}插值
    

    <div id="app">
        <p>{{nickname }}</p>
        <p>{{nickname.touppercase()}}</p>
        <p>{nickname+'你好'}</p>
        <p>{age>=18?'成年'：'未成年'}</p>
        <p>{{friend.name }}</p>
        <p>{{friend.desc }}</p>
    </div>


    const app new Vue({
        el:'#app',
        data:{                      // data 提供数据   变量:值
            nickname:'tony',
            age:18,
            friend: {
                name:'jepson',
                desc:'热爱学习Vue'
            }
        },
        methods: {                  // methods 提供方法

        }


        }
    )}

谷歌浏览器安装 插件Vue Devtools
极简插件：https://chrome.zzzmh.cn/ --> Vue Devtools --> 下载 --> 开发者模式 --> 拖拽安装 --> 插件详情允许访问文件


vue 指令
    v - 前缀的特殊 标签属性

v-html : 将这个元素的内容解析为 HTML 而不是纯文本
    如果你有一个包含 HTML 标签的字符串，你可以使用 v-html 将其渲染为真实的 HTML，而不是简单的文本。
    作用：设置元素的innerHTML
    语法：V-html="表达式"

v-show
    1.作用：控制元素显示隐藏
    2.语法：v-show="表达式"表达式值true显示，false隐藏
    3.原理：切换display:none控制显示隐藏
    4.场景：频繁切换显示隐藏的场景
v-if
    1.作用：控制元素显示隐藏 (条件渲染)
    2.语法：V-f="表达式”表达式值true显示，false隐藏
    3.原理：基于条件判断，是否创建或移除元素节点 根据判断条件控制元素的创建和移除(条件渲染)
    4.场景：要么显示，要么隐藏，不频繁切换的场景

v-else 
v-else-if
    1.作用：辅助V-f进行判断渲染
    2.语法：v-else
v-else-if="表达式'
    3.注意：需要紧挨着v-f一起使用

v-on
    1.作用：
        注册事件
        添加监听+
        提供处理逻辑
    2.语法：
        v-on:事件名="内联语句"
        v-on:事件名="methods中的函数名"

    v-on:click       单机事件
        @click       可以省略 v-on:
    v-on:mouseenter  鼠标划入事件
 
        <button v-on:click="count++">按钮</button>

    @c1ick="fn(参数1，参数2)"
    fn (a,b){}

    <body>
    <div id="app2">
        <button @click="fn">切换显示隐藏</button>
        <h1 v-show="isShow">黑马程序员</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue
    <script>
        const app2 new Vue({         // 可理解为 创建个vue的对象 app2 , 
            el:'#app2',              // 管控的 <div>模块 对应 上面的 id="app2"
            data:
                isShow:true          // 变量:值
            },
            methods:
                fn (){
                    app2.isshow = !app2.isshow
                    //让提供的所有methods中的函数，this都指向当前实例 当前为 app2
                    this.isshow = !this.isshow

                }
        })
    </script>
    </body>

v-bind
    1. 作用：动态的设置html的标签属性  src   url    title
    2. 语法：v-bind:属性名="表达式”
    3. 注意：简写形式  :属性名="表达式”

     v-bind:src="imgUrl"    绑定属性.  把 src的属性.绑定 imagUrl变量上.  下面必须有变量的赋值
        可简写 :src="imgUrl"

    <body>
    <div id="app">
        <img v-bind:src="imgUrl" v-bind:title="msg alt="">   
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app new Vue({
            el:'#app',
            data:
            imgUr1:'./imgs/10-02.png',
            msg:'hello波仔'
        })
    </script>
    </body>
按钮点击 上一页 下一页 切换图片
    <body>
    <div id="app">
        <button @click="index-">上一页</button>
    <div>
        <img v-show="index > 0" src="list[index]" alt="">
    </div>
        <button v-show="index list.length - 1" @click="index+">下一页</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app new Vue({
            el:'#app',
            data: {
                index:0,
                list: [                     // list: [ ]  数组
                    './imgs/11-00.gif',
                    './imgs/11-01.gif',
                    ./imgs/11-02.gif',
                    "./imgs/11-03.gif',
                    ./imgs/11-04.png',
                    ./imgs/11-05.png',
                ] 
            }
        })
    </script>
    </body>

v-for
    1.作用：基于数据循环，多次渲染整个元素 → 数组、对象、数字.…

    2.遍历数组语法：
        v-for="(item,index) in 数组"
        v-for="(item) in 数组"           // 如果index用不上 可以 只写一个参数
        v-for="item in 数组"             // 如果只有一项 () 也可省略掉
            item  是对象   表示 每一项
            index 下标

        <p v-for="...">我是一个内容</p>


        <div id="app">
            <h3>小黑水果店</h3>
            <u1>
                <li v-for="(item,index)in list">    // 在下面需要定义 list 数组  
                    {{ item }} - {{ index }}
            </1i>
            </u1>
        </div>

        data: {
            1ist:['西瓜','苹果','鸭梨','榴莲']
        }

    3.
        v-for中的key
        key作用：  给元素添加的唯一标识，便于Vu进行列表项的正确排序复用。
        注意点：
        1.key的值只能是字符串或数字类型
        2.key的值必须具有唯一性
        3.推荐使用id作为key(唯一)，不推荐使用index作为key（会变化，不对应)


    实现删除 功能
        <div id="app">
            <h3>小黑的书架</h3>
            <u1>
            <li v-for="(item,index)in booksList" key="item.id">         // v-for中的key 
                <span>{{item.name }}</span>
                <span>{{item.author }}</span>
                    <!-~注册点击事件→通过d进行删除数组中的对应项-->
                <button @click="del(item.id)"></button>
            </1i>
            </u1>
        </div>


        data:
        booksList: [
            {id:1,name:'《红楼梦》',author:'曹雪芹'}，
            {id:2,name:'《西游记》',author:'吴承恩'}，
            {id:3,name:'《水浒传》',author:'施耐庵'}，
            {id:4,name:'《三国演义》',author:'罗贯中'}

        ]


        methods:{
            del (id){
                this.booksList.filter(item => item.id !== id)       // 传过来的id 不等于 item 的id  则保留
                // this.booksList = this.booksList.filter(item = item.id !== id)     // 把得到的数组赋值给原数组

        }



        filter:根据条件，保留满足条件的对应项，得到一个新数组。 不会改变原来的数组
        this.list.filter(item = item.id !=id)


v-model:
    1.作用：给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容
        数据变化→视图自动更新
        视图变化→数据自动更新
    2.语法：V-mode='变量'

    用户名 密码 登录 重置 框
        <div id="app">
        <!-
        v-model可以让数据和视图，形成双向数据绑定
        (1)数据变化，视图自动更新
        (2)视图变化，数据自动更新
        可以快速[获取]或[设置]表单元素的内容
        账户：<input type="text"v-model="username'"><br><br>
        密码：<input type="password"v-model-="password"><br><br>
        <button@click="1ogin">登录</button>
        <button@click="reset">重置</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></sc
        <script>
        const app new Vue({
        el:'#app',
        data:
        username
        password:
        },
        methods:
        login ()
        console.log(this.username,this.password)
        reset(){
            
        }

综合 案例  小黑记事本


功能需求：
列表渲染
删除功能
添加功能
底部统计和清空



思维导图 制作

chat  生成一个 PlantUML

https://app.diagrams.net/?src=about  --> +号 --> 高级 --> PlantUML

Youtube 视频下载


youtube-dl


    # wget https://yt-dl.org/downloads/latest/youtube-dl             \\ 下载脚本
    # chmod a+rx youtube-dl                                           \\ 给执行权限
    # ./youtube-dl https://www.youtube.com/
    # ./youtube-dl https://www.youtube.com/  --no-check certificate     \\ 如果提示 ssl 错误

    # ./youtube-dl --write-sub --all-subs https://www.youtube.com/                   \\ 下载视频 及 字幕
    # ./youtube-dl --write-sub --all-subs --skip-download https://www.youtube.com/                 \\ 只下载字幕
    # ./youtube-dl --write-sub --sub-lang en --skip-download https://www.youtube.com/               \\ 只下载字幕
    # ./youtube-dl --write-sub --all-subs --proxy socks5://127.0.0.1:1080 https://www.youtube.com/   \\ 使用代理

        --write-sub           写字幕文件
        --write-auto-sub      编写自动字幕文件（仅限YouTube） 
        --all-subs            下载关于视频的所有字幕 
        --list-subs           列出关于视频所有可用的字幕
        --sub-format FORMAT   字幕格式,接受格式首选项,如"srt"或"ass/srt/best",这个选项一般不指定,因为指定的格式可能没有
        --sub-lange LANGS     要下载字幕的语言(可选),以逗号分隔,事业IETF语言标签,如"en,pt"
        --proxy               要求youtube-dl下载的路线为代理

    # echo 'export youtube-dl=/usr/local/bin/youtube-dl' >> /etc/profile \\ 添加到环境变量     或加环境变量 可直接执行
    # youtube-dl https://www.youtube.com/                                 \\ 直接下载视频 原清晰度 可以下播放列表中所有的视频
    # youtube-dl -F https://www.youtube.com/                               \\ -F 查看视频的清晰度 要下载的Youtube的视频链接 
    # youtube-dl -f 18 https://www.youtube.com/                             \\ -f 编号为18清晰度的视频  不加选项为下载源码


注: 
    官网地址 https://github.com/ytdl-org/youtube-dl/releases
    需要 python 2.6以上环境  # python -V


通用选项:
    -h, --help                       打印帮助文档
    --version                        打印版本信息
    -U, --update                     更新到最新版(需要权限)
    -i, --ignore-errors              遇到下载错误时跳过
    --abort-on-error                 遇到下载错误时终止
    --dump-user-agent                显示当前使用的浏览器(User-agent)
    --list-extractors                列出所有的提取器(支持的网站)
    --extractor-descriptions         同上
    --force-generic-extractor        强制使用通用提取器下载
    --default-search PREFIX          使用此前缀补充不完整的URLs，例如："ytsearch2 yt-dl" 从youtube搜索并下载两个关于yt-dl视频. 
                                     使用"auto"youtube-dl就会猜一个，一般效果等价于"ytsearch"("auto_warning"猜测时加入警告).
                                     我已知支持的PREFIX：ytsearch (youtube), ytsearchdate (youtube), 
                                     yvsearch (yahoo videos), gvsearch (google videos) 
    --ignore-config                  不读取配置文件，当时用了全局配置文件/etc/youtube-dl.conf:
                                     不再读取 ~/.config/youtube-dl/config (%APPDATA%/youtube-dl/config.txt on Windows)
    --config-location PATH           使用指定路径下的配置文件
    --flat-playlist                  列出列表视频但不下载
    --mark-watched                   标记看过此视频 (YouTube only)
    --no-mark-watched                不标记看过此视频 (YouTube only)
    --no-color                       打印到屏幕上的代码不带色

  网络选项:
    --proxy URL                      使用HTTP/HTTPS/SOCKS协议的代理.如：socks5://127.0.0.1:1080/.
    --socket-timeout SECONDS         放弃连接前等待时间
    --source-address IP              绑定的客户端IP地址
    -4, --force-ipv4                 所有连接通过IPv4
    -6, --force-ipv6                 所有连接通过IPv6

  地理限制:
    --geo-verification-proxy URL     使用此代理地址测试一些有地理限制的地址
    --geo-bypass                     绕过地理限制通过伪装X-Forwarded-For HTTP头部的客户端ip (实验)
    --no-geo-bypass                  不 绕过地理限制通过伪装X-Forwarded-For HTTP头部的客户端ip (实验)
    --geo-bypass-country CODE        强制绕过地理限制通过提供准确的ISO 3166-2标准的国别代码(实验)

  视频选择:
    --playlist-start NUMBER          指定列表中开始下载的视频(默认为1)
    --playlist-end NUMBER            指定列表中结束的视频(默认为last)
    --playlist-items ITEM_SPEC       列表中要下载的视频编号.如："--playlist-items 1,2,5,8"或"--playlist-items 1-3,7,10-13"
    --match-title REGEX              下载标题匹配的视频(正则表达式或区分大小写的字符串)
    --reject-title REGEX             跳过下载标题匹配的视频(正则表达式或区分大小写的字符串)
    --max-downloads NUMBER           下载NUMBER个视频后停止
    --min-filesize SIZE              不下载小于SIZE的视频(e.g. 50k or 44.6m)
    --max-filesize SIZE              不下载大于SIZE的视频(e.g. 50k or 44.6m)
    --date DATE                      仅下载上传日期在指定日期的视频
    --datebefore DATE                仅下载上传日期在指定日期或之前的视频 (i.e. inclusive)
    --dateafter DATE                 仅下载上传日期在指定日期或之后的视频 (i.e. inclusive)
    --min-views COUNT                不下载观影数小于指定值的视频
    --max-views COUNT                不下载观影数大于指定值的视频
    --match-filter FILTER            通用视频过滤器. Specify any key (see help for -o for a list of available keys) 
                                     to match if the key is present, !key to check if the key is not present, key > 
                                     NUMBER (like "comment_count > 12", also works with >=, <, <=, !=, =) to compare 
                                     against a number,key = ‘LITERAL‘ (like "uploader = ‘Mike Smith‘", also works with !=)
                                     to match against a string literal and & to require multiple matches. Values which 
                                     are not known are excluded unless you put a question mark (?) after the operator. 
                                     For example, to only match videos that have been liked more than 100 times and 
                                     disliked less than 50 times (or the dislike functionality is not available at the
                                     given service), but who also have a description, use --match-filter 
                                     "like_count > 100 & dislike_count <? 50 & description" .
    --no-playlist                    当视频链接到一个视频和一个播放列表时，仅下载视频
    --yes-playlist                   当视频链接到一个视频和一个播放列表时，下载视频和播放列表
    --age-limit YEARS                下载合适上传年限的视频
    --download-archive FILE          仅下载档案文件中未列出的影片，已下载的记录ID
    --include-ads                    同时下载广告(实验)

  下载选项:
    -r, --limit-rate RATE            最大bps (e.g. 50K or 4.2M)
    -R, --retries RETRIES            重试次数 (默认10), or "infinite".
    --fragment-retries RETRIES       一个分段的最大重试次数(default is 10), or "infinite" (DASH, hlsnative and ISM)
    --skip-unavailable-fragments     跳过不可用分段(DASH, hlsnative and ISM)
    --abort-on-unavailable-fragment  放弃某个分段当不可获取时
    --keep-fragments                 下载完成后，将下载的片段保存在磁盘上; 片段默认被删除
    --buffer-size SIZE               设置缓冲区大小buffer (e.g. 1024 or 16K) (default is 1024)
    --no-resize-buffer               不自动调整缓冲区大小.默认情况下自动调整
    --playlist-reverse               以相反的顺序下载播放列表视频
    --playlist-random                以随机的顺序下载播放列表视频
    --xattr-set-filesize             Set file xattribute ytdl.filesize with expected file size (experimental)
    --hls-prefer-native              使用本机默认HLS下载器而不是ffmpeg
    --hls-prefer-ffmpeg              使用ffmpeg而不是本机HLS下载器
    --hls-use-mpegts                 使用TS流容器来存放HLS视频,一些高级播放器允许在下载的同时播放视频
    --external-downloader COMMAND    使用指定的第三方下载工具,当前支持：aria2c,avconv,axel,curl,ffmpeg,httpie,wget
    --external-downloader-args ARGS  给第三方下载工具指定参数，如：--external-downloader aria2c --external-downloader-args -j8

  文件系统选项:
    -a, --batch-file FILE            文件中包含需要下载的URL
    --id                             仅使用文件名中的视频ID
    -o, --output TEMPLATE            Output filename template, see the "OUTPUT TEMPLATE" for all the info
    --autonumber-start NUMBER        指定%(autonumber)s的起始值(默认为1)
    --restrict-filenames             将文件名限制为ASCII字符，并避免文件名中的“＆”和空格
    -w, --no-overwrites              不要覆盖文件
    -c, --continue                   强制恢复部分下载的文件。 默认情况下，youtube-dl仅在可能时将恢复下载。
    --no-continue                    不要恢复部分下载的文件(从头开始重新启动)
    --no-part                        不使用.part文件 - 直接写入输出文件
    --no-mtime                       不使用Last-modified header来设置文件最后修改时间
    --write-description              将视频描述写入.description文件
    --write-info-json                将视频元数据写入.info.json文件
    --write-annotations              将视频注释写入.annotations.xml文件
    --load-info-json FILE            包含视频信息的JSON文件(使用“--write-info-json”选项创建)
    --cookies FILE                   文件从中读取Cookie(经测试，export cookies插件可以使用，但firebug导出的cookies导致错误)
    --cache-dir DIR                  文件存储位置。youtube-dl需要永久保存一些下载的信息。默认为
                                     $XDG_CACHE_HOME/youtube-dl或/.cache/youtube-dl。目前，只有YouTube播放器文件
                                     （对于具有模糊签名的视频）进行缓存，但可能会发生变化。
    --no-cache-dir                   不用缓存
    --rm-cache-dir                   删除所有缓存文件

  缩略图:
    --write-thumbnail                把缩略图写入硬盘
    --write-all-thumbnails           将所有缩略图写入磁盘
    --list-thumbnails                列出所有可用的缩略图格式

  详细/模拟选项:
    -q, --quiet                      激活退出模式
    --no-warnings                    忽略警告
    -s, --simulate                   不下载不存储任何文件到硬盘，模拟下载模式
    --skip-download                  不下载视频
    -g, --get-url                    模拟下载获取视频直连
    -e, --get-title                  模拟下载获取标题
    --get-id                         模拟下载获取id
    --get-thumbnail                  模拟下载获取缩略图URL
    --get-description                模拟下载获取视频描述
    --get-duration                   模拟下载获取视频长度
    --get-filename                   模拟下载获取输出视频文件名
    --get-format                     模拟下载获取输出视频格式
    -j, --dump-json                  模拟下载获取JSON information.
    -J, --dump-single-json           模拟下载获取每条命令行参数的JSON information.如果是个播放列表，就获取整个播放列表的JSON
    --print-json                     下载的同时获取视频信息的JSON
    --newline                        进度条在新行输出
    --no-progress                    不打印进度条
    --console-title                  在控制台标题栏显示进度
    -v, --verbose                    打印各种调试信息
    --dump-pages                     打印下载下来的使用base64编码的页面来调试问题（非常冗长）
    --write-pages                    将下载的中间页以文件的形式写入当前目录中以调试问题
    --print-traffic                  显示发送和读取HTTP流量
    -C, --call-home                  联系youtube-dl服务器进行调试
    --no-call-home                   不联系youtube-dl服务器进行调试

  解决方法:
    --encoding ENCODING              强制指定编码(实验)
    --no-check-certificate           禁止HTTPS证书验证
    --prefer-insecure                使用未加密的连接来检索有关视频的信息(目前仅支持YouTube)
    --user-agent UA                  指定user agent
    --referer URL                    指定自定义的referer,仅限视频来源于同一网站
    --add-header FIELD:VALUE         指定一个自定义值的HTTP头文件,使用分号分割,可以多次使用此选项
    --bidi-workaround                围绕缺少双向文本支持的终端工作。需要在PATH中有bidiv或fribidi可执行文件
    --sleep-interval SECONDS         在每次下载之前休眠的秒数，或者每次下载之前的随机睡眠的范围的下限(最小可能的睡眠秒数)
                                     与-max-sleep-interval一起使用。
    --max-sleep-interval SECONDS     每次下载前随机睡眠范围的上限(最大可能睡眠秒数)。只能与--min-sleep-interval一起使用。

  视频格式选项:
    -f, --format FORMAT              视频格式代码,查看"FORMAT SELECTION"获取所有信息
    --all-formats                    获取所有视频格式
    --prefer-free-formats            开源的视频格式优先，除非有特定的请求
    -F, --list-formats               列出请求视频的所有可用格式
    --youtube-skip-dash-manifest     不要下载关于YouTube视频的DASH清单和相关数据
    --merge-output-format FORMAT     如果需要合并(例如bestvideo + bestaudio)，则输出到给定的容器格式。
                                     mkv，mp4，ogg，webm，flv之一。如果不需要合并，则忽略

  字幕选项:
    --write-sub                      下载字幕文件
    --write-auto-sub                 下载自动生成的字幕文件 (YouTube only)
    --all-subs                       下载所有可用的字幕
    --list-subs                      列出所有字幕
    --sub-format FORMAT              字幕格式,接受格式偏好,如："srt" or "ass/srt/best"
    --sub-lang LANGS                 要下载的字幕的语言(可选)用逗号分隔,请使用--list-subs表示可用的语言标签

  验证选项:
    -u, --username USERNAME          使用ID登录
    -p, --password PASSWORD          账户密码,如果此选项未使用,youtube-dl将交互式地询问。
    -2, --twofactor TWOFACTOR        双因素认证码
    -n, --netrc                      使用.netrc认证数据
    --video-password PASSWORD        视频密码(vimeo, smotri, youku)

  Adobe Pass Options:
    --ap-mso MSO                     Adobe Pass多系统运营商(电视提供商)标识符,使用--ap-list-mso列出可用的MSO
    --ap-username USERNAME           MSO账号登录
    --ap-password PASSWORD           账户密码,如果此选项未使用,youtube-dl将交互式地询问。
    --ap-list-mso                    列出所有支持的MSO

  后处理选项:
    -x, --extract-audio              将视频文件转换为纯音频文件(需要ffmpeg或avconv和ffprobe或avprobe)
    --audio-format FORMAT            指定音频格式: "best", "aac", "flac", "mp3", "m4a", "opus", "vorbis", or "wav";
                                    "best" by default;-x存在时无效
    --audio-quality QUALITY          指定ffmpeg/avconv音频质量,为VBR插入一个0(best)-9(worse)的值(默认5),或者指定比特率
    --recode-video FORMAT            必要时将视频转码为其他格式(当前支持: mp4|flv|ogg|webm|mkv|avi)
    --postprocessor-args ARGS        给后处理器提供这些参数
    -k, --keep-video                 视频文件在后处理后保存在磁盘上; 该视频默认被删除
    --no-post-overwrites             不要覆盖后处理文件; 默认情况下,后处理文件将被覆盖
    --embed-subs                     在视频中嵌入字幕(仅适用于mp4,webm和mkv视频）
    --embed-thumbnail                将缩略图嵌入音频作为封面艺术
    --add-metadata                   将元数据写入视频文件
    --metadata-from-title FORMAT     从视频标题中解析附加元数据，如歌曲标题/艺术家。格式语法和--output相似.也可以使用带有命名捕
                                     获组的正则表达式。解析的参数替换现有值。Example: --metadata-from-title "%(artist)s - 
                                     %(title)s" matches a title like "Coldplay - Paradise". Example (regex): 
                                     --metadata-from-title "(?P<artist>.+?) - (?P<title>.+)" 
    --xattrs                         将元数据写入视频文件的xattrs(使用dublin core 和 xdg标准)
    --fixup POLICY                   自动更正文件的已知故障。never(不做警告), warn(只发出警告), detect_or_warn 
                                     (默认;如果可以的话修复文件,否则警告)
    --prefer-avconv                  后处理时相较ffmpeg偏向于avconv
    --prefer-ffmpeg                  后处理优先使用ffmpeg
    --ffmpeg-location PATH           ffmpeg/avconv程序位置;PATH为二进制所在文件夹或者目录.
    --exec CMD                       下载后对文件执行命令,类似于find -exec语法.例：--exec‘adb push {} /sdcard/Music/ && rm {}‘
    --convert-subs FORMAT            转换字幕格式(当前支持: srt|ass|vtt)