Html | tag dettagli

Organizzare i dati su un sito Web è un compito cruciale. Più specificamente, quando aggiungiamo un testo di grandi dimensioni, l'organizzazione dei dati aiuta a evitare problemi di leggibilità per gli utenti. In un altro scenario, l'utente desidera vedere solo le informazioni quando fa clic su una particolare sezione. A tale scopo, l'HTML "<Dettagli>"Viene utilizzato il tag, che può essere fatto clic per visualizzare o nascondere i dettagli. Inoltre, il tag di riepilogo aggiunto nel tag dettagli viene utilizzato per aggiungere intestazioni visibili.

Questo tutorial fornirà una guida dettagliata sul tag HTML.

Come utilizzare il tag HTML?

Per utilizzare il tag HTML, seguire la sintassi fornita:

Alcuni intestati

Contenuto…

Nella sintassi sopra data:

• è il tag iniziale.
• Il tag viene utilizzato per specificare un'intestazione visibile per i dettagli.
• è il tag di chiusura.

• Il tag specifica alcuni contenuti di paragrafo nella pagina.

• è il tag di chiusura.
• è il tag di chiusura.

Esempio: come inserire l'elemento in HTML?

Innanzitutto, aggiungi/crea un elemento div con un nome di classe "Desc"In HTML. All'interno di questo elemento div, aggiungi

elemento per specificare alcuni contenuti di paragrafo come mostrato di seguito:

Ecco l'elenco dei tag HTML con i loro dettagli:

All'interno di questo elemento Div, aggiungi tanti tag di dettaglio che desideri. Qui in questo esempio, aggiungeremo tre tag dettagli insieme al tag HTML e

etichetta:

Tag HTML BR

Il tag HTML BR viene utilizzato per aggiungere una rottura di riga.

Tag della testa HTML

Il tag Head HTML viene utilizzato per contenere i metadati.

Tag HTML P

Il tag HTML P viene utilizzato per aggiungere un paragrafo.

Il codice sopra fornito si tradurrà nell'output corrispondente:

Quindi sì, la struttura è stata completata, ora, applicano alcune proprietà CSS per un layout migliore.

Stile "Desc" Div

.Desc
Altezza: 250px;
Margine: 0px Auto;
Bordo: 3px Solid #9C2C77;
larghezza: 80%;
imbottitura: 5px 10px;
Font-size: 16px;
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;
Background-color: #f2c0f5;

L'elemento Div con classe "Desc"Viene applicato con le seguenti proprietà:

• "altezza"La proprietà viene utilizzata per l'impostazione dell'altezza dell'elemento.
• "margine"Proprietà con il valore impostato come"0px Auto"Indica lo spazio di 0px nella parte superiore-fondo e lo spazio uguale sui lati a sinistra a destra.
• "confine"Proprietà con il valore impostato come"3px grigio solido"Definisce la larghezza della linea di confine come 3px, lo stile del bordo solido e il colore del bordo.
• "larghezza"La proprietà viene utilizzata per impostare/regolare la larghezza dell'elemento.
• "imbottitura"Proprietà con il valore impostato come"5px 10px" indica "5px"Spazio sul fondo superiore e"10px"Spazio sulla sinistra-destra del contenuto dell'elemento.
• "dimensione del font"L'attributo specifica la dimensione del carattere di un elemento.
• "famiglia di font"È impostato con l'elenco degli stili di carattere per garantire se una famiglia di carattere non è supportata dal browser, altri verranno applicati.
• "colore di sfondo"La proprietà è impostata per specificare il colore di sfondo dell'elemento.

Elemento "Dettagli" di stile

dettagli
Cursore: puntatore;
Font-Family: corsivo;

L'elemento dettagli HTML viene applicato con le seguenti proprietà:

• "cursore"Proprietà con il valore impostato come"Pointer"Modificherà il cursore del mouse come una mano indicata quando si libra sul contenuto dell'elemento.
• "famiglia di font"Proprietà assegnata con il valore"corsivo", Specificare il testo in stile corsivo.

Elemento "Riepilogo" di stile

riepilogo
Font-weight: audace;

Il tag di riepilogo viene applicato con "Font-peso"Proprietà con il valore"grassetto".

Il codice sopra fornirà i risultati come mostrato nell'immagine seguente:

È così che possiamo implementare l'elemento HTML.

Conclusione

Durante lo sviluppo di un sito Web, è necessario posizionare i dati in modo organizzato. Soprattutto quando un testo lungo viene inserito su un sito Web, può causare problemi di lettura, monitoraggio delle informazioni e altro ancora. Il tag HTML viene utilizzato per l'organizzazione dei dati e fornisce la funzionalità per nascondere o visualizzare i dettagli su Click. Questo blog ha dimostrato il tag HTML con un esempio pratico.