Javaweb开发项目之前端知识介绍

好喜欢吃红柚子

已于 2022-05-31 11:03:07 修改

阅读量729

点赞数

分类专栏： Java与数据库实训文章标签：前端 javascript css html web

于 2022-05-31 09:31:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45662399/article/details/125057847

版权

Java与数据库实训专栏收录该内容

12 篇文章

订阅专栏

2. 对属性进行复用：class中可以一次引用多个css代码块

三、盒模型

代码展示

一、form表达提交

1. 按钮标签形式

直接使用button标签
使用 input，type要设置为button，value是按钮上想要显示的内容

<button onclick="subb()">-</button>
<input type="button" value="*" onclick="mul()">

2. 提交方式

ajax：更友好，异步刷新

表单直接提交：form标签中的action属性填写的是想要跳转到的地址

<!-- 提交form表单时的按钮，type要是submit才行-->
  <input type="submit" value="注册"/>

<!--   普通button按钮 两种方式都可以 -->
    <button onclick="fun()">注册</button>
    <input type="button" value="注册" onclick="fun()"/>

二、CSS

作用：定义字体、颜色、格式等，美化页面

CSS定义：cascading style sheet 层叠样式表。

语法：

选择器 {

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

属性名4:属性值4;

}

CSS使用：

1、通过选择器选择上标签

2、在选择的标签上设置样式

选择器分类：

标签选择器： p{}

类选择器： .className{}

id选择器： #id{}

一些常见的样式：

color:red; 文字颜色

font-size:40px;

background-color:blue;

text-decoration:underline;

text-decoration:none; //去掉下划线

共有三种方式实现：

内嵌样式
内部样式
独立到单独文件（与方式2写法一致，但是要单独独立到一个css文件里）

注意：大型项目推荐使用方式3，若使用方式3，需要在HTML文件中的head标签中引入css文件

<!-- href中写css文件所在的地址 -->
<link rel="stylesheet" href="../css/my.css">

代码示例

1. 改变格式

css1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css页面展示</title>

<!--    2. 内部样式，把style拿出来放在head标签里-->
    <style type="text/css">
        .blue{
            color:lightblue;
            font-size: medium;
        }
    </style>

<!--    引入css文件  -->
    <link rel="stylesheet" href="../css/my.css">

</head>
<body>
<!--1. 内嵌样式，不推荐 ，因为会把HTML和css耦合到一起，修改起来不方便-->
<h1 style="color: aquamarine">王老师</h1>
<h1 class="blue">李老师</h1>
<h1 class="yellow">马老师</h1>

<!--方式3 ：推荐，写在单独的css文件中-->

</body>
</html>

my.cs

.yellow{
    color: deeppink;
}

2. 对属性进行复用：class中可以一次引用多个css代码块

css2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    引入css文件  -->
    <link rel="stylesheet" href="../css/my.css">
</head>
<body>
<p class="red bigSize">段落1</p>
<p class="red smallSize underLine">段落2</p>
<p class="bigSize underLine">段落3</p>

</body>
</html>

my.css

.red{
    color: red;
}
.bigSize{
    font-size: 50px;
}
.underLine{
    text-decoration: underline;
}
.smallSize{
    font-size: 20px;
}

三、盒模型

div标签：一块特定的区域，块级元素，独占一行

盒子中5个主要属性：width、height、padding、border、margin

padding:内边距 margin：外边距

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*选中页面上所有的div标签*/
        .div1{
            color: yellow;
            background: aqua;
            width: 200px;
            height: 200px;
            /*把两个div间隔*/
            margin: 2px;
            /*让两个div在一行*/
            float: left;
        }
        .div2{
            color: red;
            background: blue;
            width: 200px;
            height: 200px;
            /*把两个div间隔*/
            margin: 2px;
            /*让两个div在一行*/
            float: left;
        }
    </style>

</head>
<body>
<div class="div1">你好你好</div>
<div class="div2">再见再见</div>
</body>
</html>