Hoy comenzaré un nuevo curso de la Serie HTML5/"> HTML5, que es mis notas de estudio sobre" La guía definitiva de HTML5 ". Organizaré los capítulos o contenido significativo que creo que son buenas o significativas para que todos aprendan.
Un elemento puede definir sus propios atributos, como la etiqueta A para definir el atributo HREF, que se llama atributo local. En consecuencia, podemos establecer comportamientos comunes para todos los elementos a través de atributos globales. Por supuesto, también puede establecer atributos globales para elementos individuales, pero no tiene mucho sentido hacerlo. A continuación presentaré estos atributos globales uno por uno.
El siguiente ejemplo se ejecuta normalmente en el navegador Chrome. Algunos ejemplos de Firefox no pueden ejecutarse, y no he probado otros navegadores, por lo que se recomienda que use el navegador Chrome como su navegador HTML5 preferido. No me centré en los problemas de compatibilidad del navegador, sino en el aprendizaje e implementación. HTML5 todavía se está mejorando. Con su popularidad, creo que los navegadores convencionales lo apoyarán mejor y mejor, y el problema de compatibilidad del navegador será mucho mejor en ese momento.
1.AracciónLa propiedad AccessKey le permite establecer uno o más atajos de teclado para que pueda seleccionar elementos en la página. Veamos el siguiente ejemplo:
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
</ablo>
<Body>
<form>
Nombre: <input type = "text" name = "name" accesskey = "n"/>
<p />
Contraseña: <input type = "contraseña" name = "contraseña" accesskey = "p"/>
<p />
<input type = "subt" value = "log en" accesskey = "s"/>
</form>
</body>
</html>
En este ejemplo, puede usar combinaciones clave para seleccionar elementos en la página. Por ejemplo, debajo del sistema operativo Windows, puede usar Alt+XXX para seleccionar un elemento.
Efecto de ejecución:
2. ClaseNo quiero decir nada más sobre este atributo. Es una función de los elementos de agrupación. La mayoría de las veces se usa en combinación con CSS para establecer diferentes efectos de visualización para elementos en diferentes grupos.
3. ContentionableEste es un nuevo atributo agregado a HTML5. Agregue el atributo Contentedable a los elementos HTML, establecerlo en True, lo que permite a los usuarios editar contenido de elementos; Establecer en falso y no permitir a los usuarios editar.
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
</ablo>
<Body>
<p contento = "true"> está lloviendo ahora mismo </p>
</body>
</html>
4.ContextMenuContextMenu permite a los usuarios establecer el menú de clic derecho del elemento HTML, y el menú aparecerá cuando el usuario lo desencadene. Ningún navegador admite esta propiedad hasta ahora.
5.Dir El atributo Dir define la alineación de los literales de elementos HTML, que admite dos valores, LTR (de izquierda a derecha) y RTL (de derecha a izquierda).<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
</ablo>
<Body>
<p dir = "rtl"> Esto es de derecha a izquierda </p>
<p dir = "ltr"> Esto es de izquierda a derecha </p>
</body>
</html>
6.doldableDraggable es un atributo que implementa la función de arrastrar y soltar de los elementos HTML en HTML5, que introduciremos en detalle en los siguientes cursos.
7.dropzonaDropzone también es un atributo que implementa la función de arrastre del elemento HTML en HTML5. Lo presentaremos en detalle en el curso posterior.
8.HiddenTodos deben estar familiarizados con este atributo, que es ocultar un elemento HTML.
9.idTodos deberían conocer este atributo. Establece un identificador único para el elemento HTML, y no se permiten elementos con una ID considerable en una página HTML.
10.langLang especifica el lenguaje utilizado al contenido del elemento HTML. El valor de Lang debe ser un código de idioma ISO válido. Puede visitar la dirección a continuación para obtener más detalles, http://tools.ietf.org/html/bcp47. Cabe señalar que lidiar con el lenguaje es un asunto muy complejo y técnico.
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
</ablo>
<Body>
<p lang = "en"> hola - ¿cómo estás? </p>
<p lang = "fr"> Bonjour - comentario êtes -vous? </>
<p lang = "es"> hola - ¿cómo estás? </p>
</body>
</html>
11.spellcheck Cuando se usa el atributo de requisito ortográfico, el navegador lo ayudará a verificar si el contenido de corrección de hechizos del elemento HTML se escribe correctamente. Solo cuando el elemento HTML es editable, el atributo de corrección de hechizos puede ser significativo.<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
</ablo>
<Body>
<Textarea SpellCheck = "True"> Este es un texto malpelado </extarea>
</body>
</html>
Efecto: (No ejecuté el efecto deseado con Chrome, no sé por qué)
12. estiloNo es necesario introducir demasiado este atributo y establecer el estilo CSS para el elemento HTML.
13.tabindexTabIndex le permite definir el orden en que se accede a los elementos HTML cuando se usa la tecla Tab. Cuando TabIndex se establece en -1, el elemento HTML no se seleccionará utilizando la tecla Tab.
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
</ablo>
<Body>
<form>
<Lel etiqueta> name: <input type = "text" name = "name" tabindex = "1"/> </etiqueta>
<p />
<etiqueta> city: <input type = "text" name = "city" tabindex = "-1"/> </etiqueta>
</p>
<Lel etiqueta> país: <input type = "text" name = "país" tabindex = "2"/> </selaboril>
</p>
<input type = "enviar" tabindex = "3"/>
</form>
</body>
</html>
Efecto:
14. Tieto El título puede proporcionar información adicional para el elemento HTML, que a menudo se usa para mostrar información rápida.<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
</ablo>
<Body>
<a href = "http://apress.com"> Visite el sitio de Apress </a>
</body>
</html>
Efecto:
Eso es todo para el curso de hoy, espero que estos contenidos sean útiles para todos.
Dirección de descarga de demostración: html5guide.rar