最全的前端知识之css与jsp介绍

菜鸟小木

已于 2024-02-04 12:03:00 修改

阅读量1.8k

点赞数 31

分类专栏： web 文章标签：前端 css java

于 2024-01-21 17:13:07 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74167954/article/details/135717338

版权

web 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了前端开发的基础知识，包括CSS的定义、属性、引入方式（内联、外联和独立文件）、盒子模型，以及JavaScript的引入、基本语法、对象类型、数组、字符串操作、自定义对象、JSON、浏览器对象模型(BOM)、文档对象模型(DOM)和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

ok了，宝子们，今天发布的是我自己理解的前端知识css以及jsp的相关知识。请各位观众老爷们查收

一.css介绍

（1）什么是css

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”（层层叠加的样式），它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。

CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式。

（2）css涉及的相关属性

text-indent 首行缩进，单位为px
line-height 行高设置
strong标签就行加粗修饰
&nbsp 空格（在html文档中他不会识别你的空格，无论你打出多少个空格，他都会按照一个计算），因此要用空格符来代替
fontsize设置字体大小

css样式的引入---行内样式，内嵌样式，外联样式
1.写在对应的style属性中，也称为行内样式，就是写在行内标签中

<p>宝子们好，距离过年还有20多天，祝大家吃好喝好玩好，身体嘎嘎棒</p>
<p style="color: brown; text-align: center;">宝子们好，距离过年还有20多天，祝大家吃好喝好玩好，身体嘎嘎棒</p>

2.写在style标签中，但是包含在对应的head标签中

如图在head标签里面写style标签，标记他的标签属性，这里面也可以有id选择器以及类选择器

具体的大家可以参考这个博主的详细介绍【CSS】基础选择器，包括标签选择器、类选择器、id选择器和通配符选择器..._通用选择器是基础还是组合-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: rebeccapurple;
            text-align: center;
        }
    </style>
</head>
<body>
<p>宝子们好，距离过年还有20多天，祝大家吃好喝好玩好，身体嘎嘎棒</p>
<p>宝子们好，距离过年还有20多天，祝大家吃好喝好玩好，身体嘎嘎棒</p>
</body>
</html>

3.单独的.css文件，需要link标签在网页中进行引入

这里我们要创建一个对应的后缀为css的文件

h1{
    /* color:brown; */
    color: rgb(255,0,0);
}

<link rel="stylesheet" href="./css/news.css">
<h1 >焦点访谈对应的数据</h1>

这里的link后面的是文件的路径调用，我们直接./就可以自己选择文件了（这里我设计的是红色）

盒子标签

div标签本来应该写在对应的html知识里面，但是因为div标签与css属性联系比较大，所以就把他并在了css内容中
他主要就是content区域，内边距区域padding，边框border，外边距区域margin
具体的大家可以看DIV+CSS之页面布局、布局常用属性（浮动、清除、定位、溢出、层叠）、布局类型_使用div+css定义的后台管理页面-优快云博客

二：JavaScript的介绍（代码都是要放在script内部）

引入方式

内部式与外部式

对于内部式即在head或者body内部写该标签，调用alert方法即可

<script>
        alert("你好");
    </script>

外部式就需要你创建对应的后缀js文件

alert("nihao1");

然后调用

 <script src="./de.js"></script>

显示的结果就是警告框

基础语法

javascript与java的语言格式保持一致，但是语法的含义却不都保持一致

javascript是一门弱语言，变量可以存放不同类型的值；

定义变量 var关键字（可以不指定类型），与python一样可以现实值覆盖

 <script>
        var a=10;
        a="你好";
        alert(a);
    </script>

变量分为原始变量与引用变量，原始变量有包括了num（数字类型），string（字符以及字符串），boolean（真假），null（空），undefined（未定义）
在代码中可以利用typeof来进行变量类型的判断

   <script>
        var a=10;
        alert(typeof(a));

        var b="nihao";
        alert(typeof(b))

    </script>

运算符与java保持一致，唯一不同的就是==与===（全等）的区别，==可以进行类型转化，全等（===）要求较高无法类型转化

 <script>
        var a=10;
        alert(a=="10");//true
        alert(a==="10");//false
    </script>

类型转化

字符串类型转为数字:
将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。其他类型转为boolean:
Number:Q和 NaN为false，其他均转为true。
String:空字符串为false，其他均转为true。
Null和 undefined: 均转为false。

  <script>
    if(0)
    {
        alert("0是false")

    }
    if(NaN)
    {
        alert("NAN转化为false")
    }
    if(-1)
    {
        alert("0与NAN之外的数字都是true")
    }
   </script>

