HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML5 SVG en línea HTML5 Compatibilidad del navegador

HTML5 nuevos elementos

HTML5etiquetas semánticas y atributos, permiten a los desarrolladores implementar fácilmente una disposición de página web clara, además de CSS3efectos de renderizado, creación rápida de páginas web ricas y flexibles, es muy simple.

HTML5 nuevos elementos

desde1999después de HTML 4.01 ha cambiado mucho, hoy, en HTML 4.01se han descontinuado varios, estos elementos en HTML5ha sido eliminado o redefinido.

Para manejar mejor las aplicaciones de internet de hoy, HTML5se han agregado muchos nuevos elementos y funciones, como: dibujo gráfico, contenido multimedia, mejor estructura de página, mejor forma manejo, y varios api de arrastrar y soltar elementos, ubicación, incluyendo páginas web caché de aplicación, almacenamiento, trabajadores de red, etc.

HTML5nuevos elementos de etiqueta

<header> define la cabecera de página o sección;
<footer> define el pie de página de página o sección;
<nav> define una área de navegación de página o sección;
<section> define una área lógica de página o combinación de contenido;
<article> define contenido principal o un contenido completo;
<aside> define contenido complementario o relacionado;

etiqueta de navegación <nav>

Ejemplo

!doctype html<html><head>
<meta charset="UTF-8">
<title>HTML5　Uso del etiqueta de navegación <nav>/title>
</head>
<body>
<nav>
　　　　<ul>
　　　　　　　　<li><a href="#">Home</a></li>
　　　　　　　　<li><a href="#">One</a></li>
　　　　　　　　<li><a href="#">Two</a></li>
　　　　　　　　<li><a href="#">Three</a></li>
　　　　</ul>
</nav>
</body></html>

Test to see if it works ‹/›

Implementación del etiqueta <header>

Ejemplo

!doctype html
<html>
<head>
<meta charset="UTF-8">
Implementación del etiqueta <header> por es.oldtoolbag.com</title>
</head>
<body>
<header id="page_header">
　　　　<h1>Header</h1>
</header>
</body>
</html>

Test to see if it works ‹/›

Implementación del etiqueta <footer>

Ejemplo

!doctype html
<html>
<head>
<meta charset="UTF-8">
Implementación del etiqueta <footer> por es.oldtoolbag.com</title>
</head>
<body>
Implementación del etiqueta <footer>
<footer id="page_footer">
　　　　<h2>Footer</h2>
</footer>
</body>
</html>

Test to see if it works ‹/›

<section> bloque y <article> artículo

Ejemplo

!doctype html
<html>
<head>
<meta charset="UTF-8">
标签 <title> 和 <article> 实现 por es.oldtoolbag.com</title>
</head>
<body>
The <section> and <article> tags implement
<section id="posts">
　　　　　　　　/*Can contain multiple< article>*/
　　　　<article class="post">
　　　　　　　　　/*The content of article*/
　　　　　　　　</article>
　　　　　　　　<article class="post">
　　　　　　　　　/*The content of article*/
　　　　　　　　</article>
</section>
</body>
</html>

Test to see if it works ‹/›

<canvas> new element

Tag	Description
<canvas>	The tag defines graphics, such as charts and other images. This tag is based on the JavaScript drawing API.

New multimedia elements

Tag	Description
<audio>	Define audio content.
<video>	Define video (video or movie).
<source>	Define multimedia resources <video> and <audio>.
<embed>	Define embedded content, such as plugins.
<track>	Specify external text tracks for media elements such as <video> and <audio>.

New form elements

Tag	Description
<datalist>	Define an option list. Please use this element with the input element to define the possible values of the input.
<keygen>	Specify the key pair generator field for the form.
<output>	Define different types of output, such as script output.

New semantic and structural elements

HTML5Provides new elements to create a better page structure:

Tag	Description
<article>	Define an independent content area of the page.
<aside>	Define the sidebar content of the page.
<bdi>	Allows you to set a segment of text so that it is independent of the text direction setting of its parent element.
<command>	Define command buttons, such as radio buttons, checkboxes, or buttons.
<details>	Used to describe the details of a document or a part of the document.
<dialog>	Define a dialog, such as a prompt box.
<summary>	The tag contains the title of the details element.
<figure>	Specify independent flow content (images, charts, photos, code, etc.).
<figcaption>	Define the title of the <figure> element.
<footer>	Define the footer of section or document.
<header>	Define the header area of the document.
<mark>	Define text with annotations.
<meter>	Define measures and weights. Only used for measures with known maximum and minimum values.
<nav>	Define the part of navigation links.
<progress>	Define el progreso de cualquier tipo de tarea.
<ruby>	Define un comentario ruby (pinyin o carácter chino).
<rt>	Define la explicación o pronunciación de un carácter (pinyin o carácter chino).
<rp>	Se utiliza en comentarios ruby, para definir el contenido que se muestra en navegadores que no soportan elementos ruby.
<section>	Define una sección (section, área) en el documento.
<time>	Define una fecha o hora.
<wbr>	Especifica dónde es apropiado insertar saltos de línea en el texto.

Elementos eliminados

El siguiente HTML 4.01 El elemento está en HTML5Se ha eliminado en el medio:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 SVG en línea HTML5 Compatibilidad del navegador