Aquí hay 10 etiquetas HTML subutilizadas o mal entendidas. Tal vez no son muy conocidos, pero son muy útiles en ciertas situaciones.
Los desarrolladores web a menudo quieren comprender y dominar varios idiomas, y como resultado, aprender todo en un idioma es complicado, pero es fácil descubrir que no está aprovechando por completo las etiquetas más especiales pero útiles.
Traducido de: tutsplus
Desafortunadamente, aún no hemos tenido todo el potencial de esas etiquetas HTML menos conocidas. Pero nunca volverá a entrar en el reino demasiado tarde y comenzará a escribir código para descubrir la energía de estas etiquetas inexploradas.
Aquí hay 10 etiquetas HTML subutilizadas o mal entendidas. Tal vez no son muy conocidos, pero son muy útiles en ciertas situaciones.
1. <cite>
Parece que todos están familiarizados con la etiqueta <ClockQuote>, pero ¿conoces el hermano pequeño <cite> de <ClockQuote>? <cite> le permite definir el texto dentro de un elemento como referencia. En general, el navegador usará cursiva para mostrar el texto en la etiqueta <cite>, pero esto se puede cambiar con un pequeño CSS.
La etiqueta <cite> es útil para referencias a directorios u otros sitios web. Aquí hay un ejemplo de usar la etiqueta citar en el párrafo:
El libro organizacional innovador de David Allen que logra su trabajo ha traído una tormenta para olvidar. 2. <PtGroup>
La etiqueta <PtGroup> es una excelente manera de definir las opciones de agrupación en la etiqueta Seleccionar. Por ejemplo, si necesita agrupar listas de películas por tiempo, entonces puede hacer esto:
12
<label for=showtimes>Release time</label><select id=showtimes name=showtimes> <optgroup label=1:00 pm></optgroup> <option value=titanic>Titanic</option> <option value=nd>Slumdog Millionaire</option> <option value=wab>Monster Shrek</option> <optgroup label=2:00 pm></optgroup> <option value = bkrw> the lion king </ppection> <opción valor = stf> superman </opción> </select>
Manifestación:
Puede distinguir visualmente listas de películas. 3. <CRONOMO>
<AcronyM> es una forma de definir o interpretar un conjunto de textos. Cuando coloca el texto usando la etiqueta <acrónimo> con su mouse, un cuadro que muestra el contenido de la etiqueta de título aparecerá a continuación. Por ejemplo:
1
Sitio web de Weibo <acrónimo title = fundado en 2006> Twitter </acrónimo> ha sido frecuentemente tiempo de inactividad recientemente.
Ejemplo:El sitio web de Weibo Twitter ha sido Tiempo de inactividad recientemente. 4. <Dirección>
La etiqueta <dirección> es una pequeña etiqueta muy discreta, pero eso no significa que sea inútil. Como su nombre indica, <dirección> le permite semantizar etiquetas en HTML. Esta pequeña etiqueta mostrará el contenido de la etiqueta en la cursiva predeterminada. Por supuesto, usar estilos puede cambiar fácilmente el estilo predeterminado.
1234
<Dirección> Glen Stansberry1234 Web Dev Laneanywhere, EE. UU. </dirección> 5. <SiS> y <El>
Si desea usar etiquetas para mostrar versiones editadas, <SiS> y <El> son correctos. Como su nombre indica, <S INS> resalta el contenido agregado con un bajo, mientras que <El> usa un strikethrough para mostrar información eliminada.
1
John <el> le gusta </el> <s> ama </s> su nuevo iPod.
Ejemplo: Todos como Abandonado Zblog. 6. <Lel etiqueta>
Parece que es más probable que los elementos de forma olviden cuándo marcar el texto. Para los elementos de formulario, lo más común que olvido es la etiqueta <label>. No solo una forma conveniente de etiquetar el texto, la etiqueta <label> también puede pasar un atributo para especificar qué elemento estará asociado. <Tabel> no solo es fácil de controlar con los estilos, sino que también le permite hacer que el título se pueda hacer clic.
12
<etiqueta for = username> username </label> <input id = username type = text /> 7. <Fieldset>
Fieldset es una etiqueta pequeña que puede usar para agregar agrupaciones lógicas a sus elementos de formulario. La etiqueta <Fieldset> dibujará una caja alrededor de los elementos dentro de ella. Otro punto es que puede agregar una etiqueta <label> al FieldSet para definir el título del grupo.
1234567
<Form> <ScieldSet> <Legend> ¿Eres más inteligente que un estudiante de 5 años? </legend> Por supuesto <input name = y y y y ye type = Radio Value = YES/> No sé <input name = no type = radio valor = no/> </fieldset> </form>
Ejemplo: 8. <BBR>La etiqueta <BBR> es bastante similar a la etiqueta <AcronyM>, la diferencia es que la etiqueta <BBR> solo se usa para definir abreviaciones. Al igual que <acrónimo>, puede definir una propiedad de título para esta etiqueta. Cuando el usuario coloca el mouse sobre el texto de la abreviatura, todo el contenido se mostrará a continuación. Las etiquetas <BBR> rara vez se usan, pero son muy útiles para lectores de pantalla, correctores ortográficos y motores de búsqueda.
1
<Abbr Title = Brainless> NC </BBR> es un término incivilizado.
Ejemplo:Es un término no muy civilizado. Es un término no muy civilizado. 9. Rel
REL puede ser una propiedad extremadamente útil , y cualquier elemento HTML puede aplicar una propiedad REL. Ayuda a pasar parámetros adicionales sin especificados adicionales. Esto es muy útil cuando se usa JavaScript en HTML. Si tiene un enlace que desea editar dentro de la línea, puede agregar:
1
<a rel = clickable href = page.html> Este enlace es editable. </a>
JavaScript buscará un enlace con un atributo REL Clickable y aplicará algunos AJAX y permitirá que se edite dentro de la línea. Este es solo un uso de muchas técnicas que puede usar el atributo REL porque su potencial es infinito. Los amigos interesados pueden estudiar la introducción de W3C a REL en profundidad. 10. <WBR>
<wbr> La etiqueta es una etiqueta increíble y desconocida. Hablando francamente, también dudo que estarás expuesto a esta etiqueta porque casi nunca se usa. (De hecho, apenas vi esta etiqueta antes de escribir esta publicación). De hecho, esta etiqueta es una ruptura de línea suave, lo que le permite especificar un punto de interrupción de línea en una determinada línea, lo que indica que las roturas de línea se pueden romper en ese punto, pero no necesariamente lo rompe, sino que solo se rompe cuando es necesario. Si desea evitar las barras de desplazamiento horizontal, entonces usar esta etiqueta es excelente.
Ejemplo:A continuación se muestra una caja de 200 píxeles de ancho sin desbordamiento definido. Nowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbr
Havawbr Havawbr Havawbrhavawbrhavawbrhavawbrhavawbrhavawbrhavawbr Havawbr
Si desea lograr el mismo efecto sin usar la etiqueta <WBR>, puede probarla o y tímida;. Se dice que ninguna de estas tres etiquetas es totalmente compatible con todos los navegadores. Puede usar este artículo para ver el soporte de cada navegador para tres etiquetas.
PD: Después de traducir este artículo con dificultad, Shenfei sintió profundamente el encanto de la semántica y el poder de las etiquetas HTML. Creo que no nos hemos dado cuenta de muchas etiquetas. Como resultado, todos están familiarizados con las etiquetas comunes, y todos no pueden usar etiquetas poco comunes. Como expliqué en un artículo antes, una gran parte de la semántica es usar las etiquetas correctas en los lugares correctos, en lugar de solo dividirlas. Si podemos aprender más etiquetas HTML, podemos escribir más código HTML semántico, lo que puede reducir en gran medida la dificultad y la carga de trabajo de CSS de escritura y hacer que nuestra estructura de página sea más razonable.