Bloco HTML e elementos embutidos

Blocos HTML são o tópico de nossa discussão. Dependendo do tipo de elemento, os elementos HTML têm valores de exibição padrão.

Inline e block são os dois valores de exibição.

Índice-

Elementos de nível de bloco

Sempre há uma nova linha no início de um elemento de nível de bloco em HTML.

Em elementos de nível de bloco, a largura é sempre cheia (aumenta para a esquerda e para a direita o máximo que pode).

Os elementos inline não têm margens, enquanto os elementos de nível de bloco têm.

Divs “ <div> ” são elementos de nível de bloco.

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<div>Mr Examples</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo do elemento de nível de bloco:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<div>Mr example
<blockquote> Every thing you need to learn about html is here</blockquote>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os elementos de nível de bloco HTML são os seguintes:

elementos Visão geral
<endereço> Define as informações de contato do autor/proprietário de um documento ou artigo.
<artigo> Define um conteúdo autônomo e independente que pode ser autônomo e reutilizado em páginas diferentes.
<à parte> Define o conteúdo tangencialmente relacionado ao conteúdo circundante, geralmente usado para barras laterais ou caixas de texto explicativo.
<blockquote> Usado para indicar uma seção do texto citado.
<canvas> Permite renderização dinâmica e com script de gráficos e visualizações.
<dd> Usado em conjunto com o
tag para definir uma descrição de um termo.
Um elemento contêiner genérico que não possui nenhum significado semântico específico.
<dl> Usado para definir uma lista de termos e suas descrições associadas.
<dt> Usado em conjunto com o
tag para definir um termo que está sendo descrito.
<conjunto de campos> Usado para agrupar elementos de formulário relacionados.
<figcaption> Usado para fornecer uma legenda ou descrição para um
elemento.
<figura> Usado para agrupar uma imagem ou vídeo com sua legenda ou descrição.
<rodapé> Define uma seção de rodapé para um documento ou seção de conteúdo.
<forma> Usado para criar um formulário HTML que permite aos usuários inserir dados.
<h1>–</h6> Tags de cabeçalho usadas para definir a hierarquia de conteúdo em uma página, com

sendo o mais importante e

sendo o menos importante.
<cabeçalho> Define uma seção de cabeçalho para um documento ou seção de conteúdo.
<hr> Usado para criar uma régua ou linha horizontal.
<li> Usado para definir um item de lista em uma lista ordenada ou não ordenada.
<principal> Usado para indicar a área de conteúdo principal de um documento.
<nav> Usado para definir uma seção de navegação para um documento ou site.
<noscript> Usado para fornecer um conteúdo alternativo para usuários que desativaram o JavaScript em seus navegadores.
<ol> Usado para definir uma lista ordenada.
<p> Usado para definir um parágrafo de texto.
<pré> Usado para definir texto pré-formatado, onde o espaço em branco é preservado e exibido conforme escrito no código HTML.
<seção> Usado para definir uma seção de conteúdo em um documento.
<tabela> Usado para criar uma tabela para exibir dados.
<rodapé> Usado para definir a seção de rodapé de uma tabela.
<ul> Usado para definir uma lista não ordenada.
<vídeo> Usado para incorporar conteúdo de vídeo em uma página da web.

Lembrete: Elementos embutidos não começam em uma nova linha. Em blocos HTML , um elemento embutido ocupa apenas o espaço necessário. Aqui é um elemento <span> dentro de um parágrafo <p> .

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><span>Mr Examples</span><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo do elemento inline:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><p>Hello there we are using the <b>inline element here</b></p><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os elementos inline HTML são os seguintes:

elementos Visão geral
<a> cria um hiperlink que pode ser clicado para navegar para outra página da Web, documento ou arquivo.
<abbr> usado para definir uma abreviação ou sigla, com a versão completa mostrada quando o usuário passa o mouse sobre o texto abreviado.
<acrônimo> uma marca obsoleta usada para definir um acrônimo, semelhante a <abbr>.
<b> torna o texto em negrito.
<bdo> usado para substituir a direcionalidade de texto padrão para idiomas que são lidos da direita para a esquerda, como árabe ou hebraico.
<grande> torna o texto maior.
<br> cria uma quebra de linha, normalmente usada para separar o texto em várias linhas.
<botão> cria um botão clicável que pode acionar uma ação ou enviar um formulário.
<cite> usado para indicar o título de um trabalho criativo, como um livro ou filme.
<código> usado para exibir código de computador ou outro conteúdo relacionado à programação.
<dfn> usado para definir um termo ou conceito.
<em> coloca o texto em itálico para indicar ênfase.
<i> semelhante a <em>, torna o texto em itálico, mas normalmente usado para fins estilísticos em vez de ênfase.
<img> exibe uma imagem na página da web.
<entrada> cria um elemento de formulário onde os usuários podem inserir dados, como texto ou números.
<kbd> usado para indicar a entrada do teclado, geralmente exibida em uma fonte monoespaçada.
<rótulo> associa um rótulo a um elemento de formulário, tornando mais fácil para os usuários entender quais informações precisam inserir.
<mapa> usado em conjunto com <img> para criar um mapa de imagem onde diferentes partes da imagem podem ser clicadas para navegar para diferentes páginas da web ou acionar ações.
<objeto> usado para incorporar conteúdo multimídia, como vídeo ou áudio, na página da web.
<saída> exibe o resultado de um cálculo ou script.
<q> indica uma citação, geralmente exibida entre aspas.
<samp> usado para exibir a saída de amostra de um programa de computador ou script.
<script>
 usado para incluir o código JavaScript na página da web.
