Gli elementi in HTML possono essere classificati in due elementi più ampi, in linea e blocca. Gli elementi di blocco rompono il flusso di contenuto e avviano una nuova linea mentre gli elementi in linea mantengono il contenuto all'interno della linea e occupano solo una quantità specifica di spazio. Gli elementi del blocco prendono tutto lo spazio della larghezza dell'elemento genitore e la loro rottura della linea si estende anche la pagina in verticale.
Poiché HTML supporta un lungo elenco di elementi, può essere difficile per un nuovo programmatore HTML differenziarli. Tenendo conto dell'importanza, questa guida presenta il seguente risultato di apprendimento:
illumina le differenze tra elementi a blocchi e in linea
Dimostrare diversi elementi di blocco e in linea
Quali sono le differenze tra elementi a blocchi e in linea
I seguenti sono i punti di differenziazione che chiarirebbero il concetto di elementi a blocchi e in linea in HTML.
Gli elementi del blocco aggiungono spazio rompendo la linea prima e dopo averla utilizzata. Mentre gli elementi in linea sono praticati all'interno della linea specifica e non consumano spazio extra.
Gli elementi in linea supportano solo l'imbottitura sinistra e destra mentre gli elementi a blocchi supportano l'imbottitura in entrambe le direzioni verticali e orizzontali
Gli elementi in linea supportano piccoli file mentre creano piccole strutture. Mentre gli elementi di blocco supportano file di grandi dimensioni mentre creano strutture di grandi dimensioni.
Quando viene chiamato un elemento in linea, funziona solo per quei file che richiedono quell'elemento in linea. D'altra parte, gli elementi del blocco contengono vari elementi a blocchi e in linea. Pertanto, quando viene chiamato l'elemento del blocco genitore, verrebbero applicati tutti gli elementi a blocco e in linea.
Come funzionano gli elementi di blocco e in linea in HTML
Questa sezione fornisce la funzionalità di diversi elementi di blocco e in linea.
Blocca elementi: Abbiamo fornito l'applicabilità di pochi elementi di blocco in HTML che mostra il comportamento pratico degli elementi a blocchi.
Usando
:
Il tag di paragrafo in HTML rappresenta le righe di testo e cade nella categoria degli elementi di blocco di HTML.
Blocca elementi in HTML
Questo è un paragrafo
L'output del codice HTML su una pagina Web è fornito di seguito:+
Sebbene il testo del paragrafo sia limitato a poche parole, tuttavia, il tag paragrafo ha preso la larghezza completa (a partire dalla pagina).
Usando: Pratichiamo il tag più importante e comunemente usato utilizzando il seguente codice HTML.
Blocca elementi in HTML
Questo è un div
L'interfaccia Web del tag sopra è mostrata di seguito:
Come l'elemento di blocco del paragrafo, il tag DIV ha anche occupato l'intera larghezza della pagina.
Usando
dentro :
Come indicato e rappresentato in precedenza, gli elementi del blocco occupano la larghezza completa della pagina (tag genitore). È possibile limitare la larghezza del tag principale e i tag figlio occuperebbero lo spazio definito nel tag genitore. Ad esempio, il seguente codice HTML pratica il tagga etichetta.
Blocca elementi in HTML
questa è una pargaph
Il codice di cui sopra dichiara un tag che occupa il 50% della larghezza della pagina. UN
Il tag viene utilizzato all'interno del tag e il paragrafo occupa il 50% dello spazio del suo tag genitore ().
A parte e
, Di seguito sono descritti diversi altri elementi a blocchi: : utilizzato per rappresentare le informazioni di contatto : Il contenuto dell'articolo può essere descritto utilizzando questo tag : Utilizzato per separare il contenuto per linee orizzontali : La didascalia della figura è assegnata usando questo tag.
A
:
Questi tag definiscono l'intestazione di varie dimensioni da
A
: Utilizzato per iniziare una nuova sezione : è possibile assegnare il piè di pagina di una pagina o di una sezione
: può essere utilizzato per inserire una tabella in HTML DOC. : utilizzato per impostare un elenco ordinato
:
usato per organizzare gli articoli in modo non ordinato I collegamenti di navigazione possono essere inseriti utilizzando questo tag Elementi in linea: Gli elementi in linea hanno diversi scopi come evidenziare una parola specifica in una linea. Abbiamo mostrato la praticità di pochi elementi in linea in HTML: : Questo tag viene utilizzato per modificare le dimensioni del testo in piccoli che possono essere utilizzati per diritti d'autore o commenti. Ad esempio, le seguenti righe del codice HTML utilizzano tag in un paragrafo.
Elementi in linea in html
Benvenuti in Linuxhint
Copyrights: Linuxhint
Il tag nel codice sopra rappresenta un testo di copyright ed è più piccolo nel testo di un normale paragrafo. Di seguito è riportato il layout Web del codice:
: Questo è un altro tag in linea usato per fare riferimento a qualsiasi collegamento nella We-Page. Il seguente codice HTML rappresenta l'uso del tag.
L'immagine visualizzata di seguito rappresenta l'output del codice scritto sopra:
Diversi altri elementi in linea e il loro utilizzo sono descritti di seguito: : utilizzato per impostare l'abbreviazione del testo : in grassetto il testo : rompe la linea : La dimensione del testo può essere impostata più grande della media : si riferisce al restituzione del testo come base : Un pulsante può essere realizzato utilizzando questo tag : usato per citare un libro, un articolo, ecc. : Utilizzato per visualizzare il codice nel carattere predefinito del browser : Utilizzato per rappresentare il codice degli script sul lato client (JavaScript)
Conclusione
Gli elementi HTML si riferiscono al blocco o in linea. L'occupazione dello spazio è la differenza chiave tra elementi a blocchi e in linea in HTML. Questo articolo ha dimostrato un confronto dettagliato e il funzionamento di elementi a blocchi e in linea. Gli elementi in linea occupano la larghezza secondo la lunghezza del contenuto, mentre gli elementi del blocco coprono lo spazio secondo il loro tag genitore. La larghezza del tag principale è come la larghezza della pagina o secondo la larghezza impostata nella proprietà.