Qual é a diferença entre HTML marcas
https://stackoverflow.com/questions/183532
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Gostaria de pedir alguns exemplos simples que mostram os usos de <div> e <span>. Eu vi os dois usado para marcar uma seção de uma página com um id ou class, mas eu estou interessado em saber se há momentos em que um é preferido sobre o outro.
Solução
div é um elemento de bloco, span está em linha.
Isto significa que para usá-los semanticamente, divs deve ser usado para embrulhar seções de um documento, enquanto spans devem ser usados ??para embrulhar pequenas porções de texto, imagens, etc.
Por exemplo:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
Note que é ilegal colocar um elemento de nível de bloco dentro de um elemento inline, assim:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
... é ilegal.
EDIT: A partir de HTML5, alguns elementos de bloco pode ser colocado dentro de alguns elementos em linha. Consulte a referência MDN aqui para uma lista bastante claro. A descrição acima é ainda ilegal, como <span> só aceita fraseado conteúdo e <div> é conteúdo de fluxo.
Você pediu alguns exemplos concretos, por isso é uma tirada de meu site bowling, BowlSK :
<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
Ok, o que está acontecendo? No topo da minha página, eu tenho uma seção de lógica, o "cabeçalho". Uma vez que esta é uma seção, eu uso um div (com uma identificação apropriada). Dentro disso, eu tenho um par de seções: a barra de usuário e o título da página real. O título usa a tag apropriada, h1. O userbar, sendo uma secção, é envolto numa div. Dentro disso, o nome de usuário está envolvido em um span, para que eu possa mudar o estilo. Como você pode ver, eu também envolveu um span em torno de 2 letras do título -. Isto permite-me para mudar a cor em meu estilo
Observe também que HTML5 inclui um amplo novo conjunto de elementos que definem estruturas de páginas comuns, como o artigo, seção, nav, etc. Secção 4.4 do HTML 5 projecto de trabalho listas deles, e dá sugestões quanto ao seu uso. HTML5 ainda é uma especificação de trabalho, de modo que nada é "final" ainda, mas é altamente duvidoso que qualquer um destes elementos vão a lugar algum. Não é um hack javascript que você vai precisar usar se você quiser estilo esses elementos de alguma versão mais antiga do IE - basicamente você precisa para criar um de cada elemento usando document.createElement antes de qualquer desses elementos são especificados na sua fonte. Há um monte de bibliotecas que vai cuidar do presente para você - um rápido Google Search apareceu html5shiv .
Outras dicas
Apenas por uma questão de exaustividade, eu convido você a pensar nisso como esta:
- Existem muitos elementos de bloco (quebras de linha antes e depois) definidos em HTML, e muitas tags in-line (sem quebras de linha).
- Mas em HTML moderno todos os elementos devem ter significados : a
<p>é um parágrafo, um<li>é um item da lista, etc., e nós devemos usar a marca certa para o propósito certo - não é como nos velhos tempos quando nós recuado usando<blockquote>se o conteúdo era uma citação ou não .
- Então, o que você faz quando não é nenhum significado para a coisa que você está tentando fazer? Há nenhum significa para a 400px de largura de coluna, não é? Você só quer a sua coluna de texto a ser 400px de largura porque que combina com seu design.
- Por esta razão, eles adicionaram mais dois elementos de HTML: os elementos genéricos, ou sem sentido
<div>e<span>, porque caso contrário, as pessoas iriam voltar a abusar os elementos que têm significados .
Já há bom, respostas detalhadas aqui, mas há exemplos visuais, então aqui está uma ilustração rápida:
<div> é uma tag bloco, enquanto <span> é uma tag linha.
<div> é um elemento nível de bloco e <span> é um elemento inline.
Se você queria fazer alguma coisa com algum texto em linha, <span> é o caminho a percorrer, uma vez que não irá introduzir quebras de linha que uma <div> faria.
Como conhecida por outros, há algumas semântica implícitas com cada um deles, mais significativamente o fato de que um <div> implica uma divisão lógica no documento, semelhante a talvez uma seção de um documento ou algo assim, a la:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
A diferença importante real já está mencionado na resposta de Chris. No entanto, as implicações não vai ser óbvio para todos.
Como um elemento interno, <span> só pode conter outros elementos em linha. O código a seguir é, portanto, errado:
<span><p>This is a paragraph</p></span>
O código acima não é válido. Para envolver elementos de bloco de nível, um outro elemento de nível de bloqueio deve ser utilizado (tal como <div>). Por outro lado, <div> só pode ser utilizado em locais onde os elementos em nível de bloco são legais.
Além disso, essas regras são fixadas em (X) HTML e são não alterada pela presença de regras CSS! Assim, os seguintes códigos são também errado!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
A importância do "elemento de bloco" é implícita, mas nunca explicitamente. Se ignorarmos toda a teoria (teoria é boa), então o seguinte é uma comparação pragmática. O seguinte:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>
produz:
This paragraph has a span.
This paragraph
has
a div.
Isso mostra que não só deve um div não ser usado em linha, ele simplesmente não produzirá o efeito desejado.
Como mencionado em outras respostas, por div padrão será processado como um elemento de bloco, enquanto span será processado em linha dentro do seu contexto. Mas nem tem qualquer valor semântico; eles existem para permitir que você aplicar estilo e uma identidade a qualquer pouco de conteúdo. Usando estilos, você pode fazer um ato div como um span e vice-versa.
Um dos estilos úteis para div é inline-block
Exemplos:
Eu tenho usado inline-block a um grande sucesso, em projetos de web de jogo.
Div é um elemento de bloco e span é um elemento inline e sua largura depende do conteúdo do mesmo auto, onde div não
Eu diria que se você conhece um pouco de espanhol para olhar este página , onde é explicado corretamente.
No entanto, uma definição rápida seria que div é para seções que dividem e span é para aplicar algum tipo de estilo a um elemento dentro de outro elemento de bloco como div.
Só queria acrescentar algum contexto histórico de como veio a ser span vs div
História da span:
Em 3 de julho de 1995, Benjamin C. W. Sittler propõe um texto genérico recipiente tag para aplicar estilos a certos blocos de texto. A prestação é neutro, exceto se usado em conjunto de um folha de estilo. Há um torno debate contra cerca de legibilidade, significado. Bert Bos está mencionando a natureza extensibilidade do elemento através do atributo classe (com valores tais como cidade, pessoa, data, etc.). Paul Prescod está preocupado que ambos os elementos será abusado. Ele se opõe à mentionning texto que "qualquer novo elemento deve estar em um velho "e acrescentando" Se criarmos uma etiqueta com nenhuma semântica pode ser anywehere usado sem nunca estar errado. deve forçar autores para marcar corretamente a semântica do seu documento. Nós deve forçar fornecedores editor de fazer essa escolha explícita em sua interfaces ".
A partir do projecto de RFC que introduz span:
Primeiro, um con- genérico Tainer é necessária para transportar o LANG e atributos BIDI em casos em que nenhum outro elemento é adequado; o ele- SPAN mento é introduzido para o efeito.
História da div:
elementos DIV pode ser usada para documentos estrutura HTML como uma hierarquia de divisões.
...
CENTRO foi introduzido por Netscape antes que adicionou suporte para o HTML 3.0 elemento DIV. Ele é mantido em HTML 3.2 por conta de sua implantação generalizada.
Em suma, ambos os elementos surgiu de uma necessidade de um recipiente mais semanticamente-genérico. Span foi proposto como um substituto mais genérico para um elemento <text> ao texto do estilo. Div foi proposta como uma forma genérica para dividir páginas e teve o benefício adicional de substituir a tag <center> por conteúdo de alinhar centro. Div tem sido sempre um elemento de bloco por causa de sua história como um divisor de página. Span tem sido sempre um elemento inline porque o seu propósito original era estilo do texto e hoje div e span têm ambos chegaram a ser elementos genéricos com bloqueio padrão e propriedades de vídeo embutidos, respectivamente.
Em HTML existem marcas que estrutura add ou semântica para o conteúdo. Por exemplo, a etiqueta <p> é usado para identificar um número. Outro exemplo é a tag <ol> para uma lista ordenada.
Quando não há tag adequada disponível em HTML, como mostrado acima, as tags <div> e <span> são normalmente utilizados.
A tag <div> é usado para identificar uma seção blocklevel / divisão de um documento que tenha uma quebra de linha antes e depois dela.
Exemplos de onde tags div podem ser utilizados são cabeçalhos, rodapés, navegação, etc. No entanto, em HTML 5 estas tags já foram prestados.
A tag <span> é usado para identificar uma seção em linha / divisão de um documento.
Por exemplo, uma tag span pode ser usado para adicionar pictogramas de inline a um elemento.
Lembre-se, basicamente, e auto-los não executar qualquer função também. Eles são não específica sobre a funcionalidade apenas por suas marcas .
Eles só pode ser personalizado com a ajuda de CSS.
Agora que vem à sua pergunta:
SPAN tag juntamente com algum estilo será útil em ter espera dentro de uma linha, digamos, em um parágrafo, no html. Esta é uma espécie de nível de linha ou nível de instrução em HTML.
Exemplo:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
DIV funcionalidade tag como disse só pode ser apoiado visível com styling, pode ter a preensão de grandes pedaços de código HTML.
DIV é nível de bloco
Exemplo:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
Ambos têm o seu tempo e caso quando a ser utilizado, com base em sua exigência.
Hope sou claro com a resposta. Obrigado.
<div> é um elemento de bloco.
Como o que todos os parágrafos ou qualquer conteúdo escrito dentro de uma div, podemos aplicar css para todo os elementos no div. Por apenas dando estilo em div sozinho.
<span> é um elemento inline.
O que todas as mudanças de estilo CSS são feitas, que reflete apenas a esse elemento.
<div style="color:green;">
<h1>Example of div and span</h1>
<p>
This is a paragraph within a div
<span style="color: red;"> Paragraph with in span. </span>
</p>
</div>
