HTML、CSS和JavaScript是前端编程密不可分的三大语言，我们一般看到的网页都由这三种语言组合编程而成。这三者之间究竟有什么样的关系？他们又是通过什么样的软件编成的呢？
目录
1.HTML、CSS和JavaScript之间的关系
2.网页制作实战
HTML、CSS和JavaScript之间的关系
我们平时看到的网页就像是一座已经建好的房子，而这三个编程语言则分别负责房子的结构（Structure）、样式（Styling）和功能（Functionality）。对一个完整的网页而言，三者几乎缺一不可。但在极端情况下，只要有HTML就可以制作出最简单的网页，CSS和JavaScript则会为网页赋予更精美的样式和更多样的功能。
.HTML文件：网页的基本架构，一般在这里调用CSS和JS文件.CSS文件：网页样式文件，调整网页的整体颜色、位置、字体、按钮等设计.JS文件：赋予网页的交互功能，例如：用户点击、输入等操作会触发哪些功能
网页制作实战
在学习编程的时候，最重要的就是直接动手尝试，从实际挑战中逐渐作出调整。这个网站制作教程将根据以下几个步骤，手把手带你制作一个简易的网站，让你了解HTML、CSS和JS之间的关系与基本操作：
1.草拟网站内容2.在Lightly中编写代码3.使用HTML建立网站基本框架4.使用CSS调整网站设计5.使用JavaScript添加网站功能
我们在此次教程中使用轻量且功能强大的Lightly集成开发工具（IDE），学习过程中无需下载任何编程软件，也无需熟记复杂的界面操作，只需要通过网页打开就可以在线上实时编写代码，通过一键运行完成网页制作。
这个网页制作教程会教大家制作一个可切换浅色和深色主题的简单网页，网页的效果大致如下：
在Lightly创建HTML文件
注册并登录Lightly账户后，点击“新建项目”并创建HTML文件。
打开项目后，你会发现Lightly已经为我们分别建好了Index.html、style.css和script.js三个文件。
使用HTML建立框架
仔细看index.html的代码，Lightly也为我们关联好了CSS和JS文件，关联这两个文件的代码分别如下：
!---关联CSS文件的代码---linktype="text/css"rel="stylesheet"href="css/style.css"/!---关联JS文件的代码---scripttype="text/javascript"src="js/script.js"/script
在正式开始网页的编程之前，我们也可以先调整head标签中的页面信息，同时确保CSS和JS文件正确关联。
headmetacharset="UTF-8"titleLightly网页制作/title!---这里可以修改页面标题---linktype="text/css"rel="stylesheet"href="css/style.css"/scripttype="text/javascript"src="js/script.js"/script/head
添加网页内容body标签含有网页的主要内容，如果直接点击右上角的小眼睛，目前只会弹出“HelloWorld!”。我们可以修改body/body里的内容，让网页变得更丰富。
body!---这里的内容是评论，不会显示在网页中---!---h1标题---h1网页制作指南/h1!---p=paragraph段落---pid="msg"任务清单/p!---ul=unorderedlist无序号列表---!---ol=orderedlist有序号列表---!---li即列表中的内容---ulliclass="list"添加可视化设计/liliclass="list"添加浅色与深色主题/lili添加切换主题功能！/li/ul/body
添加好内容后，我们可以在此预览网页：
只修改了HTML部分的网页只有黑白文字，没有设计。
使用CSS设计网页
完成网页的基本结构后，我们转到style.css文件，开始为网页设计编程。Lightly
的
style.css文件默认为空白，我们可以尝试添加以下参数代码：
定义颜色名称
/*CSS的评论代码与HTML不同*//*使用根目录定义颜色*/:root{--green:#f0fff0;--white:#ffffff;--black:#;}*{color:var(--fontColor);}
更改字体样式
body{/*设置背景颜色，调整文本为黑体、居中*/font-family:SimHei;text-align:center;background:var(--bg);}ul{/*设置ul文本为宋体*/font-family:SimSun;}
为列表设置边框
/*为ul添加边框*/.feature{text-align:left;font-size:24px;margin:auto;width:px;height:px;outline:solid1px;/*将列表内容居中*/display:flex;justify-content:center;align-items:center;}
添加浅色主题
/*添加浅色主题*/.light-theme{color:var(--black);background:var(--green);}
在刷新网页之前，我们需要回到.HTML文件为body标签添加浅色主题：
bodyclass="light-theme"
同时在ul的上下方添加div标签，注意需要为div标签添加class：
divclass="feature"ul.../ul/div
完成后CSS文件配置后，回到.HTML文件重新加载网页查看效果：
使用JavaScript实现主题切换
掌握基本的CSS设计后，我们可以尝试进一步编写JavaScript代码，让网页实现深色和浅色主题切换的功能。
首先，我们需要在.html文件中添加“切换主题”的按钮：
!---div=division分区---divbuttonclass="btn"onclick="function()"切换深色/button/div
接着，把head中的script.js关联代码移动（剪切+粘贴）到/body标签结束前：
scripttype="text/javascript"src="js/script.js"/script/body
在添加切换功能前，我们需要添加并调整CSS的主题：
/*添加浅色主题*/.light-theme{--bg:var(--green);--fontColor:var(--black);--btnBg:var(--black);--btnFontColor:var(--white);}/*添加深色主题*/.dark-theme{--bg:var(--black);--fontColor:var(--green);--btnBg:var(--white);--btnFontColor:var(--black);}
然后调整按钮设计：
/*调整按钮设计*/.btn{position:absolute;top:20px;left:px;height:50px;width:50px;border-radius:50%;border:none;color:var(--btnFontColor);background-color:var(--btnBg);}/*添加点击效果*/.btn{outline-style:none;}
最后，转到script.js文件并添加按钮功能：
//为switcher添加定义constswitcher=document.querySelector(.btn);//使用监听功能监听按钮动态switcher.addEventListener(click,function(){document.body.classList.toggle(dark-theme)//使用if功能实现主题切换varclassName=document.body.className;if(className=="light-theme"){this.textContent="切换深色";}else{this.textContent="切换浅色";}console.log(currentclassname:+className);});
所有步骤完成后，重新预览网页效果。现在，点击按钮即可切换主题颜色：