Lightning Data Services (LDS):

Use Lightning Data Service to load, create, edit, or delete a record

in your component without requiring Apex code. Lightning Data
Service handles sharing rules and field-level security for you. In
addition to simplifying access to Salesforce data, Lightning Data
Service improves performance and user interface consistency.

At the simplest level, you can think of Lightning Data Service as

the Lightning components version of the Visualforce standard
controller. While this statement is an oversimplification, it serves to
illustrate a point. Whenever possible, use Lightning Data Service
to read and modify Salesforce data in your components.

Cache framework: In this framework, we can fetch data using the base
component
It simply creates updates or views a record.

These components are built on top of UI API. the same UI is used to build
This framework shows only the records which currently logged in (all the
security settings are applicable)

Components -
lightning-record-form:
lightning-record-form implements Lightning Data Service and doesn't
require additional Apex controllers to create or edit record data. It also
takes care of field-level security and sharing for you, so users see only the
data that they have access to.

Lightning-record-view-form:
lightning-record-view-form requires a record ID to display the fields on the
record. It doesn't require additional Apex controllers or Lightning Data
Service to display record data. This component also takes care of field-
level security and sharing for you, so users see only the data they have
access to.

Lightning-record-edit-form:
Use the lightning-record-edit-form component to create a form that's used
to add a Salesforce record or update fields in an existing record on an
object. The component displays fields with their labels and the current
values and enables you to edit their values.

EXAMPLE -

lightningDesignComponent - Component

lightningDesignComponent.html

<template>
<lightning-card title="Lightning-Record- Form">
<lightning-record-form
 object-api-name="Account"
layout-type="Full"
record-id="0015g00000HwEihAAF"
></lightning-record-form>

<lightning-record-form
object-api-name={objectApiName}
layout-type="Compact"
record-id={recordId}
></lightning-record-form>
<lightning-record-form
object-api-name="Account"
layout-type="Full"
record-id={recordId}
></lightning-record-form>

<lightning-record-form
object-api-name={objectApiName}

record-id={recordId}
fields= {fields}
></lightning-record-form>

<lightning-record-view-form object-api-name={objectApiName} record-

id={recordId}>
 <div class="slds-grid">
<div class="slds-cols slds-size_1-of-3">
<lightning-output-field field-name="Name"></lightning-output-field>
<lightning-output-field field-name="Phone"></lightning-output-field>
</div>
<div class="slds-cols slds-size_1-of-3">
<lightning-output-field field-name="Rating"></lightning-output-field>
<lightning-output-field field-name="Industry"></lightning-output-field>
</div>
</div>
</lightning-record-view-form>

<lightning-record-form
object-api-name={objectApiName}
record-id={recordId}
layout-type="Full"
mode="edit"
onsuccess={saveHandlerMethod}
></lightning-record-form>

<lightning-record-edit-form object-api-name={objectApiName} record-

id={recordId}>
<div class="slds-grid slds-gutters">
<div class="slds-cols slds-size_1-of-2">
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Phone"></lightning-input-field>
<lightning-input-field field-name="Website"></lightning-input-field>
 <lightning-input-field field-name="Industry"></lightning-input-field>
<lightning-button label="Save Record" variant="success"
type="submit"></lightning-button>

</div>
</div>
</lightning-record-edit-form>

<lightning-record-edit-form object-api-name={objectApiName}>
<div class="slds-grid slds-gutters">
<div class="slds-cols slds-size_1-of-2">
<lightning-messages></lightning-messages> <!--use to display error msg--
>
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Phone"></lightning-input-field>
<lightning-input-field field-name="Website"></lightning-input-field>
<lightning-input-field field-name="Industry"></lightning-input-field>
<lightning-input-field field-name="Ownership"></lightning-input-field>
<lightning-button label="Save" variant="success" type="submit"
></lightning-button>
<lightning-button label="Cancel" type="cancel" variant="success"
onclick={cancelHandlerMethod}></lightning-button>

</div>
</div>
</lightning-record-edit-form>

lightningDesignComponent.js
import { LightningElement, api } from 'lwc';
import Industry from '@salesforce/schema/Account.Industry';
import Name from '@salesforce/schema/Account.Name';
import Rating from '@salesforce/schema/Account.Rating';
import Website from '@salesforce/schema/Account.Website';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class LightningDesignComponent extends LightningElement {

@api recordId;
@api objectApiName;

fields = [Name,Rating,Industry,Website]
saveHandlerMethod(){
const evt = new ShowToastEvent({
title:'Record Updated Success',
message:'Congratulations Record Updated Successfully..!!',
variant:'success'
});
this.dispatchEvent(evt);
}
cancelHandlerMethod(event)
{

const ab = this.template.querySelectorAll('lightning-input-field');
if(ab){
ab.forEach(field=>{
field.reset();
 });
}
}
}

lightningDesignComponent.meta-xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>

<targets>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
<object>Contact</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>

Thank You