html css 和 js 如何协同工作的

html css 和 js 如何协同工作的
一个简单的登录样式的demo

在html中通过标签引入对应的css文件，例如：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log intitle>
    <link rel="stylesheet" type="text/css" href="login.css"/>
head>
1
2
3
4
5
6
7

标签写在标签层，这样就将css样式文件链接了过来。

在html中通过标签引入js文件，例如：

<body>
    <script type="text/javascript" src="login.js">script>
body>
1
2
3

写在层，相当于将对应的目标文件加载到了这里。

html有了css样式文件，就增加了灵魂，就知道如何取渲染UI样式。js文件中写一些逻辑处理，例如点击事件的处理等，除此外，js中也可以加html。

以下是一个简单的登录功能的例子：

login.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Log intitle>
    
    <link rel="stylesheet" type="text/css" href="login.css"/>
head>
<body>
    
    <div class="login">
        <div class="login_nav">
            <h3>
                <span>Log inspan>
            h3>
        div>
        <div class="login_icon">
        div>
        <div class="login_content">
            <div class="login_input">
                <input id="login_input_account" type="text" placeholder="User Name Or Email">
            div>
            <div class="login_input">
                <input id="login_input_pwd" type="password" placeholder="Password">
            div>
            <div class="login_button">
                <button onclick="loginBtnClick()">Log inbutton>
            div>
        div>
    div>
    
    <script type="text/javascript" src="login.js">script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

login.css

.login{
    height:100%;
}


.login_nav{
    background: #1672c1;
    height: 44px;
    text-align: center;
    font-size: 16px;
}
h3{
    padding: 6px; 
}


.login_icon{
    height: 120px;
}




input[type="text"]{
    border: 1px solid lightgray;
    border-radius: 3px;
    box-sizing: border-box;
    width: 70%;
    height: 44px;
    text-indent: 1em;
    font-size: 14px;
    margin-left: 15%;
    margin-top: 16px;
}
input[type="password"]{
    border: 1px solid lightgray;
    border-radius: 3px;
    box-sizing: border-box;
    width: 70%;
    height: 44px;
    text-indent: 1em;
    font-size: 14px;
    margin-left: 15%;
    margin-top: 16px;
}

input[type="text"]::placeholder,input[type="password"]::placeholder{
    color: lightgray;
}
button{
    width: 70%;
    height: 44px;
    text-indent: 1em;
    font-size: 14px;
    margin-left: 15%;
    margin-top: 20px;
    background-color: #1672c1;
    border: 1px solid #1672c1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

login.js

loginBtnClick = () => {
    const a = document.getElementById("login_input_account").value;
    const p = document.getElementById("login_input_pwd").value;
    if (!a || !p) {
        alert("Please input login info!");
        return;
    }
    alert("login Btn Clicked");
};
1
2
3
4
5
6
7
8
9

将login.html, login.css, login.js 放一个文件中，点击login.html，就可以在浏览器打开这个web页面了，浏览器内核会负责将html css 和 js进行"解释"，将对应标签和样式显示出来。

如果没有 css 的话，页面显示出来是这样的：

在这里插入图片描述
加了 css 样式修饰，是这样的

可以看出差距还是挺大的，css 可以说是 html 的灵魂，有了 css 的修饰，前端页面才会更加美观。

相关阅读:
AJAX入门：前端连接后端
FIR 基础应用 - AM 调幅波调制解调(FIR 低通滤波)
JavaWeb——关于servlet种mapping地址映射的一些问题
用户端APP自动化测试_L2
04_openstack之Glance镜像和云主机类型
（自学）黑客技术——网络安全
【Javascript】不满意网上的Token无感知刷新方案，自己琢磨了个感觉还不错~
Spring框架两大核心模块（8月5号）
BS框架说明
快速学习nginx反向代理

原文地址：https://blog.csdn.net/Morris_/article/details/126114048