函数定义

这里大家可以选取自己适合的方法进行定义使用

   <script>
    //函数定义一
   function add(a,b)
   {
    return a+b;
   }
   //函数定义二
   var add=function(a,b)
   {
    return a+b;
   }
   //函数调用
   var result=add(10,20);
   alert(result);
   </script>

对象分类

首先是基本对象，浏览器对象（bom）以及文档对象（dom：将对应的各种标签进行了封装），以及自定义对象(特别像C语言中定义的结构体)

基本对象：数组（array），字符串（string），JSON

数组对象

创建数组，这里的数组动态创建就属于java的，但是他的静态创建所使用的是中括号，与java里面的大括号有所区别

  <script>
        //动态创建数组
        var arr=new Array(1,2,3,4);
        //静态创建数组
        var arr2=[1,2,3,4];
    </script>

访问数组，首先是正常的for循环遍历，其次是foreach箭头函数遍历

   <script>
        var arr=new Array(1,2,3,4);
        for (let index = 0; index < arr.length; index++) {
        const element = arr[index];//数据接收
        console.log(element);//控制台写入
    }
     /*arr.forEach(element => {
        console.log(element)
    });//箭头函数，元素加箭头进行表示*/
    </script>

然后我们打开对应的鼠标右键检查按钮，打开控制台，就可以发现新大陆啦！！！！

最后强调一下这里的数组其实相当于java的集合，属于数组长度可以进行变化的，并且存放的数据类型也是可以变化的，宝子们看这里就可以直接添加元素，而且对应的并非是数字类型的

 <script>
        var arr=new Array(1,2,3,4);
        arr[10]="true";
    </script>

字符串对象

首先依然是访问的方式，对于字符串的访问，依然是分为了两种，这里小木推荐大家使用第一种，问就是方便，当然也是符合java的编码习惯。

<script>
    //方法一：直接式
    var str=" 你好 ";
    //方法二：间接式
    var str2=new String("你好世界");
</script>

字符串对象也有他的函数charAT函数，indexof函数,trim函数,substring函数

<script>
    //方法一：直接式
    var str=" 你好 ";
    console.log(str)
    console.log(str.length);
    //检查对应的索引位置元素
    console.log(str.charAt(1));
    //检查对应元素的索引
    console.log(str.indexOf("你"));
    //去除两端空格，并返回一个数组
    var s= str.trim();
    console.log(s);
    //切片函数，截取字符串
    console.log(s.substring(0,2));//含头不含尾
</script>

宝子们看结果，首先把字符串输出，然后输出长度（包含了空格），查找对应的索引元素，输出指定的元素的下标，去除空格并返回字符串对象，切片获取字符串

自定义对象

自定义对象十分像我们C语言定义的结构体下面打击来看代码吧

  <script>
        var student={
            name:"菜鸟小马",
            age:20,
            //这个像你的java在你的类中定义一个方法
            eat(){
                alert("吃饭饭");
            },
            eat2:function(){
                alert("不吃饭");
            }
        }
        console.log(student.name);
        alert(student.eat);
        alert(student.eat());
        // document.write(student.age);
    </script>

总结一下呢就是如此，特别像我们C语言学的结构体，值得注意的是要有，（英文逗号）隔开哟！

json对象

首先是json对象的定义，他更像是键值对的表示，只不过键值对都需要带引号来进行包裹

其实就是自定义对象的前面的属性名加上了引号而已

作用就是作为数据载体，在网络中进行数据传输，代替了复杂的xml文件采取json来进行数据传输

 <script>
        //1.字符串形式
        var json='{"name":"mzh","age":20,"xihao":["play","sing"]}';
        alert(json);
        alert(json.name);//输出为undefined，因为现在是字符串
        //parse函数转化为json对象
        var obj=JSON.parse(json);
        alert(obj.name);
        //stringify函数再次转化为字符串
        alert(JSON.stringify(obj));
        //2.直接形式
        // var json={"name":"mzh","age":20,"xihao":["play","sing"]};
        // alert(json.name)
    </script>

BOM对象

首先呢bom对象是browser object model的缩写，意为浏览器对象，把对应的浏览器封装为对象的方法或者属性，主要分为window对象，navigator对象，screen对象，history对象，location对象

window对象表示浏览器中打开的窗口
Navigator 对象包含有关浏览器的信息。
screen对象包含有关客户端显示屏幕的信息
history对象表示用户访问过的url
location对象包含的是当前的url信息

