网站基础开发教程

认识 HTML/CSS/JS

HTML/CSS/JS 是网站开发的三大基础技术。HTML 负责网页的结构和内容，CSS 控制页面的样式和布局，JavaScript 则实现交互功能和动态效果。这三项技术是成为前端开发者的第一步。无论是传统静态网站还是现代动态应用，它们都是不可或缺的。

但是作为AI开发，我们不需要掌握JS，但是HTML/CSS需要能够大概看得懂，因为AI开发需要和前端开发进行沟通，如果看不懂HTML/CSS，就无法和前端开发进行有效的沟通。

此视频需要订阅后观看

查看订阅方案

从零认识网页开发三件套

一、把网页想象成房子


🏠 房子结构 = HTML（定义哪里是门、窗、房间）
🎨 房子装修 = CSS（决定颜色、家具样式）
💡 房子功能 = JavaScript（控制灯光、门禁系统）

代码示例


<!-- HTML结构 -->
<div class="house">
  <h1>标题</h1>
  <p>内容</p>
</div>

<!-- CSS样式 -->
<style>
.house {
  border: 2px solid #333; /* 边框 */
  background: #f0f0f0;    /* 背景色 */
}
</style>

<!-- JavaScript交互 -->
<script>
document.querySelector('.house').addEventListener('click', () => {
  alert('你点击了房子!');
});
</script>

二、HTML - 网页的骨架

基础结构


<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到AI造物课堂</h1>
    <p>这里学习最有趣的编程知识！</p>
</body>
</html>

常用标签速查表

此内容需要订阅后查看

查看订阅方案