Web开发基础学习——HTML中\＜div＞元素的理解

心外无物的工作技术笔记2024-12-02 8:58

Web开发基础学习系列文章目录

第一章基础知识学习之HTML中<div>元素的理解

文章目录

Web开发基础学习系列文章目录
前言
[一、在 React 中的使用](#一、在 React 中的使用)
[二、React组件中，index.js的挂载点为什么没有 \](#二、React组件中，index.js的挂载点为什么没有 )？
总结

前言

<div> 元素

定义：<div> 是一个块级元素，用于将内容分组或容器化。它没有特定的语义含义，通常用于布局和样式目的。
全称：<div> 是 "division" 的缩写，表示一个分区或部分。
用途：<div> 元素通常用于创建页面布局、包裹其他元素、应用 CSS 样式或 JavaScript 行为。

一、在 React 中的使用

在 React 应用中，
元素通常用于包裹组件或元素。例如，在你的 index.html 文件中，有一个 div 元素作为 React 应用的挂载点：

html 复制代码

<div id="root"></div>

在 index.js 文件中，React 会将组件渲染到这个 div 元素中：

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

二、React组件中，index.js的挂载点为什么没有 <script src="index.js">？

在现代的 React 项目中，通常使用构建工具（如 Create React App、Webpack、Vite 等）来处理 JavaScript 文件的打包和注入。这些工具会自动处理 JavaScript 文件的引用，因此你不需要手动在 HTML 文件中添加<script src="index.js"></script>。

总结

<div> 元素是一个块级元素，用于将内容分组或容器化。它没有特定的语义含义，通常用于布局和样式目的。
用途：
元素通常用于创建页面布局、包裹其他元素、应用 CSS 样式或 JavaScript 行为。
在 React 中的使用：
元素常用于包裹组件或元素，并作为 React 应用的挂载点。