html、css和js代码分离

一、代码分离

网页主要由结构、表现和行为三部分组成。结构用于描述网页的框架，对应语言有HTML，HTML使用标签的形式来标识网页中的不同组成部分；表现用于控制页面元素的样式，对应语言有CSS；行为用于相应用户的操作，对应语言有JavaScript。

当我们开发项目，功能设计常常遵循以下几个原则：

1、避免重复原则，编程的最基本原则是避免重复，换句话说叫提高代码复用率。

2、简单原则，简单是用户最佳体验之一，而且简单的代码占用时间少，漏洞少，且易于修改。

3、低耦合原则，即这部分代码的使用和修改影响到其他部分的代码尽可能少，否则牵一发而动全身。

4、单一责任原则，某个代码的功能，应该保证只有单一的明确的执行任务，否则一旦修改会增加关联测试的繁琐程度。

因此代码分离是现代Web开发中的一个常见实践，可以提高代码的可维护性和重用性。html、css和js实现代码分离可以将其分别保存在不同的文件中，然后在 HTML 文件中通过和

styles.css

body{

font-family:Arial,sans-serif;

background-color: #f8f8f8;

}

h1{

color: #000;

}

script.js

document.addEventListener("DOMContentLoaded",(Event)=>{

console.log('Page is loaded and DOM is ready!');

});