[Introduzione all'HTML] Lezione 4 - Interruzioni di riga, linee di divisione e commenti html

2024-07-12

In questa sezione continueremo a parlare della conoscenza introduttiva dell'HTML, comprese le interruzioni di riga, la separazione delle righe orizzontali e i commenti (commenti HTML).

Sommario

1 nuova riga

2 Dividere le linee orizzontali

3 commenti HTML

1 nuova riga

html è diviso inelemento di blocco ed elementi in linea. In questa sezione, non parliamo prima di questi elementi. Parliamo prima delle interruzioni di riga. Perché parliamo di elementi a blocchi Lo capirai più tardi.

L'interruzione di riga è il tag br, ciò significa che le due parti del contenuto possono essere separate e al centro viene prodotto un effetto di interruzione di riga.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是第一段内容</p>
        <p>这是第二段内容</p>
    </body>
</html>

Diamo un'occhiata all'effetto sopra, perché il tag p stesso è un elemento blocco e l'elemento fast significa che se scrivi due elementi p, andranno a capo. Tuttavia, dopo che l'elemento p è stato avvolto, l'altezza generata al centro è certa e sarà controllata da alcune impostazioni predefinite.

E se volessi che lo spazio di interruzione di riga tra i due elementi del blocco fosse più grande? Oppure voglio un effetto di interruzione di riga al centro del testo? Puoi farlo:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是<br/>第一段内容</p>
        <br/>
        <p>这是第二段内容</p>
    </body>
</html>

Come mostrato nell'immagine sopra, i due tag p hanno un ampio effetto di spaziatura al centro. Inoltre, anche il testo nel primo tag p ha l'effetto di andare a capo.

2 Dividere le linee orizzontali

Questo è il sito web ufficiale di un'università. Guarda la linea orizzontale al centro. Può essere chiamata linea orizzontale o linea orizzontale di divisione. Può usare molti modi per raggiungerlo, quindi uno di questi è quello menzionato in questa sezione. Il nome del tag è hr. Diamo un'occhiata all'effetto del codice:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是第一段内容</p>
        <hr/>
        <p>这是第二段内容</p>
    </body>
</html>

Questo crea una divisione in linea orizzontale. Naturalmente, se vuoi ottenere l'effetto nell'immagine di esempio, devi aggiungere qualche controllo di stile o utilizzare altre soluzioni per ottenerlo.

3 commenti html

Come sviluppatore, scrivere commenti è molto fondamentale. Se il tuo codice non ha commenti, sarà facile per gli altri non capirlo quando lo guarderai dopo un po'. Oppure se non scrivi commenti, sarà facile per gli altri non capire il tuo codice quando lo è consegnato ad altri, o è molto difficile da guardare.

Inoltre, i commenti sono un tipo di contenuto che gli sviluppatori utilizzano per leggere se stessi, non per essere letti dalle macchine, né per essere visualizzati nei browser, quindi i commenti non verranno visualizzati sulla pagina web.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <!-- 这是第一行代码的注释内容 -->
        <p>这是第一段内容</p>
        <hr/>
        <!-- 这里是第二行哦 -->
        <p>这是第二段内容</p>
    </body>
</html>

Come nel codice sopra, abbiamo aggiunto commenti rispettivamente a due righe di codice per dire agli sviluppatori qualcosa su se stessi. Ma non verrà visualizzato sul browser.

Condivisione della tecnologia