Incrustar HTML

Una de las características más potentes de Markdown es la capacidad de incrustar código HTML directamente, proporcionando mayor expresividad y extensiones funcionales para tus documentos.

Incrustación Básica de HTML

Elementos HTML en Línea

Puedes usar etiquetas HTML directamente en Markdown:

markdown

Este es un párrafo con <strong>texto en negrita</strong> y <em>texto en cursiva</em>.

Puedes usar <code>código en línea</code> o <mark>texto resaltado</mark>.

Aquí hay un <a href="https://www.markdownlang.com" target="_blank">enlace externo</a>.

Visualización Renderizada:

Este es un párrafo con texto en negrita y texto en cursiva.

Puedes usar código en línea o texto resaltado.

Aquí hay un enlace externo.

Elementos HTML de Bloque

markdown

<div class="alert alert-info">
  <h4>Info</h4>
  <p>Esta es una caja de alerta informativa creada con HTML.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>Esta es una cita personalizada con estilo.</p>
  <footer>—— Fuente</footer>
</blockquote>

Visualización Renderizada:

Info

Esta es una caja de alerta informativa creada con HTML.

Esta es una cita personalizada con estilo.
—— Fuente

Mejoras Comunes de HTML

Mejoras de Imágenes

Control de Tamaño de Imágenes

markdown

<!-- Usa HTML para controlar con precisión el tamaño de la imagen -->
<img src="example.jpg" alt="Imagen de ejemplo" width="300" height="200">

<!-- Imagen responsiva -->
<img src="example.jpg" alt="Imagen responsiva" style="max-width: 100%; height: auto;">

<!-- Alineación de imágenes -->
<div align="center">
  <img src="example.jpg" alt="Imagen centrada" width="400">
</div>

Galería de Imágenes

markdown

<div style="display: flex; gap: 10px; justify-content: center;">
  <img src="img1.jpg" alt="Imagen 1" style="width: 200px;">
  <img src="img2.jpg" alt="Imagen 2" style="width: 200px;">
  <img src="img3.jpg" alt="Imagen 3" style="width: 200px;">
  </div>

<!-- Cuadrícula de imágenes -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="Imagen 1" style="width: 100%;">
  <img src="img2.jpg" alt="Imagen 2" style="width: 100%;">
  <img src="img3.jpg" alt="Imagen 3" style="width: 100%;">
  <img src="img4.jpg" alt="Imagen 4" style="width: 100%;">
</div>

Incrustación de Vídeo y Medios

Incrustación de Vídeo

markdown

<!-- Video de YouTube -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="Reproductor de vídeo de YouTube" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- Video de Bilibili -->
<iframe src="//player.bilibili.com/player.html?bvid=BV_ID&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="400">
</iframe>

<!-- Video HTML5 -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta el elemento de vídeo.
</video>

Incrustación de Audio

markdown

<!-- Audio HTML5 -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento de audio.
</audio>

<!-- Música de NetEase Cloud -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
        width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=SONG_ID&auto=1&height=66">
</iframe>

Mejoras de Tablas

Estructuras de Tablas Complejas

markdown

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Producto</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">Datos de Ventas</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Ingreso Total</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">Q1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">Producto A</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥100,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥120,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥220,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">Producto B</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥80,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥90,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥170,000</td>
    </tr>
  </tbody>
</table>

Visualización Renderizada:

Producto	Datos de Ventas		Ingreso Total
Producto	Q1	Q2	Ingreso Total
Producto A	¥100,000	¥120,000	¥220,000
Producto B	¥80,000	¥90,000	¥170,000

Formularios y Elementos Interactivos

Elementos de Formulario Básicos

markdown

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">Nombre:</label>
    <input type="text" id="name" name="name" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="email" style="display: block; margin-bottom: 0.5rem;">Correo electrónico:</label>
    <input type="email" id="email" name="email" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="message" style="display: block; margin-bottom: 0.5rem;">Mensaje:</label>
    <textarea id="message" name="message" rows="4" 
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
  </div>
  
  <button type="submit" 
          style="background-color: #007bff; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;">
    Enviar
  </button>
