fengchuanyu 9 月之前
父节点
当前提交
f543767831

+ 1 - 1
1_html/4_列表.html

@@ -17,7 +17,7 @@
 </head>
 <body>
     <!-- 无序列表 -->
-    <ul>
+    <ul type="square">
         <li>1</li>
         <li>2</li>
         <li>3</li>

二进制
2_css/.DS_Store


+ 4 - 0
2_css/14_文本控制.html

@@ -39,9 +39,13 @@
             /* 文本益处部分显示省略号 */
             text-overflow: ellipsis;
         }
+        .box7{
+            letter-spacing: 20px;
+        }
     </style>
 </head>
 <body>
+    <div class="box7">我聆听沉寂已久的心情清晰透明 就像美丽的风景总在回忆里才看得清被伤透的心能不能够继续爱我</div>
     <a href="https://www.baidu.com">百度</a>
     <div>hello</div>
     <div class="text1">你好1</div>

+ 14 - 0
3_js基础/1_helloworld.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    JavaScript
+    <script>
+      document.write("hello world!");  
+    </script>
+</body>
+</html>

+ 19 - 0
3_js基础/2_定义变量.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        // var 定义变量的关键则  
+        //‘str’ 变量名 (由数字、字母、下划线_、$  数字不能开头)
+        // 其中“hello world” 是一段字符串
+        var str = "hello world!";
+        // console.log() 这个方法是向控制台输出内容  最为常用的调试方式
+        console.log(str);
+
+    </script>
+</body>
+</html>

+ 75 - 0
3_js基础/3_变量类型.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        // js中 数据类型取决于等号右边的值 
+        // 字符型 String
+        var str = "hello world!";//字符串
+        var str2 = "a";//单个字符
+        var str3 = 'hello';
+        var str4 = 'b';
+        // 数值型 Number
+        var num = 1;//整型数值
+        var num1 = 3.14//浮点型数值
+        //布尔型 Boolean
+        var boo = true;//真
+        var boo2 = false;//假
+        //数组 Array
+        var arr = [];//空数组
+        var arr2 = [1,2,3,4,5];
+        var arr3 = ['a','b','c','d','e'];
+        var arr4 = [1,2,3,'a,','b','c'];
+        var arr5 = [1,2,['a','b',['c',3]]];//多维数组
+        // 数组中每个值都有自己的索引 且索引从0开始
+        console.log(arr2[0])//数组中获取其中某个值的时候使用索引  
+        console.log(arr5[2][0])//多维数组获取值
+        //对象 Object
+        var obj = {}//空对象
+        // 对象内部为键值对形势即  key:value 每组键值对用‘,’间隔 键值对用':'连接
+        var obj = {
+            goodsImg:"./img/img1.png",
+            goodsTitle:"Xiaomi",
+            goodsDesc:"描述....",
+            goodsPric:5999
+        }
+        // 对象的取值方式为 对象名称.key值 对象名和key之间用'.'连接
+        console.log(obj.goodsTitle)
+
+
+
+
+        // 变量命名规范
+        var testNumber = 10; 
+        //变量名由 两个单词构成 test 和 number构成
+        //两个及以上单词构成的变量名 使用驼峰命名
+        //驼峰命名(小驼峰) :第一个单词小写从第二个单词开始首字母大写
+
+        // js当中严格区分大小写
+        var a = 10;
+        var A = 'hello';
+        var testStr = "a";
+        var teststr = "b";
+
+
+        // js 定义变量的特性
+        var strA = "hello";
+        strA = "world";
+        strA = 10;
+        //可以随时更改变量类型
+        console.log(strA);
+        // 允许重复定义
+        var strA = [1,2];
+        console.log(strA);
+        // 允许未定义直接赋值
+        loveCoding = "爱扣钉";
+        console.log(loveCoding);
+
+        console.log(testStr10);
+    </script>
+</body>
+</html>

+ 45 - 0
3_js基础/4_js当中运算符.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        var num = 1;
+        var num2 = 2;
+        console.log(num + num2);//加
+        console.log(num2 - num);//减
+        console.log(num * num2);//乘
+        console.log(num2 / num);//除
+
+        // 如果对字符型进行加法运算 那么他将加号左右两边进行字符拼接
+        var str1 = "hello";
+        var str2 = "world";
+        console.log(str1 + str2);
+        // 加法运算如果一侧是字符型 那么统一按照字符串拼接实现
+        var str3 = "你好";
+        var str4 = 10;
+        console.log(str3 + str4);
+        // 如果 字符型数字参与 - * / 运算会转行成数字型运算
+        var str5 = 1;
+        var str6 = "2";
+        console.log(str5 * str6);
+
+        // 逻辑运算
+        var num3 = 1;
+        var num4 = 2;
+        var num5 = 2;
+        var num6 = "2";
+        console.log(num4 > num3);//大于
+        console.log(num4 < num3);//小于
+        console.log(num4 == num5);//是否等于
+        console.log(num4 >= num5);//大于等于
+        console.log(num4 <= num5);//小于等于
+        // 如果字符型数字和数值型数字进行 == 运算 会转行成数值型进行对比
+        console.log(num6 == num5);
+        console.log(num6 === num5);
+    </script>
+</body>
+</html>

+ 59 - 0
3_js基础/5_分支判断.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        // var num = 10;
+        // var num2 = 15;
+        // 分支判断
+        // if(num > num2){
+        //     console.log(num)
+        // }else{
+        //     console.log(num2)
+        // }
+
+
+        // 多路分支
+        // var num3 = 10;
+        // var num4 = 10;
+
+        // if(num3>num4){
+        //     console.log("最大的数字是:"+num3);
+        // }else if(num3 == num4){
+        //     console.log("两个值相等:",num3,num4);
+        // }else{
+        //     console.log("最大的数字是:"+num4)
+        // }
+
+        var a = 10;
+        var b = 20;
+        var c = 15;
+        // && 与运算符 表示并且 左右两边都成立的时候则为真
+        if(b>a && b>c){
+            console.log(b+"是最大的值")
+        }
+        // || 或运算  表示左右两边任意一个成立则为真
+        if(c>a || c>b){
+            console.log("c不是最小的")
+        }
+        // != 代表不等于
+        if(a != b){
+            console.log("a不等于b")
+        }
+        // !表示取反 
+        var boo = true;
+        console.log(!boo);
+
+        // 三元运算符
+
+        var num11 = 10;
+        var num12 = 20;
+        var num13 = num11>num12?num11:num12;
+        console.log(num13)
+    </script>
+</body>
+</html>