HTML Introducción

Ejemplos de HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial para novatos (example.com)</title> </head> <body> <h1>Mi primer encabezado</h1> <p>Mi primer párrafo.</p> </body> </html>

Pruébalo »

Análisis de ejemplos

  • <!DOCTYPE html>Declarar el documento como HTML5
  • <html>El elemento es el elemento raíz de la página HTML.
  • <head>El elemento contiene los metadatos (meta) del documento, como<meta charset="utf-8">Define el formato de codificación de la página web comoutf-8。
  • <title>El elemento describe el título del documento.
  • <body>El elemento contiene el contenido visible de la página.
  • <h1>El elemento define un encabezado grande.
  • <p>El elemento define un párrafo.

Nota:En la página del navegador, usando la teclaF12para abrir el modo de depuración, podrás ver las etiquetas que lo componen.


¿Qué es HTML?

HTML es un lenguaje que se utiliza para describir páginas web.

  • HTML se refiere al lenguaje de marcado de hipertexto:HyperText Markup Language
  • HTML no es un lenguaje de programación, sino unlenguajede marcado
  • El lenguaje de marcado es un conjunto deetiquetas de marcado (markup tag)
  • HTML utiliza etiquetas de marcado paradescribirpáginas web
  • El documento HTML contiene HTMLetiquetasytextocontenido
  • Los documentos HTML también se denominanpáginas web

Etiquetas HTML

Las etiquetas de marcado HTML suelen denominarse etiquetas HTML (HTML tag).

  • Las etiquetas HTML están formadas porcorchetes angularespalabras clave rodeadas de corchetes angulares, como <html>
  • Las etiquetas HTML suelenaparecer en pares, como <b> y </b>
  • La primera etiqueta de un par esla etiqueta de apertura, la segunda etiqueta esla etiqueta de cierre
  • Las etiquetas de apertura y cierre también se conocen comoetiquetas abiertasyetiquetas cerradas
<etiqueta>contenido</etiqueta>

Elementos HTML

«Etiqueta HTML» y «elemento HTML» normalmente describen lo mismo.

Pero, estrictamente hablando, un elemento HTML incluye la etiqueta de apertura y la etiqueta de cierre, como en el siguiente ejemplo:

Elemento HTML:

<p>Esto es un párrafo.</p>

Navegador web

Los navegadores web (como Google Chrome, Internet Explorer, Firefox, Safari) se utilizan para leer archivos HTML y mostrarlos como páginas web.

El navegador no muestra directamente las etiquetas HTML, sino que las utiliza para decidir cómo presentar el contenido de la página HTML al usuario:

Estructura de una página web HTML

A continuación se muestra una estructura visual de una página HTML:

<html>
<head>
<title>título de la página</title>
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
</body>
</html>

Note Solo el área <body> (la parte blanca) se mostrará en el navegador.

Versiones de HTML

Desde el nacimiento de la web primitiva, han aparecido muchas versiones de HTML:

Versión Fecha de publicación
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

Declaración <!DOCTYPE>

La declaración <!DOCTYPE> ayuda al navegador a mostrar correctamente la página web.

En la red hay muchos tipos de archivos diferentes. Si puedes declarar correctamente la versión de HTML, el navegador mostrará correctamente el contenido de la página web.

La declaración doctype no distingue entre mayúsculas y minúsculas; las siguientes formas son válidas:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

Declaración general

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ver los tipos de declaración de documentos web completosManual de referencia de DOCTYPE。

Codificación de caracteres chinos

Actualmente, en la mayoría de los navegadores, la salida directa de chino produce caracteres ilegibles; en ese caso, debemos declarar la codificación de caracteres como UTF-8 o GBK en la cabecera.

Ejemplos de HTML

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Título de la página</title> </head> <body> <h1>Mi primer encabezado</h1> <p>Mi primer párrafo.</p> </body> </html>

Pruébalo »
Otras extensiones