</form>

Elementos Interactivos

markdown

<!-- Contenido colapsable -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">Haga clic para expandir para más detalles</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>Este es el contenido detallado dentro de la sección colapsable.</p>
    <p>Puedes incluir cualquier contenido HTML aquí.</p>
  </div>
</details>

<!-- Barra de progreso -->
<div style="margin: 1rem 0;">
  <label>Progreso del Proyecto:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- Calificación de estrellas -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

Visualización Renderizada:

Haga clic para expandir para más detalles

Este es el contenido detallado dentro de la sección colapsable.

Puedes incluir cualquier contenido HTML aquí.

Progreso del Proyecto:32%32%

★★★★☆

Diseño y Estilo

Diseño Flexbox

markdown

<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
  <div style="flex: 1;">
    <h4 style="margin: 0;">Título</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">Este es un texto de descripción</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      Acción
</button>
  </div>
</div>

<!-- Diseño de tarjeta -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Tarjeta 1</h5>
    <p>Descripción del contenido de la tarjeta</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Tarjeta 2</h5>
    <p>Descripción del contenido de la tarjeta</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Tarjeta 3</h5>
    <p>Descripción del contenido de la tarjeta</p>
  </div>
</div>

Diseño de Cuadrícula

markdown

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0;">
  <div style="padding: 1rem; background-color: #e3f2fd; border-radius: 8px;">
    <h6>Característica 1</h6>
    <p>Descripción de la característica</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>Característica 2</h6>
    <p>Descripción de la característica</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>Característica 3</h6>
    <p>Descripción de la característica</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>Característica 4</h6>
    <p>Descripción de la característica</p>
  </div>
</div>

Alertas y Advertencias

Diferentes Tipos de Alertas

markdown

<!-- Alerta de información -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 Información:</strong> Esta es una caja de alerta de información.
</div>

<!-- Alerta de éxito -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ Éxito:</strong> La operación se completó con éxito.
</div>

<!-- Alerta de advertencia -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ Advertencia:</strong> Por favor, presta atención a esta importante advertencia.
</div>

<!-- Alerta de error -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ Error:</strong> Se ha producido un error.
</div>

Visualización Renderizada:

💡 Información: Esta es una caja de alerta de información.

✅ Éxito: La operación se completó con éxito.

⚠️ Advertencia: Por favor, presta atención a esta importante advertencia.

❌ Error: Se ha producido un error.

Incrustación de Contenido de Terceros

Redes Sociales

markdown

<!-- Incrustación de Twitter -->
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Este es el contenido de un tweet...</p>
  <a href="https://twitter.com/user/status/123456789">Enlace del tweet</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Incrustación de Weibo -->
<iframe width="100%" height="500" class="share_self" 
        frameborder="0" scrolling="no" 
        src="https://widget.weibo.com/weiboshow/index.php?language=&width=0&height=500&fansRow=1&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1234567890&verifier=a1b2c3d4">
</iframe>

Servicios en Línea

markdown

<!-- Incrustación de CodePen -->
<iframe height="300" style="width: 100%;" scrolling="no" title="Ejemplo de Animación CSS" 
        src="https://codepen.io/user/embed/EXAMPLE?default-tab=html%2Cresult" 
        frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

<!-- Incrustación de JSFiddle -->
<iframe width="100%" height="300" 
        src="//jsfiddle.net/user/example/embedded/js,html,css,result/" 
        allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0">
</iframe>

<!-- Incrustación de Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.0!2d116.4074!3d39.9042!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMznCsDU0JzE1LjEiTiAxMTbCsDI0JzI2LjYiRQ!5e0!3m2!1szh-CN!2scn!4v1234567890" 
        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

Componentes Personalizados

Etiquetas y Medallas

