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

在学习编程的时候，最重要的就是直接动手尝试，从实际挑战中逐渐作出调整。这个网站制作教程将根据以下几个步骤，手把手带你制作一个简易的网站，让你了解 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>

运行效果：