前端基础几大件

HTML

在HTML当中，一切都是节点Object：（非常重要）
整个Html文档就是一个DOM文档节点。所有的节点都是Object。
操作元素节点，必须首先找到该节点。
• 文档
– 文档表示的就是整个的HTML网页文档
整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用
• 对象
– 对象表示将网页中的每一个部分都转换为了一个对象。
• 模型
– 使用模型来表示对象之间的关系，这样方便我们获取对象

HTML（超文本标记语言）是用于构建网页结构的标记语言，它由一系列的标签组成，用于定义网页的内容、布局和样式。DOM（文档对象模型）是浏览器提供的一种编程接口，它将网页的结构以对象的形式表示，使 JavaScript 能够与网页进行交互。

• DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将静态html网页转为一个JS对象，从而可以用脚本进行各种动态操作（比如增删内容）
• DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。 从本质上说，它将web页面和脚本或编程语言连接起来了。 静态变为动态：
  var div = document.getElementById(‘div1’);DOM将html静态组件转化为可操作的js对象
• 严格地说，DOM不属于JS，但是操作DOM是JS最常见的任务，而JS也是最常用于DOM操作的语言。DOM是浏览器厂商提供的js操作html的api，不同的浏览器厂商提供的api可能不同，所以dom存在兼容性问题（少部分）

HTML 和 DOM 之间的联系如下：

1. HTML 定义网页结构和内容：HTML 通过标签来定义网页的结构和内容，例如

   、

   、

   等。HTML 标签可以包含属性，用于指定元素的特定属性或行为。

2. 浏览器解析 HTML：当浏览器加载 HTML 文件时，它会解析 HTML 代码并构建 DOM 树。浏览器根据 HTML 标签和属性的定义，将 HTML 文档转换为具有层级结构的 DOM 元素。

3. JavaScript 操作 DOM：JavaScript 可以通过 DOM 接口来访问和操作 HTML 元素。通过 JavaScript，可以获取、修改、添加或删除 DOM 元素、属性和内容，从而实现与网页的交互和动态效果。

   例如，可以使用 JavaScript 通过 DOM 操作来获取元素、修改元素样式、添加事件监听器等：

   // 获取元素
   const element = document.getElementById('my-element');
   
   // 修改样式
   element.style.color = 'red';
   
   // 添加事件监听器
   element.addEventListener('click', () => {
     console.log('Element clicked');
   });
   

4. HTML 和 JavaScript 的交互：通过 JavaScript，可以响应用户的操作，根据用户的输入或事件触发相应的处理逻辑。JavaScript 可以修改 DOM 元素的内容、样式、结构等，从而实现动态的网页效果和交互功能。

总结来说，HTML 定义了网页的结构和内容，DOM 提供了 JavaScript 访问和操作网页的接口，JavaScript 利用 DOM 可以实现网页的交互和动态效果。HTML、DOM 和 JavaScript 三者之间紧密配合，共同构建了现代网页的功能和体验。

CSS

在前端开发中，可以使用 CSS（层叠样式表）来定义网页的样式和布局。以下是使用 CSS 的一般步骤：

1. 创建 CSS 文件：创建一个新的 CSS 文件，通常以 .css 作为文件扩展名。可以在 HTML 文件中使用 标签将 CSS 文件链接到网页中，或者在 HTML 文件中使用