markdown

<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #007bff; color: white; border-radius: 3px;">
  Frontend
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #28a745; color: white; border-radius: 3px;">
  React
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #ffc107; color: black; border-radius: 3px;">
  JavaScript
</span>

Visualización Renderizada:

Frontend React JavaScript

Línea de Tiempo

markdown

<div style="position: relative; padding-left: 2rem;">
  <div style="position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background-color: #ddd;"></div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #007bff; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #007bff;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Diciembre 2023</h5>
    <p style="margin: 0;">El proyecto comenzó, se completó el análisis de requisitos y la selección de tecnologías.</p>
  </div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #28a745; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #28a745;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Enero 2024</h5>
    <p style="margin: 0;">Se desarrollaron las características principales, entrando en la fase de pruebas.</p>
  </div>
  
  <div style="position: relative;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #6c757d; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #6c757d;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Febrero 2024</h5>
    <p style="margin: 0;">El proyecto se lanzó y comenzó la promoción.</p>
  </div>
</div>

Notas y Limitaciones

Seguridad de HTML

markdown

<!-- ✅ HTML seguro -->
<div style="color: blue;">Estilo seguro</div>
<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>

<!-- ❌ Contenido potencialmente filtrado -->
<script>alert('Script inseguro')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicioso.swf"></object>

Compatibilidad del Parser de Markdown

Los diferentes parsers de Markdown tienen diferentes niveles de soporte de HTML:

Parser	Soporte de HTML	Limitaciones
GitHub	Parcial	Scripts y etiquetas peligrosas filtradas
GitLab	Parcial	Filtrado de seguridad
VitePress	Completo	Depende de la configuración
Jekyll	Completo	Configurable
Hugo	Parcial	Necesita ser habilitado

Recomendaciones de Mejor Práctica

markdown

✅ Recomendado:
1. Usar etiquetas HTML semánticas
2. Añadir mejoras de estilo apropiadas
3. Garantizar la accesibilidad del contenido
4. Mantener el código limpio y mantenible

❌ Evitar:
1. Sobreexplotar HTML complejo
2. Incrustar scripts inseguros
3. Ignorar la adaptación móvil
4. Usar etiquetas obsoletas

Escenarios Prácticos

1. Documentación de Productos

markdown

<div style="display: flex; align-items: center; margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;">
  <div style="flex: 1;">
    <h2 style="margin: 0 0 0.5rem 0;">🚀 Características del Producto</h2>
    <p style="margin: 0; opacity: 0.9;">Experimenta nuestras nuevas características y mejoras</p>
  </div>
  <div>
    <button style="background: rgba(255,255,255,0.2); border: 2px solid white; color: white; padding: 0.75rem 1.5rem; border-radius: 25px; cursor: pointer; backdrop-filter: blur(10px);">
      Aprender más
    </button>
  </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #007bff;">
    <h4 style="color: #007bff; margin: 0 0 1rem 0;">⚡ Alto Rendimiento</h4>
    <p style="color: #666; line-height: 1.6;">Algoritmos optimizados y arquitectura para el rendimiento máximo.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #28a745;">
    <h4 style="color: #28a745; margin: 0 0 1rem 0;">🔒 Seguro y Confiable</h4>
    <p style="color: #666; line-height: 1.6;">Seguridad empresarial, transmisión y almacenamiento de datos cifrados.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #ffc107;">
    <h4 style="color: #e68900; margin: 0 0 1rem 0;">🎨 Fácil de Usar</h4>
    <p style="color: #666; line-height: 1.6;">Interfaz de usuario intuitiva y flujo de trabajo optimizado.</p>
  </div>
  
</div>

2. Documentación de API

markdown

