El 10 de junio se publicó un nuevo borrador HTML 5 (borrador de trabajo). El editor leyó brevemente la documentación de la nueva versión proporcionada por él y tomó algunas notas: 
El borrador de HTML 5 no se convierte en un estándar oficial
La publicación como Borrador de Trabajo no implica el respaldo por parte de los Miembros del W3C.
La publicación como "Borrador" no implica respaldo (apoyo) por parte de los miembros del W3C.
La especificación HTML 5 no se considerará terminada hasta que haya al menos dos implementaciones completas de la especificación.
La especificación HTML 5 no estará finalizada hasta que al menos dos piezas de software la hayan implementado.
XHTML 1 se lanzó en 1999. Pasaron dos o tres años antes de que fuera totalmente compatible, y no fue hasta hace poco, casi diez años después, que se promovió por completo. Por lo tanto, pasará algún tiempo hasta que HTML 5 sea compatible (especialmente con los navegadores "no convencionales"). Según el calendario del Grupo de Trabajo HTML del W3C, no habrá una finalización formal hasta 2010.
XHTML 1 se lanzó en 1999. Pasaron dos o tres años antes de que fuera totalmente compatible, y no fue hasta hace poco, casi diez años después, que se promovió por completo. Por lo tanto, pasará algún tiempo hasta que HTML 5 sea compatible (especialmente con los navegadores "no convencionales"). Según el calendario del Grupo de Trabajo HTML del W3C, no habrá una finalización formal hasta 2010.
Una declaración DOCTYPE sorprendentemente simple
| <!tipo de documento html> |
Es así de simple, ja. Además, no hay distinción entre mayúsculas y minúsculas. Cabe mencionar que la especificación requiere que si se declara este DOCTYPE se pueda utilizar la llamada "sintaxis HTML 'personalizada' (sintaxis HTML personalizada, no sé por qué se llama así)", que es la anterior. tipo que no requiere etiquetas. Sintaxis HTML cerrada. Al mismo tiempo, todavía permite la sintaxis del formato XML como XHTML, por lo que es necesario declarar el DOCTYPE del documento xml en lugar del anterior.
Compatibilidad futura
La especificación HTML 5 no tiene elementos "obsoletos". La razón es que, por un lado, requiere que los diseñadores no prueben ciertos elementos, pero por otro lado, requiere que los navegadores admitan estos elementos. En este caso, en mi intuición, está pensado para soportar todas las páginas web anteriores escritas en HTML o XHTML. Esto es una bendición para los diseñadores, finalmente ya no tienen que estar restringidos por la estricta sintaxis de XHTML.
elemento eliminado
Por supuesto, estos elementos son relativos a HTML 4, pero también se puede ver que HTML 5 no es una simple regresión a HTML 4. Todavía se adhiere a algunos espíritus importantes de XHTML, como que se deben abandonar los elementos de presentación de interfaz pura, mientras que usando CSS,etc.
Los siguientes elementos se descartan "porque su efecto es puramente de presentación y, por lo tanto, CSS los maneja mejor" porque son elementos puramente de presentación y deben reemplazarse por CSS:
basefont/big/center/font/s/strike/tt/u
|
Se han descartado los siguientes elementos "porque su uso afectaba negativamente a la usabilidad y accesibilidad para el usuario final":
| marco/conjunto de marcos/sin marcos |
Los siguientes elementos han sido descartados "porque no se han utilizado con frecuencia, han creado confusión o pueden ser manejados por otros elementos":
| acrónimo/applet/isindex/dir |
Documento de prueba HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<título>Documento de prueba HTML</título>
<enlace href="default.css" rel="hoja de estilo" tipo="texto/css" />
</cabeza>
<cuerpo>
<h1>Documento de prueba HTML</h1>
<ul>
<li>Versión: 1.1 </li>
<li>DTD: XHTML 1.0 transicional</li>
<li>Codificación: UTF-8</li>
<li>Actualizado: 2008-6-12</li>
</ul>
<hora/>
<h1><h1> representa el título número uno</h1>
<h2><h2> representa el título número dos</h2>
<h3><h3> representa el título tres</h3>
<h4><h4> representa el título número cuatro</h4>
<h5><h5> representa el título número 5</h5>
<h6><h6> representa el título número 6</h6>
<p>Este párrafo está encerrado entre <p>. <p> representa un párrafo y es el formato de flujo de texto más utilizado. Podemos utilizar varias etiquetas de texto en línea en secuencias de texto. Los más utilizados son:
<strong> <strong>Agravado</strong>,
<em><em> Énfasis</em>,
<ins><ins> insertar</ins>,
<del><del> Eliminar</del>,
<sub><sub> subíndice</sub>,
<sup><sup> superíndice</sup>,
<cite><cite> citar</cite>, <big><big>aumentar</big>, <small><small>reducir</small>. </p>
<pre> Esta es una secuencia de texto contenida en <pre>.
Los espacios, tabulaciones, retornos de carro, etc. que contiene se pueden mostrar directamente en la página web y el navegador no los ajustará automáticamente. Puede usarlo para mostrar el código del programa.
El formato predeterminado predeterminado es utilizar una fuente de ancho fijo. </pre>
<p>También podemos usar estas etiquetas en línea para mostrar fragmentos de código en el flujo de texto:
<código><código>código</código>,
<kbd><kbd>Entrada de teclado</kbd>,
<var><var>Variable</var>,
<samp><samp>ejemplo de muestra</samp>.
</p>
<p>Además, dos etiquetas también son importantes:</p>
<ul>
<li><abbr>: Por ejemplo, <abbr title="Mister">Mr.</abbr> es la abreviatura de Mister. Pero esta etiqueta parece no ser válida en IE. </li>
<li><acronym><acronym title=""></acronym>: por ejemplo, <acronym title="Hyper Text Markup Language">HTML</acronym> es el acrónimo de Hyper Text Markup Language (en chino también be Utilice esta etiqueta, como por ejemplo: "<acronym title="República Popular de China">China</acronym>" es la abreviatura de "República Popular de China"). </li>
</ul>
<bloquequote cita="#">
Este párrafo es <blockquote>. Recuerde utilizar el atributo de cita en <blockquote>.
</blockquote>
<dirección>
Esta sección está contenida en <dirección>, que se puede utilizar para mostrar una dirección de correo electrónico o una dirección real. Tenga en cuenta que es un elemento a nivel de bloque, pero no tiene margen ni relleno de forma predeterminada.
</dirección>
La sección <div> está contenida en <div>. <div> es un elemento a nivel de bloque y no tiene ningún estilo por defecto. Otro elemento con su estado equivalente es <span><span>campo en línea</span>, que tampoco tiene estilo por defecto. <br />
Hay un <br> delante de esta oración, que se utiliza para saltos de línea dentro del párrafo. </div> <hora/>
<p>La línea horizontal de arriba es la etiqueta <hr> </p>
<p><a id="a"></a>Esta oración está precedida por una etiqueta de anclaje implementada por la etiqueta <a> </p>
<p><a href="http:///"><a>También significa enlace</a>. Tenga en cuenta que tiene cuatro pseudoclases: :link es <a href="http:///">enlace no visitado</a>, :visited es <a href="#">enlace visitado</a>, : hover es <a href="http:///">enlace cuando se desplaza el mouse</a>, :active<a href="http:///">enlace cuando se activa el clic del mouse</a>. </p>
<p><img width="100" height="100" alt="<img> tag" /> La imagen está en línea de forma predeterminada, pero también podemos definirla como bloque. Y defina una clase .inline específicamente para img <img width="100" height="30" alt="img.inline" class="inline" />. Además, el estilo de <img> en el enlace es diferente <a href="#"><img width="60" height="60" alt="<img>" en <a> </a>. </p>
<p><objeto ancho="200" alto="150"><param nombre="película" valor=""></param></objeto>
También hay una etiqueta <object> para insertar medios y una etiqueta <param> </p>
<hora/>
<ul>
<li>La capa exterior de la lista desordenada es <ul></li>
<li>Cada elemento de la lista consta de <li></li>
<li>Tenga en cuenta que la etiqueta <ul> solo puede contener directamente la etiqueta <li>
<ul>
<li>Esta es una lista anidada de segundo nivel y debe colocarse en un <li></li>
<li>Tenga en cuenta que los estilos de los elementos de la lista anidada de segundo nivel pueden ser diferentes de los de la lista de primer nivel.
<ul>
<li>Este es el tercer nivel y su estilo es diferente al del segundo nivel</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>La capa exterior de la lista ordenada es <ol></li>
<li>Cada elemento de la lista consta de <li></li>
<li>Tenga en cuenta que la etiqueta <ol> solo puede contener directamente la etiqueta <li>
<ol>
<li>Esta es una lista anidada de segundo nivel y debe colocarse en un <li></li>
<li>Tenga en cuenta que los estilos de los elementos de la lista anidada de segundo nivel pueden ser diferentes de los de la lista de primer nivel.
<ol>
<li>Este es el tercer nivel y su estilo es diferente al del segundo nivel</li>
</ol>
</li>
</ol>
</li>
</ol>
<dl>
<dt>Esta línea es<dt></dt>
La línea <dd> es <dd>. La lista de definiciones externa es <dl>. </dd>
<dt>Nota<dt>solo puede contener elementos de nivel en línea</dt>
<dd>Y <dd> puede contener elementos en línea o a nivel de bloque</dd>
</dl> <hora/>
<p>Modelo de mesa estándar. El ancho de la columna está controlado por <colgroup> y <col>. </p>
<tabla>
<título>
Esto es <caption>
</caption>
<grupocol>
<col ancho="30%" />
<col ancho="50%" />
<col ancho="20%" />
</colgrupo>
<cabeza>
<tr>
<th>Esta línea es<thead></th>
<th><thead> se puede utilizar con <th> o <td></th>
<th>Aquí usamos <th></th>
</tr>
</thead>
<tpie>
<tr>
<td>La última línea es <tfoot></td>
<td><tfoot>No importa dónde se coloque, siempre se mostrará al final</td>
<td></td>
</tr>
</tpie>
<tcuerpo>
<tr>
<td>Las tres líneas siguientes son<tbody>
<td>Puedes poner cualquier número de<tr></td>
<td>Lo que se utiliza aquí es<td></td>
</tr>
<tr>
<td>Utilice <col> para representar columnas</td>
<td>La celda más a la derecha de esta fila es una celda de tabla vacía sin contenido</td>
<td></td>
</tr>
<tr>
<td>Utilice <tr> para representar filas</td>
<td>La celda más a la derecha de la fila tiene un&nbsp;</td>
<td></td>
</tr>
</tbody>
</tabla>
<hora/>
<formulario acción="">
Las etiquetas <p><form> no pueden contener directamente varias etiquetas de control. Puede usar <label><label></label> para contener componentes del formulario,</p>.
<conjunto de campos>
<legend>También puede utilizar las etiquetas <fieldset> y <legend> </leyenda>
<p>Para el método de definición CSS de la etiqueta de entrada: use el valor del atributo de tipo como nombre de clase, para que se puedan distinguir diferentes controles de entrada. </p>
<p>
<input type="text" class="text" size="20" id="text" value="cuadro de texto de una sola línea de campo de texto" />
<input type="text" class="text" size="20" id="text_d" value="cuadro de texto de una sola línea de campo de texto deshabilitado" deshabilitado="deshabilitado" />
<label for="text"> entrada.texto </label>
</p>
<p>
<tipo de entrada="contraseña" clase="texto" tamaño="20" id="contraseña" valor="contraseña cuadro de contraseña" />
<tipo de entrada="contraseña" clase="texto" tamaño="20" id="contraseña_d" valor="cuadro de contraseña de contraseña deshabilitada" deshabilitado="deshabilitado" />
<label for="contraseña"> entrada.texto </label>
</p>
<p>
<tipo de entrada="enviar" clase="enviar" id="enviar" valor="enviar botón de envío" />
<input type="enviar" clase="enviar" id="enviar_d" valor="Botón de envío deshabilitado" deshabilitado="deshabilitado" />
<label for="enviar"> entrada.enviar </label>
</p>
<p>
<tipo de entrada="reset" class="botón" id="reset" value="reset botón de reinicio" />
<input type="reset" class="button" id="reset_d" value="Botón de reinicio deshabilitado" deshabilitado="deshabilitado" />
<label for="reset"> botón.entrada </label>
</p>
<p>
<tipo de entrada="botón" clase="botón" id="botón" valor="botón botón normal" />
<input type="botón" clase="botón" id="botón_d" valor="Botón deshabilitado botón normal" deshabilitado="deshabilitado" />
<label for="botón"> entrada.botón </label>
</p>
<p>
<tipo de entrada="imagen" clase="imagen" tamaño="20" id="imagen" />
<label for="image"> entrada.imagen </label>
</p>
<p>
<tipo de entrada="imagen" clase="imagen" tamaño="20" id="image_d" deshabilitado="deshabilitado" />
<label for="image_d"> entrada deshabilitada.imagen</label>
</p>
<p>
<nombre de entrada="radio" tipo="radio" clase="radio" id="radio1" comprobado="comprobado" />
<nombre de entrada="radio" tipo="radio" clase="radio" id="radio2" />
<label>entrada.radio</label>
</p>
<p>
<nombre de entrada="radio" tipo="radio" clase="radio" id="radio1_d" comprobado="marcado" deshabilitado="deshabilitado" />
<nombre de entrada="radio" tipo="radio" clase="radio" id="radio2_d" deshabilitado="deshabilitado" />
<label> input.radio deshabilitado </label>
</p>
<p>
<tipo de entrada="casilla de verificación" clase="casilla de verificación" id="casilla de verificación1" marcada="marcada" />
<tipo de entrada="casilla de verificación" clase="casilla de verificación" id="casilla de verificación2" />
<label for="casilla de verificación"> entrada.casilla de verificación </label>
</p>
<p>
<tipo de entrada="casilla de verificación" clase="casilla de verificación" id="casilla de verificación1_d" marcada="marcada" deshabilitada="deshabilitada" />
<tipo de entrada="casilla de verificación" clase="casilla de verificación" id="casilla de verificación2_d" deshabilitado="deshabilitado" />
<label for="checkbox_d"> input.checkbox deshabilitado </label>
</p>
<p>
<tipo de entrada="archivo" clase="archivo" id="archivo" tamaño="20" valor="selector de archivos selector de archivos" />
<label for="archivo"> entrada.archivo </label>
</p>
<p>
<tipo de entrada="archivo" clase="archivo" id="archivo_d" tamaño="20" valor="selector de archivos selector de archivos" deshabilitado="deshabilitado" />
<label for="file_d"> deshabilitado input.file </label>
</p>
<p>
<button><img /><botón> etiqueta</button>
<button disable="disabled"><img />Desactivado<etiqueta del botón</button>
</p>
<p>
<label for="textarea"><textarea>El valor predeterminado es alineación inferior</label>
<textarea name="textarea" cols="60" rows="5" id="textarea">cuadro de texto de varias líneas de área de texto.
También es similar a un preformato interno y puede mostrar todos los retornos de carro y caracteres de tabulación</textarea>
<textarea name="textarea" cols="20" rows="5" id="textarea_b"disable="disabled">Cuadro de texto multilínea de área de texto deshabilitado</textarea>
</p>
<p>
<seleccione nombre="área de texto">
<option>selector desplegable selector desplegable</option>
<optgroup label="Este es el primer grupo">
<option>Las opciones se pueden agrupar usando <optgroup></option>
<option>Y especifique el nombre del grupo por su atributo de etiqueta</option>
</optgrupo>
<optgroup label="Este es el segundo grupo">
<option>El nombre del grupo es solo un mensaje de texto, no una opción</option>
</optgrupo>
</seleccionar>
<seleccione múltiple="múltiple" nombre="área de texto">
<option>Cuando el atributo de tamaño de <select> es mayor que 1 o se especifica el atributo múltiple</option>
<option>Se convertirá en un cuadro de selección de varias líneas como este</option>
</seleccionar>
<seleccione nombre="área de texto" deshabilitado="deshabilitado">
<option>Cuadro desplegable deshabilitado</option>
<option>Se convertirá en un cuadro de selección de varias líneas como este</option>
</seleccionar>
</p>
</conjunto de campos>
</formulario> </cuerpo>
</html>
|
