Compartilhamento de tecnologia

[Introdução ao HTML] Lição 4 - Quebras de linha, linhas divisórias e comentários HTML

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Nesta seção, continuamos a falar sobre o conhecimento introdutório de HTML, incluindo quebras de linha, separação horizontal de linhas e comentários (comentários HTML).

Índice

1 nova linha

2 Dividir linhas horizontais

3 comentários HTML

1 nova linha

html é dividido emelemento de bloco e elementos embutidos. Nesta seção, não vamos falar primeiro sobre esses elementos. Vamos falar primeiro sobre quebras de linha. Por que falamos sobre elementos de bloco? Você poderá entender isso mais tarde.

A quebra de linha é a tag br, o que significa que as duas partes do conteúdo podem ser separadas e uma quebra de linha é produzida no meio.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是第一段内容</p>
  12.         <p>这是第二段内容</p>
  13.     </body>
  14. </html>

Vejamos o efeito acima, porque a tag p em si é um elemento de bloco, e o elemento rápido significa que se você escrever dois elementos p, eles serão agrupados. Porém, após o elemento p ser encapsulado, a altura gerada no meio é certa e será controlada por algumas configurações padrão.

E daí se você quiser que o espaço de quebra de linha entre os dois elementos do bloco seja maior? Ou quero um efeito de quebra de linha no meio do texto? Você consegue fazer isso:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是<br/>第一段内容</p>
  12.         <br/>
  13.         <p>这是第二段内容</p>
  14.     </body>
  15. </html>

 

Conforme mostrado na imagem acima, as duas tags p têm um grande efeito de espaçamento no meio. Além disso, o texto na primeira tag p também tem o efeito de quebra de linha.

2 Dividir linhas horizontais

Este é o site oficial de uma universidade. Veja a linha horizontal no meio. Ela pode ser chamada de linha horizontal ou linha horizontal divisória. Ele pode usar várias maneiras para conseguir isso, então uma delas é a mencionada nesta seção. O nome da tag é hr. Vamos dar uma olhada no efeito do código:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是第一段内容</p>
  12.         <hr/>
  13.         <p>这是第二段内容</p>
  14.     </body>
  15. </html>

Isso cria uma divisão de linha horizontal. Claro, se você quiser obter o efeito do exemplo da imagem, precisará adicionar algum controle de estilo ou usar outras soluções para alcançá-lo.

3 comentários HTML

Como desenvolvedor, escrever comentários é muito importante. Se o seu código não tiver comentários, será fácil para outras pessoas não entendê-lo quando você olhar para ele depois de um tempo. Ou se você não escrever comentários, será fácil para outras pessoas não entenderem seu código quando ele estiver. entregue a outros, ou é muito difícil de assistir.

Além disso, os comentários são um tipo de conteúdo que os desenvolvedores usam para se lerem, não para serem lidos por máquinas, nem para serem exibidos em navegadores, portanto, os comentários não serão exibidos na página da web.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <!-- 这是第一行代码的注释内容 -->
  12.         <p>这是第一段内容</p>
  13.         <hr/>
  14.         <!-- 这里是第二行哦 -->
  15.         <p>这是第二段内容</p>
  16.     </body>
  17. </html>

Como no código acima, adicionamos comentários a duas linhas de código, respectivamente, para contar aos desenvolvedores algo sobre eles mesmos. Mas não será exibido no navegador.

Perfil pessoal

Ele se dedica à pesquisa de tecnologia há mais de trinta anos e é proficiente em diversas linguagens como java, linux, javascript, php, css, etc., e fez muitas contribuições no campo de código aberto. uma estação de documentação do desenvolvedor para compartilhar alguns problemas no desenvolvimento de tecnologia para referência futura.

minhas informações de contato

Correspondência