html+css+js编程入门----使用TitanIDE制作可切换主题的简单网页

本文链接：https://blog.csdn.net/weixin_53937255/article/details/137264559

本文指导读者通过TitanIDE，逐步学习HTML、CSS和JavaScript的关系，以实际项目为例，演示如何利用这三者构建一个具备基础结构、外观和交互功能的简易网站，强调实践的重要性。

摘要由CSDN通过智能技术生成

在学习编程的时候，最重要的就是直接动手尝试，从实际挑战中逐渐作出调整。这个网站制作教程将根据以下几个步骤，手把手带你制作一个简易的网站，让你了解 HTML、CSS 和 JS 之间的关系与基本操作：

当我们从建筑的角度来理解HTML、CSS和JavaScript三者之间的关系时，可以将其类比为一个建筑物的构建过程。下面是这个类比的具体解释：

HTML（HyperText Markup Language，超文本标记语言）：这相当于建筑的结构框架。HTML定义了网页的基本结构和内容，比如标题、段落、列表、链接、图片等。它就像是建筑物的钢筋骨架，提供了支撑和布局的基础。
CSS（Cascading Style Sheets，层叠样式表）：这可以看作是建筑的外观和装修。CSS负责网页的样式设计，包括颜色、字体、布局、动画等。它就像是建筑物的外观设计、涂料、装饰等，让网页看起来更加美观和吸引人。
JavaScript：这相当于建筑中的智能系统和交互功能。JavaScript用于实现网页上的交互效果，比如轮播图、表单验证、动态内容更新等。它就像是建筑物的智能系统，可以响应用户的操作，提供丰富的交互体验。

将这三者结合起来，就可以构建出一个完整、美观且具有交互性的网页。HTML提供了网页的基础结构，CSS为网页增添了美观的外观，而JavaScript则让网页变得更加智能和互动。这三者相互协作，共同构建出一个丰富多彩的网页世界。

此外，还有一些其他的技术和工具（比如后端语言、数据库、服务器等）可以类比为建筑的其他部分，如地基、管道、电气系统等，它们共同构成了一个完整的网站或应用。

1. 网页效果

2. 在 TitanIDE中创建项目

3. 输入项目名称和选择项目模板

4. 新建html文件并使用智能助手生成代码

5. 将生成的代码复制到新建的html文件，然后运行项目

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点击切换背景颜色</title>
  <style>
    body {
      background-color: #fff;
    }
    h1{
      text-align: center;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #bcb7b7;
      color: #fff;
      border: none;
      outline: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #383737;
    }
    .container {  
        width: calc(100% - 400px); /* 减去左右两边的边距 */  
        max-width: 1200px; /* 可选：限制最大宽度 */  
        padding: 20px; /* 内部填充，可根据需要调整 */  
        margin: 0 auto 200px; /* 设置左右边距 */  
        box-sizing: border-box; /* 包括padding和border在宽度内 */  
        background-color: #514152; /* 背景色可根据需要调整 */  
        border: 1px solid #ddd; /* 可选：添加边框 */  
    }  
  
    /* 设置段落文本的样式 */  
    p {
          
        text-align: left; /* 文本水平居中 */  
        margin: 0; /* 移除默认的段落边距 */  
        color: #fff;
    }  
  </style>
</head>
<body>
  <button onclick="changeBackground()">切换背景</button>
  <h1>TitanIDE</h1>
  <div class="container">
    <p>云原生时代您的首选Cloud IDE！
      云原生技术高速发展和后疫情时代远程办公等多因素的聚集，对软件研发这一智力密集型工作提出更高的要求也带来了新的挑战。<br>
      “工欲善其事，必先利其器”，我们开发者在创造灿烂的数字化文明的同时，自己的生产力工具几十年未曾发生根本性改变。<br>
      TitanIDE站在无数巨人的肩膀上，补齐全云端开发最后一公里，力图在“安全、高效、体验”这三个维度取得平衡。
      <br>现推出TitanIDE（社区版），对十人及以下团队全面免费开放，畅享全云端开发！</p>
  </div>
</body>
<script>
  function changeBackground() {
    var body = document.querySelector('body');
    if (body.style.backgroundColor === 'white') {
      body.style.backgroundColor = '#0aaddf';
    } else {
      body.style.backgroundColor = 'white';
    }
  }
</script>
</html>

运行效果：