<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1rem 0;">
  <div style="display: flex; align-items: center; margin-bottom: 1rem;">
    <span style="background: #28a745; color: white; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: bold; font-size: 0.875rem;">POST</span>
    <code style="margin-left: 1rem; flex: 1; background: #e9ecef; padding: 0.5rem; border-radius: 4px;">/api/v1/users</code>
  </div>
  
  <h4 style="margin: 0 0 1rem 0;">Crear Usuario</h4>
  <p style="color: #6c757d; margin: 0;">Crear una nueva cuenta de usuario</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 Parámetros de Solicitud
  </summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    
<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Parámetro</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Tipo</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Requerido</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>name</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">Nombre de usuario</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>email</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">Dirección de correo electrónico</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3. Introducción a la Equipo

markdown

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 Nuestro Equipo</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto;">
    
    <div style="text-align: center;">
      <img src="avatar1.jpg" alt="Zhang San" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #007bff;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">Zhang San</h4>
      <p style="color: #007bff; font-weight: bold; margin: 0 0 0.5rem 0;">Ingeniero Frontend</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Se centra en el desarrollo de React y Vue, apasionado por el diseño de la experiencia del usuario.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
    <div style="text-align: center;">
      <img src="avatar2.jpg" alt="Li Si" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #28a745;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">Li Si</h4>
      <p style="color: #28a745; font-weight: bold; margin: 0 0 0.5rem 0;">Ingeniero Backend</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Proficiente en Node.js y Python, enfocado en el diseño de arquitectura de sistemas.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
  </div>
</div>

Sintaxis Relacionada

Resumen de Sintaxis Básica - Conceptos Básicos de Markdown
Sintaxis Extendida - Extensiones de Markdown
Mejores Prácticas - Recomendaciones de Escritura

Incrustar HTML ​

Incrustación Básica de HTML ​

Elementos HTML en Línea ​

Elementos HTML de Bloque ​

Info

Mejoras Comunes de HTML ​

Mejoras de Imágenes ​

Control de Tamaño de Imágenes ​

Galería de Imágenes ​

Incrustación de Vídeo y Medios ​

Incrustación de Vídeo ​

Incrustación de Audio ​

Mejoras de Tablas ​

Estructuras de Tablas Complejas ​

Formularios y Elementos Interactivos ​

Elementos de Formulario Básicos ​

Elementos Interactivos ​

Diseño y Estilo ​

Diseño Flexbox ​

Diseño de Cuadrícula ​

Alertas y Advertencias ​

Diferentes Tipos de Alertas ​

Incrustación de Contenido de Terceros ​

Redes Sociales ​

Servicios en Línea ​

Componentes Personalizados ​

Etiquetas y Medallas ​

Línea de Tiempo ​

Notas y Limitaciones ​

Seguridad de HTML ​

Compatibilidad del Parser de Markdown ​

Recomendaciones de Mejor Práctica ​

Escenarios Prácticos ​

1. Documentación de Productos ​

2. Documentación de API ​

3. Introducción a la Equipo ​

Sintaxis Relacionada ​

Incrustar HTML

Incrustación Básica de HTML

Elementos HTML en Línea

Elementos HTML de Bloque

Mejoras Comunes de HTML

Mejoras de Imágenes

Control de Tamaño de Imágenes

Galería de Imágenes

Incrustación de Vídeo y Medios

Incrustación de Vídeo

Incrustación de Audio

Mejoras de Tablas

Estructuras de Tablas Complejas

Formularios y Elementos Interactivos

Elementos de Formulario Básicos

Elementos Interactivos

Diseño y Estilo

Diseño Flexbox

Diseño de Cuadrícula

Alertas y Advertencias

Diferentes Tipos de Alertas

Incrustación de Contenido de Terceros

Redes Sociales

Servicios en Línea

Componentes Personalizados

Etiquetas y Medallas

Línea de Tiempo

Notas y Limitaciones

Seguridad de HTML

Compatibilidad del Parser de Markdown

Recomendaciones de Mejor Práctica

Escenarios Prácticos

1. Documentación de Productos

2. Documentación de API

3. Introducción a la Equipo

Sintaxis Relacionada