怎么样，是不是感觉好多呀，那么好消息来了，对于我么而言只需要了解window对象与location对象，现在我们来看看代码吧！！

宝子们复制代码运行的时候注意一个个运行哟，可以先把其他的先注释掉

window对象的函数

    <script>
        //window警告框
        window.alert("hello bom");
        alert("hello 宝子们");

        // confirm提示选择框，值得注意的是这里的确认之后会返回true，取消返回false
        var flag=confirm("你确定你要删除记录吗");
        alert(flag);

        //setInterval是内部封装函数以及时间，单位是ms级，意思为每过2s就执行一次
        var i=0;
        setInterval(function(){i++; console.log(i);},2000);

        //setTimeout延迟函数，经过3s之后进行输出
        setTimeout(() => {
            alert("js");
        }, 3000);
    </script>

location对象
各位观众老爷们大家复制代码运行的话，那个网址一定不要改哟，嘿嘿，那个是俺的主页

 <script>
        //弹出对应的网址链接
        alert(location.href);
        //window可以省略，这里是复制网址然后直接跳转到对象的网站
        window.location.href="https://blog.youkuaiyun.com/m0_74167954?spm=1000.2115.3001.5343";
    </script>

DOM对象

Dom对象又被认为是文档对象，控制着整个网页的内容，与后续的时间监听来共同控制网页的行为（这个时间监听我们后续再讲哟！）

那既然控制行为，因此就有以下的功能

改变html元素的内容
改变html元素的样式
对html DOM时间做出反应
添加和删除html元素

但是想要访问的话必须要有element对象，下面就是介绍他的集中获取方法

宝子们，下面我就展示一个案例哈；这个案例大家可以看到通过script内部的方法直接修改了他的值，大家在运行的时候可以先把script中的代码先注释掉。

<body>
    <div class="y1">菜鸟小木祝各位观众老爷身体健康财运滚滚</div>
    <div class="y1">感谢您的点赞</div>
    <script>
       var ds=document.getElementsByClassName("y1")
       var p=ds[1];
       p.innerHTML="感谢观众老爷的关注";
    </script>
</body>

事件监听

事件是对应的你发生的动作，比如你点击的鼠标会产生某一种效果，或者按下鼠标会产生某种效果等等。

他的设置呢有两种方式，可以放在标签内部的函数，也可以外部设置函数

<!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>
    <input type="button" name="点击" id="ls1" value="按钮一" onclick="f1()">
    <input type="button" name="点击" id="ls2" value="按钮2">
</body>
<script>
    function f1()
    {
        alert("你好")
    }

    document.getElementById("ls2").onclick=function()
    {
        alert("你好") 
    }
</script>
</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>
    <body>
        <img id="h1" src="./img01/芸芸/dp19.jpg" alt="">
        <br>
        <input type="button" id="o1" value="按钮一" onclick="f1()">
        <input type="button" id="o2" value="按钮二" onclick="f1()">
     
        <div class="cls">大家好</div>
        <div class="cls">我是你们的菜鸟小木</div>
     
        <input type="checkbox" name="hobby">电影
        <input type="checkbox" name="hobby">动漫
        <input type="checkbox" name="hobby">菜鸟小木
        <br>
        <input type="button" id="b1" value="全选" onclick="s1()">
        <input type="button" id="b2" value="暂时" onclick="s2()">
     
        
    </body>
        <script>
            //修改图片操作
            function f1()
            {
                var img = document.getElementById("h1");
                img.src="img01/dp123.jpg"
            }
        //    img.src="./01斗破苍穹动漫网站-马子杭/img01/芸芸/dp28.jpg"
            //修改属性
            var cl=document.getElementsByClassName("cls")
            for (let index = 0; index < cl.length; index++) {
                const element = cl[index];
                element.innerHTML+="<font color='red'>very good</font>"
                
            }
            //选中
            function s1()
           {
                var c= document.getElementsByName("hobby")
                for (let index = 0; index < c.length; index++) {
                    const element = c[index];
                    element.checked=true;
                }
           }
           function s2()
           {
            var c=document.getElementsByName("hobby")
            for (let index = 0; index < c.length; index++) {
                const element = c[index];
                element.checked=false;
            }
           }
         
        </script>
</body>
</html>

如大家所见，只是添加了对应的input标签，设置了对应的单击事件，之后进行了对应的函数设置

一切复杂的功能都是从对应的小模块开始的，所以大家注意写项目的话把功能进行拆分就可以啦

ok宝子们，今天呢，前端的最基础的知识到现在就结束啦，现在进入每日小短句分享时间

自此鲜花赠自己，纵马踏花向自由！！！