CSS和JavaScript

落落落sss

已于 2024-06-26 10:00:25 修改

阅读量775

点赞数 14

文章标签： tensorflow 人工智能 python java javascript css sql

于 2024-05-09 22:46:56 首次发布

本文链接：https://blog.csdn.net/luosuss/article/details/138632199

版权

CSS

在html中引入CSS

我们需要先在该项目先建立css文件

html引入CSS,在<head></head>中添加<link>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部的css -->
    <link rel="stylesheet" href="../css/demo1.css">
</head>
<body>
    <div>哈哈哈</div>
    <div>酷酷酷</div>
</body>
</html>

CSS选择器：选取设置样式的元素（标签）

分类：

1.元素选择器

元素名称(color:red) 如： div{color:red}

调用：<div>hello</div>

2.id选择器

#id属性值(color:red) 如：#name{color:red}

调用：<div id="name">hello</div>

3.类选择器

.class属性值(color:red) 如：.cls{color:red}

调用: <div class="cls">hello</div>

CSS的属性：

border属性

border-style的值

 #mydiv1
{
    color: red;
    /* 设置字体大小为20px,注意，在css中如果需要加单位，单位不能省略 */
     font-size: 20px;
     border-width: 10px;
     border-style: dashed;
}

结果：

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" type="text/css"  href="../css/demo2.css">
</head>
<body>
    <div>css1</div>
    <div id="mydiv1">css2</div>
    <div class="cla">css3</div>
    <div style="display: none;">css4</div>
    <div style="display: inline;">css5</div>
    <div style="display :inline">css6</div>
    <div style="display: block;">css7</div>
</body>
</html>

javaScript

javascript的引入方式

1.内部脚本：将JS代码定义在HTML页面中，使用<script>标签

2.外部脚本：将JS代码定义在JS文件中，然后引入到HTML页面中

<!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>
    <!-- 在html页面内部引入js -->
    <script>
        //弹窗
        alert("你好呀")
    </script>

    <!-- 引入外部js文件 -->
    <script src="../js/demo1.js"></script>
    <!-- 注意在引入外部文件后，不能再文本中写js代码 -->
</body>
</html>

demo1.js文件

alert("哈哈哈")

javascript的输出方式

使用window.alert();写入警告框

使用document.write();写入HTML页面

使用console.log();写入浏览器控制台

<!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>
        alert("哈哈")
        // 写入html页面
        document.write("赫赫")
        // 写入浏览器控制台
        // f12打开浏览器控制台
        console.log("你好")
    </script>
</body>
</html>

javascript的变量定义

1.es6前使用var定义变量

2.se6后定义变量是let,定义常量是const

<!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 i=3;
        document.write(i);
       

        // 定义变量
        let x=10;
        document.write(x);
        //定义常量
        const j=100;
        console.log(j);
    </script>
</body>
</html>

javascript的数据类型

原始类型

number:数字（整数，小数，NaN(Not a Number)(数字加字符串)）

string:字符，字符串，单双引号都可以

boolean:布尔。true,false

null:对象为空

undefined:当声明的变量未初始化时，该变量的默认值是undefined

引用类型

就是对象。Object Date等

使用typeof运算符可以获取变量的数据类型

typeof 变量

<!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>
        //number类型
        let i=1;
        // 输出i的数据类型
        console.log(typeof i);//number
        //输出i的值
        console.log(i);//1

        //string 类型
        let s1='hhh';
        // 输出s1的数据类型
        console.log(typeof s1);//string

        //NaN
        let j=1-'a';
        //输出j的数据类型
        console.log(typeof j);//number
        //输出j的值
        console.log(j);//NaN,j不是一个数字（not a number）

     

        //定义变量，没有赋值
        let x;
        console.log(typeof x);//undefined
        console.log(x);//undefined


        //引用数据类型
        let date=new Date();
        console.log(date);//Fri May 10 2024 17:13:19 GMT+0800 (中国标准时间)
        console.log(typeof date);//object

        let a=null;
        console.log(typeof a);//object
        console.log(a);//undefined

    </script>
    
</body>
</html>

javascript的运算符

==和===的区别

1.==：非严格比较，具有强制类型转换功能，如果等号两侧的类型不一致，就先转换成一样的类型，在进行数值比较

2.===：严格比较,如果运算符两侧数据类型不一致，就返回false，如果一样，再比较数值
<!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>
        //定义变量
        let i=1;
        let s1='1';
        console.log(i==s1);//true,先转换成一样的类型
        console.log(i===s1);//false
    </script>
</body>
</html>
在js的六种假

false
0
空字符：''和''''
NaN
null
undefined

注：在js中逻辑运算可以对任意类型进行比较

全局函数

其他类型转换成数字

1.parseInt(字符串):将参数数值转换成整数，从左到右解析，遇到非数值就停止解析，如果解析出来是非数字，就是NaN

2.Number(布尔类型):将布尔类型转换number类型
<!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>
        let s1='123abc';
        console.log(parseInt(s1));//123
        console.log(parseInt('12.3'));//12

        console.log(parseInt('a123'));//NaN
        
        console.log(Number(true));//1
        console.log(Number(false));//0
    </script>
</body>
</html>
其他类型转换成不二类型

使用Boolean(数值)
<!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>
        console.log(Boolean(0));//false
        console.log(Boolean("aa"));//true
    </script>
    
</body>
</html>
注意：所有的全局函数都可以使用窗口对象调用，即windows对象，但是可以省略