2021-10-01Javaweb学习第一天（下）

最新推荐文章于 2024-10-09 14:44:12 发布

sgfy_

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量68

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/sgfy_/article/details/120578697

版权

11、CSS

CSS是【层叠样式表单】。是用于（增强）控制网页样式并允许将样式信息与内容分离的一种标记性语言

1.语法规则img

2.CSS和HTML的结合方式

第一种：在标签的style属性上设置“key：value value；”，修改标签样式。

缺点：①代码量庞大

②可读性差

③css没复用性可言

第二种：在head标签中使用style标签来定义各种自己需要的css样式。

格式如下：

XXX{

Key：value value；

}

![img](file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle`%C~ZEM]RTF@F{[5YWP47.png)

缺点：

①只能在同一页面中复用代码，不能在多个页面中复用css代码。

②维护不方便，工作量大。

第三种：

把css样式

使用html的标签导入css样式文件。

12、css选择器

1.标签名选择器

标签名选择器的格式是

标签名{

属性：值；

}

2.id选择器

id选择器的格式是：

#id属性值{

属性：值；

}

id选择器可以让我们通过id属性选择性去使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        #id001{
            color: blue;
            border: 1px yellow solid;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted;
        }
    </style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>

3.class选择器

class类型选择器的格式是：

.class属性值{

属性：值；

}

class类型选择器，可以通过class属性有效的选择性去使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class类型选择器</title>
    <style type="text/css">
        .class01{
            color: grey;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="class01">div标签</div>
</body>
</html>

4.组合选择器

组合选择器的格式是：

选择器1，选择器2，选择器n{

属性：值；

}

组合选择器可以让多个选择器共用同一个css样式代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01,#id001{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
<div class="class01">div标签class01</div><br />
<span id="id001">span 标签</span><br/>

</body>
</html>

13、JavaScript介绍

Js是弱类型，Java是强类型

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释js的浏览器都可以执行和本平台无关）

14、JavaScript和html代码的结合方式

第一种方式：

只需要在head标签中，或在body标签中，使用script标签来书写JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数。
        //它可以接收任意类型的参数，这个参数就是警告框的提示信息。
        alert("hello javascript!");
    </script>
</head>
<body>

</body>
</html>

第二种方式：

使用script标签引入单独的JavaScript代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="02.js"></script>
</body>
</html>

15、变量

什么是变量？变量是可以存放某些值的内存的名称。

Javascript的变量类型：

数值类型： number

字符串类型： string

对象类型： object

布尔类型： boolean

函数类型： function

JavaScript里特殊的值：

undefind 未定义，所有js变量未赋予初始值的时候默认值都是undefined.

null 空值

NAN 全称是：Not a Number。非数字。非数值。

JS中定义变量格式：

var 变量名；

var 变量名=值；

16、关系（比较）运算

等于：== 等于是简单的做字面值的比较

全等于：===除了做字面值的比较之外还会比较两个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a="12";
        var b=12;
        alert(a==b);//ture
        alert(a===b);//false
    </script>
</head>
<body>

</body>
</html>

17、逻辑运算

且运算：&&

或运算：||

取反运算：！

在Javascript语言中，所有的变量都可以作为一个boolean类型的变量去使用。

0、null、undefine、”“（空串）都认为是false；

&&且运算

有两种情况：

第一种：当表达式全为真的时候，返回最后一个表达式的值。

第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var a="abc";
        var b=true;
        var d=false;
        var c=null;
        //alert(a&&b);//true
        //alert(b&&a);//abc
        //alert(a&&d);//false
        //alert(a&&c);//null
        //alert(a&&b&&c);//null
        //alert(a&&d&&c);//false
    </script>
</head>
<body>

</body>
</html>