一个极快理解HTML、CSS和JavaScript的小案例学习_十个勤天网页设计-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_57443706/article/details/138226841

本文介绍了如何使用HTML创建网页结构，包括内联、内部和外部CSS样式的应用，以及如何通过JavaScript实现页面行为，如按钮点击触发弹窗。

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

一、HTML的创建（定义网页的内容）

使用pycharm创建一个index.html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>十个勤天简介</title>
</head>

<body>
    <h1>十个勤天</h1>
    <p>十个勤天这个名字来源于一档综艺节目《种地吧》</p>
</body>
</html>

在index.html处右击打开于，选择谷歌浏览器运行结果。

二、CSS样式（层叠样式表cascading style sheets）

内联样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>十个勤天简介</title>
</head>

<body>
    <!--    内联样式设置-->
    <h1 style="textalign:center;color:blue">十个勤天</h1>
    <p style="padding:20px;background:yellow">十个勤天这个名字来源于一档综艺节目《种地吧》</p>
</body>
</html>

2.内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>十个勤天简介</title>
    <!--    内部样式设置-->
    <style>
        h1{
        text-align:center;
        color:blue
        }
        p{
        padding:20px;
        background:yellow
        }
    </style>
</head>
<body>
    <h1>十个勤天</h1>
    <p>十个勤天这个名字来源于一档综艺节目《种地吧》</p>
</body>
</html>

3.外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>十个勤天简介</title>
    <!--外部样式设置-->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>十个勤天</h1>
    <p>十个勤天这个名字来源于一档综艺节目《种地吧》</p>
</body>
</html>

新建一个style.css文件，代码如下。

<!--外部样式设置-->
<style>
    h1{
    text-align:center;
    color:blue
    }
    p{
    padding:20px;
    background:yellow
    }
</style>

样式应用结果如下。

三、JavaScript （描述网页的行为）

1.在页面内嵌入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>十个勤天简介</title>
    <!--外部样式设置-->
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <h1>十个勤天</h1>
    <p>十个勤天这个名字来源于一档综艺节目《种地吧》</p>
    <button onclick="displayAlert()">点一下试试</button>
    <!--    页面内部JavaScript-->
    <script>
        function displayAlert(){
            alert('向天再求十个大晴天')
        }
    </script>
</body>
</html>

2.外部JavaScript文件引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>十个勤天简介</title>
    <!--外部样式设置-->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--页面外部引入JavaScript-->
    <script src="main.js"></script>
</head>
<body>
    <h1>十个勤天</h1>
    <p>十个勤天这个名字来源于一档综艺节目《种地吧》</p>
    <button onclick="displayAlert()">点一下试试</button>
</body>
</html>

main.js代码设置。

function displayAlert(){
    alert('向天再求十个大晴天')
}

效果图如下。