<selecione> cria um menu suspenso onde os usuários podem selecionar em uma lista de opções.
<pequeno> torna o texto menor.
<período> usado para agrupar elementos para fins de estilo ou script.
<forte> torna o texto em negrito para indicar forte ênfase.
<sub> usado para exibir texto subscrito, normalmente menor e ligeiramente abaixo do texto principal.
<sup> usado para exibir texto sobrescrito, geralmente menor e ligeiramente acima do texto principal.
<área de texto> cria um elemento de formulário onde os usuários podem inserir várias linhas de texto.
<tempo>
 usado para indicar uma data ou hora, com formatação opcional.
<tt> exibe o texto em uma fonte monoespaçada, semelhante a <kbd>.
<var> indica uma variável ou valor de espaço reservado em um programa de computador ou script.
Lembrete: Observe que elementos em nível de bloco não podem ser incluídos em elementos inline.

Block and Inline CSS Podemos aplicar propriedades CSS tanto ao bloco quanto ao elemento inline aqui está como você pode fazer isso quando se trata de blocos HTML:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><style><br>blockquote{<br>color: red;<br>}<br>i{<br>color: green;<br>}<br></style><br><br><br><div>Mr example<br><blockquote> Every thing you need to learn about html is here</blockquote><br></div><br><p>Here is example of <i>inline element</i> using CSS</p><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O elemento <div> Os elementos <Div> são comumente usados ​​como recipientes para outros elementos HTML . Divs não podem ter atributos obrigatórios, mas estilo, classe e id são obrigatórios. Blocos de conteúdo podem ser estilizados usando o elemento div quando combinados com CSS :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><div style="background-color:tomato;color:black;padding:26px;"><br><h2>New York</h2><br><p>New York is the capital city of America. It is the most populous city in the America.</p><br></div><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os contêineres <span> ElementInline, ou <spans> , são utilizados para marcar blocos de texto ou documentos como se fossem blocos HTML. Não há atributos obrigatórios para a tag <span> , mas style , class e id são todos padrão atributos .Operando a tag <span> e CSS, você pode estilizar partes específicas do texto:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><p>My father has <span style="color:blue;font-weight:bold">green</span> eyes<br>and my mother has <span style="color:darkolivegreen;font-weight:bold"><br>blue</span> eyes.</p><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os elementos Inline e Block diferem das seguintes maneiras:

Elementos embutidos Elementos de bloco
Apenas a largura necessária é ocupada por elementos inline. Independentemente de sua necessidade, os elementos de bloco ocupam toda a largura.
Elementos embutidos não começam em uma nova linha em blocos HTML. As linhas sempre começam no início de um elemento de bloco quando se trata de blocos HTML.
É possível ficar atrás de elementos inline ao usar elementos inline em blocos HTML. O elemento de bloco impede que outros elementos fiquem atrás dele.
Não há margens superior e inferior para elementos embutidos. Há uma margem na parte superior e inferior dos elementos do bloco.

Tags HTML Tag Descrição <div> Seções em um documento (níveis de bloco) e <span> Descreve como as seções de um documento são estruturadas (em linha) em blocos HTML.

Aqui está uma lista completa de todas as tags HTML disponíveis.

Resumo do capítulo

  • Block e inline são os dois valores de exibição.

  • Os elementos em nível de bloco ocupam toda a largura quando começam em uma nova linha.

  • Um elemento inline ocupa o espaço necessário e não inicia em uma nova linha.

  • Divs são elementos de nível de bloco que geralmente são usados ​​para conter outros elementos HTML.

  • Contêineres embutidos como <spans> podem ser usados ​​para marcar partes de texto ou documentos.

Se este artigo de alguma forma atendeu às suas necessidades educacionais, deixe sua reação abaixo como forma de agradecimento ou como fonte de sugestão para o aprimoramento deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.