freeCodeCamp.org/responsive-web-design/#basic-html-and-html5
Etiquetas Básicas
Di hola a los elementos HTML
<h1>Hello</h1>
Título con el elemento h2
<h2>CatPhotoApp</h2>
Informa con el elemento párrafo
<p>I'm a p tag!</p>
Rellena el espacio en blanco con texto provisional
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your
Descomenta código HTML
<!-- some_coment -->
Comenta HTML
<!-- some_coment -->
Elimina elementos HTML
Introducción a los elementos HTML5
<main>
<h1>Hello World</h1>
<p>Hello Paragraph</p>
</main>
main, header, footer, nav, video, article, section
Agrega imágenes a tu sitio web
<img src="..">
Enlaza hacia páginas externas con los elementos anchor
<a href=" ... ">link</a>
<a href=" ... " target="_blank">link</a>
Enlaza hacia secciones internas de una página con los elementos anchor
<a href="#..id">link</a>
Anida un elemento anchor dentro de un párrafo
<p>...<a href=" ... ">link</a> ...</p>
Crea enlaces muertos utilizando el símbolo hash
<a href="#"></a>
Convierte una imagen en un enlace
<a href="..."><img src=".."></a>
Crea una lista no ordenada
<ul>
<li>Garfield</li>
<li>Sylvester</li>
</ul>
Crea una lista ordenada
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
Declara el Doctype de un documento HTML
<!DOCTYPE html>
<html>
</html>
Define el encabezado y el cuerpo de un Documento HTML
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
Anida muchos elementos dentro de un solo elemento div
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
</div>
Formularios
Crea un campo de texto
<input type="text">
Agrega texto provisional a un campo de texto
<input type="text" placeholder="some_placeholder">
Crea un elemento de formulario
<form action="/some_url">
<input type="text">
</form>
Agrega un botón de envío a un formulario
<button type="submit">some_buton_text</button>
Usa HTML5 para requerir un campo
<input type="text" required>
Crea un conjunto de botones de radio
<label for="input_id_1">
<input id="input_id_1" type="radio" name="input_name">some_text_1
</label>
<label for="input_id_2">
<input id="input_id_2" type="radio" name="input_name">some_text_2
</label>
Crea un conjunto de casillas de verificación
<label for="input_id_1">
<input id="input_id_1" type="checkbox" name="input_name">some_text_1
</label>
<label for="input_id_2">
<input id="input_id_2" type="checkbox" name="input_name">some_text_2
</label>
Equivale a
<label for="input_id_1"></label>
<input id="input_id_1" type="checkbox" name="input_name">some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="checkbox" name="input_name">some_text_2
Usa el atributo value con botones de radio y casillas de verificación
<label for="input_id_1"></label>
<input id="input_id_1" type="checkbox" name="input_name" value="value_1">some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="checkbox" name="input_name" value="value_2">some_text_2
Marca botones de radio y casillas de verificación por defecto
<label for="input_id_1"></label>
<input id="input_id_1" type="radio" name="input_name" value="value_1" checked>some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="radio" name="input_name" value="value_2">some_text_2
Top comments (0)