[Introducción a HTML] Lección 4 - Saltos de línea, líneas divisorias y comentarios html

2024-07-12

En esta sección, continuamos hablando sobre el conocimiento introductorio de HTML, incluidos los saltos de línea, la separación de líneas horizontales y los comentarios (comentarios HTML).

Tabla de contenido

1 nueva línea

2 líneas horizontales divididas

3 comentarios html

1 nueva línea

html se divide enelemento de bloque y elementos en línea. En esta sección, no hablemos primero de estos elementos. Hablemos primero de los saltos de línea. ¿Por qué hablamos de elementos de bloque? Quizás lo entiendas más adelante.

El salto de línea es la etiqueta br, lo que significa que las dos partes del contenido se pueden separar y se produce un efecto de salto de línea en el medio.


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

Veamos el efecto anterior, porque la etiqueta p en sí es un elemento de bloque, y el elemento rápido significa que si escribe dos elementos p, se ajustarán. Sin embargo, una vez ajustado el elemento p, la altura generada en el medio es cierta y será controlada por algunas configuraciones predeterminadas.

Entonces, ¿qué pasa si desea que el espacio de salto de línea entre los dos elementos del bloque sea mayor? ¿O quiero un efecto de salto de línea en medio del texto? Puedes hacerlo:


<!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>

Como se muestra en la imagen de arriba, las dos etiquetas p tienen un gran efecto de espaciado en el medio. Además, el texto de la primera etiqueta p también tiene el efecto de ajuste de línea.

2 líneas horizontales divididas

Este es el sitio web oficial de una universidad. Mire la línea horizontal en el medio. Se puede llamar línea horizontal o línea horizontal divisoria. Puede utilizar muchas formas para lograrlo, por lo que una de ellas es la que se menciona en esta sección. El nombre de la etiqueta es hr. Echemos un vistazo al efecto del código:


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

Esto crea una división de línea horizontal. Por supuesto, si desea lograr el efecto en el ejemplo de la imagen, debe agregar algún control de estilo o usar otras soluciones para lograrlo.

3 comentarios html

Como desarrollador, escribir comentarios es muy importante. Si su código no tiene comentarios, será fácil que otros no lo entiendan cuando lo revise después de un tiempo. O si no escribe comentarios, será fácil que otros no entiendan su código cuando esté. entregado a otros, o es muy difícil de ver.

Además, los comentarios son un tipo de contenido que los desarrolladores utilizan para leer ellos mismos, no para que los lean las máquinas ni para mostrarlos en los navegadores, por lo que los comentarios no se mostrarán en la página 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>

Como en el código anterior, agregamos comentarios a dos líneas de código respectivamente para decirles a los desarrolladores algo sobre ellos mismos. Pero no se mostrará en el navegador.

Compartir tecnología