html5 acabado (a)

Para html5aunque por mucho, pero todavía tienen algunos conocimientos un poco confuso, recuerde no está claro, por lo que quiero resolver especial

soporte de los navegadores HTML5

La última versión de Safari, Chrome, Firefox, Opera soporta algunas características de HTML5, IE9 apoyará algunas características de HTML5

Además, todos los navegadores, entre ellos el viejo nuevo elemento, no reconocida de forma automática tratados como elementos en línea.

La siguiente versión del enfoque HTML5 compatibles navegador IE9, utilizando el paquete de recursos estáticos html5shiv

<!--[if lt IE 9]> 
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> 
<![endif]--> 

O directamente al código script aparece

<!--[if lt IE9]>
<script>
    (function(){
        if(!*@cc_on!@*/0) return;
        var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,event,source,figure,footer,header,hgroup,mark,menu,nav,outputmprogress,section,time,video".split('.'),
            i = e.length;
        while(i--){
            document.createElement(e[i])
        }
    })
</script>
<![endif]-->

Este código también puede ser colocado en un html5.js separadas mientras que esta parte tiene que ser colocado headdentro de
la carga, la inicialización de una nueva etiquetaCSS

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}

HTML5 nuevo elemento

<Canvas>

canvasPara dibujar gráficos a través de secuencias de comandos

Ejemplos

<canvas id="myCanvas"></canvas>

<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle="#ff0000";
    ctx.fillRect(0,0,80,100);
</script>

Nuevos elementos multimedia

• <Audio>

• <Video>

• <Source>

• <Embed>

• <Track>

<Audio>

audioCostumbre contenido de audio
atributos:
autoplaySi este atributo está presente, el audio está listo para jugar inmediatamente después
controlsi la propiedad está en, a continuación, se muestra a los controles de audio de usuario (como botón de reproducción / pausa)
loopsi la propiedad aparece siempre al final de la reproducción de audio
mutedsi hay la propiedad, la salida de audio se silencia
preloadvalores son auto, metadata, none, especifica cuando se carga la página, si se carga el audio por defecto y cómo la carga
srcespecifica url archivo de audio

Ejemplos

<audio control>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持audio元素
</audio>

<Video>

videodefine la etiqueta de vídeo, como un clip de película o de otra secuencias de vídeo
es compatible con tres formatos de vídeo: MP4, WebM, Ogg
propiedad:
además de tener audiotodos los atributos, pero también aumentaron width, heightdos propiedades

Ejemplos

<video control>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持video标签
</video>

<Embed>

Define un contenedor, o para incrustar programa de aplicación externa interactiva (plug-in)
propiedades:
height,
src,
typeespecificada Tipo de contenido MIME se incrusta,
width

Ejemplos

<embed src="helloworld.swf">

<Track>

Tal como <video> y el elemento <audio> como una pista de los medios de comunicación de texto externo predeterminado

Los nuevos elementos de formulario

• <Lista de datos>

• <Keygen>

• <Salida>

<Lista de datos>

lista definida de opciones

IE 9 y versiones anteriores de Internet Explorer y el navegador Safari no soporta <lista de datos> etiqueta.

Ejemplos

<input list="browsers">

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<Keygen>

Los campos del formulario se especifican para el generador de par de claves.
Cuando envía un formulario, se envía al servidor de clave privada se almacena en una clave local, pública.

IE no soporta el elemento

Propiedades:
autofocusShi <keygen>El campo tiene el enfoque cuando se carga la página
challengesi se usa, entonces el keygenvalor establecido para la consulta en el momento de la presentación de
disableddesactivar keygencampo
formdefiniciones del <keygen>uno o más campos de formulario pertenece
keytypevalor incluyendo rsa, dsa, ec, algoritmo de seguridad define los principales
namedefiniciones <keygen>elemento el único nombre, nombre de atributo se utiliza para recoger el valor del campo cuando el formulario se envía miscelánea

Ejemplos

<form action="demo_keygen.asp" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

<Salida>

Como la pantalla de salida del resultado de cálculo (tal como la salida de la ejecución del script)

IE no soporta

Propiedades:
`de 'describir la relación entre el resultado del cálculo de los elementos de cálculo utilizados en
formuna o más de la forma de entrada de campo de definición pertenece a
nameun objeto nombre único definición (mediante el envío del formulario)

Ejemplos

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

Nuevos elementos semánticos y estructurales

• <Artículo>

• <Aside>

• <Bdi> le permite establecer un texto, por lo que la dirección del texto de su elemento padre

• <Comando> comando personalizado botones, tales como botones de radio, casillas de verificación o botones, único apoyo IE9

• <detalles>

• <Diálogo>

• <Summary>

• <Figure>

• <Figcaption>

• <Pie de página>

• <Header>

• <Marca>

• <Meter> metrología definido. Sólo se utiliza para medir el máximo y el mínimo conocida

• <Nav>

• <Progreso>

• <Rubí> definición de anotación de rubí (fonética o caracteres chinos)

• <Rt> caracteres definidos (fonéticos o caracteres chinos) la interpretación o la pronunciación

• <Sección>

• <Hora>

• <WBR> especifica en el texto donde carácter de nueva línea apropiada

Ejemplos

<BDI>
En la actualidad, sólo el soporte de Firefox y Chrome <BDI> etiqueta.

<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>
将用户名从周围的文本方向设置中隔离出来

<Resumen>
elemento <Detalles> se define como una cabecera visible. Cuando el usuario hace clic en el título mostrará los detalles.

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<Progreso>
definido corriendo progreso de la tarea (barra de progreso)

<progress value="22" max="100"></progress>

<WBR>
Si la palabra es demasiado tiempo, o usted está preocupado acerca del navegador envolverá en el lugar equivocado, a continuación, se puede utilizar el <WBR> elemento para agregar palabra CORTE Oportunidad (ajuste de línea de tiempo).

<p>学习 AJAX ,您必须熟悉 <wbr>Http<wbr>Request 对象。</p>

Este artículo se reproduce en: mono 2048➤ https://www.mk2048.com/blog/blog.php?id=hh2c0k2akhj