Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 15802 of span

  • Enlace amigable (slug) de la revisión: HTML/Elemento/span
  • Título de la revisión: span
  • Id de la revisión: 15802
  • Creada:
  • Creador: Jorolo
  • ¿Es la revisión actual? No
  • Comentario mejoro estructura y contenidos

Contenido de la revisión

{{ Elementos_HTML() }}

Definición

span - abarcar. Es un contenedor en línea. Sirve para para aplicar estilo al texto o agrupar elementos en línea.

Sus etiquetas son: <span> y </span> (ambas obligatorias).
Está definido como: Elemento especial, y por lo tanto en línea.
Crea una caja: En línea.
Puede contener: Texto, y/o Elementos en línea.

Atributos

atributo descripción valor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip". Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento. Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS. Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS. Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos. Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas. Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
datasrc Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros. Una dirección URI. Por defecto: Lo fija el navegador.
datafld El nombre de una propiedad o columna de datasrc. Reservado para posibles usos futuros. Por defecto: Lo fija el navegador.
dataformatas Indica como deben ser tratados los datos obtenidos de datasrc. Reservado para posibles usos futuros. Uno de los siguientes: 'paintext' o 'html'. Por defecto: 'plaintext'
De transición
No tiene
atributo descripción valor

Ejemplos de uso

div y span

código:

<div style="border: 1px dotted blue;">
  <h4>Ejemplo de div y span </h4>
   <p>
    Esto es un párrafo dentro de un div,
     <span style="color: red;"> y esto un span dentro de un párrafo. </span>
   </p>
 </div>

Resultado:

Ejemplo de div y span

Esto es un párrafo dentro de un div, y esto un span dentro de un párrafo.

Estilo predeterminado

Por definición span no debe tener ningún estilo predefinido. Estos dos párrafos deben verse igual:

<p> Esto es un párrafo, bla, bla, bla. </p>
<p> Esto es un párrafo, <span>bla, bla, bla.</span> </p>


Notas

Referencia


Soporte

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.



Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.


Categoría

interwiki links

automatismos

Fuente de la revisión

<p>{{ Elementos_HTML() }}
</p>
<h3 name="Definici.C3.B3n">Definición</h3>
<p><b>span</b> - <i>abarcar</i>. Es un contenedor en línea. Sirve para para aplicar estilo al texto o agrupar elementos en línea.
</p>
<dl><dd> <b>Sus etiquetas son</b>: <code>&lt;span&gt;</code> y <code>&lt;/span&gt;</code> (ambas obligatorias).
</dd><dd> <b>Está definido como</b>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#especial">especial</a>, y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.
</dd></dl>
<dl><dd> <b>Crea una caja</b>: En línea.
</dd><dd> <b>Puede contener</b>: Texto, y/o Elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.
</dd></dl>
<h4 name="Atributos"> Atributos </h4>
<table class="standard-table fullwidth-table">
<tbody><tr> <th> atributo </th> <th> descripción </th> <th> valor </th> </tr>
<tr> <th colspan="3"> Genéricos </th> </tr>
<tr> <td> <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color:green"> title </span></a> </td> <td> Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip". </td> <td> Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador. </td> </tr> <tr> <td> <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color:green"> id </span></a> </td> <td> Le da un nombre al elemento que lo diferencia de todos los demás del documento. </td> <td> Un <a class="external" href="https://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador. </td> </tr> <tr> <td> <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color:green"> class </span></a> </td> <td> Asigna nombres de clases al elemento. Por defecto, clases CSS. </td> <td> Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador. </td> </tr>
<tr> <td> <a class="external" href="https://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color:green"> style </span></a> </td> <td> Permite especificar <a class="external" href="https://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> <td> <a class="external" href="https://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador. </td> </tr> <tr> <td> <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color:green"> lang </span></a> </td> <td> Información sobre el <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos. </td> <td> Un <a class="external" href="https://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador. </td> </tr> <tr> <td> <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color:green"> dir </span></a> </td> <td> Indica la <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas. </td> <td> Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador. </td> </tr> <tr> <td colspan="3"> <a class="external" href="https://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color:green"> Eventos:</span></a> <code style="color:green">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code> </td> </tr>
<tr> <th colspan="3"> Específicos </th> </tr>
<tr> <td> <code style="color:green"> datasrc </code> </td> <td> Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros. </td> <td> Una dirección URI. Por defecto: Lo fija el navegador. </td> </tr>
<tr> <td> <code style="color:green"> datafld </code> </td> <td> El nombre de una propiedad o columna de <code style="color:green">datasrc</code>. Reservado para posibles usos futuros. </td> <td> Por defecto: Lo fija el navegador. </td> </tr>
<tr> <td> <code style="color:green"> dataformatas </code> </td> <td> Indica como deben ser tratados los datos obtenidos de <code style="color:green">datasrc</code>. Reservado para posibles usos futuros. </td> <td> Uno de los siguientes: <code>'paintext'</code> o <code>'html</code>'. Por defecto: <code>'plaintext'</code> </td> </tr>
<tr> <th colspan="3"> De transición </th> </tr>
<tr> <td colspan="3"> No tiene </td> </tr>
<tr> <th> atributo </th> <th> descripción </th> <th> valor </th> </tr>
</tbody></table>
<h3 name="Ejemplos_de_uso">Ejemplos de uso</h3>
<div class="highlight">
<h4 name="div_y_span"> div y span </h4>
<p>código:
</p>
<pre class="eval">&lt;div style="border: 1px dotted blue;"&gt;
  &lt;h4&gt;Ejemplo de div y span &lt;/h4&gt;
   &lt;p&gt;
    Esto es un párrafo dentro de un div,
     &lt;span style="color: red;"&gt; y esto un span dentro de un párrafo. &lt;/span&gt;
   &lt;/p&gt;
 &lt;/div&gt;
</pre>
<p>Resultado:
</p>
<div style="border: solid silver 1px;">
<div style="border: 1px dotted blue;"> <h5 name="Ejemplo_de_div_y_span">Ejemplo de div y span</h5> <p> Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span> </p> </div>
</div>
</div>
<h3 name="Estilo_predeterminado"> Estilo predeterminado </h3>
<p>Por definición span no debe tener ningún estilo predefinido. Estos dos párrafos deben verse igual:
</p>
<pre class="eval">&lt;p&gt; Esto es un párrafo, bla, bla, bla. &lt;/p&gt;
&lt;p&gt; Esto es un párrafo, &lt;span&gt;bla, bla, bla.&lt;/span&gt; &lt;/p&gt;
</pre>
<p><br>
</p>
<h3 name="Notas">Notas</h3>
<h3 name="Referencia">Referencia</h3>
<ul><li> El elemento <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/global.html#edef-SPAN"><b>span</b> en la especificación</a> de html 4.01
</li></ul>
<p><br>
</p>
<h3 name="Soporte"> Soporte </h3>
<p>Puede consultar esta <a class="external" href="https://www.webdevout.net/browser_support_html.php#support-html401-span">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.
</p><p><br>
</p>
<hr>
<div class="tip">
<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.
</p><p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a href="Project:es/Como_ayudar">MDC:Como ayudar</a>.
</p>
</div>
<p><br>
<span class="comment">Categoría</span>
</p><p><span class="comment">interwiki links</span>
</p><p><span class="comment">automatismos</span>
</p>
Revertir a esta revisión